From 6ff9a908962dbb78a979b4f83f954731671bb55f Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Wed, 3 Aug 2022 12:41:37 -0400
Subject: [PATCH] improved login box

---
 ui/src/Login.js  | 24 ++++++++++++-----------
 ui/src/index.css | 51 +++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/ui/src/Login.js b/ui/src/Login.js
index e3f49c7f..5cd4717d 100644
--- a/ui/src/Login.js
+++ b/ui/src/Login.js
@@ -10,7 +10,7 @@ const Login = (props) => {
 
         identity.login({body: {"email": email, "password": password}})
             .then(resp => {
-                if(!resp.error) {
+                if (!resp.error) {
                     let user = {
                         "email": email,
                         "token": resp.data
@@ -29,16 +29,18 @@ const Login = (props) => {
     };
 
     return (
-        <form onSubmit={handleSubmit}>
-            <label htmlFor="email">email: </label>
-            <input type="text" value={email} placeholder="enter an email" onChange={({ target }) => setEmail(target.value)}/>
-            <div>
-                <label htmlFor="password">password: </label>
-                <input type="password" value={password} placeholder="enter a password" onChange={({ target }) => setPassword(target.value)}/>
-            </div>
-            <button type="submit">Log In</button>
-        </form>
-    );
+        <div className={"login"}>
+            <img src={"ziggy.svg"} width={200}/>
+            <h1>zrok</h1>
+            <form onSubmit={handleSubmit}>
+                <fieldset>
+                    <legend>Log In</legend>
+                    <p><label htmlFor="email">email: </label><input type="text" value={email} placeholder="enter an email" onChange={({target}) => setEmail(target.value)}/></p>
+                    <p><label htmlFor="password">password: </label><input type="password" value={password} placeholder="enter a password" onChange={({target}) => setPassword(target.value)}/><button type="submit">Log In</button></p>
+                </fieldset>
+            </form>
+        </div>
+    )
 }
 
 export default Login;
\ No newline at end of file
diff --git a/ui/src/index.css b/ui/src/index.css
index d70ce83f..b665f9ae 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -14,13 +14,49 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'Russo One', sans-serif;
 }
 
-
 .container {
   display: grid;
   margin-left: 10%;
   margin-right: 10%;
 }
 
+.login {
+  background-color: #3b2693;
+  text-align: center;
+  padding: 25px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  justify-content: center;
+}
+.login h1 {
+  font-size: 64pt;
+}
+.login fieldset {
+  width: 500px;
+  border-radius: 25px;
+}
+.login label {
+  text-align: right;
+  width: 100px;
+  float: left;
+  font-family: 'Russo One', sans-serif;
+  margin-right: 10px;
+}
+.login fieldset legend {
+  font-family: 'Russo One', sans-serif;
+}
+.login fieldset p {
+  clear: both;
+  padding: 5px;
+}
+.login input {
+  width: 300px;
+  float: left;
+}
+
 .header {
   background-color: #3b2693;
   color: white;
@@ -38,8 +74,7 @@ h1, h2, h3, h4, h5, h6 {
 .header-status {
   width: 100%;
   display: grid;
-  padding-bottom: 1em;
-  grid-row-start: 2;
+  grid-template-rows: 1fr 1fr;
 }
 .header-status div p {
   font-size: 75%;
@@ -49,20 +84,22 @@ h1, h2, h3, h4, h5, h6 {
 }
 .header-controls {
   display: flex;
-  grid-row-start: 2;
   justify-content: right;
+  align-items: flex-end;
 }
 .header-controls button {
   margin-left: 30px;
   display: flex;
   align-items: center;
-  background-color: #5241a8;
+  background-color: #222;
   border-radius: 5px 5px 5px 5px;
   border: 1px solid #846fec;
-  color: lightgray;
+  color: #846fec;
   padding: 5px;
-  width: 60px;
+  width: 100px;
   justify-content: center;
+  height: 2em;
+  margin-bottom: 1em;
 }
 .header-controls button:hover {
   color: white;