REFACTOR: Repositioning of Components in Project Structure

frontend/src/components/Auth/AuthModal.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from "react";
-import { ToggleButton } from "../Layout/Button";
+import { ToggleButton } from "../Input/Button";
-import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
+import {
+  LogIn as LogInIcon,
+  User as UserIcon,
+  CircleHelp as ForgotIcon,
+} from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
 import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,14 +27,19 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   };
 
   const authSwitch = () => {
-
     const formMap: { [key: string]: JSX.Element } = {
-      Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
+      Login: (
-      Register: <RegisterForm onSubmit={(handleSubmit)} />,
+        <LoginForm
-      Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
+          onSubmit={handleSubmit}
+          onForgotPassword={() => setSelectedTab("Forgot")}
+        />
+      ),
+      Register: <RegisterForm onSubmit={handleSubmit} />,
+      Forgot: <ForgotPasswordForm onSubmit={handleSubmit} />,
     };
     return formMap[selectedTab] || <div>Please select a valid option</div>;
-    {/*
+    {
+      /*
     if (selectedTab === "Login") {
       return  <LoginForm onSubmit={(handleSubmit)}/>
     } else if (selectedTab === "Register") {
@@ -39,9 +48,9 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
       return  <ForgotPasswordForm onSubmit={(handleSubmit)}/>
     } else
       return <div> Please select a valid icon</div>
-      */}
+      */
-
+    }
-  }
+  };
 
   return (
     <>
@@ -52,7 +61,8 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
       ></div>
 
       {/*Container*/}
-      <div id="auth-modal"
+      <div
+        id="auth-modal"
         className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
         h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating "
       >
@@ -78,8 +88,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
             <UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
             Register
           </ToggleButton>
-
-
         </div>
 
         <div
@@ -104,18 +112,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
                 ✕
               </button>
             </div>
-            <>
+            <>{authSwitch()}</>
-              {authSwitch()}
-            </>
-
-
-
-
           </div>
         </div>
       </div>
-
-
     </>
   );
 };

frontend/src/components/Auth/ForgotPasswordForm.tsx

@@ -1,95 +1,102 @@
 import React, { useState } from "react";
-import Input from "../Layout/Input";
+import Input from "../Input/Input";
-import Button from "../Layout/Button";
+import Button from "../Input/Button";
 
 interface ForgotPasswordProps {
-    email?: string;
+  email?: string;
 }
 
 interface SubmitProps {
-    onSubmit: () => void;
+  onSubmit: () => void;
-  }
+}
 
-const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
+const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
-    const [email, setEmail] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
-    const [errors, setErrors] = useState<ForgotPasswordProps>({});
+  const [errors, setErrors] = useState<ForgotPasswordProps>({});
 
-    const confirmPasswordReset = () => {
+  const confirmPasswordReset = () => {
-        alert(`Email has been sent`);
+    alert(`Email has been sent`);
+  };
 
-    };
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (errors.email) {
+      setErrors((prev) => ({ ...prev, email: undefined }));
+    }
+  };
 
