UPDATE: Moved image files

UPDATE: Made AuthModal more responsive

frontend/src/components/Auth/AuthModal.tsx

@@ -3,7 +3,6 @@ import { ToggleButton } from "../Input/Button";
 import {
   LogIn as LogInIcon,
   User as UserIcon,
-  CircleHelp as ForgotIcon,
 } from "lucide-react";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
@@ -20,7 +19,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
 
   const handleSubmit = () => {
     setSpinDuration("1s");
-
     setTimeout(() => {
       setSpinDuration("7s");
     }, 3500);
@@ -38,18 +36,6 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
       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") {
-      return  <RegisterForm onSubmit={(handleSubmit)}/>
-    } else if (selectedTab === "Forgot") {
-      return  <ForgotPasswordForm onSubmit={(handleSubmit)}/>
-    } else
-      return <div> Please select a valid icon</div>
-      */
-    }
   };
 
   return (
@@ -60,50 +46,46 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
       ></div>
 
-      {/*Container*/}
+      {/*Main Container*/}
       <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 "
+        className="fixed inset-0 flex items-start justify-center z-[9000] h-[95vh] m-auto pt-[15vh] rounded-[5rem] transition-all animate-floating"
       >
-        {/* Login/Register Buttons Container */}
-        <div className="fixed top-[1em] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
-          {/* Login Toggle */}
-          <ToggleButton
-            toggled={selectedTab === "Login"}
-            extraClasses={`flex flex-col items-center px-8 "
-              }`}
-            onClick={() => setSelectedTab("Login")}
-          >
-            <LogInIcon className=" w-[3em] sm:w-[1em] mr-1" />
-            Login
-          </ToggleButton>
+        <div className="relative w-full max-w-[300px] min-w-[28vw]">
+          {/* Login/Register Buttons Container */}
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-20 w-[250px] flex justify-center gap-8 transition-transform overflow-visible">
+            {/* Login Toggle */}
+            <ToggleButton
+              toggled={selectedTab === "Login"}
+              extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
+              onClick={() => setSelectedTab("Login")}
+            >
+              <LogInIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
+              Login
+            </ToggleButton>
 
-          {/* Register Toggle */}
-          <ToggleButton
-            toggled={selectedTab === "Register"}
-            extraClasses="flex flex-col items-center px-8  z-[9001]"
-            onClick={() => setSelectedTab("Register")}
-          >
-            <UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
-            Register
-          </ToggleButton>
-        </div>
+            {/* Register Toggle */}
+            <ToggleButton
+              toggled={selectedTab === "Register"}
+              extraClasses="flex flex-col items-center px-[1em] sm:px-[1.45em] ml:px-[1.6em] lx:px-[2em]"
+              onClick={() => setSelectedTab("Register")}
+            >
+              <UserIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
+              Register
+            </ToggleButton>
+          </div>
 
-        <div
-          className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw]  py-[50px] rounded-[5rem]"
-          style={{ "--spin-duration": spinDuration } as React.CSSProperties}
-        >
-          {/*Border Container*/}
+          {/* Form Container */}
           <div
-            id="border-container"
-            className="front-content fixed ml-[1px] mt-[0.5px] inset-0 bg-authForm flex flex-col justify-center
-          z-50 h-[70vh] min-w-[30vw] w-fit py-[50px] rounded-[2rem] transition-all"
+            className="container flex flex-col items-center justify-around z-[9999] 
+            h-[70vh] max-h-[75vh] m-auto py-[50px] rounded-[5rem] transition-all"
+            style={{ "--spin-duration": spinDuration } as React.CSSProperties}
           >
+            {/*Border Container*/}
             <div
-              id="login-methods"
-              className=" w-full flex flex-row items-center justify-evenly"
+              id="border-container"
+              className="front-content ml-[1px] mt-[0.5px] bg-authForm flex flex-col justify-center
+                z-50 h-full w-full py-[50px] rounded-[5rem] transition-all"
             >
               <button
                 onClick={onClose}
@@ -111,8 +93,10 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               >
                 ✕
               </button>
+              <div id="login-methods" className="w-full flex flex-row items-center justify-evenly">
+                {authSwitch()}
+              </div>
             </div>
-            <>{authSwitch()}</>
           </div>
         </div>
       </div>
@@ -120,4 +104,4 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
   );
 };
 
-export default AuthModal;
+export default AuthModal;

