From 3be869b078a0389f0c15acedb9a82ac4bb21a1b4 Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Mon, 11 Jan 2021 10:10:32 -0800 Subject: [PATCH 01/11] Updated favicon --- public/favicon.ico | Bin 3150 -> 15086 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/public/favicon.ico b/public/favicon.ico index bcd5dfd67cd0361b78123e95c2dd96031f27f743..3fb8ff01d2d337dd0005af04ee28d19087cac262 100644 GIT binary patch literal 15086 zcmeHNU2IfE6rP5^M|tFdc4re!3=3x4M5Em;t^8TECMHtfP+mxk;f;vkgKm`2&=#5? z;)9JPQPUC><$+>MH2ch>68uY~2pFiMkQg1%4W!g$7Cvsa}sSZeA2J8d=0c>%srI*~uaoOBDAdPivWbUSJ_Oc?r*h`L!+5zGih~P~O&DLEYU?W#p~hugUPyL-NtFq0nG{ z%5^`P5gT{L7P`4Jy?kpGiq)wuJoJc-K?*8QO2^_U$Ot%QBQ_ zIV{igBae4$N?zWfW$=WS{!g_$za@osimwjT$37587(O~!=D+^2l)SVpB?mvz^2Nop zoc$BHk(S->XvwXKmp}V^9D(J~9<=***!;wW67MsUX*qMf^nc$#z>)XeXEVfXLnT{X_17mcK_G`%muNgLaia_x|&M%jXwPpC8SffjN7AXU-wf zhnzh>^_@dHdw%V!1KYv5`vayQt-p7FV+8e>1RCM~2Jez^j8?tBVd^l`7L9O!hHF#R z`!hna_?c$hsnq|BQ%c=r{E$);jB)#>$aslT1;(&~iTU^-hXO0_vqzE7u+s!%*v;6{ z*wxtC*q!&ZG|&Z7$;y<6I4TLAcud6MWuh1YksR-&<}s6W&g024UdDv zJkEXD-n2LC95yg7WxCp$rSN{~-1aM+*^Zr0%X1s&ckUcj|BIX3W$V+;GWva5#{U3t zb};%K^lw@?{m*WIe(0p`2T{LG`Y!@y9)(u6%Z<+V9GB-*93G@H}@&HEun$(KE+ZzR0wFJPT*VMKcJRh%RJ1B-6yY) zQTC@0a&yb23}wHGAZyB^?7wx$&ywYuROzgo>9uq)Pwz81`QUKhtb4Y6?(NRueq#%K zXnZ#SmCB-C=B*Tt9qN-8dREKODJ{F+(B56dxn)p3=+4yedqc9PuUWpnm6kULE8kU& xL%t^e&x85bYd_i}V*AbN19R|OlL_LKks literal 3150 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 MDeX2GIKR{Qf5okjU;qFB From 88991dbe5713137391db74564f2be1db1c35a3fc Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Mon, 11 Jan 2021 11:59:21 -0800 Subject: [PATCH 02/11] Updated site title, added header with logos, page title, prompt text --- public/index.html | 2 +- src/components/App/App.css | 37 +++++++++++++++++++-- src/components/App/App.js | 27 +++++++++++---- src/components/StartButton/StartButton.css | 28 ++++++++-------- src/components/StartButton/StartButton.js | 2 +- src/images/github@icons8.png | Bin 0 -> 539 bytes src/images/logo@2x.png | Bin 0 -> 3932 bytes src/index.css | 10 ++++-- 8 files changed, 78 insertions(+), 28 deletions(-) create mode 100644 src/images/github@icons8.png create mode 100644 src/images/logo@2x.png diff --git a/public/index.html b/public/index.html index b863281..1fc5dbd 100644 --- 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`. --> - Daily React Demo + Daily call object React demo diff --git a/src/components/App/App.css b/src/components/App/App.css index f4c883a..abda739 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -1,6 +1,37 @@ +:root { + --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif; +} + .app { - background-color: #4a4a4a; - position: absolute; - height: 100%; + font-family: var(--fontFamily); + display: flex; + flex-direction: column; + justify-content: center; + max-width: 1200px; + margin: 0 auto; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 1rem; +} + +.title { + margin-bottom: 0; + text-align: center; +} + +.instructions { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 8px; width: 100%; } + +.dailyLogo { + width: 70px; +} diff --git a/src/components/App/App.js b/src/components/App/App.js index 64b9c67..f70c3f2 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -8,6 +8,8 @@ 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'; @@ -207,6 +209,10 @@ export default function App() { return (
+
+ + +
{showCall ? ( // NOTE: for an app this size, it's not obvious that using a Context // is the best choice. But for larger apps with deeply-nested components @@ -220,12 +226,21 @@ export default function App() { /> ) : ( - { - createCall().then((url) => startJoiningCall(url)); - }} - /> +
+

Daily call object React demo

+
+

+ To get started, enter an existing room URL or create a temporary + demo room +

+ { + createCall().then((url) => startJoiningCall(url)); + }} + /> +
+
)}
); diff --git a/src/components/StartButton/StartButton.css b/src/components/StartButton/StartButton.css index 0e61fef..9a17c67 100644 --- 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; +:root { + --white: #ffffff; + --grey: #c8d1dc; +} +.startButton { + padding: 8px 16px; + margin-top: 8px; + margin-bottom: 8px; + font-weight: 700; text-align: center; - color: #4a4a4a; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #ffffff; + border-radius: 8px; + background-color: var(--white); + border-width: 1px; + border-color: var(--grey); + cursor: pointer; } diff --git a/src/components/StartButton/StartButton.js b/src/components/StartButton/StartButton.js index 8521e65..5b27b7d 100644 --- a/src/components/StartButton/StartButton.js +++ b/src/components/StartButton/StartButton.js @@ -9,7 +9,7 @@ import './StartButton.css'; export default function StartButton(props) { return ( { createCall().then((url) => startJoiningCall(url)); diff --git a/src/components/StartButton/StartButton.css b/src/components/StartButton/StartButton.css index 9a17c67..e69de29 100644 --- a/src/components/StartButton/StartButton.css +++ b/src/components/StartButton/StartButton.css @@ -1,16 +0,0 @@ -:root { - --white: #ffffff; - --grey: #c8d1dc; -} -.startButton { - 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); - cursor: pointer; -} diff --git a/src/components/StartButton/StartButton.js b/src/components/StartButton/StartButton.js index 5b27b7d..10a37c4 100644 --- a/src/components/StartButton/StartButton.js +++ b/src/components/StartButton/StartButton.js @@ -13,7 +13,7 @@ export default function StartButton(props) { disabled={props.disabled} onClick={props.onClick} > - Click to start a call + Join call ); } From 459a8ac26fb3c2f7c6293448012931111b2d7f49 Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Wed, 13 Jan 2021 06:47:12 -0800 Subject: [PATCH 04/11] Removed demo link --- src/api.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/api.js b/src/api.js index 504f05f..260a90f 100644 --- 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,10 +8,9 @@ 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: { @@ -20,10 +18,10 @@ async function createRoom() { }, }; 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; From 63a5ed649dcaeda26d39c5222c1e682214960756 Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Fri, 15 Jan 2021 15:32:52 -0800 Subject: [PATCH 05/11] Added positioning back to app class --- src/api.js | 27 +++++++------ src/components/App/App.css | 8 ++++ src/components/App/App.js | 78 +++++++++++++++++++------------------- 3 files changed, 61 insertions(+), 52 deletions(-) diff --git a/src/api.js b/src/api.js index 260a90f..69f5d7c 100644 --- a/src/api.js +++ b/src/api.js @@ -11,20 +11,19 @@ const newRoomEndpoint = `${window.location.origin}/api/rooms`; * 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', - }), - room = await response.json(); - return room; - + // 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', + // }), + // room = await response.json(); + // return room; // Comment out the above and uncomment the below, using your own URL // return { url: "https://your-domain.daily.co/hello" }; } diff --git a/src/components/App/App.css b/src/components/App/App.css index 2b3c008..25784ff 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -6,6 +6,9 @@ .app { font-family: var(--fontFamily); + position: absolute; + height: 100%; + width: 100%; display: flex; flex-direction: column; justify-content: center; @@ -13,6 +16,11 @@ margin: 0 auto; } +.introInstructions { + position: relative; + bottom: 100px; +} + .header { display: flex; justify-content: space-between; diff --git a/src/components/App/App.js b/src/components/App/App.js index 6814aa7..b74bbf5 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -208,50 +208,52 @@ export default function App() { const enableStartButton = appState === STATE_IDLE; return ( -
+
- {showCall ? ( - // NOTE: for an app this size, it's not obvious that using a Context - // is the best choice. But for larger apps with deeply-nested components - // that want to access call object state and bind event listeners to the - // call object, this can be a helpful pattern. - - - - - ) : ( -
-

Daily call object React demo

-
-

- To get started, enter an existing room URL or create a temporary - demo room -

- - - - { - createCall().then((url) => startJoiningCall(url)); - }} +
+ {showCall ? ( + // NOTE: for an app this size, it's not obvious that using a Context + // is the best choice. But for larger apps with deeply-nested components + // that want to access call object state and bind event listeners to the + // call object, this can be a helpful pattern. + + + + + ) : ( +
+

Daily call object React demo

+
+

+ To get started, enter an existing room URL or create a temporary + demo room +

+ + + + { + createCall().then((url) => startJoiningCall(url)); + }} + /> +
-
- )} + )} +
); } From efa310ba449f1d51bcaab0fe26bd97c94b269ef1 Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Fri, 15 Jan 2021 15:46:20 -0800 Subject: [PATCH 06/11] Testing demo room --- src/api.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/api.js b/src/api.js index 69f5d7c..260a90f 100644 --- a/src/api.js +++ b/src/api.js @@ -11,19 +11,20 @@ const newRoomEndpoint = `${window.location.origin}/api/rooms`; * 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', - // }), - // room = await response.json(); - // return room; + 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', + }), + room = await response.json(); + return room; + // Comment out the above and uncomment the below, using your own URL // return { url: "https://your-domain.daily.co/hello" }; } From fd6319a58610a2ce8e12a3321efd3bf298de36ff Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Fri, 15 Jan 2021 16:14:44 -0800 Subject: [PATCH 07/11] Added header to intro text to remove it from in-session call --- src/components/App/App.css | 14 ++++++++---- src/components/App/App.js | 42 ++++++++++++++++++------------------ src/components/Tray/Tray.css | 1 + 3 files changed, 32 insertions(+), 25 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index 25784ff..4ae2e86 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -12,22 +12,28 @@ display: flex; flex-direction: column; justify-content: center; - max-width: 1200px; margin: 0 auto; } -.introInstructions { - position: relative; - bottom: 100px; +.wrapper { + display: flex; + flex-direction: column; } .header { display: flex; + position: relative; + bottom: 150px; justify-content: space-between; align-items: center; margin: 1rem; } +.introInstructions { + position: relative; + bottom: 100px; +} + .dailyLogo { width: 70px; } diff --git a/src/components/App/App.js b/src/components/App/App.js index b74bbf5..ec825bc 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -208,25 +208,25 @@ export default function App() { const enableStartButton = appState === STATE_IDLE; return ( -
-
- - -
-
- {showCall ? ( - // NOTE: for an app this size, it's not obvious that using a Context - // is the best choice. But for larger apps with deeply-nested components - // that want to access call object state and bind event listeners to the - // call object, this can be a helpful pattern. - - - - - ) : ( +
+ {showCall ? ( + // NOTE: for an app this size, it's not obvious that using a Context + // is the best choice. But for larger apps with deeply-nested components + // that want to access call object state and bind event listeners to the + // call object, this can be a helpful pattern. + + + + + ) : ( +
+
+ + +

Daily call object React demo

@@ -252,8 +252,8 @@ export default function App() { />
- )} -
+
+ )}
); } diff --git a/src/components/Tray/Tray.css b/src/components/Tray/Tray.css index 7629a0a..9afdce5 100644 --- a/src/components/Tray/Tray.css +++ b/src/components/Tray/Tray.css @@ -4,5 +4,6 @@ background-color: #f2f2f2; padding: 0 10px; display: flex; + width: 100%; align-items: center; } From 8235ac18d49687ac55786100cb25aa3386ac8935 Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Fri, 15 Jan 2021 17:14:47 -0800 Subject: [PATCH 08/11] Now can add URL in input field and join a call --- src/components/App/App.js | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index ec825bc..9e351b4 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -20,7 +20,7 @@ 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 [callObject, setCallObject] = useState(null); /** @@ -28,14 +28,16 @@ export default function App() { */ const createCall = useCallback(() => { setAppState(STATE_CREATING); - return api - .createRoom() - .then((room) => room.url) - .catch((error) => { - console.log('Error creating room', error); - setRoomUrl(null); - setAppState(STATE_IDLE); - }); + return ( + api + // .createRoom() + .then((room) => room.url) + .catch((error) => { + console.log('Error creating room', error); + setRoomUrl(null); + setAppState(STATE_IDLE); + }) + ); }, []); /** @@ -222,7 +224,7 @@ export default function App() { /> ) : ( -
+
@@ -234,21 +236,20 @@ export default function App() { To get started, enter an existing room URL or create a temporary demo room

- + setRoomUrl(event.target.value)} /> { - createCall().then((url) => startJoiningCall(url)); - }} + onClick={() => startJoiningCall(roomUrl)} />
From 2ac00f19ede2e7e2f6a74fbb9ae3faa8c926618d Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Mon, 18 Jan 2021 14:56:55 -0800 Subject: [PATCH 09/11] Added create demo room functionality and updated styling --- src/components/App/App.css | 6 +++ src/components/App/App.js | 46 +++++++++++++++------- src/components/CallMessage/CallMessage.css | 2 +- src/components/StartButton/StartButton.css | 16 ++++++++ src/components/StartButton/StartButton.js | 6 +-- 5 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index 4ae2e86..26da05c 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -2,6 +2,7 @@ --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif; --white: #ffffff; --grey: #c8d1dc; + --lightgreen: #72cc18; } .app { @@ -62,6 +63,7 @@ } .startButton, +.startButtonReady, .createRoomButton { padding: 8px 16px; margin-top: 8px; @@ -75,3 +77,7 @@ cursor: pointer; width: 250px; } + +.startButtonReady { + background-color: var(--lightgreen); +} diff --git a/src/components/App/App.js b/src/components/App/App.js index 9e351b4..a833241 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -14,6 +14,7 @@ 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'; @@ -21,23 +22,27 @@ const STATE_ERROR = 'STATE_ERROR'; export default function App() { const [appState, setAppState] = useState(STATE_IDLE); 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) - .catch((error) => { - console.log('Error creating room', error); - setRoomUrl(null); - setAppState(STATE_IDLE); - }) - ); + return api + .createRoom() + .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); + }); }, []); /** @@ -207,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 (
@@ -243,11 +248,22 @@ export default function App() { id="roomURL" placeholder="Room URL" pattern="^(https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.(daily\.co\/)([a-z0-9]+)+$" - onChange={(event) => setRoomUrl(event.target.value)} + value={roomUrlFieldValue} + onChange={(event) => { + setRoomUrl(event.target.value); + setRoomUrlFieldValue(event.target.value); + setAppState(STATE_ROOM_READY); + }} /> - + startJoiningCall(roomUrl)} /> diff --git a/src/components/CallMessage/CallMessage.css b/src/components/CallMessage/CallMessage.css index b22db0a..7a320a5 100644 --- a/src/components/CallMessage/CallMessage.css +++ b/src/components/CallMessage/CallMessage.css @@ -5,7 +5,7 @@ left: 50%; position: absolute; transform: translate(-50%, -50%); - color: #ffffff; + color: #121a24; text-align: center; font-size: 14px; line-height: 17px; diff --git a/src/components/StartButton/StartButton.css b/src/components/StartButton/StartButton.css index e69de29..98edbb9 100644 --- a/src/components/StartButton/StartButton.css +++ b/src/components/StartButton/StartButton.css @@ -0,0 +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; +} */ diff --git a/src/components/StartButton/StartButton.js b/src/components/StartButton/StartButton.js index 10a37c4..fcc3b51 100644 --- 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 ( ); } From 398d8118c966b79f6cb9dd53f378af7687bef40b Mon Sep 17 00:00:00 2001 From: Kimberlee Johnson Date: Thu, 21 Jan 2021 18:12:00 -0800 Subject: [PATCH 10/11] Updated styling, added a banner message and verticalized tray --- src/components/App/App.css | 4 ++++ src/components/Call/Call.css | 15 +++++++++++++++ src/components/Call/Call.js | 3 +++ src/components/CallMessage/CallMessage.css | 4 ++-- src/components/Chat/Chat.css | 5 +++-- src/components/Tray/Tray.css | 13 ++++++++++++- src/images/github@icons8.png | Bin 539 -> 456 bytes src/images/logo@2x.png | Bin 3932 -> 3355 bytes src/index.css | 3 --- 9 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index 26da05c..778109c 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -2,11 +2,14 @@ --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif; --white: #ffffff; --grey: #c8d1dc; + --darkblue: #121a24; --lightgreen: #72cc18; } .app { font-family: var(--fontFamily); + color: var(--white); + background-color: var(--darkblue); position: absolute; height: 100%; width: 100%; @@ -74,6 +77,7 @@ background-color: var(--white); border-width: 1px; border-color: var(--grey); + color: var(--darkblue); cursor: pointer; width: 250px; } diff --git a/src/components/Call/Call.css b/src/components/Call/Call.css index cc9bb55..66f280d 100644 --- 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 index 1ef9f40..87282af 100644 --- 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 (
+
+ Explore more ways to customize this call in the Daily docs. +
{ !message diff --git a/src/components/CallMessage/CallMessage.css b/src/components/CallMessage/CallMessage.css index 7a320a5..0f59c95 100644 --- a/src/components/CallMessage/CallMessage.css +++ b/src/components/CallMessage/CallMessage.css @@ -5,7 +5,7 @@ left: 50%; position: absolute; transform: translate(-50%, -50%); - color: #121a24; + color: var(--white); text-align: center; font-size: 14px; line-height: 17px; @@ -13,7 +13,7 @@ .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 index be04c67..da07cd4 100644 --- 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/Tray/Tray.css b/src/components/Tray/Tray.css index 9afdce5..ecdfbe1 100644 --- a/src/components/Tray/Tray.css +++ b/src/components/Tray/Tray.css @@ -1,9 +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 index 0d12689f6ae7b9fb5210f57fdb5dcec5b629a837..4b2cb5c3aef6f413323f3a3212ddb99555c6cf2d 100644 GIT binary patch delta 447 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 delta 3884 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 Date: Thu, 21 Jan 2021 18:21:27 -0800 Subject: [PATCH 11/11] Converting header measurements to percentage --- src/components/App/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App/App.css b/src/components/App/App.css index 778109c..98d1423 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -27,7 +27,7 @@ .header { display: flex; position: relative; - bottom: 150px; + bottom: 80%; justify-content: space-between; align-items: center; margin: 1rem;