feat: UI changes as per GYFT UI

frontend/src/App.tsx

@@ -1,18 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MultiForm from "./components/MultiForm";
 import { Toaster } from "react-hot-toast";
+import Circles from "./components/Circles";
+import hero from "./assets/hero-img.png";
+import Modal from "./components/Modal";
 
 const App: React.FC = () => {
+    const [openModal, setOpenModal] = useState(false);
     return (
         <>
+            <main>
+                <Circles />
+                <div id="wrapper">
+                    <div className="wrapper-item">
+                        <div id="wrapped">
+                            <Header />
+                            <MultiForm />
+                        </div>
+                        <Footer openModal={setOpenModal} />
+                    </div>
+                    <aside>
+                        <img src={hero} alt="." />
+                    </aside>
+                </div>
+            </main>
+            {openModal && <Modal closeModal={setOpenModal} />}
             <Toaster position="bottom-center" />
-            <div>
-                <Header />
-                <MultiForm />
-            </div>
-            <Footer />
         </>
     );
 };

frontend/src/AppContext/AppContext.tsx

@@ -22,20 +22,20 @@ interface IContext {
 }
 
 const DEFAULT_USER: IUser = {
-    rollNo: "",
+    rollNo: sessionStorage.getItem("rollNo") || "",
     password: "",
     securityQuestion: "",
     securityAnswer: "",
-    ssoToken: sessionStorage.getItem("ssoToken"),
-    sessionToken: sessionStorage.getItem("sessionToken"),
+    ssoToken: sessionStorage.getItem("ssoToken") || "",
+    sessionToken: sessionStorage.getItem("sessionToken") || "",
 };
 
 export const AppContext = createContext<IContext | null>(null);
 
 export const AppProvider: React.FC<IProps> = ({ children }) => {
     const [authState, setAuth] = useState<IAuth>({
         user: DEFAULT_USER,
-        currentStep: 0,
+        currentStep: DEFAULT_USER.ssoToken ? 2 : 0,
     });
 
     const logout = () => {

frontend/src/components/Circles.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+let circles_list = [
+    {
+        position: [10, 15],
+        color: "0 0 400px 140px rgba(0, 133, 255, 1)",
+    },
+    {
+        position: [10, 90],
+        color: "0 0 100px 100px rgba(0, 255, 102, 0.72)",
+    },
+    { position: [40, 40], color: "0 0 150px 100px #FFD447" },
+    {
+        position: [100, 10],
+        color: "0 0 250px 150px rgba(204, 0, 255, 0.75)",
+    },
+    {
+        position: [80, 90],
+        color: "0 0 200px 80px rgba(204, 0, 255, 1)",
+    },
+];
+
+const Circles: React.FC = () => {
+    return (
+        <div className="circle-container">
+            {circles_list.map((x) => (
+                <>
+                    <div
+                        className="circle"
+                        style={{
+                            top: `${x.position[0]}%`,
+                            left: `${x.position[1]}%`,
+                            boxShadow: x.color,
+                        }}
+                    />
+                </>
+            ))}
+        </div>
+    );
+};
+export default Circles;

frontend/src/components/Electives.tsx

@@ -1,14 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import { BACKEND_URL } from "./url";
 import { toast } from "react-hot-toast";
 import { useAppContext } from "../AppContext/AppContext";
+import Spinner from "./Spinner";
 
 const Electives: React.FC = () => {
     const { user } = useAppContext();
-
+    const [isBreadthDownloading, setIsBreadthDownloading] = useState(false);
+    const [isDepthDownloading, setIsDepthDownloading] = useState(false);
     const getElective = async (elective: string) => {
         const formData = new URLSearchParams();
         formData.append("roll_number", user.rollNo);
+        {
+            elective == "breadth"
+                ? setIsBreadthDownloading(true)
+                : setIsDepthDownloading(true);
+        }
 
         try {
             const res = await fetch(`${BACKEND_URL}/elective/${elective}`, {
@@ -38,39 +45,37 @@ const Electives: React.FC = () => {
         } catch (error) {
             toast.error(`Error fetching ${elective} electives!`);
             console.error("Error fetching breadth electives:", error);
+        } finally {
+            {
+                elective == "breadth"
+                    ? setIsBreadthDownloading(false)
+                    : setIsDepthDownloading(false);
+            }
         }
     };
 
     return (
         <div className="electives-container">
             <h2>Download Electives</h2>
+            <p>
+                Below are the filtered electives that are available as per your
+                slots
+            </p>
             <div className="electives">
-                <div className="elective-item">
-                    <h4>Breadth</h4>
-                    <p>
-                        Click download to save the excel file for available
-                        breadth electives.
-                    </p>
-                    <button
-                        className="download-button"
-                        onClick={() => getElective("breadth")}
-                    >
-                        Download
-                    </button>
-                </div>
-                <div className="elective-item">
-                    <h4>Depth</h4>
-                    <p>
-                        Click download to save the excel file for available
-                        depth electives.
-                    </p>
-                    <button
-                        className="download-button"
-                        onClick={() => getElective("depth")}
-                    >
-                        Download
-                    </button>
-                </div>
+                <button
+                    className="download-button"
+                    onClick={() => getElective("breadth")}
+                    disabled={isBreadthDownloading}
+                >
+                    {isBreadthDownloading ? <Spinner /> : "Download Breadth"}
+                </button>
+                <button
+                    className="download-button"
+                    onClick={() => getElective("depth")}
+                    disabled={isDepthDownloading}
+                >
+                    {isDepthDownloading ? <Spinner /> : "Download Depth"}
+                </button>
             </div>
         </div>
     );

frontend/src/components/Footer.tsx

@@ -1,10 +1,23 @@
 import React from "react";
-import About from "./About";
+import { useAppContext } from "../AppContext/AppContext";
+type props = {
+    openModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const Footer: React.FC<props> = ({ openModal }) => {
+    const { logout, user } = useAppContext();
 
-const Footer: React.FC = () => {
     return (
         <div>
-            <About />
+            <div className="help">
+                <button className="help-button" onClick={() => openModal(true)}>
+                    Help 💡
+                </button>
+                {user.ssoToken && (
+                    <button onClick={logout} className="logout-button">
+                        Logout
+                    </button>
+                )}
+            </div>
             <footer>
                 <p>
                     Maintained by{" "}

frontend/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import metakgpLogo from "../assets/metakgp-logo-white.png";
+import metakgpLogo from "../assets/metakgp-logo.png";
 
 const Header: React.FC = () => {
     return (

frontend/src/components/RollForm.tsx

@@ -77,7 +77,7 @@ const RollForm: React.FC = () => {
         <>
             <form onSubmit={handleSubmit(getSecurityQuestion)}>
                 <div className="input-item">
-                    <label>Roll number: </label>
+                    <label>Roll number :</label>
                     <input
                         type="text"
                         placeholder="Roll number for ERP"
@@ -94,7 +94,7 @@ const RollForm: React.FC = () => {
                     </span>
                 </div>
                 <div className={`input-item`}>
-                    <label>Password: </label>
+                    <label>Password :</label>
                     <input
                         type="password"
                         placeholder="Password for ERP login"

frontend/src/components/SecurityQueForm.tsx

@@ -130,7 +130,7 @@ const SecurityQueForm: React.FC = () => {
     return (
         <form className="login-form" onSubmit={handleSubmit(onSubmit)}>
             <div className="input-item">
-                <label>{user.securityQuestion || "\u00A0"}</label>
+                <label>{user.securityQuestion || "\u00A0"} :</label>
                 <input
                     type="password"
                     placeholder="Enter your answer"
@@ -146,7 +146,7 @@ const SecurityQueForm: React.FC = () => {
                 </span>
             </div>
             <div className="input-item">
-                <label>Enter OTP</label>
+                <label>Enter OTP :</label>
                 <input
                     type="text"
                     placeholder="Enter OTP sent to email"

frontend/src/components/Spinner.tsx

@@ -7,9 +7,10 @@ export default function Spinner(props: SVGProps<SVGSVGElement>) {
       width="1em"
       height="1em"
       viewBox="0 0 24 24"
+      className="spinner"
       {...props}
     >
-      <g stroke="currentColor">
+      <g stroke="white">
         <circle
           cx={12}
           cy={12}

frontend/src/styles/footer.scss

@@ -1,9 +1,33 @@
 footer {
-  font-size: 1.2rem;
-  margin-top: 1rem;
-  .metakgp {
-    font-family: $metakgp-font;
-    font-weight: 800;
     font-size: 1.2rem;
-  }
+    margin-top: 1rem;
+    text-align: center;
+    .metakgp {
+        font-family: $metakgp-font;
+        font-weight: 800;
+        font-size: 1.2rem;
+    }
+    a {
+        text-decoration: none;
+    }
+}
+.help {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    .help-button,
+    .logout-button {
+        margin-top: 1rem;
+        border: none;
+        width: fit-content;
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        border-radius: 8px;
+        color: white !important;
+        font-weight: bold;
+        background-color: #989898;
+        box-shadow: none;
+        cursor: pointer;
+    }
 }

frontend/src/styles/header.scss

@@ -1,18 +1,18 @@
 .header {
-  @include flexbox(column, center, center, 2rem);
-  margin-bottom: 2rem;
-  .header-logo {
-    max-width: 7rem;
-    img {
-      width: 100%;
-      height: auto;
+    @include flexbox(column, center, center, 0);
+    margin-bottom: 2rem;
+    .header-logo {
+        img {
+            width: 100%;
+            height: auto;
+        }
     }
-  }
-  .header-title {
-    font-size: 2.5em;
-    line-height: 1;
-    #word {
-      font-family: $cursive-font;
+    .header-title {
+        font-size: 2rem;
+        line-height: 1;
+        #word {
+            font-family: $cursive-font;
+            font-size: 3.5rem;
+        }
     }
-  }
 }