frontend/src/components/Auth/ForgotPasswordForm.tsx

@@ -51,9 +51,7 @@ 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();
         }
@@ -68,32 +66,39 @@ const ForgotPasswordForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   };
 
   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" : ""
-            }`}
-          />
+    <div className="mb-2">
+      <div className="flex flex-col items-center p-[2.5rem]">
+      <h1 className="text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">Forgot Password</h1>
+      <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
+          <form
+            onSubmit={handleSubmit}
+            id="forgot-password-form"
+            className="flex flex-col"
+          >
+            <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>
+              )}
 
-          {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>
+              {errors.email && (
+                <p className="absolute top-[-1.5em] text-red-500 text-sm text-center w-full">
+                  {errors.email}
+                </p>
+              )}
+              <Input
+                name="email"
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={handleEmailChange}
+                extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
+              />
+            </div>
+            <Button type="submit">Send Link</Button>
+          </form>
+        </div>
       </div>
     </div>
   );

frontend/src/components/Auth/LoginForm.tsx

@@ -102,9 +102,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
   return (
     <>
       <div className="flex flex-col items-center p-10">
-        <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">
+        <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">Login</h1>
+        <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
 
           <form
             onSubmit={handleSubmit}
@@ -155,13 +154,13 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
                     type="checkbox"
                     className="accent-purple-600 w-3 h-3 mr-1"
                   />
-                  <span className="sm:text-[0.5em] md:text-[0.8em]">
+                  <span className="text-[0.5em] xl:text-[0.75em]">
                     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"
+                  className="flex w-full justify-end items-center justify-items-end text-[0.5em] xl:text-[0.75em] text-white font-semibold hover:scale-[1.05] transition-all ease-in"
                   onClick={onForgotPassword}
                 >
                   <ForgotIcon size={16} className="flex flex-row mr-1" />

frontend/src/components/Auth/OAuth.tsx

@@ -20,7 +20,7 @@ export default function GoogleLogin() {
             alt="Google logo"
             className="w-[2em] h-[2em] mr-2"
           />
-          <span className="flex-grow">Sign in with Google</span>
+          <span className="flex-grow text-[0.6em] lx:text-[0.75em] 2lg:text-[1em]">Sign in with Google</span>
         </button>
       </div>
     </div>

frontend/src/components/Auth/RegisterForm.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import Input from "../Input/Input";
 import Button from "../Input/Button";
 import { useAuth } from "../../context/AuthContext";
-import GoogleLogin from "./OAuth";
 
 interface RegisterFormData {
   username: string;
@@ -111,13 +110,10 @@ 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]">
+          <h1 className="flex flex-col text-white text-[1.5em] font-[800] md:text-[1.75em] lg:text-[2em]">
             Register
           </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"
-          >
+          <div className="mt-10 bg-white/10 backdrop-blur-md p-6 rounded-xl shadow-lg w-full max-w-[10em] min-w-[14em] border border-white/10 sm:max-w-[16em] md:max-w-[18em] lg:max-w-[20em]">
             <form
               onSubmit={handleSubmit}
               id="register-form"

frontend/src/context/ContentContext.tsx

@@ -60,7 +60,7 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
           streamCategory: stream.category_name,
           viewers: stream.num_viewers,
           thumbnail: stream.thumbnail ||
-            `/images/thumbnails/categories/${stream.category_name.toLowerCase().replace(/ /g, "_")}.webp`
+            `/images/category_thumbnails/${stream.category_name.toLowerCase().replace(/ /g, "_")}.webp`
         }));
         setStreams(processedStreams);
       });
@@ -78,7 +78,7 @@ export function ContentProvider({ children }: { children: React.ReactNode }) {
           id: category.category_id,
           title: category.category_name,
           viewers: category.num_viewers,
-          thumbnail: `/images/thumbnails/categories/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`,
+          thumbnail: `/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`,
         }));
         setCategories(processedCategories);
       });

frontend/src/pages/AllCategoriesPage.tsx

@@ -23,7 +23,7 @@ const AllCategoriesPage: React.FC = () => {
           id: category.category_id,
           title: category.category_name,
           viewers: category.num_viewers,
-          thumbnail: `/images/thumbnails/categories/${category.category_name
+          thumbnail: `/images/category_thumbnails/${category.category_name
             .toLowerCase()
             .replace(/ /g, "_")}.webp`,
         }));