-    const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const validateEmail = (): boolean => {
-        setEmail(e.target.value);
+    const newErrors: ForgotPasswordProps = {};
-        if (errors.email) {
+    if (!email) {
-            setErrors((prev) => ({ ...prev, email: undefined }));
+      newErrors.email = "Email is required.";
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = "Please enter a valid email address.";
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (validateEmail()) {
+      try {
+        const response = await fetch(`/api/user/forgot_password/${email}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(
+            data.message || "An error has occurred while resetting"
+          );
+        } else {
+          confirmPasswordReset();
         }
-    };
+      } catch (error: any) {
+        console.error("Password reset error:", error.message);
+        setErrors((prev) => ({
+          ...prev,
+          general: error.message || "An unexpected error occurred.",
+        }));
+      }
+    }
+  };
 
+  return (
+    <div className="h-screen flex items-center justify-center">
+      <div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
+        <h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
+        <form
+          onSubmit={handleSubmit}
+          className="flex flex-col items-center space-y-4 w-full m-6"
+        >
+          <Input
+            name="email"
+            type="email"
+            placeholder="Enter your email"
+            value={email}
+            onChange={handleEmailChange}
+            extraClasses={`appearance-none bg-transparent text-black m-5 ${
+              errors.email ? "border-red-500" : ""
+            }`}
+          />
 
-    const validateEmail = (): boolean => {
+          {errors.email && (
-        const newErrors: ForgotPasswordProps = {};
+            <p className="text-red-500 mt-2 text-sm">{errors.email}</p>
-        if (!email) {
+          )}
-            newErrors.email = "Email is required.";
-        } else if (!/\S+@\S+\.\S+/.test(email)) {
-            newErrors.email = "Please enter a valid email address.";
-        }
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
 
-    const handleSubmit = async (e: React.FormEvent) => {
+          <Button type="submit" extraClasses="text-black">
-        e.preventDefault();
+            Send Reset Link
-
+          </Button>
-        if (validateEmail()) {
+        </form>
-            try {
+      </div>
-                const response = await fetch(`/api/user/forgot_password/${email}`, {
+    </div>
-                    method: "POST",
+  );
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    credentials: "include",
-                });
-
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.message || "An error has occurred while resetting");
-                } else {
-                    confirmPasswordReset();
-                }
-            } catch (error: any) {
-                console.error("Password reset error:", error.message);
-                setErrors((prev) => ({
-                    ...prev,
-                    general: error.message || "An unexpected error occurred.",
-
-                }));
-            }
-        }
-    };
-
-    return (
-        <div className="h-screen flex items-center justify-center">
-            <div className="h-[25em] w-[20em] flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-6">
-                <h2 className="text-2xl font-bold text-center mb-4">Forgot Password</h2>
-                <form onSubmit={handleSubmit} className="flex flex-col items-center space-y-4 w-full m-6">
-                    <Input
-                        name="email"
-                        type="email"
-                        placeholder="Enter your email"
-                        value={email}
-                        onChange={handleEmailChange}
-                        extraClasses={`appearance-none bg-transparent text-black m-5 ${errors.email ? "border-red-500" : ""}`}
-                        />
-    
-                    {errors.email && <p className="text-red-500 mt-2 text-sm">{errors.email}</p>}
-    
-                    <Button type="submit" extraClasses="text-black">Send Reset Link</Button>
-                </form>
-            </div>
-        </div>
-    );
-    
 };
 
 export default ForgotPasswordForm;

frontend/src/components/Auth/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import Input from "../Layout/Input";
+import Input from "../Input/Input";
-import Button, { ToggleButton } from "../Layout/Button";
+import Button, { ToggleButton } from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
 import { CircleHelp as ForgotIcon } from "lucide-react";
@@ -101,8 +101,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
 
   return (
     <>
-      <div className=" flex flex-col items-center p-10">
+      <div className="flex flex-col items-center p-10">
-        <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
+        <h1 className="flex flex-col text-white text-[2.5em] font-[800]">Login</h1>
         <div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full 
        md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
 
@@ -112,22 +112,30 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
             className="flex flex-col"
           >
             {errors.general && (
-              <p className="text-red-500 text-sm text-center text-[0.75em]">{errors.general}</p>
+              <p className="text-red-500 text-sm text-center text-[0.75em]">
+                {errors.general}
+              </p>
             )}
 
             {errors.username && (
-              <p className="text-red-500 text-center text-[0.75em]">{errors.username}</p>
+              <p className="text-red-500 text-center text-[0.75em]">
+                {errors.username}
+              </p>
             )}
             <Input
               name="username"
               placeholder="Username"
               value={formData.username}
               onChange={handleInputChange}
-              extraClasses={`w-full mb-[2em] p-3 ${errors.username ? "border-red-500" : ""}`}
+              extraClasses={`w-full mb-[2em] p-3 ${
+                errors.username ? "border-red-500" : ""
+              }`}
             />
 
             {errors.password && (
-              <p className="text-red-500 text-center text-[0.75em]">{errors.password}</p>
+              <p className="text-red-500 text-center text-[0.75em]">
+                {errors.password}
+              </p>
             )}
 
             <div className="mb-[2em]">
@@ -137,25 +145,28 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
                 placeholder="Password"
                 value={formData.password}
                 onChange={handleInputChange}
-                extraClasses={`w-full p-3 ${errors.password ? "border-red-500" : ""}`}
+                extraClasses={`w-full p-3 ${
-              >
+                  errors.password ? "border-red-500" : ""
-
+                }`}
-              </Input>
+              ></Input>
               <div className="flex flex-row">
-              <label className="flex w-full items-center justify-start cursor-pointer w-10px">
+                <label className="flex w-full items-center justify-start cursor-pointer w-10px">
-                <input
+                  <input
-                  type="checkbox"
+                    type="checkbox"
-                  className="accent-purple-600 w-3 h-3 mr-1"
+                    className="accent-purple-600 w-3 h-3 mr-1"
-                />
+                  />
-                <span className="sm:text-[0.5em] md:text-[0.8em]">Remember me</span>
+                  <span className="sm:text-[0.5em] md:text-[0.8em]">
-              </label>
+                    Remember me
-              <button
+                  </span>
-                type="button"
+                </label>
-                className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
+                <button
-                onClick={onForgotPassword}>
+                  type="button"
-                <ForgotIcon size={16} className="flex flex-row mr-1" />
+                  className="flex w-full justify-end items-center justify-items-end sm:text-[0.5em] md:text-[0.8em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
-                <span> Forgot Password </span>
+                  onClick={onForgotPassword}
-              </button>
+                >
+                  <ForgotIcon size={16} className="flex flex-row mr-1" />
+                  <span> Forgot Password </span>
+                </button>
               </div>
             </div>
             <Button type="submit">Login</Button>

frontend/src/components/Auth/PasswordResetForm.tsx

@@ -1,122 +1,125 @@
 import React, { useState } from "react";
-import Input from "../Layout/Input";
+import Input from "../Input/Input";
-import Button from "../Layout/Button";
+import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
 
 interface ResetPasswordData {
-    newPassword: string;
+  newPassword: string;
-    confirmNewPassword: string;
+  confirmNewPassword: string;
 }
 
 interface ResetPasswordErrors {
-    newPasswordError?: string;
+  newPasswordError?: string;
-    confirmNewPasswordError?: string;
+  confirmNewPasswordError?: string;
 }
 
 interface SubmitProps {
-    onSubmit: () => void;
+  onSubmit: () => void;
-    token: string;
+  token: string;
 }
 
 const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
+  const [errors, setErrors] = useState<ResetPasswordErrors>({});
 
-    const [errors, setErrors] = useState<ResetPasswordErrors>({});
+  const [resetData, setResetData] = useState<ResetPasswordData>({
+    newPassword: "",
+    confirmNewPassword: "",
+  });
 
-    const [resetData, setResetData] = useState<ResetPasswordData>({
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        newPassword: "",
+    const { name, value } = e.target;
-        confirmNewPassword: "",
+    setResetData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const validateResetForm = (): boolean => {
+    const newErrors: ResetPasswordErrors = {};
+
+    Object.keys(resetData).forEach((key) => {
+      if (!resetData[key as keyof ResetPasswordData]) {
+        newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
+      }
     });
-
+    if (resetData.newPassword.length < 8) {
-
+      newErrors.newPasswordError =
-    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        "Password must be at least 8 characters long";
-        const { name, value } = e.target;
-        setResetData((prev) => ({
-            ...prev,
-            [name]: value,
-        }));
-    };
-
-    const validateResetForm = (): boolean => {
-        const newErrors: ResetPasswordErrors = {};
-
-        Object.keys(resetData).forEach((key) => {
-            if (!resetData[key as keyof ResetPasswordData]) {
-                newErrors[key as keyof ResetPasswordErrors] = "Confirm your password";
-            }
-        });
-        if (resetData.newPassword.length < 8) {
-            newErrors.newPasswordError = "Password must be at least 8 characters long";
-        }
-        if (resetData.newPassword !== resetData.confirmNewPassword) {
-            newErrors.confirmNewPasswordError = "Passwords do not match";
-        }
-
-
-        setErrors(newErrors);
-        return Object.keys(newErrors).length === 0;
-    };
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        onSubmit();
-
-        if (validateResetForm()) {
-            try {
-                const response = await fetch(`/api/user/reset_password/${token}/${resetData.newPassword}`, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    credentials: "include",
-                    body: JSON.stringify(resetData),
-                });
-
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.error || "An error has occurred while resetting");
-                } else {
-                    onSubmit(true)
-                }
-            } catch (error: any) {
-                console.error("Password reset error:", error.message);
-                setErrors((prev) => ({
-                    ...prev,
-                    general: error.message || "An unexpected error occurred.",
-                    
-                }));
-        }
     }
+    if (resetData.newPassword !== resetData.confirmNewPassword) {
+      newErrors.confirmNewPasswordError = "Passwords do not match";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit();
+
+    if (validateResetForm()) {
+      try {
+        const response = await fetch(
+          `/api/user/reset_password/${token}/${resetData.newPassword}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            credentials: "include",
+            body: JSON.stringify(resetData),
+          }
+        );
+
+        if (!response.ok) {
+          const data = await response.json();
+          throw new Error(
+            data.error || "An error has occurred while resetting"
+          );
+        } else {
+          onSubmit(true);
+        }
+      } catch (error: any) {
+        console.error("Password reset error:", error.message);
+        setErrors((prev) => ({
+          ...prev,
+          general: error.message || "An unexpected error occurred.",
+        }));
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Input
+        name="newPassword"
+        type="password"
+        placeholder="New Password"
+        value={resetData.newPassword}
+        onChange={handlePasswordChange}
+        extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
+      />
+
+      {errors.confirmNewPasswordError && (
+        <p className="text-red-500 mt-3 text-sm">
+          {errors.confirmNewPasswordError}
+        </p>
+      )}
+      <Input
+        name="confirmNewPassword"
+        type="password"
+        placeholder="Confirm Password"
+        value={resetData.confirmNewPassword}
+        onChange={handlePasswordChange}
+        extraClasses={`${
+          errors.confirmNewPasswordError ? "border-red-500" : ""
+        }`}
+      />
+
+      <Button type="submit">Reset Password</Button>
+    </form>
+  );
 };
 
-    return (
+export default PasswordResetForm;
-
-        <form onSubmit={handleSubmit}>
-            <Input
-                name="newPassword"
-                type="password"
-                placeholder='New Password'
-                value={resetData.newPassword}
-                onChange={handlePasswordChange}
-                extraClasses={`${errors.newPasswordError ? "border-red-500" : ""}`}
-            />
-
-            {errors.confirmNewPasswordError && (
-                <p className="text-red-500 mt-3 text-sm">{errors.confirmNewPasswordError}</p>
-            )}
-            <Input
-                name="confirmNewPassword"
-                type="password"
-                placeholder="Confirm Password"
-                value={resetData.confirmNewPassword}
-                onChange={handlePasswordChange}
-                extraClasses={`${errors.confirmNewPasswordError ? "border-red-500" : ""}`}
-            />
-
-            <Button type="submit">Reset Password</Button>
-
-        </form>
-
-    );
-};
-
-export default PasswordResetForm

frontend/src/components/Auth/RegisterForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import Input from "../Layout/Input";
+import Input from "../Input/Input";
-import Button from "../Layout/Button";
+import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
 import GoogleLogin from "./OAuth";
 
@@ -111,10 +111,13 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
     <>
       <div className="mb-2">
         <div className="flex flex-col items-center p-[2.5rem]">
-          <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
+          <h1 className="flex flex-col text-white text-[2.5em] font-[800]">
-          <div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full 
+            Register
-          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
+          </h1>
-
+          <div
+            className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full 
+          md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10"
+          >
             <form
               onSubmit={handleSubmit}
               id="register-form"
@@ -122,24 +125,32 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
             >
               <div className="relative w-full">
                 {errors.general && (
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.general}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                    {errors.general}
+                  </p>
                 )}
 
                 {errors.username && (
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.username}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                    {errors.username}
+                  </p>
                 )}
                 <Input
                   name="username"
                   placeholder="Username"
                   value={formData.username}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
