From b505f4413b39236ca244dcac52a298bf6c3ce014 Mon Sep 17 00:00:00 2001
From: Photon-Aiden <87028152+Photon-Aiden@users.noreply.github.com>
Date: Tue, 6 Dec 2022 20:03:21 -0500
Subject: [PATCH] Reformatting and fixes

Fixed bolding issues, alignment, general styling, added CSS vars
---
 assets/styles/login.css    | 73 ++++++++++++--------------------------
 assets/styles/register.css | 58 ++++++++++++++++--------------
 2 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/assets/styles/login.css b/assets/styles/login.css
index 1709eeb..f68b4b6 100644
--- a/assets/styles/login.css
+++ b/assets/styles/login.css
@@ -1,6 +1,13 @@
 html, body {
     margin: 0;
     padding: 0;
+    --Standard-Element-Width: 284px;
+    --Standard-Element-Height: 28px;
+    --Input-Offset: 24px;
+
+    --Gray1: rgba(95, 95, 95, 1);
+    --White1: rgba(217, 217, 217, 1);
+    --Aqua1: rgba(16, 185, 129, 1);
 }
 
 .login-login {
@@ -10,7 +17,6 @@ html, body {
     position: relative;
     align-items: center;
     flex-shrink: 0;
-    border-color: var(--dl-color-gray-black);
     border-width: 0;
     margin: 0;
     flex-direction: column;
@@ -38,10 +44,9 @@ html, body {
     height: auto;
     font-size: 40px;
     align-self: stretch;
-    font-style: Display Bold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 700;
+    font-weight: 1000;
     line-height: normal;
     font-stretch: normal;
     margin-right: 0;
@@ -51,9 +56,9 @@ html, body {
 
 .login-textinput {
     flex: initial;
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
+    color: var(--Gray1);
+    width: calc(var(--Standard-Element-Width) - var(--Input-Offset));
+    height: var(--Standard-Element-Height);
     font-size: 12px;
     margin-top: 0;
     text-align: left;
@@ -63,30 +68,12 @@ html, body {
     border-radius: 10px;
     margin-bottom: 10px;
     padding: 15px 15px 15px 9px;
-    background-color: rgba(217, 217, 217, 1);
-}
-
-.login-textinput1 {
-    flex: initial;
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
-    font-size: 12px;
-    margin-top: 0;
-    text-align: left;
-    font-family: Noto Sans;
-    border-style: hidden;
-    border-width: 0px;
-    border-radius: 10px;
-    margin-bottom: 10px;
-    padding: 15px 15px 15px 9px;
-    text-transform: capitalize;
-    background-color: rgba(217, 217, 217, 1);
+    background-color: var(--White1);
 }
 
 .login-login-button {
-    width: 284px;
-    height: 28px;
+    width: var(--Standard-Element-Width);
+    height: var(--Standard-Element-Height);
     display: flex;
     overflow: hidden;
     position: relative;
@@ -95,7 +82,7 @@ html, body {
     border-color: transparent;
     border-radius: 10px;
     margin-bottom: 10px;
-    background-color: rgba(16, 185, 129, 1);
+    background-color: var(--Aqua1);
 }
 
 .login-text2 {
@@ -107,10 +94,9 @@ html, body {
     position: absolute;
     font-size: 12px;
     align-self: auto;
-    font-style: SemiBold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
     font-stretch: normal;
     margin-right: 0;
@@ -118,34 +104,21 @@ html, body {
     text-decoration: none;
 }
 
-.login-text4 {
-    color: rgba(16, 185, 129, 1);
+.login-text3 {
+    color: var(--Aqua1);
     height: auto;
     font-size: 12px;
     align-self: auto;
-    font-style: SemiBold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
     font-stretch: normal;
     margin-right: 0;
-    margin-bottom: 10px;
+    margin-bottom: 0;
     text-decoration: none;
 }
 
-.login-text6 {
-    color: rgba(16, 185, 129, 1);
-    height: auto;
-    font-size: 12px;
-    align-self: auto;
-    font-style: SemiBold;
-    text-align: center;
-    font-family: Noto Sans;
-    font-weight: 600;
-    line-height: normal;
-    font-stretch: normal;
-    margin-right: 0;
-    margin-bottom: 0;
-    text-decoration: none;
-}
\ No newline at end of file
+.login-margin {
+    margin-bottom: 10px;
+}
diff --git a/assets/styles/register.css b/assets/styles/register.css
index d19081f..d73e9fe 100644
--- a/assets/styles/register.css
+++ b/assets/styles/register.css
@@ -1,7 +1,16 @@
 html, body {
     margin: 0;
     padding: 0;
+
+    --Standard-Element-Width: 284px;
+    --Standard-Element-Height: 28px;
+    --Input-Offset: 24px;
+
+    --Gray1: rgba(95, 95, 95, 1);
+    --White1: rgba(217, 217, 217, 1);
+    --Aqua1: rgba(16, 185, 129, 1);
 }
+
 .register-register {
     width: 100%;
     height: 100vh;
@@ -34,10 +43,9 @@ html, body {
     height: auto;
     font-size: 40px;
     align-self: stretch;
-    font-style: Display Bold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 700;
+    font-weight: 1000;
     line-height: normal;
     font-stretch: normal;
     margin-right: 0;
@@ -55,9 +63,9 @@ html, body {
 }
 
 .register-textinput {
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
+    color: var(--Gray1);
+    width: var(--Standard-Element-Width);
+    height: var(--Standard-Element-Height);
     font-size: 12px;
     align-self: center;
     text-align: left;
@@ -70,13 +78,13 @@ html, body {
     margin-bottom: 10px;
     padding-right: 15px;
     padding-bottom: 15px;
-    background-color: rgba(217, 217, 217, 1);
+    background-color: var(--White1);
 }
 
 .register-textinput1 {
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
+    color: var(--Gray1);
+    width: var(--Standard-Element-Width);
+    height: var(--Standard-Element-Height);
     font-size: 12px;
     align-self: center;
     text-align: left;
@@ -89,13 +97,13 @@ html, body {
     margin-bottom: 10px;
     padding-right: 15px;
     padding-bottom: 15px;
-    background-color: rgba(217, 217, 217, 1);
+    background-color: var(--White1);
 }
 
 .register-textinput2 {
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
+    color: var(--Gray1);
+    width: var(--Standard-Element-Width);
+    height: var(--Standard-Element-Height);
     font-size: 12px;
     align-self: center;
     text-align: left;
@@ -108,13 +116,13 @@ html, body {
     margin-bottom: 10px;
     padding-right: 15px;
     padding-bottom: 15px;
-    background-color: rgba(217, 217, 217, 1);
+    background-color: var(--White1);
 }
 
 .register-textinput3 {
-    color: rgba(95, 95, 95, 1);
-    width: 284px;
-    height: 28px;
+    color: var(--Gray1);
+    width: var(--Standard-Element-Width);
+    height: var(--Standard-Element-Height);
     font-size: 12px;
     align-self: center;
     text-align: left;
@@ -127,12 +135,12 @@ html, body {
     margin-bottom: 10px;
     padding-right: 15px;
     padding-bottom: 15px;
-    background-color: rgba(217, 217, 217, 1);
+    background-color: var(--White1);
 }
 
 .register-login-button {
-    width: 284px;
-    height: 28px;
+    width: calc(var(--Standard-Element-Width) + var(--Input-Offset));
+    height: var(--Standard-Element-Height);
     display: flex;
     overflow: hidden;
     position: relative;
@@ -141,7 +149,7 @@ html, body {
     flex-shrink: 0;
     border-color: transparent;
     border-radius: 10px;
-    background-color: rgba(16, 185, 129, 1);
+    background-color: var(--Aqua1);
 }
 
 .register-text2 {
@@ -150,24 +158,22 @@ html, body {
     height: auto;
     font-size: 12px;
     align-self: center;
-    font-style: SemiBold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
     font-stretch: normal;
     text-decoration: none;
 }
 
 .register-text4 {
-    color: rgba(16, 185, 129, 1);
+    color: var(--Aqua1);
     height: auto;
     font-size: 12px;
     align-self: center;
-    font-style: SemiBold;
     text-align: center;
     font-family: Noto Sans;
-    font-weight: 600;
+    font-weight: 700;
     line-height: normal;
     font-stretch: normal;
     margin-right: 0;