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

DESIGN: Light/Dark Mode Button

Browse Source
This commit is contained in:
EvanLin3141
2025-02-06 00:57:46 +00:00
parent b44ca46034
commit 6ee1990542
2 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,7 +52,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
const shownCategory = Object.entries(testCategory).map(([dummyCategory, {dummyLink, dummyImage}]) => { const shownCategory = Object.entries(testCategory).map(([dummyCategory, {dummyLink, dummyImage}]) => {
return ( return (
<li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center <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]"/> <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> <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
</li> </li>
@@ -66,11 +66,11 @@ const Sidebar: React.FC<SideBarProps> = () => {
className={`fixed top-0 left-0 w-[250px] ${thisTheme className={`fixed top-0 left-0 w-[250px] ${thisTheme
? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]" ? " bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)]"
: " bg-[var(--sideBar-DarkBG)] text-[var(--sideBar-DarkText)]" : " 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`} transition-transform duration-500 ease-in-out animate-burnIn`}
onMouseLeave={() => setIsCursorOnSidebar(false)} onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}> style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
<Theme onClick={handleTheme} /> <Theme isMode={thisTheme} onClick={handleTheme} />
<h1 className="style"> Followed </h1> <h1 className="style"> Followed </h1>
<ul> <ul>

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

@@ -1,21 +1,31 @@
import React from 'react'; import React, { useState } from 'react';
import { SunMoon as SunMoonIcon } from 'lucide-react'; import { SunMoon as SunMoonIcon, Sun as SunIcon,
Moon as MoonIcon } from 'lucide-react';
interface ThemeProps { interface ThemeProps {
children?: React.ReactNode; children?: React.ReactNode;
onClick: () => void; onClick: () => void;
isMode: boolean;
} }
const Theme: React.FC<ThemeProps> = ({ onClick }) => { const Theme: React.FC<ThemeProps> = ({ onClick, isMode }) => {
return ( return (
<div className='relative top-[0.20em] left-[10em]'> <div className='relative top-[0.20em] left-[10em]'>
<button <button
onClick={onClick} 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} {isMode ? <MoonIcon size={27} className={`transition-transform duration-300 ease-in-out`}/>:
className={`transition-transform duration-300 ease-in-out`} <SunIcon size={27} className={`transition-transform duration-300 ease-in-out`}/>
/> }
</button> </button>
</div> </div>
); );