From bdaba30cd389779826cada6d504867585ab2f198 Mon Sep 17 00:00:00 2001 From: JustIceO7 Date: Wed, 19 Feb 2025 02:22:10 +0000 Subject: [PATCH] UPDATE: Moved image files UPDATE: Made AuthModal more responsive --- .../art.webp | Bin .../chatting.webp | Bin .../cooking.webp | Bin .../education.webp | Bin .../gaming.webp | Bin .../music.webp | Bin .../sports.webp | Bin frontend/src/components/Auth/AuthModal.tsx | 88 +++++++----------- .../components/Auth/ForgotPasswordForm.tsx | 61 ++++++------ frontend/src/components/Auth/LoginForm.tsx | 9 +- frontend/src/components/Auth/OAuth.tsx | 2 +- frontend/src/components/Auth/RegisterForm.tsx | 8 +- frontend/src/context/ContentContext.tsx | 4 +- frontend/src/pages/AllCategoriesPage.tsx | 2 +- frontend/src/pages/CategoryPage.tsx | 2 +- frontend/src/pages/UserPage.tsx | 2 +- frontend/tailwind.config.js | 32 +++++-- 17 files changed, 103 insertions(+), 107 deletions(-) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/art.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/chatting.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/cooking.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/education.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/gaming.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/music.webp (100%) rename frontend/public/images/{thumbnails/categories => category_thumbnails}/sports.webp (100%) diff --git a/frontend/public/images/thumbnails/categories/art.webp b/frontend/public/images/category_thumbnails/art.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/art.webp rename to frontend/public/images/category_thumbnails/art.webp diff --git a/frontend/public/images/thumbnails/categories/chatting.webp b/frontend/public/images/category_thumbnails/chatting.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/chatting.webp rename to frontend/public/images/category_thumbnails/chatting.webp diff --git a/frontend/public/images/thumbnails/categories/cooking.webp b/frontend/public/images/category_thumbnails/cooking.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/cooking.webp rename to frontend/public/images/category_thumbnails/cooking.webp diff --git a/frontend/public/images/thumbnails/categories/education.webp b/frontend/public/images/category_thumbnails/education.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/education.webp rename to frontend/public/images/category_thumbnails/education.webp diff --git a/frontend/public/images/thumbnails/categories/gaming.webp b/frontend/public/images/category_thumbnails/gaming.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/gaming.webp rename to frontend/public/images/category_thumbnails/gaming.webp diff --git a/frontend/public/images/thumbnails/categories/music.webp b/frontend/public/images/category_thumbnails/music.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/music.webp rename to frontend/public/images/category_thumbnails/music.webp diff --git a/frontend/public/images/thumbnails/categories/sports.webp b/frontend/public/images/category_thumbnails/sports.webp similarity index 100% rename from frontend/public/images/thumbnails/categories/sports.webp rename to frontend/public/images/category_thumbnails/sports.webp diff --git a/frontend/src/components/Auth/AuthModal.tsx b/frontend/src/components/Auth/AuthModal.tsx index 6e127ba..4e63dd7 100644 --- 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 = ({ onClose }) => { const handleSubmit = () => { setSpinDuration("1s"); - setTimeout(() => { setSpinDuration("7s"); }, 3500); @@ -38,18 +36,6 @@ const AuthModal: React.FC = ({ onClose }) => { Forgot: , }; return formMap[selectedTab] ||
Please select a valid option
; - { - /* - if (selectedTab === "Login") { - return - } else if (selectedTab === "Register") { - return - } else if (selectedTab === "Forgot") { - return - } else - return
Please select a valid icon
- */ - } }; return ( @@ -60,50 +46,46 @@ const AuthModal: React.FC = ({ onClose }) => { className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]" > - {/*Container*/} + {/*Main Container*/}
- {/* Login/Register Buttons Container */} -
- {/* Login Toggle */} - setSelectedTab("Login")} - > - - Login - +
+ {/* Login/Register Buttons Container */} +
+ {/* Login Toggle */} + setSelectedTab("Login")} + > + + Login + - {/* Register Toggle */} - setSelectedTab("Register")} - > - - Register - -
+ {/* Register Toggle */} + setSelectedTab("Register")} + > + + Register + +
-
- {/*Border Container*/} + {/* Form Container */}
+ {/*Border Container*/}
+
+ {authSwitch()} +
- <>{authSwitch()}
@@ -120,4 +104,4 @@ const AuthModal: React.FC = ({ onClose }) => { ); }; -export default AuthModal; +export default AuthModal; \ No newline at end of file diff --git a/frontend/src/components/Auth/ForgotPasswordForm.tsx b/frontend/src/components/Auth/ForgotPasswordForm.tsx index 0f1a646..c51678c 100644 --- a/frontend/src/components/Auth/ForgotPasswordForm.tsx +++ b/frontend/src/components/Auth/ForgotPasswordForm.tsx @@ -51,9 +51,7 @@ const ForgotPasswordForm: React.FC = ({ 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 = ({ onSubmit }) => { }; return ( -
-
-

Forgot Password

-
- +
+
+

Forgot Password

+
+ +
+ {errors.general && ( +

+ {errors.general} +

+ )} - {errors.email && ( -

{errors.email}

- )} - - - + {errors.email && ( +

+ {errors.email} +

+ )} + +
+ + +
); diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx index c26b94d..1d9f558 100644 --- a/frontend/src/components/Auth/LoginForm.tsx +++ b/frontend/src/components/Auth/LoginForm.tsx @@ -102,9 +102,8 @@ const LoginForm: React.FC = ({ onSubmit, onForgotPassword }) => { return ( <>
-

Login

-
+

Login

+
= ({ onSubmit, onForgotPassword }) => { type="checkbox" className="accent-purple-600 w-3 h-3 mr-1" /> - + Remember me
diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx index ff850c6..c39e55f 100644 --- 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 = ({ onSubmit }) => { <>
-

+

Register

-
+
{ 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`, })); diff --git a/frontend/src/pages/CategoryPage.tsx b/frontend/src/pages/CategoryPage.tsx index 8d29587..704c990 100644 --- 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`), })); diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx index 2f901b3..2188f92 100644 --- 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`, }; diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index caa31b8..08120f0 100644 --- a/frontend/tailwind.config.js +++ b/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: {