UPDATE: Moved image files

UPDATE: Made AuthModal more responsive
2025-02-19 02:22:10 +00:00
parent 46645b74d7
commit bdaba30cd3
17 changed files with 103 additions and 107 deletions
--- a/frontend/public/images/thumbnails/categories/art.webp
+++ b/frontend/public/images/thumbnails/categories/art.webp
--- a/frontend/public/images/thumbnails/categories/chatting.webp
+++ b/frontend/public/images/thumbnails/categories/chatting.webp
--- a/frontend/public/images/thumbnails/categories/cooking.webp
+++ b/frontend/public/images/thumbnails/categories/cooking.webp
--- a/frontend/public/images/thumbnails/categories/education.webp
+++ b/frontend/public/images/thumbnails/categories/education.webp
--- a/frontend/public/images/thumbnails/categories/gaming.webp
+++ b/frontend/public/images/thumbnails/categories/gaming.webp
--- a/frontend/public/images/thumbnails/categories/music.webp
+++ b/frontend/public/images/thumbnails/categories/music.webp
--- a/frontend/public/images/thumbnails/categories/sports.webp
+++ b/frontend/public/images/thumbnails/categories/sports.webp
--- a/frontend/src/components/Auth/AuthModal.tsx
+++ b/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"
      >
+        <div className="relative w-full max-w-[300px] min-w-[28vw]">
          {/* 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 ">
+          <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-8 "
-              }`}
+              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-[3em] sm:w-[1em] mr-1" />
+              <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]"
+              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-[3em] sm:w-[1em] mr-1" />
+              <UserIcon className="w-[2em] sm:w-[2.5em] md:w-[2.75em] lg:w-[3em] mr-1" />
              Register
            </ToggleButton>
          </div>

+          {/* Form Container */}
          <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]"
+            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="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"
-          >
-            <div
-              id="login-methods"
-              className=" w-full flex flex-row items-center justify-evenly"
+              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>
--- a/frontend/src/components/Auth/ForgotPasswordForm.tsx
+++ b/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,34 +66,41 @@ 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>
+    <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}
-          className="flex flex-col items-center space-y-4 w-full m-6"
+            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="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={`appearance-none bg-transparent text-black m-5 ${
-              errors.email ? "border-red-500" : ""
-            }`}
+                extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${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>
+            </div>
+            <Button type="submit">Send Link</Button>
          </form>
        </div>
      </div>
+    </div>
  );
 };

--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/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" />
--- a/frontend/src/components/Auth/OAuth.tsx
+++ b/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>
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/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"
--- a/frontend/src/context/ContentContext.tsx
+++ b/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);
      });
--- a/frontend/src/pages/AllCategoriesPage.tsx
+++ b/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`,
        }));
--- a/frontend/src/pages/CategoryPage.tsx
+++ b/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`),
        }));
--- a/frontend/src/pages/UserPage.tsx
+++ b/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`,
                };
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,6 +8,17 @@ 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",
@@ -18,6 +29,7 @@ export default {
      },


+
      backgroundImage: {
        logo: "linear-gradient(45deg, #60A5FA, #8B5CF6, #EC4899, #FACC15,#60A5FA, #8B5CF6, #EC4899, #FACC15)",
        'gradient-radial': 'radial-gradient(circle, var(--tw-gradient-stops))',
@@ -54,9 +66,9 @@ export default {
        },

        burnIn: {
-          '0%' : { opacity: '0'},
-          '50%' : { opacity: '0.8'},
-          '100%' : { opacity: '1'},
+          '0%': { opacity: '0' },
+          '50%': { opacity: '0.8' },
+          '100%': { opacity: '1' },
        },

        fontSize: {