innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add theme switching for logo

Browse Source
This commit is contained in:
Mikayla Dobson
2023-10-09 09:52:24 -05:00
parent 01a4dfb690
commit 940ebf3d98
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/Navbar/logo.tsx
View File

@@ -25,13 +25,13 @@ export const StackedLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cus
return (
<div id="venn-diagram-logo-container" className="flex w-full h-auto justify-center">
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col z-40 items-center justify-center animate-logo-throw-left h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100">M</p>
<p className="text-black dark:text-white text-6xl font-bold opacity-100">M</p>
</div>
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-down h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100 z-50">C</p>
<p className="text-black dark:text-white text-6xl font-bold opacity-100 z-50">C</p>
</div>
<div onMouseEnter={shift} onMouseOut={shift} className={`absolute flex flex-col items-center justify-center animate-logo-throw-right h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100">D</p>
<p className="text-black dark:text-white text-6xl font-bold opacity-100">D</p>
</div>
</div>
)
@@ -51,15 +51,15 @@ export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cust
if (customHookInstance) return (
<button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
<div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.firstColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">M</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">M</p>
</div>
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.secondColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">C</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">C</p>
</div>
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${customHookInstance.thirdColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">D</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">D</p>
</div>
</button>
)
@@ -67,15 +67,15 @@ export const InlineLogo: FC<LogoProps> = ({ shiftInterval, customColorList, cust
return (
<button onClick={() => router.push('/')} id="inline-logo-container" className="flex w-auto h-auto justify-center">
<div className={`flex flex-col items-center justify-center h-16 w-16 bg-opacity-75 ${firstColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">M</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">M</p>
</div>
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${secondColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">C</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">C</p>
</div>
<div className={`flex flex-col -ml-3 items-center justify-center h-16 w-16 bg-opacity-75 ${thirdColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-2xl font-bold opacity-100">D</p>
<p className="text-black dark:text-white text-2xl font-bold opacity-100">D</p>
</div>
</button>
)