From 6ee19905427649be74c6dc7760cba7b98b67bfbc Mon Sep 17 00:00:00 2001
From: EvanLin3141 <Evan.lin.3141@gmail.com>
Date: Thu, 6 Feb 2025 00:57:46 +0000
Subject: [PATCH] DESIGN: Light/Dark Mode Button

---
 frontend/src/components/Layout/Sidebar.tsx |  6 +++---
 frontend/src/components/Layout/Theme.tsx   | 24 +++++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Layout/Sidebar.tsx b/frontend/src/components/Layout/Sidebar.tsx
index 9e5a1b1..97477f3 100644
--- a/frontend/src/components/Layout/Sidebar.tsx
+++ b/frontend/src/components/Layout/Sidebar.tsx
@@ -52,7 +52,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
   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">
+      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]"/>
         <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
       </li>
@@ -66,11 +66,11 @@ const Sidebar: React.FC<SideBarProps> = () => {
         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 
+          } 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 onClick={handleTheme} />
+        <Theme isMode={thisTheme} onClick={handleTheme} />
 
         <h1 className="style"> Followed </h1>
         <ul>
diff --git a/frontend/src/components/Layout/Theme.tsx b/frontend/src/components/Layout/Theme.tsx
index 1299083..cb79d9f 100644
--- a/frontend/src/components/Layout/Theme.tsx
+++ b/frontend/src/components/Layout/Theme.tsx
@@ -1,21 +1,31 @@
-import React from 'react';
-import { SunMoon as SunMoonIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { SunMoon as SunMoonIcon, Sun as SunIcon,
+        Moon as MoonIcon } from 'lucide-react';
 
 interface ThemeProps {
   children?: React.ReactNode;
   onClick: () => void;
+  isMode: boolean;
 }
 
-const Theme: React.FC<ThemeProps> = ({ onClick }) => {
+const Theme: React.FC<ThemeProps> = ({ onClick, isMode }) => {
+
   return (
     <div className='relative top-[0.20em] left-[10em]'>
     <button
       onClick={onClick}
-      className="p-2 text-[1.5rem] flex items-center gap-2 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"
+      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 `}
     >
-      <SunMoonIcon size={27}
-        className={`transition-transform duration-300 ease-in-out`}
-      />
+      {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>
   );