fix: styling

metakgp · Jun 29, 2024 · 87499a8 · 87499a8
1 parent 599c0a5
commit 87499a8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 42 deletions.
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
@@ -5,7 +5,7 @@ import check from "../assets/check.png"
 import cross from "../assets/cross.png"
 
 export const Register: Component = () => {
-    const [getStatus, setStatus] = createSignal("Registering user...");
+    const [getStatus, setStatus] = createSignal("Initiating User Registration");
     const [getMsg, setMsg] = createSignal("");
     const [getIsLoad, setIsLoad] = createSignal(true)
     const [getIsErr, setIsErr] = createSignal(false)
@@ -16,37 +16,42 @@ export const Register: Component = () => {
             method:"GET",
             credentials: 'include'
         }).then((data) => {
-            setIsLoad(false);
             if(data.ok){
-                setStatus("User Registration Successful!")
-                setMsg("Check your institute email for login credentials")
+                setIsLoad(false);
+                setStatus("User Registration Successful")
+                setMsg("Credentials sent to your institute email")
 
                 setTimeout(() => {
                     document.location = "https://naarad.metakgp.org/login"
                 }, 3000);
             }
             else if(data.status === 409){
-                setStatus("User Already Registered!")
-                setMsg("Check your institute mail for login credentials")
+                setIsLoad(false);
+                setStatus("User Already Registered")
+                setMsg("Search your institute email for credentials")
 
                 setTimeout(() => {
-                    document.location = "https://naarad.metakgp.org/login"
+                    document.location = "https://naarad.metakgp.org"
                 }, 3000);
             }
             else if(data.status == 401){
+                setIsLoad(true);
+                setStatus("Redirecting to Heimdall")
+
                 document.location = "https://heimdall.metakgp.org?redirect_url=https://naarad.metakgp.org/signup"
             }
             else {
+                setIsLoad(false);
                 setIsErr(true)
-                setStatus("User Registration Error!")
+                setStatus("Failed to Register User")
                 data.text().then((bodyData) => {
                     setMsg(bodyData)
                 })
             }
         }).catch((err) => {
             setIsLoad(false);
             setIsErr(true)
-            setStatus("User Registration Error!")
+            setStatus("Failed to Register User")
             setMsg(err.toString())
         })
     })
@@ -56,21 +61,21 @@ export const Register: Component = () => {
             <div class="reg-main">
                 <div class="reg-title">
                     <div class="reg-title-name">
-                        MetaKGP Naarad
+                        Naarad
                     </div>
                     <div class="reg-title-desc">
-                        Naarad Registration for accessing notifications
+                        Delivering real-time notices to KGPians
                     </div>
                 </div>
                 <div class="reg-status">
-                    <div class="reg-status-title">{getStatus()}</div>
                     <div class="reg-status-svg">
                         {getIsLoad() == true ? <Spinner /> : (getIsErr() == true ? <img src={cross}/> : <img src={check} />)}
                     </div>
+                    <div class="reg-status-title">{getStatus()}</div>
                     <div class="reg-status-text">{getMsg()}</div>
                 </div>
                 <div class="reg-footer">
-                    <h3 class="reg-footer">Made with ❤️ and {"</>"} by <a href="https://github.com/metakgp/naarad" target="_blank">MetaKGP</a></h3>
+                    <h3 class="reg-footer">Made with ❤️ and {"</>"} by <a href="https://github.com/metakgp/naarad" target="_blank">Metakgp</a></h3>
                 </div>
             </div>
         </div>

diff --git a/frontend/src/styles/register.scss b/frontend/src/styles/register.scss
@@ -9,9 +9,10 @@ $medium: 1024px;
 
     .reg-main{
         padding: 1.5rem 2rem;
-        width: 25%;
+        height: 500px;
+        width: 400px;
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         flex-direction: column;
         border-radius: 1em;
         border: 2px solid #000;
@@ -27,63 +28,51 @@ $medium: 1024px;
             margin-bottom: 2rem;
 
             .reg-title-name{
-                font-size: 3rem;
+                font-size: 2.5rem;
                 font-weight: 600;
                 padding-bottom: 0.2rem;
             }
 
             .reg-title-desc{
-                font-size: 2vh;
+                font-size: 1rem;
                 color: hsl(215, 20.2%, 65.1%);
             }
         }
 
         .reg-status{
-            height: 65%;
-
             .reg-status-title{
+                margin-top: 2rem;
                 font-size: 1.5rem;
-                font-weight: 600;
-                margin-bottom: 1rem;
+                font-weight: 500;
             }
 
             .reg-status-svg{
-                height: 70%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 img{
-                    max-height: 50%;
-                    max-width: 50%;
+                    height: 100px;
+                    width: 100px;
                     display: block;
-                    height: auto;
-                    width: auto;
                 }
             }
 
             .reg-status-text{
-                margin-top: 1rem;
+                margin-top: 0.2rem;
                 display: flex;
                 justify-content: center;
                 align-items: end;
-                font-size: 1.5rem;
-                font-size: 600;
+                font-size: 1.15rem;
+                font-weight: 400;
+                color: hsl(215, 20.2%, 65.1%);
             }
         }
 
         .reg-footer{
-            margin-top: 2rem;
-            height: 5%;
+            margin-top: 1.5rem;
             a{
                 color: #fff;
             }
         }
-
-
-        @media screen and (max-width: $medium){
-            padding: 5%;
-            height: 70%;
-            width: 80%;
-        }
     }
 }
diff --git a/frontend/src/styles/spinner.scss b/frontend/src/styles/spinner.scss
@@ -1,7 +1,5 @@
 svg{
-    max-width: 95%;
-    max-height: 95%;
-    height: auto;
-    width: auto;
+    width: 100px;
+    height: 100px;
     display: block;
 }