Merge pull request #97 from mowblox/fix/theme-switcher

fix theme switching bug
mowblox · Feb 12, 2025 · ca97215 · ca97215
2 parents 6661a75 + db4a776
commit ca97215
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
@@ -15,7 +15,7 @@ export default function DashboardLayout({
 }>) {
   return (
     <React.Suspense>
-      <div className="flex h-screen relative">
+      <div className="flex h-screen relative text-dark dark:text-white/60">
         <Sidebar />
         <div className="flex flex-col w-full relative">
           <Header />

diff --git a/frontend/src/app/dashboard/results/[id]/page.tsx b/frontend/src/app/dashboard/results/[id]/page.tsx
@@ -29,7 +29,7 @@ const page = () => {
       <BackButton />
 
       <div className="election-details flex flex-col md:flex-row justify-between gap-x-24 gap-y-12 mt-10">
-        <section className="flex flex-col gap-8 md:gap-[60px] text-white/60 md:flex-1">
+        <section className="flex flex-col gap-8 md:gap-[60px] md:flex-1">
           <header className="flex flex-col gap-3">
             <StatusPill status="Closed" />
             <h1 className="text-[32px]">2024 SRC President - UG</h1>
@@ -60,7 +60,7 @@ const page = () => {
             <div className="flex flex-col gap-8">
               {electionDetails.map((detail) => (
                 <div key={detail.value} className="flex justify-between">
-                  <p className="text-white/60">{detail.label}</p>
+                  <p>{detail.label}</p>
                   <p className="text-secondary">{detail.value}</p>
                 </div>
               ))}
@@ -81,7 +81,7 @@ const AsideContainer = ({
 }) => {
   return (
     <article className="px-7 py-5 rounded-xl border border-[#EAEAEA]/30 flex flex-col gap-6">
-      <h4 className="text-white/60 text-2xl">{title}</h4>
+      <h4 className="text-2xl">{title}</h4>
       {children}
     </article>
   );
@@ -92,7 +92,7 @@ const Standing = ({ name, voteCount }: { name: string; voteCount: number }) => {
   return (
     <div className="w-full">
       <div className="flex items-center w-full justify-between">
-        <p className="text-lg text-white/60">{name}</p>
+        <p className="text-lg">{name}</p>
 
         <div className="mr-1.5 flex gap-3 text-secondary">
           <p>{`${voteCount} votes`}</p>

diff --git a/frontend/src/components/Header/ThemeSwitcher.tsx b/frontend/src/components/Header/ThemeSwitcher.tsx
@@ -5,13 +5,16 @@ import Image from "next/image";
 import React from "react";
 
 const ThemeSwitcher = () => {
-  const { theme, setTheme } = useTheme();
+  const { resolvedTheme: theme, setTheme } = useTheme();
   const toggleTheme = () => {
     setTheme(theme === "light" ? "dark" : "light");
   };
   return (
     <button
-      className="w-[67px] h-[30px] rounded-full bg-gradient-to-b from-[#66FFED] to-[#FFEEB2] dark:from-[#2B4485] dark:to-[#AFCAFF] transition-all duration-1000 relative flex items-center z-10"
+      className={cn(
+        "w-[67px] h-[30px] rounded-full bg-gradient-to-b from-[#66FFED] to-[#FFEEB2] transition-all duration-1000 relative flex items-center z-10",
+        theme === "dark" && "from-[#2B4485] to-[#AFCAFF]"
+      )}
       onClick={toggleTheme}
     >
       <Image

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -1,4 +1,3 @@
-import { m } from "framer-motion";
 import type { Config } from "tailwindcss";
 
 const config: Config = {
@@ -67,4 +66,4 @@ const config: Config = {
   },
 };
 
-export default config;
+export default config;