From f864e573406e69e051b25eb2ee1346543a80e5bb Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sun, 14 Jun 2020 23:12:58 -0700
Subject: [PATCH] update colors using tailwind styles

---
 webroot/index.html        | 32 +++++++++++++++----------------
 webroot/styles/layout.css | 40 ++++++---------------------------------
 2 files changed, 22 insertions(+), 50 deletions(-)
diff --git a/webroot/index.html b/webroot/index.html
index 7a95781c4..8660b12a3 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -16,33 +16,33 @@
   <link href="./styles/layout.css" rel="stylesheet" />
 </head>
 
-<body>
+<body class="bg-gray-300 text-gray-800">
   <div id="app-container" class="flex no-chat">
-    <header class="flex">
-      <h1>
+    <header class="flex border-b border-gray-900 border-solid shadow-md">
+      <h1 class="text-gray-400">
         😈 Owncast 
       </h1>
 
       <div id="user-options-container" class="flex">
         <div id="user-info">
           <div id="user-info-display" title="Click to update user name" class="flex">
-            <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full" />
-            <span id="username-display"></span>
+            <img src="https://robohash.org/username123" id="username-avatar" class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700" />
+            <span id="username-display" class="text-indigo-600"></span>
           </div>
 
           <div id="user-info-change">
             <input type="text"
               id="username-change-input"
-              class="appearance-none block w-full bg-gray-200 text-gray-700   border border-black-500 rounded py-1 px-1 leading-tight  focus:bg-white"
+              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
               value="Random Username 123"
               maxlength="100"
               placeholder="Update username"
             >
             <button id="button-update-username" class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
-            <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn" title="cancel">X</button>
+            <button id="button-cancel-change" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
           </div>
         </div>
-        <button type="button" id="chat-toggle" class="flex">💬</button>
+        <button type="button" id="chat-toggle" class="flex bg-gray-800 hover:bg-gray-700">💬</button>
       </div>
 
     </header>
@@ -50,7 +50,7 @@
       <!-- LEFT CONTAINER SIDE-->
       <div class="flex main-cols left-col">
 
-        <div id="video-container" class="flex shadow-md owncast-video-container">
+        <div id="video-container" class="flex owncast-video-container bg-black">
           <video
             class="video-js"
             id="video"
@@ -66,7 +66,7 @@
           </video>
         </div>
 
-        <div id="stream-info" class="flex">
+        <div id="stream-info" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
           <span>{{ streamStatus }}</span>
           <span>{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
           <span>Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
@@ -93,23 +93,23 @@
       <!-- RIGHT CONTAINER SIDE-->
       <div class="flex main-cols right-col">
 
-        <div id="chat-container">
+        <div id="chat-container" class="bg-gray-800">
           <div id="messages-container">
             <div v-for="(message, index) in messages">
                 <div class="message flex">
                   <img
                     v-bind:src="message.image"
-                    class="message-avatar rounded-full"
+                    class="message-avatar rounded-full bg-black bg-opacity-50"
                   />
                   <div class="message-content">
-                    <p class="message-author">{{ message.author }}</p>
-                    <p class="message-text" v-html="message.formatText()"></p>
+                    <p class="message-author text-white font-bold">{{ message.author }}</p>
+                    <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
                   </div>
               </div>
             </div>
           </div>
     
-          <div id="message-input-container" class="shadow-md">
+          <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">
             <form id="message-form" class="flex" /*@submit="submitChatForm"*/>
 
               <input type="hidden" name="inputAuthor" id="self-message-author"  v-model="message.author" />
@@ -122,7 +122,7 @@
               ></textarea>
               
               <div id="message-form-actions" class="flex">
-                <span id="message-form-warning"></span>
+                <span id="message-form-warning" class="text-red-600 text-xs"></span>
                 <button
                   id="button-submit-message"
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index ce3e3ff1e..261d75e92 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -3,13 +3,11 @@
   --header-height: 3em;
   --right-col-width: 24em;
 
-  --chat-bg-color: rgba(11,0,33,.95);
   --header-bg-color: rgba(20,0,40,1);
 }
 
 body {
   font-size: 14px;
-  background-color: #eee;
 }
 ::-webkit-scrollbar {
   width: 0px;
@@ -41,7 +39,6 @@ header h1 {
   font-weight: 100;
   letter-spacing: 1.2;
   text-transform: uppercase;
-  color: #ddd;
   padding: .5em;
   white-space: nowrap;
   width: 20em;
@@ -49,16 +46,12 @@ header h1 {
 
 #chat-toggle {
   cursor: pointer;
-  background-color: #555;
   text-align: center;
   height: 100%;
   min-width: 3em;
   justify-content: center;
   align-items: center;
 }
-#chat-toggle:hover {
-  background-color: #666;
-}
 
 /* ************************************************8 */
 
@@ -84,12 +77,10 @@ header h1 {
   height: 1.75em;
   width: 1.75em;
   margin-right: .5em;
-  border: 1px solid rgba(255,255,255,.25)
 }
 #username-display {
-  font-weight: bold;
+  font-weight: 600;
   font-size: .75em;
-  color: #516FEB;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -115,7 +106,6 @@ header h1 {
   height: 2.5em;
 }
 #button-cancel-change {
-  color: rgba(255,255,255,.5);
   cursor: pointer;
   height: 2.5em;
   font-size: .65em;
@@ -152,7 +142,6 @@ header h1 {
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  background-color: black;
 
   height: calc(100vh - 8em); /* Fallback for browsers that do not support Custom Properties */
   height: calc((var(--vh, 1vh) * 100) - var(--header-height) - 5em);
@@ -180,10 +169,7 @@ header h1 {
 #stream-info {
   padding: .5em 2em;
   text-align: center;
-  font-family: monospace;
-  font-size: .75em;
-  background-color: rgba(0,0,0,.5);
-  border-bottom: 1px solid black;
+  font-size: .7em;
 
   flex-direction: row;
   justify-content: space-between;
@@ -202,7 +188,6 @@ header h1 {
   right: 0;
   height: 100%;
   width: var(--right-col-width);
-  background-color: var(--chat-bg-color);
 
   height: calc(100vh - 3em); /* Fallback for browsers that do not support Custom Properties */
   height: calc((var(--vh, 1vh) * 100) - var(--header-height));
@@ -219,9 +204,7 @@ header h1 {
 }
 #message-input-container {
   width: 100%;
-  border-top: 1px solid #eee;
   padding: 1em;
-  background-color: #334;
 }
 
 #message-form {
@@ -238,10 +221,7 @@ header h1 {
   align-items: center;
   width: 100%;
 }
-#message-form-warning {
-  font-size: .75em;
-  color: red;
-}
+
 
 /* ************************************************8 */
 
@@ -253,25 +233,17 @@ header h1 {
   height: 2.5em;
   width: 2.5em;
   margin-right: .75em;
-  background-color: rgba(0,0,0, .75);
 }
 .message-content {
   font-size: .85em;
 }
 .message-content a {
-  color: #6699cc;
+  color: #7F9CF5; /* indigo-400 */
 }
 .message-content a:hover {
   text-decoration: underline;
 }
-.message-author {
-  font-weight: 600;
-  color: #fff;
-}
-.message-text {
-  color: #ccc;
-  font-weight: 200;
-}
+
 
 /* ************************************************8 */
 
@@ -283,7 +255,7 @@ header h1 {
 }
 
 .no-chat #chat-toggle {
-  opacity: .5;
+  opacity: .75;
 }
 
 /* ************************************************8 */
