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,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";
 
 interface ForgotPasswordProps {
   email?: string;
@@ -16,7 +16,6 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
 
   const confirmPasswordReset = () => {
     alert(`Email has been sent`);
-
   };
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,7 +25,6 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
     }
   };
 
-
   const validateEmail = (): boolean => {
     const newErrors: ForgotPasswordProps = {};
     if (!email) {
@@ -53,7 +51,9 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
 
         if (!response.ok) {
           const data = await response.json();
-                    throw new Error(data.message || "An error has occurred while resetting");
+          throw new Error(
+            data.message || "An error has occurred while resetting"
+          );
         } else {
           confirmPasswordReset();
         }
@@ -62,7 +62,6 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
         setErrors((prev) => ({
           ...prev,
           general: error.message || "An unexpected error occurred.",
-
         }));
       }
     }
@@ -72,24 +71,32 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ( {onSubmit} ) => {
     <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">
+        <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" : ""}`}
+            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>}
+          {errors.email && (
+            <p className="text-red-500 mt-2 text-sm">{errors.email}</p>
+          )}
 
-                    <Button type="submit" extraClasses="text-black">Send Reset Link</Button>
+          <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";
@@ -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,22 +145,25 @@ 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">
                   <input
                     type="checkbox"
                     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]">
+                    Remember me
+                  </span>
                 </label>
                 <button
                   type="button"
                   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"
-                onClick={onForgotPassword}>
+                  onClick={onForgotPassword}
+                >
                   <ForgotIcon size={16} className="flex flex-row mr-1" />
                   <span> Forgot Password </span>
                 </button>

frontend/src/components/Auth/PasswordResetForm.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";
 
 interface ResetPasswordData {
@@ -19,7 +19,6 @@ interface SubmitProps {
 }
 
 const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
-
   const [errors, setErrors] = useState<ResetPasswordErrors>({});
 
   const [resetData, setResetData] = useState<ResetPasswordData>({
@@ -27,7 +26,6 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
     confirmNewPassword: "",
   });
 
-
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setResetData((prev) => ({
@@ -45,13 +43,13 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
       }
     });
     if (resetData.newPassword.length < 8) {
-            newErrors.newPasswordError = "Password must be at least 8 characters long";
+      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;
   };
@@ -62,46 +60,51 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
 
     if (validateResetForm()) {
       try {
-                const response = await fetch(`/api/user/reset_password/${token}/${resetData.newPassword}`, {
+        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");
+          throw new Error(
+            data.error || "An error has occurred while resetting"
+          );
         } else {
-                    onSubmit(true)
+          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'
+        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>
+        <p className="text-red-500 mt-3 text-sm">
+          {errors.confirmNewPasswordError}
+        </p>
       )}
       <Input
         name="confirmNewPassword"
@@ -109,14 +112,14 @@ const PasswordResetForm: React.FC<SubmitProps> = ({ onSubmit, token }) => {
         placeholder="Confirm Password"
         value={resetData.confirmNewPassword}
         onChange={handlePasswordChange}
-                extraClasses={`${errors.confirmNewPasswordError ? "border-red-500" : ""}`}
+        extraClasses={`${
+          errors.confirmNewPasswordError ? "border-red-500" : ""
+        }`}
       />
 
       <Button type="submit">Reset Password</Button>
-
     </form>
-
   );
 };
 
-export default PasswordResetForm
+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,7 +193,9 @@ 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>
 
@@ -183,9 +203,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
             </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,11 +42,11 @@ 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"
       }`}
@@ -73,7 +73,8 @@ 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 `
@@ -84,7 +85,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           </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 />
@@ -102,7 +106,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
 
       <div
         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"
+                   : "translate-x-full opacity-0"
                }`}
       >
         <QuickSettings />

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,7 +145,8 @@ 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] ${
+                    msg.chatter_username === username
                       ? "text-purple-600"
                       : "text-green-400"
                   }`}

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";
@@ -101,7 +101,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
         <div
           id="container"
-          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          className={`grid ${
+            isChatOpen ? "w-[100vw]" : "w-[125vw]"
           } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
@@ -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>