daily-demos · kimberleehowley · Jan 11, 2021 · Jan 11, 2021 · Jan 11, 2021 · Jan 13, 2021
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Daily React Demo</title>
+    <title>Daily call object React demo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/api.js b/src/api.js
@@ -1,5 +1,4 @@
-const newRoomEndpoint =
-  `${window.location.origin}/api/rooms`;
+const newRoomEndpoint = `${window.location.origin}/api/rooms`;
 
 /**
  * Create a short-lived room for demo purposes.
@@ -9,21 +8,20 @@ const newRoomEndpoint =
  * in README.md
  *
  * See https://docs.daily.co/reference#create-room for more information on how
- * to use the Daily REST API to create rooms and what options are available. 
+ * to use the Daily REST API to create rooms and what options are available.
  */
 async function createRoom() {
-
   const exp = Math.round(Date.now() / 1000) + 60 * 30;
   const options = {
     properties: {
       exp: exp,
     },
   };
   let response = await fetch(newRoomEndpoint, {
-    method: "POST",
-    body: JSON.stringify(options),
-    mode: 'cors',
-  }),
+      method: 'POST',
+      body: JSON.stringify(options),
+      mode: 'cors',
+    }),
     room = await response.json();
   return room;
 

diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,6 +1,87 @@
+:root {
+  --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif;
+  --white: #ffffff;
+  --grey: #c8d1dc;
+  --darkblue: #121a24;
+  --lightgreen: #72cc18;
+}
+
 .app {
-  background-color: #4a4a4a;
+  font-family: var(--fontFamily);
+  color: var(--white);
+  background-color: var(--darkblue);
   position: absolute;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  position: relative;
+  bottom: 80%;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1rem;
+}
+
+.introInstructions {
+  position: relative;
+  bottom: 100px;
+}
+
+.dailyLogo {
+  width: 70px;
+}
+
+.title {
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.instructions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+.roomURL {
+  width: 300px;
+  line-height: 18px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 7px;
+  border-radius: 8px;
+}
+
+.startButton,
+.startButtonReady,
+.createRoomButton {
+  padding: 8px 16px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-weight: 700;
+  text-align: center;
+  border-radius: 8px;
+  background-color: var(--white);
+  border-width: 1px;
+  border-color: var(--grey);
+  color: var(--darkblue);
+  cursor: pointer;
+  width: 250px;
+}
+
+.startButtonReady {
+  background-color: var(--lightgreen);
 }
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -8,30 +8,39 @@ import CallObjectContext from '../../CallObjectContext';
 import { roomUrlFromPageUrl, pageUrlFromRoomUrl } from '../../urlUtils';
 import DailyIframe from '@daily-co/daily-js';
 import { logDailyEvent } from '../../logUtils';
+import dailyLogo from '../../images/logo@2x.png';
+import gitHubLogo from '../../images/github@icons8.png';
 
 const STATE_IDLE = 'STATE_IDLE';
 const STATE_CREATING = 'STATE_CREATING';
 const STATE_JOINING = 'STATE_JOINING';
+const STATE_ROOM_READY = 'STATE_ROOM_CREATED';
 const STATE_JOINED = 'STATE_JOINED';
 const STATE_LEAVING = 'STATE_LEAVING';
 const STATE_ERROR = 'STATE_ERROR';
 
 export default function App() {
   const [appState, setAppState] = useState(STATE_IDLE);
-  const [roomUrl, setRoomUrl] = useState(null);
+  const [roomUrl, setRoomUrl] = useState('');
+  const [roomUrlFieldValue, setRoomUrlFieldValue] = useState('');
   const [callObject, setCallObject] = useState(null);
 
   /**
    * Creates a new call room.
    */
-  const createCall = useCallback(() => {
+  const createRoom = useCallback(() => {
     setAppState(STATE_CREATING);
     return api
       .createRoom()
-      .then((room) => room.url)
+      .then((room) => {
+        setRoomUrl(room.url);
+        setRoomUrlFieldValue(room.url);
+        setAppState(STATE_ROOM_READY);
+      })
       .catch((error) => {
         console.log('Error creating room', error);
         setRoomUrl(null);
+        setRoomUrlFieldValue(undefined);
         setAppState(STATE_IDLE);
       });
   }, []);
@@ -203,7 +212,7 @@ export default function App() {
    * Disabling the start button until then avoids that scenario.
    * !!!
    */
-  const enableStartButton = appState === STATE_IDLE;
+  const enableStartButton = appState === STATE_ROOM_READY;
 
   return (
     <div className="app">
@@ -220,12 +229,47 @@ export default function App() {
           />
         </CallObjectContext.Provider>
       ) : (
-        <StartButton
-          disabled={!enableStartButton}
-          onClick={() => {
-            createCall().then((url) => startJoiningCall(url));
-          }}
-        />
+        <div className="wrapper">
+          <div className="header">
+            <img src={dailyLogo} className="dailyLogo"></img>
+            <img src={gitHubLogo}></img>
+          </div>
+          <div className="introInstructions">
+            <h1 className="title">Daily call object React demo</h1>
+            <div className="instructions">
+              <p className="instructionsText">
+                To get started, enter an existing room URL or create a temporary
+                demo room
+              </p>
+              <label htmlFor="roomURL"></label>
+              <input
+                type="text"
+                className="roomURL"
+                id="roomURL"
+                placeholder="Room URL"
+                pattern="^(https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.(daily\.co\/)([a-z0-9]+)+$"
+                value={roomUrlFieldValue}
+                onChange={(event) => {
+                  setRoomUrl(event.target.value);
+                  setRoomUrlFieldValue(event.target.value);
+                  setAppState(STATE_ROOM_READY);
+                }}
+              />
+              <button
+                className="createRoomButton"
+                onClick={() => {
+                  createRoom();
+                }}
+              >
+                Create demo room
+              </button>
+              <StartButton
+                disabled={!enableStartButton}
+                onClick={() => startJoiningCall(roomUrl)}
+              />
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );

diff --git a/src/components/Call/Call.css b/src/components/Call/Call.css
@@ -20,3 +20,18 @@
   display: flex;
   align-items: center;
 }
+
+.banner {
+  width: auto;
+  padding: 20px 30px;
+  top: 5%;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  border: 1px solid #2b3f56;
+}
+
+/* .docsLink {
+  text-decoration: none;
+} */
diff --git a/src/components/Call/Call.js b/src/components/Call/Call.js
@@ -167,6 +167,9 @@ export default function Call() {
   const message = getMessage(callState);
   return (
     <div className="call">
+      <div className="banner">
+        Explore more ways to customize this call in the Daily docs.
+      </div>
       <div className="large-tiles">
         {
           !message

diff --git a/src/components/CallMessage/CallMessage.css b/src/components/CallMessage/CallMessage.css
@@ -5,15 +5,15 @@
   left: 50%;
   position: absolute;
   transform: translate(-50%, -50%);
-  color: #ffffff;
+  color: var(--white);
   text-align: center;
   font-size: 14px;
   line-height: 17px;
 }
 
 .call-message.error {
   color: #d81a1a;
-  background-color: #ffffff;
+  background-color: var(--white);
 }
 
 .call-message-header {

diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css
@@ -1,7 +1,8 @@
 .chat {
   position: absolute;
-  right: 10px;
-  bottom: 75px;
+  left: 150px;
+  bottom: 0px;
+  top: 350px;
   width: 250px;
   height: calc(100% - 150px);
   background-color: #f2f2f2;

diff --git a/src/components/StartButton/StartButton.css b/src/components/StartButton/StartButton.css
@@ -1,16 +1,16 @@
-.start-button {
-  padding: 20px 30px;
-  position: absolute;
-  background: #ffffff;
-  font-family: Helvetica Neue;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 17px;
-  text-align: center;
-  color: #4a4a4a;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #ffffff;
-}
+/* .start-button {
+    padding: 20px 30px;
+    position: absolute;
+    background: #ffffff;
+    font-family: Helvetica Neue;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 17px;
+    text-align: center;
+    color: #4a4a4a;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #ffffff;
+} */
diff --git a/src/components/StartButton/StartButton.js b/src/components/StartButton/StartButton.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './StartButton.css';
+// import './StartButton.css';
 
 /**
  * Props:
@@ -9,11 +9,11 @@ import './StartButton.css';
 export default function StartButton(props) {
   return (
     <button
-      className="start-button"
+      className={props.disabled ? 'startButton' : 'startButtonReady'}
       disabled={props.disabled}
       onClick={props.onClick}
     >
-      Click to start a call
+      Start call
     </button>
   );
 }
diff --git a/src/components/Tray/Tray.css b/src/components/Tray/Tray.css
@@ -1,8 +1,20 @@
 .tray {
-  flex: none;
+  /* flex: none;
   height: 60px;
   background-color: #f2f2f2;
   padding: 0 10px;
   display: flex;
+  width: 100%;
+  align-items: center; */
+
+  flex: none;
+  height: 55%;
+  top: 105px;
+  width: 40px;
+  background-color: #f2f2f2;
+  padding: 0 10px;
+  display: flex;
+  position: absolute;
+  flex-direction: column;
   align-items: center;
 }
diff --git a/src/images/github@icons8.png b/src/images/github@icons8.png
diff --git a/src/images/logo@2x.png b/src/images/logo@2x.png
diff --git a/src/index.css b/src/index.css
@@ -1,8 +1,9 @@
+:root {
+  --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }