From 691d181c0c11e14074f6896465858f5ef8228606 Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 18 Feb 2025 19:51:11 +0000
Subject: [PATCH] UPDATE: Theme Design for SideBar

---
 frontend/src/assets/styles/index.css          | 84 +++++++++++++++++--
 frontend/src/assets/styles/sidebar.css        |  4 -
 .../src/components/Navigation/Sidebar.tsx     | 22 +++--
 frontend/src/pages/UserPage.tsx               |  2 +
 4 files changed, 94 insertions(+), 18 deletions(-)

diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css
index 5cb5730..23ebf22 100644
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@@ -31,17 +31,24 @@ body[data-theme="light"] {
   --bg-color: white;
   --text-color: black;
 
-  --sideBar-bg: white;
+  --sideBar-bg: rgb(255, 255, 255);
   --sideBar-text: black;
+  --sideBar-profile-bg: rgb(132, 0, 255);
+  --sideBar-profile-text: #ffffff;
+  --profile-border: #ffffff;
+  
+  --follow-bg: #ff0000;
+  --follow-text: white;
+  --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
 
   --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-title: #ffffff;
+  --quickBar-title-bg: rgb(132, 0, 255);
   --quickBar-bg: #ffffff;
   --quickBar-text: #000000;
-  --quickBar-border: #000000;
+  --quickBar-border: #ffffff;
 }
 
 body[data-theme="dark"] {
@@ -50,6 +57,17 @@ body[data-theme="dark"] {
 
   --sideBar-bg: black;
   --sideBar-text: white;
+  --sideBar-profile-bg: rgba(92, 2, 176, 0.592);
+  --sideBar-profile-text: #ffffff;
+  --profile-border: #ffffff;
+  
+  --follow-bg: #a50000c6;
+  --follow-text: rgb(255, 255, 255);
+  --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966);
+
+  --liveNow: rgba(46, 16, 16, 0.6);
+  --recommend: rgba(5, 46, 22, 0.6);
+
 
   --quickBar-title: rgb(255, 255, 255);
   --quickBar-title-bg: rgb(0, 0, 0);
@@ -62,8 +80,18 @@ body[data-theme="blue"] {
   --bg-color: #e0f7fa;
   --text-color: #00539b;
 
-  --sideBar-bg: #ADD8E6;
+  --sideBar-bg: #eefafffb;
   --sideBar-text: #002147;
+  --sideBar-profile-bg: #003571;
+  --sideBar-profile-text: #ffffff;
+  --profile-border: #ffffff;
+
+  --follow-bg: #ffffff;
+  --follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823);
+
+  --liveNow: rgba(46, 16, 16, 0.6);
+  --recommend: rgba(5, 46, 22, 0.6);
+
 
   --quickBar-title: #ffffff;
   --quickBar-title-bg: #003571;
@@ -76,9 +104,20 @@ body[data-theme="green"] {
   --bg-color: #e8f5e9;
   --text-color: #2e7d32;
 
-  --sideBar-bg: rgb(131, 179, 154);
+  /*Sidebar*/
+  --sideBar-bg: #f7fff3;
   --sideBar-text: #2e7d32;
+  --sideBar-profile-bg: rgb(0, 78, 38);
+  --sideBar-profile-text: #ffffff;
+  --profile-border: #ffffff;
 
+  --follow-bg: #ffffff;
+  --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754);
+
+  --liveNow: rgba(46, 16, 16, 0.6);
+  --recommend: rgba(5, 46, 22, 0.6);
+
+  /*Quick Settings*/
   --quickBar-title: rgb(226, 255, 240);
   --quickBar-title-bg: rgb(0, 78, 38);
   --quickBar-bg: #e8f5e9;
@@ -90,8 +129,19 @@ body[data-theme="orange"] {
   --bg-color: #ffe0b2;
   --text-color: #e65100;
 
-  --sideBar-bg: #ffe0b2;
+  --sideBar-bg:  #fff3dc;
   --sideBar-text: #4d3b31;
+  --sideBar-profile-bg:  #E67E22;
+  --sideBar-profile-text: #ffffff;
+  --profile-border: #ffd900;
+
+  --follow-bg: #fdfd00af;
+  --follow-text: #000000;
+  --follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754);
+
+  --liveNow: rgba(46, 16, 16, 0.6);
+  --recommend: rgba(5, 46, 22, 0.6);
+
 
   --quickBar-title-bg: #E67E22;
   --quickBar-title: #ffffff;
@@ -106,6 +156,26 @@ body {
 }
 
 
+/*Animations*/
+.follow-shadow {
+  
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
diff --git a/frontend/src/assets/styles/sidebar.css b/frontend/src/assets/styles/sidebar.css
index 97459f0..c556195 100644
--- a/frontend/src/assets/styles/sidebar.css
+++ b/frontend/src/assets/styles/sidebar.css
@@ -11,10 +11,6 @@
     --sideBar-DarkText: white;
   }
 
-.style {
-  font-size: 2em;
-  font-weight: bold;
-}
 
 .category-style {
   font-size: 1.75em;
diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx
index 3c4d401..57dd223 100644
--- a/frontend/src/components/Navigation/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "../../assets/styles/sidebar.css";
 import { useSidebar } from "../../context/SidebarContext";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../context/AuthContext";
@@ -71,7 +70,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
         } ${extraClasses}`}
     >
       {/* Profile Info */}
-      <div className="flex flex-row items-center justify-evenly bg-blue-700/40 py-[1em]">
+      <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
         <img
           src="/images/monkey.png"
           alt="profile picture"
@@ -79,20 +78,29 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
           onClick={() => navigate(`/user/${username}`)}
         />
         <div className="text-center flex flex-col items-center justify-center">
-          <h5 className="font-thin text-[0.85rem] cursor-default">Logged in as</h5>
+          <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
+            Logged in as
+          </h5>
           <button
             className="font-black text-[1.4rem] hover:underline"
             onClick={() => navigate(`/user/${username}`)}
           >
+            <div className="text-[var(--sideBar-profile-text)]">
             {username}
+            </div>
           </button>
         </div>
       </div>
 
-      <div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-4">
-        <h1 className="style border cursor-default">Following</h1>
+      <div id="following" className="flex flex-col flex-grow justify-evenly gap-4 p-[1rem]">
+        <div className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
+            onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--follow-shadow)"}
+            onMouseLeave={(e) => e.currentTarget.style.boxShadow = "none"}
+        >
+        <h1 className="text-[var(--follow-text)] font-bold text-2xl p-[0.75rem] cursor-default">Following</h1>
+        </div>
         <div id="streamers-followed" className="flex-grow">
-          <h2 className="text-[1.5rem] cursor-default">Streamers</h2>
+          <h2 className="border-b-4 border-t-4 text-2xl cursor-default">Streamers</h2>
           <ul className="mt-2 space-y-2">
             {followedStreamers.map((streamer) => (
               <li
@@ -107,7 +115,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
         </div>
 
         <div id="categories-followed" className="flex-grow">
-          <h2 className="text-[1.5rem] cursor-default">Categories</h2>
+          <h2 className="border-b-4 border-t-4 text-[1.5rem] cursor-default">Categories</h2>
           <ul className="mt-2 space-y-2">
             {followedCategories.map((category) => (
               <li
diff --git a/frontend/src/pages/UserPage.tsx b/frontend/src/pages/UserPage.tsx
index 5cec20f..2f901b3 100644
--- a/frontend/src/pages/UserPage.tsx
+++ b/frontend/src/pages/UserPage.tsx
@@ -242,6 +242,8 @@ const UserPage: React.FC = () => {
         </div>
       </div>
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+
+        
     </DynamicPageContent>
   );
 };