From e42c7d14cc919eafa02eadd7d07d497a51e76a77 Mon Sep 17 00:00:00 2001
From: joeyak <joeyak97@gmail.com>
Date: Sun, 17 Mar 2019 22:35:07 -0400
Subject: [PATCH] Minor UI changes

Changed playing div to be outside of hidden and the color to be darker
Make the notifyBox a smaller font to not be as imposing
Changed joinbox to have a better style that matches the rest of the website
---
 static/css/site.css | 29 +++++++++++++++++++++++++----
 static/main.html    | 10 ++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/static/css/site.css b/static/css/site.css
index 9a51690..f5cf753 100644
--- a/static/css/site.css
+++ b/static/css/site.css
@@ -1,5 +1,6 @@
 :root {
     --var-border: 1px solid #606060;
+    --var-border-radius: 5px;
     --var-message-color: #f4f4f4;
     --var-contrast-color: #1bf7ec;
 }
@@ -52,7 +53,7 @@ span.svmsg {
     font-size: 16px;
     font-weight: bold;
     border: none;
-    border-radius: 5px;
+    border-radius: var(--var-border-radius);
 }
 
 .button:hover {
@@ -129,10 +130,12 @@ span.svmsg {
     color: var(--var-contrast-color);
     padding: 10px;
     font-weight: bold;
+    font-size: 12px;
+    text-align: center;
 }
 
 #playing {
-    color: var(--var-contrast-color);
+    color: #288a85;
     font-size: x-Large;
 }
 
@@ -145,12 +148,29 @@ span.svmsg {
 }
 
 #joinbox {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     margin: 10px;
 }
 
+#joinbox div {
+    margin: 5px auto;
+}
+
+#name {
+    background: transparent;
+    border: var(--var-border);
+    border-radius: var(--var-border-radius);
+    color: var(--var-message-color);
+    padding: 5px;
+    font-weight: bold;
+}
+
 #chat {
     display: grid;
-    grid-template-rows: 2.5em 1fr 6em 2.5em 1em;
+    grid-template-rows: 1.5em 2em 1fr 6em 2.5em 1em;
     grid-gap: 10px;
     margin: 0px 5px;
     height: 100%;
@@ -185,7 +205,8 @@ span.svmsg {
 #msg {
     background: transparent;
     border: var(--var-border);
-    border-radius: 5px;
+    border-radius: var(--var-border-radius);
+    border-bottom-right-radius: 0px;
     padding: 5px;
     color: var(--var-message-color);
     resize: none;
diff --git a/static/main.html b/static/main.html
index 66fa034..d864d90 100644
--- a/static/main.html
+++ b/static/main.html
@@ -56,8 +56,8 @@
                 {{ end }}
             </div>
             <hr />
-            <a id="playing" target="_blank"></a>
         </div>
+        <a id="playing" target="_blank"></a>
         <div id="messages" class="scrollbar"></div>
         <div id="msgbox">
             <div id="suggestions"></div>
@@ -69,9 +69,11 @@
         </div>
     </div>
     <div id="joinbox">
-        <p style="color:#e5e0e5">Please enter your name to Join the chat</P>
-        <input id="name" maxlength="36">
-        <button id="join" class="button pretty-button" onclick="join();">Join</button>
+        <div style="color: #e5e0e5; text-align: center;">Please enter your name<br />to join the chat</div>
+        <div>
+            <input id="name" maxlength="36">
+            <button id="join" class="button pretty-button" onclick="join();">Join</button>
+        </div>
     </div>
 </div>
 {{ end }}