+                    errors.username ? "border-red-500" : ""
+                  }`}
                 />
               </div>
 
               <div className="relative w-full">
                 {errors.email && (
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.email}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                    {errors.email}
+                  </p>
                 )}
                 <Input
                   name="email"
@@ -147,13 +158,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Email"
                   value={formData.email}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
+                    errors.email ? "border-red-500" : ""
+                  }`}
                 />
               </div>
 
               <div className="relative w-full">
                 {errors.password && (
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.password}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                    {errors.password}
+                  </p>
                 )}
                 <Input
                   name="password"
@@ -161,13 +176,16 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Password"
                   value={formData.password}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
+                    errors.password ? "border-red-500" : ""
+                  }`}
                 />
               </div>
               <div className="relative w-full">
-
                 {errors.confirmPassword && (
-                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">{errors.confirmPassword}</p>
+                  <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                    {errors.confirmPassword}
+                  </p>
                 )}
                 <Input
                   name="confirmPassword"
@@ -175,17 +193,17 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
                   placeholder="Confirm Password"
                   value={formData.confirmPassword}
                   onChange={handleInputChange}
-                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
+                  extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${
+                    errors.confirmPassword ? "border-red-500" : ""
+                  }`}
                 />
               </div>
 
-              <Button type="submit" >Register</Button>
+              <Button type="submit">Register</Button>
             </form>
           </div>
         </div>