frontend/src/pages/CategoryPage.tsx

@@ -38,7 +38,7 @@ const CategoryPage: React.FC = () => {
           thumbnail:
             stream.thumbnail ||
             (category_name &&
-              `/images/thumbnails/categories/${category_name
+              `/images/category_thumbnails/${category_name
                 .toLowerCase()
                 .replace(/ /g, "_")}.webp`),
         }));

frontend/src/pages/UserPage.tsx

@@ -77,7 +77,7 @@ const UserPage: React.FC = () => {
                   currentStreamStartTime: streamData.start_time,
                   currentStreamThumbnail:
                     streamData.thumbnail ||
-                    `/images/thumbnails/categories/${streamData.category_name
+                    `/images/category_thumbnails/${streamData.category_name
                       .toLowerCase()
                       .replace(/ /g, "_")}.webp`,
                 };

frontend/tailwind.config.js

@@ -8,21 +8,33 @@ export default {
   ],
   theme: {
     extend: {
+      screens: {
+        'xs': '480px',  
+        'sm': '640px',  
+        'md': '768px', 
+        'ml': '936px',
+        'lg': '1024px', 
+        'lx': '1200px',
+        'xl': '1280px', 
+        '2lg': '1440px',
+        '2xl': '1536px',
+      },
 
       animation: {
         moving_text_colour: "moving_text_colour 6s ease-in-out infinite alternate",
         moving_bg: 'moving_bg 50s linear infinite',
-        'border-spin': 'border-spin linear infinite', 
+        'border-spin': 'border-spin linear infinite',
         floating: "floating 30s linear infinite",
         burnIn: 'burnIn 1s ease-out',
       },
 
 
+
       backgroundImage: {
         logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
         'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
-        authForm:  "linear-gradient(45deg, #1A0B33, #240046, #3C096C, #5A189A)",
-        authFormBorder:   "linear-gradient(45deg, #3A0CA3, #7209B7, #B5179E, #F72585)",
+        authForm: "linear-gradient(45deg, #1A0B33, #240046, #3C096C, #5A189A)",
+        authFormBorder: "linear-gradient(45deg, #3A0CA3, #7209B7, #B5179E, #F72585)",
       },
 
       keyframes: {
@@ -35,14 +47,14 @@ export default {
           '0%': { backgroundPosition: '0% 0%' },
           '100%': { backgroundPosition: '-1280px 1280px' },
         },
-        
+
         floating: {
           '0%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
           '5%': { transform: 'translate(-3px, -5.5px) rotateX(-0.35deg) rotateY(-0.55deg)' },
           '10%': { transform: 'translate(-9px, -6.15px) rotateX(-1.1deg) rotateY(-1.23deg)' },
           '13%': { transform: 'translate(-12px, -5.5px) rotateX(-1.9deg) rotateY(-1.34deg)' },
           //Top Left
-          '20%': { transform: 'translate(-10px, -7px) rotateX(-2.5deg) rotateY(-1.5deg)' }, 
+          '20%': { transform: 'translate(-10px, -7px) rotateX(-2.5deg) rotateY(-1.5deg)' },
           '25%': { transform: 'translate(-6px, -5px) rotateX(-1.75deg) rotateY(-0.65deg)' },
           '30%': { transform: 'translate(-4px, -1px) rotateX(0.45deg) rotateY(-0.45deg)' },
           '35%': { transform: 'translate(-7px, 4px) rotateX(1.85deg) rotateY(-1.5deg)' },
@@ -50,13 +62,13 @@ export default {
           '40%': { transform: 'translate(-10px, 7px) rotateX(2.5deg) rotateY(-1.5deg)' },  /* Bottom-left tilt */
           '60%': { transform: 'translate(10px, 7px) rotateX(2.5deg) rotateY(1.5deg)' },   /* Bottom-right tilt */
           '80%': { transform: 'translate(10px, -7px) rotateX(-2.5deg) rotateY(1.5deg)' }, /* Top-right tilt */
-          '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
+          '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' },
         },
-        
+
         burnIn: {
-          '0%' : { opacity: '0'},
-          '50%' : { opacity: '0.8'},
-          '100%' : { opacity: '1'},
+          '0%': { opacity: '0' },
+          '50%': { opacity: '0.8' },
+          '100%': { opacity: '1' },
         },
 
         fontSize: {