MOVE: Theme to quick settings

frontend/src/App.tsx

@@ -8,7 +8,6 @@ import NotFoundPage from "./pages/NotFoundPage";
 import UserPage from "./pages/UserPage";
 import ResetPasswordPage from "./pages/ResetPasswordPage";
 import CategoryPage from "./pages/CategoryPage";
-import ForgotPasswordForm from "./components/Auth/ForgotPasswordForm";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -44,7 +43,6 @@ function App() {
             <Route path="/:streamerName" element={<StreamerRoute />} />
             <Route path="/user/:username" element={<UserPage />} />
             <Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
-            <Route path="/forgot_password/" element={<ForgotPasswordForm />}></Route>
             <Route path="/category/:category_name" element={<CategoryPage />}></Route>
 
             <Route path="/404" element={<NotFoundPage />} />

frontend/src/assets/styles/index.css

@@ -8,6 +8,8 @@
   
   --sideBar-DarkBG: black;
   --sideBar-DarkText: white;
+
+  --quickBar-DarkBG: rgb(0,0,0,0.5)
 }
 
 
@@ -30,6 +32,35 @@
 }
 
 
+body[data-theme="light"] {
+  --bg-color: white;
+  --text-color: black;
+}
+
+body[data-theme="dark"] {
+  --bg-color: black;
+  --text-color: white;
+}
+
+body[data-theme="blue"] {
+  --bg-color: #e0f7fa;
+  --text-color: #004d40;
+}
+
+body[data-theme="green"] {
+  --bg-color: #e8f5e9;
+  --text-color: #2e7d32;
+}
+
+body[data-theme="orange"] {
+  --bg-color: #ffe0b2;
+  --text-color: #e65100;
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
 
 
 

frontend/src/components/Auth/LoginForm.tsx

@@ -97,6 +97,9 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
   };
 
   return (
+    <> 
+    <div className="h-[100%] flex flex-col justify-evenly items-center">
+    <h1 className="text-white text-lg"> Login </h1>
     <form
       onSubmit={handleSubmit}
       id="login-form"
@@ -131,6 +134,8 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
 
       <Button type="submit">Login</Button>
     </form>
+    </div>
+    </>
   );
 };
 

frontend/src/components/Layout/Navbar.tsx

@@ -84,7 +84,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
             <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(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
+            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-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
               }`}
           >
@@ -102,8 +102,8 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
       </Button>
       
       <div
-            className={`fixed top-0 right-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
-              transition-transform transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
+            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"
               }`}
           >
           <QuickSettings />

frontend/src/components/Layout/QuickSettings.tsx

@@ -1,9 +1,17 @@
-import React from 'react'
+import React from "react";
+import Theme from "./Theme";
+import { useTheme } from "../../context/ThemeContext";
+
+const QuickSettings: React.FC = () => {
+  const { theme } = useTheme();
 
-const QuickSettings = () => {
   return (
-    <div className='bg-white'>QuickSettings</div>
-  )
-}
+    <div 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>
+  );
+};
 
-export default QuickSettings
+export default QuickSettings;

frontend/src/components/Layout/Sidebar.tsx

@@ -8,7 +8,6 @@ interface SideBarProps {
 }
 
 const Sidebar: React.FC<SideBarProps> = () => {
-  const [thisTheme, setThisTheme] = useState(false);
   const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
   const [triggerAnimation, setTriggerAnimation] = useState(false);
   useEffect(() => {
@@ -22,23 +21,19 @@ const Sidebar: React.FC<SideBarProps> = () => {
     };
   }, [isCursorOnSidebar]);
 
-  const handleTheme = () => {
-    setThisTheme(!thisTheme);
-    setTriggerAnimation(false);  // Reset animation
-    setTimeout(() => setTriggerAnimation(true), 0);  // Re-trigger animation
-  };
+
   const testStreamer: Record<string, string> = {
     "Markiplier": "Slink1",
     "Jacksepticeye": "Slink2",
     "8-BitRyan": "Slink3",
   };
 
-  const testCategory: Record<string, {dummyLink: string; dummyImage: string} > = {
-    "Action": {dummyLink : "link1", dummyImage: "../../../images/icons/Action.webp"},
-    "Horror": {dummyLink : "link2", dummyImage: "../../../images/icons/Horror.png"},
-    "Psychological": {dummyLink : "link3", dummyImage: "../../../images/icons/Psychological.png"},
-    "Adult": {dummyLink : "link4", dummyImage: "../../../images/icons/R-18.png"},
-    "Shooter": {dummyLink : "link5", dummyImage: "../../../images/icons/Shooter.png"}
+  const testCategory: Record<string, { dummyLink: string; dummyImage: string }> = {
+    "Action": { dummyLink: "link1", dummyImage: "../../../images/icons/Action.webp" },
+    "Horror": { dummyLink: "link2", dummyImage: "../../../images/icons/Horror.png" },
+    "Psychological": { dummyLink: "link3", dummyImage: "../../../images/icons/Psychological.png" },
+    "Adult": { dummyLink: "link4", dummyImage: "../../../images/icons/R-18.png" },
+    "Shooter": { dummyLink: "link5", dummyImage: "../../../images/icons/Shooter.png" }
   };
 
   const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
@@ -49,11 +44,11 @@ const Sidebar: React.FC<SideBarProps> = () => {
     );
   });
 
-  const shownCategory = Object.entries(testCategory).map(([dummyCategory, {dummyLink, dummyImage}]) => {
+  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: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]"/>
+        <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>
     );
@@ -61,17 +56,8 @@ const Sidebar: React.FC<SideBarProps> = () => {
 
   return (
     <>
-      <div id="sidebar"
-        key={triggerAnimation ? 'burn-in' : 'reset'}
-        className={`fixed top-0 left-0 w-[250px] ${thisTheme
-          ? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
-          : " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]"
-          } py-4 px-3 z-[90] h-screen overflow-y-auto 
-    transition-transform duration-500 ease-in-out animate-burnIn`}
-        onMouseLeave={() => setIsCursorOnSidebar(false)}
-        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
-        <Theme isMode={thisTheme} onClick={handleTheme} />
 
+      <div>
         <h1 className="style"> Followed </h1>
         <ul>
           {shownStreamers}

frontend/src/components/Layout/Theme.tsx

@@ -1,33 +1,35 @@
-import React, { useState } from 'react';
-import { SunMoon as SunMoonIcon, Sun as SunIcon,
-        Moon as MoonIcon } from 'lucide-react';
+import React from "react";
+import { Sun as SunIcon, Moon as MoonIcon, Droplet as BlueIcon, Leaf as GreenIcon, Flame as OrangeIcon } from "lucide-react";
+import { useTheme } from "../../context/ThemeContext";
 
-interface ThemeProps {
-  children?: React.ReactNode;
-  onClick: () => void;
-  isMode: boolean;
-}
+const themeIcons = {
+  light: <SunIcon size={27} className="text-yellow-400" />,
+  dark: <MoonIcon size={27} className="text-white" />,
+  blue: <BlueIcon size={27} className="text-blue-500" />,
+  green: <GreenIcon size={27} className="text-green-500" />,
+  orange: <OrangeIcon size={27} className="text-orange-500" />,
+};
 
-const Theme: React.FC<ThemeProps> = ({ onClick, isMode }) => {
+const themes = ["light", "dark", "blue", "green", "orange"];
+
+const Theme: React.FC = () => {
+  const { theme, setTheme } = useTheme();
+
+  const handleNextTheme = () => {
+    const currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    const nextTheme = themes[nextIndex];
+    setTheme(nextTheme);
+    document.body.setAttribute("data-theme", nextTheme); // Update globally
+  };
 
   return (
-    <div className='relative top-[0.20em] left-[10em]'>
     <button
-      onClick={onClick}
-      className= {`p-2 text-[1.5rem] flex items-center gap-2 rounded-md border border-3
-        ${isMode ? 
-          `text-white bg-[#3478ef] hover:text-[#3478ef] hover:bg-[#000000]
-          border-[#3478ef] hover:border-[##3478ef]` :
-        `text-yellow-400 bg-white hover:text-yellow-400 hover:bg-white 
-          border-yellow-400 hover:border-yellow-400`}
-         hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `}
+      onClick={handleNextTheme}
+      className="p-2 text-[1.5rem] flex items-center gap-2 rounded-md border transition-all"
     >
-      {isMode ?  <MoonIcon size={27} className={`transition-transform duration-300 ease-in-out`}/>: 
-       <SunIcon size={27} className={`transition-transform duration-300 ease-in-out`}/> 
-       }
-
-    </button>
-    </div>
+      {themeIcons[theme as keyof typeof themeIcons]} {theme}
+      </button>
   );
 };
 

frontend/src/context/ThemeContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+// Theme context and types
+interface ThemeContextType {
+  theme: string;
+  setTheme: (theme: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState<string>("light");
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};

frontend/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from "react";
+import { ThemeProvider } from "./context/ThemeContext";
 import { createRoot } from "react-dom/client";
 import "./assets/styles/index.css";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
   // <StrictMode>
+  <ThemeProvider>
   <App />,
+  </ThemeProvider>
   // </StrictMode>,
 );