From d4a6c2c7cd6e74fbd9af90113aa31b9e786170a8 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 18 Feb 2025 17:47:21 +0000
Subject: [PATCH] UPDATE: Theme Design for Quick Settings

---
 frontend/src/assets/styles/index.css          | 55 +++++++++++++++++--
 frontend/src/components/Layout/ListRow.tsx    |  3 +
 .../src/components/Navigation/Sidebar.tsx     |  2 +-
 .../src/components/Settings/QuickSettings.tsx | 11 ++--
 frontend/src/pages/HomePage.tsx               |  5 +-
 5 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 9766b6f..5cb5730 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -5,11 +5,6 @@
 :root {
   --sideBar-LightBG: white;
   --sideBar-LightText: black;
-  
-  --sideBar-DarkBG: black;
-  --sideBar-DarkText: white;
-
-  --quickBar-DarkBG: rgb(0,0,0,0.5)
 }
 
 
@@ -35,26 +30,74 @@
 body[data-theme="light"] {
   --bg-color: white;
   --text-color: black;
+
+  --sideBar-bg: white;
+  --sideBar-text: black;
+
+  --liveNow: rgba(46, 16, 16, 0.6);
+  --recommend: rgba(5, 46, 22, 0.6);
+
+  --quickBar-title: rgba(21, 21, 21, 1);
+  --quickBar-title-bg: rgb(255, 255, 255);
+  --quickBar-bg: #ffffff;
+  --quickBar-text: #000000;
+  --quickBar-border: #000000;
 }
 
 body[data-theme="dark"] {
   --bg-color: black;
   --text-color: white;
+
+  --sideBar-bg: black;
+  --sideBar-text: white;
+
+  --quickBar-title: rgb(255, 255, 255);
+  --quickBar-title-bg: rgb(0, 0, 0);
+  --quickBar-bg: #000000d3;
+  --quickBar-text: #ffffff;
+  --quickBar-border: #ffffff;
 }
 
 body[data-theme="blue"] {
   --bg-color: #e0f7fa;
-  --text-color: #004d40;
+  --text-color: #00539b;
+
+  --sideBar-bg: #ADD8E6;
+  --sideBar-text: #002147;
+
+  --quickBar-title: #ffffff;
+  --quickBar-title-bg: #003571;
+  --quickBar-bg: #eefafffb;
+  --quickBar-text: #003571;
+  --quickBar-border: #ffffff;
 }
 
 body[data-theme="green"] {
   --bg-color: #e8f5e9;
   --text-color: #2e7d32;
+
+  --sideBar-bg: rgb(131, 179, 154);
+  --sideBar-text: #2e7d32;
+
+  --quickBar-title: rgb(226, 255, 240);
+  --quickBar-title-bg: rgb(0, 78, 38);
+  --quickBar-bg: #e8f5e9;
+  --quickBar-text: #2e7d32;
+  --quickBar-border: #ffffff;
 }
 
 body[data-theme="orange"] {
   --bg-color: #ffe0b2;
   --text-color: #e65100;
+
+  --sideBar-bg: #ffe0b2;
+  --sideBar-text: #4d3b31;
+
+  --quickBar-title-bg: #E67E22;
+  --quickBar-title: #ffffff;
+  --quickBar-bg: #fff3dc;
+  --quickBar-text: #ff8800;
+  --quickBar-border: #ffffff;
 }
 
 body {
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index 12b8504..b13e31d 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -15,6 +15,7 @@ interface ListRowProps {
   onClick: (itemName: string) => void;
   extraClasses?: string;
   children?: React.ReactNode;
+  style?: React.CSSProperties;
 }
 
 // Row of entries
@@ -26,6 +27,7 @@ const ListRow: React.FC<ListRowProps> = ({
   onClick,
   extraClasses = "",
   children,
+  style,
 }) => {
   const slider = useRef<HTMLDivElement>(null);
   const scrollAmount = window.innerWidth * 0.3;
@@ -45,6 +47,7 @@ const ListRow: React.FC<ListRowProps> = ({
   return (
     <div
       className={`flex flex-col w-full space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
+      style={style}
     >
       <div className="space-y-1">
         <h2 className="text-2xl font-bold">{title}</h2>
diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx
index ae49990..3c4d401 100644
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -65,7 +65,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
   return (
     <div
       id="sidebar"
-      className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--bg-color)] text-[var(--text-color)] text-center overflow-y-auto scrollbar-hide
+      className={`fixed top-0 left-0 w-[15vw] h-screen flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
         transition-all duration-500 ease-in-out ${
           showSideBar ? "translate-x-0" : "-translate-x-full"
         } ${extraClasses}`}
diff --git a/frontend/src/components/Settings/QuickSettings.tsx b/frontend/src/components/Settings/QuickSettings.tsx
index ea6fd49..d7c6042 100644
--- a/frontend/src/components/Settings/QuickSettings.tsx
+++ b/frontend/src/components/Settings/QuickSettings.tsx
@@ -9,12 +9,13 @@ const QuickSettings: React.FC = () => {
 
   return (
     <div
-      className={`fixed top-0 right-0 w-[20vw] h-screen p-4 flex flex-col items-center overflow-y-auto ${
-        showQuickSettings ? "opacity-100 z-[90]" : "opacity-0 z-[-1]"
-      } transition-all duration-300 ease-in-out`}
-      style={{ backgroundColor: "var(--bg-color)", color: "var(--text-color)" }}
+      className={`fixed top-0 right-0 w-[20vw] h-screen p-4 flex flex-col items-center overflow-y-hidden overflow-x-hidden ${showQuickSettings ? "opacity-100 z-[90]" : "opacity-0 z-[-1]"
+        } transition-all duration-300 ease-in-out pt-0  bg-[var(--quickBar-bg)] text-[var(--quickBar-text)]`}
     >
-      <h1 className="text-[2rem] font-black">Quick Settings</h1>
+      <div className="w-[20vw] p-[1em] flex flex-col items-center bg-[var(--quickBar-title-bg)] text-[var(--quickBar-title)]
+      border-b-[0.25em] border-[var(--quickBar-border)] ">
+        <h1 className="text-[2rem] font-black">Quick Settings</h1>
+      </div>
       <div id="quick-settings-menu" className="flex flex-col flex-grow my-8 gap-4">
         <ThemeSetting />
       </div>
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 8dfcac4..20a91a8 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -43,7 +43,8 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         items={streams}
         wrap={false}
         onClick={handleStreamClick}
-        extraClasses="bg-red-950/60"
+        extraClasses="bg-[var(--liveNow)]"
+
       >
         {/* <Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
           Show More . . .
@@ -66,7 +67,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         items={categories}
         wrap={false}
         onClick={handleCategoryClick}
-        extraClasses="bg-green-950/60"
+        extraClasses="bg-[var(--recommend)]"
       >
         <Button
           extraClasses="absolute right-10"