From 9b7a203fe5a51808e198020163bafb580c5d934c Mon Sep 17 00:00:00 2001
From: Anmol Sethi <hi@nhooyr.io>
Date: Thu, 20 Feb 2020 20:08:06 -0500
Subject: [PATCH] Make login page pretty

---
 src/browser/pages/global.css |  2 +-
 src/browser/pages/login.css  | 59 ++++++++++++++++++++++++++----------
 src/browser/pages/login.html |  7 ++---
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/browser/pages/global.css b/src/browser/pages/global.css
index 96ab201f..f2a5f84e 100644
--- a/src/browser/pages/global.css
+++ b/src/browser/pages/global.css
@@ -7,7 +7,7 @@ body,
 }
 
 body {
-  background: #272727;
+  background: rgb(244, 247, 252);
   color: #f4f4f4;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
diff --git a/src/browser/pages/login.css b/src/browser/pages/login.css
index 08915951..81ff08cb 100644
--- a/src/browser/pages/login.css
+++ b/src/browser/pages/login.css
@@ -1,31 +1,48 @@
+body {
+  overflow: auto;
+}
+.center-container {
+  width: 100vw;
+  height: 100vh;
+  padding: 20px 40px;
+  min-height: 400px;
+}
+
 .login-form {
-  align-items: center;
-  background: #fcfcfc;
-  border-radius: 10px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  box-shadow: rgba(60, 66, 87, 0.117647) 0px 7px 14px 0px, rgba(0, 0, 0, 0.117647) 0px 3px 6px 0px;
   color: rgba(0, 0, 0, 0.37);
   display: flex;
   flex-direction: column;
   flex: 1;
-  height: 100%;
   justify-content: center;
-  max-height: 400px;
-  max-width: 664px;
-  padding: 20px;
+  padding: 20px 40px;
   position: relative;
-  width: 100%;
+
+  height: 300px;
+  min-width: 320px;
+  max-width: 500px;
+}
+
+.main {
+  font-size: 40px;
 }
 
 .login-form > .header {
   align-items: center;
-  color: #b6b6b6;
-  margin-bottom: 1rem;
+  color: black;
+}
+
+.login-form > .header > .sub {
+  margin-top: 10px;
 }
 
 .login-form > .field {
+  margin-top: 40px;
   display: flex;
   flex-direction: row;
   width: 100%;
+  height: 50px;
 }
 
 .login-form > .error {
@@ -34,10 +51,15 @@
 }
 
 .login-form > .field > .password {
-  border: 1px solid #b6b6b6;
+  border: 1px solid #ddd;
+  background: rgb(244, 247, 252);
   box-sizing: border-box;
   padding: 1rem;
   flex: 1;
+  font-size: 20px;
+  border-radius: 5px;
+  color: black;
+  min-width: 100px;
 }
 
 .login-form > .user {
@@ -45,9 +67,14 @@
 }
 
 .login-form > .field > .submit {
-  background-color: transparent;
-  border: 1px solid #b6b6b6;
+  font-size: 20px;
+  border: none;
   box-sizing: border-box;
-  margin-left: -1px;
-  padding: 1rem 2rem;
+  margin-left: 20px;
+
+  background-color: rgb(87, 114, 245);
+  color: white;
+  font-family: monospace;
+  padding: 10px 20px;
+  border-radius: 5px;
 }
diff --git a/src/browser/pages/login.html b/src/browser/pages/login.html
index c9b1a9be..3cf817d0 100644
--- a/src/browser/pages/login.html
+++ b/src/browser/pages/login.html
@@ -38,13 +38,12 @@
             onfocus="const value=this.value;this.value='';this.value=value;"
             class="password"
             type="password"
-            placeholder="password"
+            placeholder="PASSWORD"
             name="password"
             autocomplete="current-password"
           />
-          <button class="submit" type="submit">
-            Log In
-          </button>
+
+          <input class="submit" value="SUBMIT" type="submit" />
         </div>
         {{ERROR}}
       </form>