fix: theme toggle

apps/edr-freight-web/backoffice/src/shared/common/ui/sonner.tsx

@@ -1,12 +1,13 @@
-import { useTheme } from "next-themes"
 import { Toaster as Sonner, ToasterProps } from "sonner"
 
+// Pinned to "light": the app is light-only. This previously read next-themes'
+// useTheme, which falls back to "system" when no ThemeProvider is mounted (and
+// none is) — sonner then resolves "system" against prefers-color-scheme and
+// rendered dark toasts over a light UI on any OS set to dark.
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme="light"
       className="toaster group"
       toastOptions={{
         classNames: {

apps/edr-freight-web/backoffice/src/shared/components/login/Login.tsx

@@ -13,8 +13,6 @@ import {
   Mail,
   Phone,
   User,
-  Moon,
-  Sun,
 } from "lucide-react";
 import { useAuthUser } from "@/shared/hooks/useAuthUser";
 import { useTenantConfig } from "@/layout/components/TenantConfig";
@@ -26,13 +24,11 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useAuth } from "@/shared/context/AuthContext";
 import OTPModal from "./OTPModal";
-import { useDarkMode } from "@/shared/hooks/useDarkMode";
 import { getRememberMePreference } from "@/shared/utils/authPersistence";
 
 export const Login = () => {
   const { login: authLogin, isLoggingIn } = useAuthUser();
   const { config } = useTenantConfig();
-  const { isDarkMode, toggleDarkMode } = useDarkMode();
   const detectLoginMethod = (value: string): "email" | "phone" | "username" => {
     if (value.includes("@") && value.includes(".com")) return "email";
     if (/^\+?\d+$/.test(value)) return "phone";
@@ -121,19 +117,6 @@ export const Login = () => {
           </span>
         </Link>
 
-        {/* Dark Mode Toggle */}
-        <button
-          onClick={toggleDarkMode}
-          className="fixed top-4 right-4 md:top-6 md:right-6 z-50 p-2 rounded-full bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700"
-          title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
-        >
-          {isDarkMode ? (
-            <Sun className="w-5 h-5 text-yellow-500" />
-          ) : (
-            <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-          )}
-        </button>
-
         <div className="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden flex flex-col lg:flex-row">
           {/* Left Panel - Login Form */}
           <div className="lg:w-1/2 w-full p-6 sm:p-8 md:p-10 lg:p-12 xl:p-16 flex flex-col justify-center">

apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts

@@ -1,33 +0,0 @@
-import { useEffect, useState } from "react";
-
-// Same storage key/values as main.tsx and FreightDashboardLayout so the
-// vendored IAM UI toggle and the host dashboard toggle stay in sync.
-const THEME_STORAGE_KEY = "edr-theme";
-
-export const useDarkMode = () => {
-  const [isDarkMode, setIsDarkMode] = useState(() => {
-    // Initialize from localStorage or system preference
-    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-    if (savedTheme === "dark" || savedTheme === "light") {
-      return savedTheme === "dark";
-    }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  });
-
-  useEffect(() => {
-    // Apply dark mode class on mount and when isDarkMode changes
-    if (isDarkMode) {
-      document.documentElement.classList.add("dark");
-      localStorage.setItem(THEME_STORAGE_KEY, "dark");
-    } else {
-      document.documentElement.classList.remove("dark");
-      localStorage.setItem(THEME_STORAGE_KEY, "light");
-    }
-  }, [isDarkMode]);
-
-  const toggleDarkMode = () => {
-    setIsDarkMode((prev) => !prev);
-  };
-
-  return { isDarkMode, toggleDarkMode };
-};