From 870d1435ae0d579e5c6d7ac351f08b36a7ac7604 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Wed, 5 Feb 2025 13:47:41 +0000
Subject: [PATCH] UPDATE: Added Button Light/Dark Theme

---
 frontend/src/assets/styles/sidebar.css     |  8 ++++----
 frontend/src/components/Layout/Sidebar.tsx | 13 +++++++++++--
 frontend/src/components/Layout/Theme.tsx   | 18 ++++++++++++++++++
 frontend/tailwind.config.js                |  5 -----
 4 files changed, 33 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/Layout/Theme.tsx

diff --git a/frontend/src/assets/styles/sidebar.css b/frontend/src/assets/styles/sidebar.css
index c2dcd77..02517f8 100644
--- a/frontend/src/assets/styles/sidebar.css
+++ b/frontend/src/assets/styles/sidebar.css
@@ -4,10 +4,10 @@
 
 :root{
 
-    --sideNav-LightBG: white;
-    --sideNav-LightText: black;
+    --sideBar-LightBG: white;
+    --sideBar-LightText: black;
     
-    --sideNav-DarkBG: black;
-    --sideNav-DarkText: white;
+    --sideBar-DarkBG: black;
+    --sideBar-DarkText: white;
   }
   
\ No newline at end of file
diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index 70d4d1c..01a26a6 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import Theme from "./Theme";
 import "../../assets/styles/sidebar.css"
 
 interface SideBarProps {
@@ -21,10 +22,18 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
     };
   }, [isCursorOnSidebar]);
 
-  return <div id="sidebar" className={"fixed top-0 left-0 bg-[var(--sideNav-LightBG)] w-[250px] text-sideBar-text p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
-          onMouseEnter={() => setIsCursorOnSidebar(true)}
+  const handleTheme = () => {
+      setThisTheme(!thisTheme);
+  }
+
+  return <div id="sidebar"   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)]"
+  } p-4 z-[90] h-screen overflow-y-auto scrollbar-hide`}
           onMouseLeave={() => setIsCursorOnSidebar(false)}
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+          <Theme onClick={handleTheme}/>
     <ul className="overflow-y-auto">
       <li>1</li>
       <li>1</li>
diff --git a/frontend/src/components/Layout/Theme.tsx b/frontend/src/components/Layout/Theme.tsx
new file mode 100644
index 0000000..c792f96
--- /dev/null
+++ b/frontend/src/components/Layout/Theme.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface ThemeProps {
+    children? : React.ReactNode;
+    onClick : () => void;
+}
+
+const Theme: React.FC<ThemeProps> = ( {onClick, children} ) => {
+  return (
+    <button 
+    onClick={onClick}
+    className={` p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}>
+        Light/Dark
+    </button>
+  )
+}
+
+export default Theme
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ceee4f6..cb09d7c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -49,11 +49,6 @@ export default {
           '100%': { transform: 'translate(0px, -5px) rotateX(0deg) rotateY(0deg)' }, 
         },
       },
-
-      colors: {
-        "sideBar-bg": "var(--sideBar-LightBG)",
-        "sideBar-text": "var(--sideBar-LightText)"
-      }
     },
     plugins: [
       require('tailwind-scrollbar-hide')