fix: logo hydration + overflow, redesign theme toggle with Sun/Moon icons

src/shared/components/common/theme-toggle.tsx

@@ -2,6 +2,7 @@
 
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { Sun, Moon } from "lucide-react";
 import { cn } from "@/shared/lib/utils";
 
 export function ThemeToggle() {
@@ -11,8 +12,7 @@ export function ThemeToggle() {
   useEffect(() => setMounted(true), []);
 
   if (!mounted) {
-    // Prevent hydration mismatch — render placeholder
-    return <div className="h-7 w-14 rounded-full bg-muted" />;
+    return <div className="h-8 w-16 rounded-full bg-muted" />;
   }
 
   const isDark = resolvedTheme === "dark";
@@ -25,75 +25,83 @@ export function ThemeToggle() {
       aria-label="Schimbă tema"
       onClick={() => setTheme(isDark ? "light" : "dark")}
       className={cn(
-        "relative inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-500 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "relative inline-flex h-8 w-16 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-500 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         isDark
-          ? "bg-gradient-to-r from-indigo-900 to-slate-800"
-          : "bg-gradient-to-r from-sky-300 to-amber-200",
+          ? "bg-gradient-to-r from-indigo-950 via-indigo-900 to-slate-800"
+          : "bg-gradient-to-r from-sky-400 via-sky-300 to-amber-200",
       )}
     >
       {/* Stars — visible in dark mode */}
       <span
         className={cn(
-          "pointer-events-none absolute right-2 top-1 flex gap-[3px] transition-opacity duration-500",
-          isDark ? "opacity-100" : "opacity-0",
+          "pointer-events-none absolute left-2 top-1.5 flex gap-1 transition-all duration-500",
+          isDark ? "opacity-100 scale-100" : "opacity-0 scale-50",
         )}
       >
-        <span className="h-[3px] w-[3px] rounded-full bg-white/80 animate-[pulse_2s_ease-in-out_infinite]" />
+        <span className="h-[3px] w-[3px] rounded-full bg-white/90 animate-[pulse_2s_ease-in-out_infinite]" />
         <span
-          className="mt-1 h-[2px] w-[2px] rounded-full bg-white/60 animate-[pulse_3s_ease-in-out_infinite]"
-          style={{ animationDelay: "0.5s" }}
+          className="mt-1.5 h-[2px] w-[2px] rounded-full bg-white/60 animate-[pulse_3s_ease-in-out_infinite]"
+          style={{ animationDelay: "0.7s" }}
         />
         <span
-          className="h-[2px] w-[2px] rounded-full bg-white/50 animate-[pulse_2.5s_ease-in-out_infinite]"
-          style={{ animationDelay: "1s" }}
+          className="-mt-0.5 h-[2px] w-[2px] rounded-full bg-white/50 animate-[pulse_2.5s_ease-in-out_infinite]"
+          style={{ animationDelay: "1.2s" }}
         />
       </span>
 
-      {/* Sliding circle (sun/moon) */}
-      <span
-        className={cn(
-          "pointer-events-none relative inline-block h-5 w-5 rounded-full shadow-lg transition-all duration-500 ease-in-out",
-          isDark ? "translate-x-7" : "translate-x-1",
-          isDark
-            ? "bg-slate-200 shadow-slate-400/30"
-            : "bg-amber-400 shadow-amber-500/40",
-        )}
-      >
-        {/* Sun rays — visible in light mode */}
-        <span
-          className={cn(
-            "absolute inset-0 transition-opacity duration-300",
-            isDark ? "opacity-0" : "opacity-100",
-          )}
-        >
-          {/* Glow */}
-          <span className="absolute -inset-1 rounded-full bg-amber-300/30 animate-[pulse_2s_ease-in-out_infinite]" />
-        </span>
-
-        {/* Moon craters — visible in dark mode */}
-        <span
-          className={cn(
-            "absolute inset-0 transition-opacity duration-300",
-            isDark ? "opacity-100" : "opacity-0",
-          )}
-        >
-          <span className="absolute left-1 top-1 h-1.5 w-1.5 rounded-full bg-slate-300/60" />
-          <span className="absolute bottom-1.5 right-1.5 h-1 w-1 rounded-full bg-slate-300/40" />
-          <span className="absolute right-1 top-2.5 h-[3px] w-[3px] rounded-full bg-slate-300/30" />
-        </span>
-      </span>
-
       {/* Clouds — visible in light mode */}
       <span
         className={cn(
-          "pointer-events-none absolute bottom-0.5 left-1.5 transition-all duration-500",
+          "pointer-events-none absolute right-2 bottom-1 transition-all duration-500",
           isDark
-            ? "translate-y-2 opacity-0"
-            : "translate-y-0 opacity-100",
+            ? "translate-y-3 opacity-0 scale-75"
+            : "translate-y-0 opacity-100 scale-100",
         )}
       >
-        <span className="inline-block h-2 w-4 rounded-full bg-white/60" />
-        <span className="absolute -right-1 -top-0.5 h-1.5 w-2.5 rounded-full bg-white/40" />
+        <span className="inline-block h-2 w-4 rounded-full bg-white/70" />
+        <span className="absolute -right-1 -top-0.5 h-1.5 w-2.5 rounded-full bg-white/50" />
+      </span>
+
+      {/* Sliding knob with Sun/Moon icon */}
+      <span
+        className={cn(
+          "pointer-events-none relative z-10 inline-flex h-6 w-6 items-center justify-center rounded-full shadow-lg transition-all duration-500 ease-in-out",
+          isDark ? "translate-x-[33px]" : "translate-x-[3px]",
+          isDark
+            ? "bg-indigo-100 shadow-indigo-300/40"
+            : "bg-amber-50 shadow-amber-400/50",
+        )}
+      >
+        {/* Sun icon */}
+        <Sun
+          className={cn(
+            "absolute h-4 w-4 text-amber-500 transition-all duration-500",
+            isDark
+              ? "rotate-90 scale-0 opacity-0"
+              : "rotate-0 scale-100 opacity-100",
+          )}
+          strokeWidth={2.5}
+        />
+        {/* Moon icon */}
+        <Moon
+          className={cn(
+            "absolute h-3.5 w-3.5 text-indigo-600 transition-all duration-500",
+            isDark
+              ? "rotate-0 scale-100 opacity-100"
+              : "-rotate-90 scale-0 opacity-0",
+          )}
+          strokeWidth={2.5}
+        />
+
+        {/* Glow ring */}
+        <span
+          className={cn(
+            "absolute inset-0 rounded-full transition-all duration-500",
+            isDark
+              ? "shadow-[0_0_8px_2px_rgba(129,140,248,0.3)]"
+              : "shadow-[0_0_8px_2px_rgba(251,191,36,0.3)] animate-[pulse_2s_ease-in-out_infinite]",
+          )}
+        />
       </span>
     </button>
   );

src/shared/components/layout/header.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  PanelLeft,
-  User as UserIcon,
-  LogOut,
-  LogIn,
-} from "lucide-react";
+import { PanelLeft, User as UserIcon, LogOut, LogIn } from "lucide-react";
 import { Button } from "@/shared/components/ui/button";
 import {
   DropdownMenu,

src/shared/components/layout/sidebar.tsx

@@ -86,8 +86,13 @@ function SidebarLogos() {
   const [animatingId, setAnimatingId] = useState<string | null>(null);
   const [comboProgress, setComboProgress] = useState(0);
   const [showConfetti, setShowConfetti] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const { resolvedTheme } = useTheme();
 
+  useEffect(() => setMounted(true), []);
+
+  const isDark = mounted ? resolvedTheme === "dark" : false;
+
   // Reset combo after 3 seconds of inactivity
   useEffect(() => {
     if (comboProgress === 0) return;
@@ -130,14 +135,12 @@ function SidebarLogos() {
   );
 
   return (
-    <div className="relative flex w-full items-center justify-between gap-2">
+    <div className="relative flex w-full items-center justify-center gap-3 overflow-hidden">
       {LOGO_COMPANIES.map((companyId, index) => {
         const company = COMPANIES[companyId];
-        const logoSrc =
-          resolvedTheme === "dark"
-            ? (company?.logo?.dark ?? company?.logo?.light)
-            : company?.logo?.light;
-        if (!logoSrc) return null;
+        const lightSrc = company?.logo?.light;
+        const darkSrc = company?.logo?.dark ?? company?.logo?.light;
+        if (!lightSrc) return null;
         const isAnimating = animatingId === companyId;
         const animation = isAnimating
           ? ANIMATIONS[index % ANIMATIONS.length]
@@ -150,18 +153,34 @@ function SidebarLogos() {
             type="button"
             onClick={(e) => handleLogoClick(companyId, e)}
             className={cn(
-              "relative shrink-0 rounded-md p-0.5 transition-all duration-200 hover:scale-110 focus:outline-none",
+              "relative min-w-0 flex-1 rounded-md p-0.5 transition-all duration-200 hover:scale-110 focus:outline-none",
               glow,
               isAnimating && animation,
             )}
             title={company.shortName}
           >
+            {/* Light variant — hidden in dark mode */}
             <Image
-              src={logoSrc}
+              src={lightSrc}
               alt={company.shortName}
               width={200}
               height={40}
-              className="h-7 w-auto max-w-[72px] object-contain"
+              className={cn(
+                "h-7 w-full object-contain transition-opacity duration-300",
+                isDark ? "hidden" : "block",
+              )}
+              suppressHydrationWarning
+            />
+            {/* Dark variant — hidden in light mode */}
+            <Image
+              src={darkSrc ?? lightSrc}
+              alt={company.shortName}
+              width={200}
+              height={40}
+              className={cn(
+                "h-7 w-full object-contain transition-opacity duration-300",
+                isDark ? "block" : "hidden",
+              )}
               suppressHydrationWarning
             />
           </button>