Merge pull request #15 from metakgp/chirag/fix-frontend

Fix frontend

frontend/src/App.tsx

@@ -1,12 +1,11 @@
 import type { Component } from 'solid-js'
-import logo from './logo.svg';
-import styles from './App.module.css';
 import { Route, Router } from '@solidjs/router';
 import { Register } from './pages/Register';
+import './styles/index.scss';
 
 const App: Component = () => {
   return (
-    <div class={styles.App}>
+    <div>
       <Router>
         <Route path="/" component={Register} />
       </Router>

frontend/src/components/Spinner.tsx

@@ -1,5 +1,4 @@
 import { Component } from "solid-js";
-import "./Spinner.scss"
 export const Spinner: Component = () => {
 
     return (

frontend/src/pages/Register.tsx

@@ -1,6 +1,5 @@
 import { Component, createSignal, onMount } from "solid-js";
 import { BACKEND_URL } from "../constants";
-import "../styles/Register.scss"
 import { Spinner } from "../components/Spinner";
 import check from "../assets/check.png"
 import cross from "../assets/cross.png"
@@ -10,7 +9,6 @@ export const Register: Component = () => {
     const [getMsg, setMsg] = createSignal("");
     const [getIsLoad, setIsLoad] = createSignal(true)
     const [getIsErr, setIsErr] = createSignal(false)
-    const [getIsDup, setIsDup] = createSignal(false)
 
 
     onMount(() => {
@@ -28,7 +26,6 @@ export const Register: Component = () => {
                 }, 3000);
             }
             else if(data.status === 409){
-                setIsDup(true);
                 setStatus("User Already Registered!")
                 setMsg("Check your institute mail for login credentials")
 
@@ -46,6 +43,11 @@ export const Register: Component = () => {
                     setMsg(bodyData)
                 })
             }
+        }).catch((err) => {
+            setIsLoad(false);
+            setIsErr(true)
+            setStatus("User Registration Error!")
+            setMsg(err.toString())
         })
     })
 
@@ -63,7 +65,7 @@ export const Register: Component = () => {
                 <div class="reg-status">
                     <div class="reg-status-title">{getStatus()}</div>
                     <div class="reg-status-svg">
-                        {getIsLoad() == true ? <Spinner /> : (getIsDup() == true ? <img src={cross} /> : (getIsErr() == true ? <img src={cross}/> : <img src={check} />))}
+                        {getIsLoad() == true ? <Spinner /> : (getIsErr() == true ? <img src={cross}/> : <img src={check} />)}
                     </div>
                     <div class="reg-status-text">{getMsg()}</div>
                 </div>

frontend/src/styles/base.scss

@@ -0,0 +1,13 @@
+$font-family: system-ui, Arial, sans-serif;
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: $font-family;
+    background-color: #1e1e2f;
+    color: #fff;
+}

frontend/src/styles/index.scss

@@ -0,0 +1,3 @@
+@import './base.scss';
+@import './spinner.scss';
+@import './register.scss';

frontend/src/styles/Register.scss → frontend/src/styles/register.scss

@@ -1,36 +1,35 @@
-@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
 $medium: 1024px;
 
 .reg{
     width: 100vw;
     height: 100vh;
-    background-color: #1e1e2c;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: white;
+
     .reg-main{
-        padding: 2%;
-        height: 60%;
+        padding: 1.5rem 2rem;
         width: 25%;
         display: flex;
         justify-content: center;
         flex-direction: column;
         border-radius: 1em;
-        border: solid #000;
+        border: 2px solid #000;
         background-color: #1e1e2f;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        text-align: center;
+
         .reg-title{
-            height: 35%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            margin-bottom: 2rem;
+
             .reg-title-name{
-                font-family: "Titillium Web", sans-serif;
-                font-size: 5vh;
+                font-size: 3rem;
                 font-weight: 600;
-                padding-bottom: 5%;
+                padding-bottom: 0.2rem;
             }
 
             .reg-title-desc{
@@ -41,12 +40,11 @@ $medium: 1024px;
 
         .reg-status{
             height: 65%;
-            margin: 5% 10% 5% 10%;
 
             .reg-status-title{
-                height: 10%;
-                font-size: 1.75vh;
-                font-weight: 900;
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 1rem;
             }
 
             .reg-status-svg{
@@ -55,24 +53,26 @@ $medium: 1024px;
                 justify-content: center;
                 align-items: center;
                 img{
-                    max-height: 95%;
-                    max-width: 95%;
+                    max-height: 50%;
+                    max-width: 50%;
                     display: block;
                     height: auto;
                     width: auto;
                 }
             }
 
             .reg-status-text{
-                height: 20%;
+                margin-top: 1rem;
                 display: flex;
                 justify-content: center;
                 align-items: end;
+                font-size: 1.5rem;
+                font-size: 600;
             }
         }
 
         .reg-footer{
-            font-family: "Titillium Web", sans-serif;
+            margin-top: 2rem;
             height: 5%;
             a{
                 color: #fff;