Updated styling, added a banner message and verticalized tray

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;
 }

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;
+} */

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

src/components/CallMessage/CallMessage.css

@@ -5,15 +5,15 @@
   left: 50%;
   position: absolute;
   transform: translate(-50%, -50%);
-  color: #121a24;
+  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 {

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;

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;
 }

src/index.css

@@ -1,12 +1,9 @@
 :root {
-  --grey-lightest: #e6eaef;
   --fontFamily: GraphikRegular, 'Helvetica Neue', Sans-Serif;
 }
 
 body {
   margin: 0;
-  font-family: var(--fontFamily);
-  background-color: var(--grey-lightest);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }