UPDATE: Theme Design for Quick Settings

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 {

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>

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}`}

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>

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"