fix: dark mode logo variants + increase logo size to 40px

src/config/companies.ts

@@ -38,7 +38,7 @@ export const COMPANIES: Record<CompanyId, Company> = {
     city: "Cluj-Napoca",
     logo: {
       light: "/logos/logo-us-light.svg",
-      dark: "/logos/logo-us-light.svg",
+      dark: "/logos/logo-us-dark.svg",
     },
   },
   "studii-de-teren": {
@@ -51,7 +51,7 @@ export const COMPANIES: Record<CompanyId, Company> = {
     city: "Cluj-Napoca",
     logo: {
       light: "/logos/logo-sdt-light.svg",
-      dark: "/logos/logo-sdt-light.svg",
+      dark: "/logos/logo-sdt-dark.svg",
     },
   },
   group: {

src/shared/components/layout/sidebar.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState, useCallback, useEffect } from "react";
+import { useTheme } from "next-themes";
 import * as Icons from "lucide-react";
 import { buildNavigation } from "@/config/navigation";
 import { COMPANIES } from "@/config/companies";
@@ -85,6 +86,7 @@ function SidebarLogos() {
   const [animatingId, setAnimatingId] = useState<string | null>(null);
   const [comboProgress, setComboProgress] = useState(0);
   const [showConfetti, setShowConfetti] = useState(false);
+  const { resolvedTheme } = useTheme();
 
   // Reset combo after 3 seconds of inactivity
   useEffect(() => {
@@ -128,10 +130,13 @@ function SidebarLogos() {
   );
 
   return (
-    <div className="relative flex items-center gap-1">
+    <div className="relative flex items-center gap-1.5">
       {LOGO_COMPANIES.map((companyId, index) => {
         const company = COMPANIES[companyId];
-        const logoSrc = company?.logo?.light;
+        const logoSrc =
+          resolvedTheme === "dark"
+            ? (company?.logo?.dark ?? company?.logo?.light)
+            : company?.logo?.light;
         if (!logoSrc) return null;
         const isAnimating = animatingId === companyId;
         const animation = isAnimating
@@ -154,9 +159,9 @@ function SidebarLogos() {
             <Image
               src={logoSrc}
               alt={company.shortName}
-              width={32}
+              width={40}
-              height={32}
+              height={40}
-              className="h-8 w-8 object-contain"
+              className="h-10 w-10 object-contain"
               suppressHydrationWarning
             />
           </button>