From 02abfb53fa2999fc72aba621622909d73540c28b Mon Sep 17 00:00:00 2001
From: Caleb Okpara <cokpara@insistglobal.com>
Date: Thu, 19 May 2022 15:05:57 +0000
Subject: [PATCH] Add styling to login page for account

---
 Accounts/src/App.scss                       | 58 +++++++++------------
 Accounts/src/App.tsx                        |  6 +++
 Accounts/src/Pages/Login.tsx                | 13 +----
 CommonUI/src/Components/Forms/BasicForm.tsx |  4 ++
 4 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/Accounts/src/App.scss b/Accounts/src/App.scss
index f1fbf2bc57..c2d8c6e99f 100644
--- a/Accounts/src/App.scss
+++ b/Accounts/src/App.scss
@@ -62,8 +62,16 @@ body {
 .brand {
     position: absolute;
     top: 5%;
-    left: 35%;
-    transform: translate(-40%, -20%);
+    left: 50%;
+    transform: translateX(-55%);
+
+    @include responsive($xs) {
+        top: 6%;
+    }
+
+    @include responsive($lg) {
+        top: 5%;
+    }
 
     img {
         width: 200px;
@@ -71,39 +79,12 @@ body {
     }
 }
 
-.signup_panel {
-    position: absolute;
-    bottom: 19%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 1.4rem;
-    z-index: 25;
-    transition: $transition;
-
-    @include responsive($xs) {
-        bottom: 10%;
-    }
-
-    @include responsive($sm) {
-        bottom: 15%;
-    }
-
-    span {
-        color: $lightBlue;
-        cursor: pointer;
-
-        &:hover {
-            color: darken($lightBlue, 50%);
-        }
-    }
-}
-
 form {
     height: fit-content;
     position: absolute;
-    top: 35%;
+    top: 50%;
     left: 50%;
-    transform: translate(-50%, -35%);
+    transform: translate(-50%, -50%);
     background-color: $bglight;
     border-radius: 5px;
     box-shadow: 1px 2px 10px lighten($bgDark, 85%);
@@ -253,7 +234,6 @@ form {
 
     .actions {
         margin: 15px 0;
-        text-align: center;
 
         p {
             font-size: 1.4rem;
@@ -262,6 +242,14 @@ form {
             cursor: pointer;
             transition: $transition;
 
+            &:last-child {
+                font-size: 1.2rem;
+            }
+
+            span {
+                color: lighten($bgDark, 20%);
+            }
+
             &:hover {
                 color: darken($lightBlue, 50%);
             }
@@ -290,9 +278,13 @@ form {
 
     p {
         padding-right: 20px;
-        padding-bottom: 10px;
+        padding-bottom: 30px;
         cursor: pointer;
 
+        @include responsive($xs) {
+            padding-bottom: 15px;
+        }
+
         a {
             color: lighten($bgDark, 50%);
 
diff --git a/Accounts/src/App.tsx b/Accounts/src/App.tsx
index 49fe88e9a5..5c740f8824 100644
--- a/Accounts/src/App.tsx
+++ b/Accounts/src/App.tsx
@@ -6,6 +6,12 @@ import LoginPage from './Pages/Login';
 function App() {
     return (
         <div className="App">
+            <div className="brand">
+                <img
+                    alt="OneUpTime"
+                    src="/assets/img/logos/OneUptimeSVG/3.svg"
+                />
+            </div>
             <Router>
                 <Routes>
                     <Route path="/" element={<LoginPage />} />
diff --git a/Accounts/src/Pages/Login.tsx b/Accounts/src/Pages/Login.tsx
index 212e3bdcf2..1614edf74b 100644
--- a/Accounts/src/Pages/Login.tsx
+++ b/Accounts/src/Pages/Login.tsx
@@ -9,12 +9,6 @@ const LoginPage: FunctionComponent = () => {
 
     return (
         <>
-            <div className="brand">
-                <img
-                    alt="OneUpTime"
-                    src="/assets/img/logos/OneUptimeSVG/3.svg"
-                />
-            </div>
             <BasicModelForm<User>
                 model={user}
                 id="login-form"
@@ -38,12 +32,7 @@ const LoginPage: FunctionComponent = () => {
                 submitButtonText={'Login'}
                 title={'Sign in to your account'}
             />
-            <div className="signup_panel">
-                Don&apos;t have an account?{' '}
-                <span>
-                    <Link to="/register">Sign up</Link>
-                </span>
-            </div>
+
             <div className="footer">
                 <p>
                     <Link to="/">&copy; OneUptime</Link>
diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx
index bcce7bd654..2fc73ffec8 100644
--- a/CommonUI/src/Components/Forms/BasicForm.tsx
+++ b/CommonUI/src/Components/Forms/BasicForm.tsx
@@ -82,6 +82,10 @@ const BasicForm = <T extends Object>(
                         <div className="actions">
                             <p>Forgot your password?</p>
                             <p>Use single sign-on (SSO) instead</p>
+                            <p>
+                                <span>Don&apos;t have an account? </span> Sign
+                                up
+                            </p>
                         </div>
                     </Form>
                 )}