-        
       </div>
-
     </>
   );
 };

frontend/src/components/Navigation/Navbar.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import Logo from "./Logo";
+import Logo from "../Layout/Logo";
-import Button from "./Button";
+import Button from "../Input/Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -8,11 +8,11 @@ import {
   LogOut as LogOutIcon,
   Settings as SettingsIcon,
 } from "lucide-react";
-import SearchBar from "./SearchBar";
+import SearchBar from "../Input/SearchBar";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
-import QuickSettings from "./QuickSettings";
+import QuickSettings from "../Settings/QuickSettings";
 
 interface NavbarProps {
   variant?: "home" | "default";
@@ -42,14 +42,14 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
     setShowSideBar(!showSideBar);
   };
 
-
   return (
     <div
       id="navbar"
-      className={`flex justify-center items-center ${variant === "home"
+      className={`flex justify-center items-center ${
+        variant === "home"
           ? "h-[45vh] flex-col"
           : "h-[15vh] col-span-2 flex-row"
-        }`}
+      }`}
     >
       <Logo variant={variant} />
       <Button
@@ -73,18 +73,22 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <>
           <Button
             onClick={() => handleSideBar()}
-            extraClasses={`fixed ${showSideBar
+            extraClasses={`absolute ${
+              showSideBar
                 ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
           bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
           over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
                 : "top-[75px] left-[20px]"
-              } transition-all duration-300 z-[99]`}
+            } transition-all duration-300 z-[99]`}
           >
             <SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
           </Button>
           <div
             className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
-               transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
+              transition-transform transition-opacity duration-500 ease-in-out ${
+                showSideBar
+                  ? "translate-x-0 opacity-100"
+                  : "-translate-x-full opacity-0"
               }`}
           >
             <Sidebar />
@@ -99,14 +103,17 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15 mr-1 " />
         Quick Settings
       </Button>
-      
+
       <div
-            className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
+        className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
-               transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
+               transition-opacity duration-500 ease-in-out ${
-              }`}
+                 showQuickSettings
-          >
+                   ? "translate-x-0 opacity-100"
-          <QuickSettings />
+                   : "translate-x-full opacity-0"
-        </div>
+               }`}
+      >
+        <QuickSettings />
+      </div>
 
       <SearchBar />
 

frontend/src/components/Navigation/Sidebar.tsx

@@ -47,7 +47,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
   const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
     return (
       <li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
-      hover:bg-[#800020] hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
+      hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
         <img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
         <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
       </li>
@@ -57,13 +57,13 @@ const Sidebar: React.FC<SideBarProps> = () => {
   return (
     <>
 
-      <div className="overflow-hidden">
+      <div>
         <h1 className="style"> Followed </h1>
         <ul>
           {shownStreamers}
         </ul>
 
-        <h1 className="category-style pt-[0.50em] overflow-hidden"> Your Categories </h1>
+        <h1 className="category-style pt-[0.50em]"> Your Categories </h1>
         <ul>
           {shownCategory}
         </ul>

frontend/src/components/Settings/QuickSettings.tsx

@@ -1,13 +1,15 @@
 import React from "react";
-import Theme from "./Theme";
+import Theme from "./ThemeSetting";
 import { useTheme } from "../../context/ThemeContext";
 
 const QuickSettings: React.FC = () => {
   const { theme } = useTheme();
 
   return (
-    <div className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
+    <div
-         style={{ backgroundColor: 'var(--bg-color)', color: 'var(--text-color)' }}>
+      className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
+      style={{ backgroundColor: "var(--bg-color)", color: "var(--text-color)" }}
+    >
       <h3 className="text-xl">Current Theme: {theme}</h3>
       <Theme />
     </div>

frontend/src/components/Video/ChatPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import Input from "../Layout/Input";
+import Input from "../Input/Input";
-import Button from "../Layout/Button";
+import Button from "../Input/Button";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
@@ -117,7 +117,9 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
       className="max-w-[30vw] h-full flex flex-col rounded-lg p-4"
       style={{ gridArea: "1 / 2 / 3 / 3" }}
     >
-      <h2 className="text-xl font-bold mb-4 text-white text-center">Stream Chat</h2>
+      <h2 className="text-xl font-bold mb-4 text-white text-center">
+        Stream Chat
+      </h2>
 
       <div
         ref={chatContainerRef}
@@ -135,7 +137,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                 src="/images/monkey.png"
                 alt="User Avatar"
                 className="w-full h-full object-cover"
-                style={{ width: '2.5em', height: '2.5em' }}
+                style={{ width: "2.5em", height: "2.5em" }}
               />
             </div>
 
@@ -143,10 +145,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               <div className="flex items-center space-x-0.5em">
                 {/* Username */}
                 <span
-                  className={`font-bold text-[1em] ${msg.chatter_username === username
+                  className={`font-bold text-[1em] ${
-                    ? "text-purple-600"
+                    msg.chatter_username === username
-                    : "text-green-400"
+                      ? "text-purple-600"
-                    }`}
+                      : "text-green-400"
+                  }`}
                 >
                   {msg.chatter_username}
                 </span>

frontend/src/components/aside/GenreList.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { useState } from "react";
-
-interface GenreListProps {
-
-}
-
-const GenreList: React.FC<GenreListProps> = () => {
-
-  const [genres, setGenres] = useState(true)
-
-
-  return (
-    <div>GenreList</div>
-  )
-}
-
-export default GenreList;

frontend/src/pages/NotFoundPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import Button from "../components/Layout/Button";
+import Button from "../components/Input/Button";
 
 const NotFoundPage: React.FC = () => {
   const navigate = useNavigate();

frontend/src/pages/UserPage.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
-import Navbar from "../components/Layout/Navbar";
+import Navbar from "../components/Navigation/Navbar";
 import AuthModal from "../components/Auth/AuthModal";
 import { useAuthModal } from "../hooks/useAuthModal";
 import { useAuth } from "../context/AuthContext";
 import { useParams } from "react-router-dom";
-import { ListItem } from "../components/Layout/ListRow";
+import ListItem from "../components/Layout/ListItem";
 import { useFollow } from "../hooks/useFollow";
 import { useNavigate } from "react-router-dom";
-import Button from "../components/Layout/Button";
+import Button from "../components/Input/Button";
 
 interface UserProfileData {
   id: number;

frontend/src/pages/VideoPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import Navbar from "../components/Layout/Navbar";
+import Navbar from "../components/Navigation/Navbar";
-import Button, { ToggleButton } from "../components/Layout/Button";
+import { ToggleButton } from "../components/Input/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAuthModal } from "../hooks/useAuthModal";
@@ -9,7 +9,7 @@ import { useFollow } from "../hooks/useFollow";
 import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 import AuthModal from "../components/Auth/AuthModal";
-import CheckoutForm, {Return} from "../components/Checkout/CheckoutForm";
+import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
 
 interface VideoPageProps {
   streamerId: number;
@@ -101,8 +101,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
         <div
           id="container"
-          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          className={`grid ${
-            } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
+            isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
             <VideoPlayer streamId={streamerId} />
@@ -115,7 +116,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
           >
             {isChatOpen ? "Hide Chat" : "Show Chat"}
 
-            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
+            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
+              Press C
+            </small>
           </ToggleButton>
 
           <ChatPanel
@@ -191,7 +194,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
               <span className="text-gray-400 text-[0.75em]">Started</span>
               <span className="text-[0.75em]">
                 {streamData
-                  ? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
+                  ? `${Math.floor(
+                      (Date.now() - new Date(streamData.startTime).getTime()) /
+                        3600000
+                    )} hours ago`
                   : "Loading..."}
               </span>
             </div>
@@ -211,11 +217,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
                 Subscribe
               </button>
             </div>
-
           </div>
-          {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
+          {showCheckout && (
+            <CheckoutForm
+              onClose={() => setShowCheckout(false)}
+              streamerID={streamerId}
+            />
+          )}
           {showReturn && <Return />}
-          {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+          {showAuthModal && (
+            <AuthModal onClose={() => setShowAuthModal(false)} />
+          )}
         </div>
       </div>
     </SocketProvider>