From 24e49a074928ce70478eafa11bc968ce7c639460 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Sun, 11 Apr 2021 19:54:47 +0100
Subject: [PATCH] updated prelobby structure, showing how many players are in
 queue

---
 src/sass/style.scss | 28 +++++++++++++++++++++-------
 static/index.html   | 21 ++++++++++++---------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/sass/style.scss b/src/sass/style.scss
index cb259c68b..07f2c0bf4 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3601,7 +3601,7 @@ key {
     grid-template-areas:
       "welcome welcome"
       "mm priv";
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 3fr 1fr;
     gap: 2rem;
     .welcome {
       display: grid;
@@ -3636,18 +3636,29 @@ key {
       grid-area: mm;
       display: grid;
       gap: 1rem;
-      grid-template-rows: auto auto 1fr;
+      grid-template-rows: auto 2.4fr 1fr auto;
       .title,
       .subtitle {
         color: var(--sub-color);
       }
       .buttons {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: 1rem;
-        // .button {
-        //   padding: 2rem 0;
-        // }
+        .button {
+          display: grid;
+          gap: 0.25rem;
+          height: 100%;
+          .icon {
+            font-size: 1.5rem;
+            line-height: 1.5rem;
+          }
+          .subtext {
+            opacity: 0.5;
+            font-size: 0.75rem;
+            line-height: 0.75rem;
+          }
+        }
       }
       .button {
         padding: 0.7rem 0.5rem;
@@ -3671,10 +3682,13 @@ key {
     #joinByCode {
       display: grid;
       grid-auto-flow: column;
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: 2fr 1fr;
       gap: 1rem;
       .button {
         padding: 0.7rem;
+        i {
+          margin: 0;
+        }
       }
       input {
         position: absolute;
diff --git a/static/index.html b/static/index.html
index 4693485fc..60355c439 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3916,20 +3916,24 @@
                 <div class="title">matchmaking</div>
                 <div class="buttons">
                   <div class="button active" queue="0">
-                    <i class="fas fa-clock"></i>
-                    Time 15
+                    <div class="icon"><i class="fas fa-clock"></i></div>
+                    <div class="text">Time 15</div>
+                    <div class="subtext">In queue: 0</div>
                   </div>
                   <div class="button active" queue="1">
-                    <i class="fas fa-clock"></i>
-                    Time 60
+                    <div class="icon"><i class="fas fa-clock"></i></div>
+                    <div class="text">Time 60</div>
+                    <div class="subtext">In queue: 0</div>
                   </div>
                   <div class="button active" queue="2">
-                    <i class="fas fa-quote-right"></i>
-                    Medium Quotes
+                    <div class="icon"><i class="fas fa-quote-right"></i></div>
+                    <div class="text">Medium Quotes</div>
+                    <div class="subtext">In queue: 0</div>
                   </div>
                   <div class="button active" queue="3">
-                    <i class="fas fa-quote-right"></i>
-                    Long Quotes
+                    <div class="icon"><i class="fas fa-quote-right"></i></div>
+                    <div class="text">Long Quotes</div>
+                    <div class="subtext">In queue: 0</div>
                   </div>
                 </div>
                 <div class="button startMatchmakingButton">
@@ -3973,7 +3977,6 @@
                   />
                   <div class="button">
                     <i class="fas fa-chevron-right"></i>
-                    Join room
                   </div>
                 </div>
               </div>