dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

MOVE: Theme to quick settings

Browse Source
This commit is contained in:
EvanLin3141
2025-02-09 17:19:34 +00:00
parent 8942298b38
commit 4cc48fe0b2
9 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Layout/Navbar.tsx
View File

@@ -84,7 +84,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
<SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
</Button>
<div
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
}`}
>
@@ -102,8 +102,8 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
</Button>
<div
className={`fixed top-0 right-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
transition-transform transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
}`}
>
<QuickSettings />

20
frontend/src/components/Layout/QuickSettings.tsx
View File

@@ -1,9 +1,17 @@
import React from 'react'
import React from "react";
import Theme from "./Theme";
import { useTheme } from "../../context/ThemeContext";
const QuickSettings: React.FC = () => {
const { theme } = useTheme();
const QuickSettings = () => {
return (
<div className='bg-white'>QuickSettings</div>
)
}
<div className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
style={{ backgroundColor: 'var(--bg-color)', color: 'var(--text-color)' }}>
<h3 className="text-xl">Current Theme: {theme}</h3>
<Theme />
</div>
);
};
export default QuickSettings
export default QuickSettings;

34
frontend/src/components/Layout/Sidebar.tsx
View File

@@ -8,7 +8,6 @@ interface SideBarProps {
}
const Sidebar: React.FC<SideBarProps> = () => {
const [thisTheme, setThisTheme] = useState(false);
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
const [triggerAnimation, setTriggerAnimation] = useState(false);
useEffect(() => {
@@ -22,23 +21,19 @@ const Sidebar: React.FC<SideBarProps> = () => {
};
}, [isCursorOnSidebar]);
const handleTheme = () => {
setThisTheme(!thisTheme);
setTriggerAnimation(false); // Reset animation
setTimeout(() => setTriggerAnimation(true), 0); // Re-trigger animation
};
const testStreamer: Record<string, string> = {
"Markiplier": "Slink1",
"Jacksepticeye": "Slink2",
"8-BitRyan": "Slink3",
};
const testCategory: Record<string, {dummyLink: string; dummyImage: string} > = {
"Action": {dummyLink : "link1", dummyImage: "../../../images/icons/Action.webp"},
"Horror": {dummyLink : "link2", dummyImage: "../../../images/icons/Horror.png"},
"Psychological": {dummyLink : "link3", dummyImage: "../../../images/icons/Psychological.png"},
"Adult": {dummyLink : "link4", dummyImage: "../../../images/icons/R-18.png"},
"Shooter": {dummyLink : "link5", dummyImage: "../../../images/icons/Shooter.png"}
const testCategory: Record<string, { dummyLink: string; dummyImage: string }> = {
"Action": { dummyLink: "link1", dummyImage: "../../../images/icons/Action.webp" },
"Horror": { dummyLink: "link2", dummyImage: "../../../images/icons/Horror.png" },
"Psychological": { dummyLink: "link3", dummyImage: "../../../images/icons/Psychological.png" },
"Adult": { dummyLink: "link4", dummyImage: "../../../images/icons/R-18.png" },
"Shooter": { dummyLink: "link5", dummyImage: "../../../images/icons/Shooter.png" }
};
const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
@@ -49,11 +44,11 @@ const Sidebar: React.FC<SideBarProps> = () => {
);
});
const shownCategory = Object.entries(testCategory).map(([dummyCategory, {dummyLink, dummyImage}]) => {
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 m-[0.25em]">
<img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[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>
);
@@ -61,17 +56,8 @@ const Sidebar: React.FC<SideBarProps> = () => {
return (
<>
<div id="sidebar"
key={triggerAnimation ? 'burn-in' : 'reset'}
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)]"
} 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 isMode={thisTheme} onClick={handleTheme} />
<div>
<h1 className="style"> Followed </h1>
<ul>
{shownStreamers}

50
frontend/src/components/Layout/Theme.tsx
View File

@@ -1,33 +1,35 @@
import React, { useState } from 'react';
import { SunMoon as SunMoonIcon, Sun as SunIcon,
Moon as MoonIcon } from 'lucide-react';
import React from "react";
import { Sun as SunIcon, Moon as MoonIcon, Droplet as BlueIcon, Leaf as GreenIcon, Flame as OrangeIcon } from "lucide-react";
import { useTheme } from "../../context/ThemeContext";
interface ThemeProps {
children?: React.ReactNode;
onClick: () => void;
isMode: boolean;
}
const themeIcons = {
light: <SunIcon size={27} className="text-yellow-400" />,
dark: <MoonIcon size={27} className="text-white" />,
blue: <BlueIcon size={27} className="text-blue-500" />,
green: <GreenIcon size={27} className="text-green-500" />,
orange: <OrangeIcon size={27} className="text-orange-500" />,
};
const Theme: React.FC<ThemeProps> = ({ onClick, isMode }) => {
const themes = ["light", "dark", "blue", "green", "orange"];
const Theme: React.FC = () => {
const { theme, setTheme } = useTheme();
const handleNextTheme = () => {
const currentIndex = themes.indexOf(theme);
const nextIndex = (currentIndex + 1) % themes.length;
const nextTheme = themes[nextIndex];
setTheme(nextTheme);
document.body.setAttribute("data-theme", nextTheme); // Update globally
};
return (
<div className='relative top-[0.20em] left-[10em]'>
<button
onClick={onClick}
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 `}
onClick={handleNextTheme}
className="p-2 text-[1.5rem] flex items-center gap-2 rounded-md border transition-all"
>
{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>
{themeIcons[theme as keyof typeof themeIcons]} {theme}
</button>
);
};