From d40958b2c722ff61222548774a5cac3b869620ef Mon Sep 17 00:00:00 2001
From: Pratham Yadav <iiprathamyadav@gmail.com>
Date: Fri, 18 Sep 2026 00:16:50 +0530
Subject: [PATCH] fix: improve theme toggle icon visibility

---
 frontend/src/Pages/Authentication.tsx   |  4 ++--
 frontend/src/components/ThemeToggle.tsx | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx
index 314cc16e..2aa76504 100644
--- a/frontend/src/Pages/Authentication.tsx
+++ b/frontend/src/Pages/Authentication.tsx
@@ -58,8 +58,8 @@ const RightSection: React.FC<RightSectionProps> = ({
 }) => (
   <div className="flex items-center justify-center w-full h-full relative">
     <div className="absolute right-4 top-4 md:right-8 md:top-8 flex flex-col md:flex-row gap-2 items-center">
-      <div className="w-32">
-        <ThemeToggle />
+      <div className="w-56">
+        <ThemeToggle iconSize={20} />
       </div>
       {authMode !== 'otpVerification' && authMode !== 'resetPassword' && (
         <Button
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index 41299e2b..ddcdcdfc 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -2,15 +2,19 @@ import { useContext, useState, useRef, useEffect } from "react";
 import { ThemeContext, ThemeOptions } from "../context/theme-provider";
 import { Moon, Sun, Contrast } from "lucide-react";
 
-export function ThemeToggle() {
+interface ThemeToggleProps {
+  iconSize?: number;
+}
+
+export function ThemeToggle({ iconSize = 16 }: ThemeToggleProps) {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const themeOptions = [
-    { id: ThemeOptions.Light, name: "Light", icon: <Sun size={16} /> },
-    { id: ThemeOptions.Dark, name: "Dark", icon: <Moon size={16} /> },
-    { id: ThemeOptions.Contrast, name: "High Contrast", icon: <Contrast size={16} /> },
+    { id: ThemeOptions.Light, name: "Light", icon: <Sun size={iconSize} className="shrink-0" /> },
+    { id: ThemeOptions.Dark, name: "Dark", icon: <Moon size={iconSize} className="shrink-0" /> },
+    { id: ThemeOptions.Contrast, name: "High Contrast", icon: <Contrast size={iconSize} className="shrink-0" /> },
   ];
 
   const setTheme = (targetId: number) => {
@@ -34,12 +38,12 @@ export function ThemeToggle() {
     <div className="relative w-full" ref={dropdownRef}>
       <button
         onClick={() => setOpen((prev) => !prev)}
-        className="w-full flex items-center gap-2 p-2 text-sm font-medium rounded-md hover:bg-muted/70 transition"
+        className="w-full flex items-center gap-2 p-2 text-sm font-medium text-foreground rounded-md hover:bg-muted/70 transition"
       >
         {themeOptions.find((t) => t.id === theme)?.icon} Theme:{" "}
         <span>{themeOptions.find((t) => t.id === theme)?.name}</span>
         <svg
-          className={`ml-auto w-3 h-3 transition-transform ${open ? "rotate-180" : ""}`}
+          className={`ml-auto w-3 h-3 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
           fill="none"
           stroke="currentColor"
           strokeWidth="2"
@@ -65,4 +69,4 @@ export function ThemeToggle() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}