From cbfcf3911103a85bb6c746a68c182d1fc5d4bfef Mon Sep 17 00:00:00 2001
From: Liam Westby <liamwestby@icloud.com>
Date: Mon, 16 Apr 2018 14:38:57 -0500
Subject: [PATCH] Rework layout

---
 .../src/app/login/login.component.html        | 51 ++++++++++++++-----
 .../src/app/login/login.component.scss        | 31 ++++++++---
 2 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/frontend/prebuild/src/app/login/login.component.html b/frontend/prebuild/src/app/login/login.component.html
index a0f0e1a..6921e97 100644
--- a/frontend/prebuild/src/app/login/login.component.html
+++ b/frontend/prebuild/src/app/login/login.component.html
@@ -11,38 +11,63 @@
     <div>
       <app-slider [activePane]="pane">
         <div leftPane>
-            <div class="form-group">
-              <div class="form-item">
-                <button type="button" (click)="showGuestLogin()">Play as Guest</button>
-                <button type="button" (click)="hostRound()">Host Round</button>
-              </div>
+          <div class="form-group">
+            <div class="form-item">
+              <button type="button" (click)="showGuestLogin()">Play as Guest</button>
+            </div>
+            <h2 class="section-header">or</h2>
+            <div class="form-item">
+              <button type="button" (click)="hostRound()">Host Round</button>
+            </div>
           </div>
         </div>
+
+
         <div centerPane>
           <div class="form-group">
             <div class="form-item">
               <label>Username</label>
               <input type="text" id="username" name="username" [(ngModel)]="username" />
             </div>
+            <div class="form-item">
               <button type="button" (click)="loginAsGuest(username)">Sign In</button>
+            </div>
           </div>
         </div>
+
         <div rightPane>
           <div class="form-group">
-            <player [ngStyle]="player.style" [player]="player"></player>
+            <div class="form-item" id="player-card">
+              <label>Player</label>
+              <player [ngStyle]="player.style" [player]="player"></player>
+            </div>
+          </div>
+          <div class="form-group">
             <div class="form-item">
-              <label>Code</label>
+              <button type="button" (click)="logout()">Log Out</button>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="form-item">
+              <button type="button" (click)="quickJoin()">Play Now</button>
+            </div>
+
+            <h2 class="section-header" style="margin-bottom: 0">or</h2>
+            <div class="form-item">
+              <label>Party Code</label>
               <input type="text" id="roundid" name="roundid" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
             </div>
-            <button type="button" (click)="joinRound()">Join Round</button>
-            <button type="button" (click)="logout()">Log Out</button>
+            <div class="form-item">
+              <button type="button" (click)="joinRound()">Join Party</button>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="form-item">
+              <button type="button" (click)="hostRound()">Host Party</button>
+            </div>
           </div>
         </div>
       </app-slider>
-      <div class="form-group">
-        <button type="button" (click)="slide()">Debug Forward</button>
-        <button type="button" (click)="slideBack()">Debug Backward</button>
-      </div>
     </div>
   </div>
 </div>
diff --git a/frontend/prebuild/src/app/login/login.component.scss b/frontend/prebuild/src/app/login/login.component.scss
index b317f50..8497e0f 100644
--- a/frontend/prebuild/src/app/login/login.component.scss
+++ b/frontend/prebuild/src/app/login/login.component.scss
@@ -25,7 +25,7 @@
   text-align: center;
   letter-spacing: .7em;
   line-height: 1.5em;
-  padding-left: .7em;
+  padding-left: .8em;
 }
 
 #login-content {
@@ -39,7 +39,8 @@
 
 #login-title {
   margin-top: 10px;
-  padding-bottom: 50px;
+  padding-bottom: 10px;
+}
 
 #login-icon {
   padding-bottom: 40px;
@@ -49,10 +50,13 @@
   image-rendering: crisp-edges;
 }
 
+#player-card {
+  height: 60px;
+}
+
 .form-group {
   width: 100%;
-  margin-top: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 30px;
 
   display: flex;
   flex-flow: column;
@@ -63,11 +67,11 @@
 
 .form-item {
   width: 100%;
-  margin-top: 6px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .form-item label {
+  width: 100%;
   margin-bottom: -4px;
   padding-bottom: 0px;
   font-size: 0.8em;
@@ -102,8 +106,6 @@
 
 button {
   width: 100%;
-  margin-top: 6px;
-  margin-bottom: 6px;
   padding-top: 6px;
   padding-bottom: 6px;
   background-color: rgba(0, 0, 20, 0.2);
@@ -114,6 +116,19 @@ button {
   border-color: #bbb;
 }
 
+.section-header {
+  width: 100%;
+  margin-bottom: 15px;
+
+  font-size: 1.4em;
+  font-variant: small-caps;
+  font-weight: 300;
+  text-transform: lowercase;
+  text-align: center;
+
+  color: white;
+}
+
 @media screen and (min-width: 550px) {
   #login-container {
     width: 500px;