From 6ff9a908962dbb78a979b4f83f954731671bb55f Mon Sep 17 00:00:00 2001 From: Michael Quigley 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 ( -
- - setEmail(target.value)}/> -
- - setPassword(target.value)}/> -
- -
- ); +
+ +

zrok

+
+
+ Log In +

setEmail(target.value)}/>

+

setPassword(target.value)}/>

+
+
+
+ ) } 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;