fix: update UpdateToast component for dark mode support and adjust toast close button styles

Author: H1B0B0

frontend/app/layout.tsx

@@ -84,8 +84,8 @@ export default function RootLayout({
             {!performanceMode && (
               <div className="absolute inset-0">
                 <Spline
-                  scene="https://prod.spline.design/fDEn2H4mhzWKkh09/scene.splinecode"
-                  className="absolute blur-sm"
+                  scene="https://prod.spline.design/0zfiWcHYJLJfg6nt/scene.splinecode"
+                  className="absolute"
                 />
               </div>
             )}

frontend/components/UpdateToast.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@heroui/button";
+import { useTheme } from "next-themes";
 
 interface UpdateToastContentProps {
   version: string;
@@ -10,22 +11,29 @@ export default function UpdateToastContent({
   version,
   onViewDetails,
 }: UpdateToastContentProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
   return (
     <div className="flex items-start gap-4 p-1">
       <span className="text-3xl">🚀</span>
       <div className="flex-1">
-        <h3 className="font-bold text-lg mb-1 text-white">
-          New version available!
+        <h3 className={`font-bold text-lg mb-1 ${isDark ? "text-white" : "text-gray-900"}`}>
+          Nouvelle version disponible !
         </h3>
-        <p className="text-sm text-white/80 mb-4">
-          Version {version} is now available
+        <p className={`text-sm mb-4 ${isDark ? "text-white/80" : "text-gray-700"}`}>
+          Version {version} est maintenant disponible
         </p>
         <Button
           size="sm"
           onPress={onViewDetails}
-          className="bg-green-500 hover:bg-green-600 text-black font-semibold rounded-lg transition-colors"
+          className={`${
+            isDark
+              ? "bg-green-500 hover:bg-green-600"
+              : "bg-purple-500 hover:bg-purple-600"
+          } text-white font-semibold rounded-lg transition-colors`}
         >
-          View details
+          Voir les détails
         </Button>
       </div>
     </div>

frontend/styles/globals.css

@@ -2,16 +2,24 @@
 
 @config "../tailwind.config.js";
 
-/* Custom Toastify styles for dark mode close button */
-.Toastify__toast-theme--dark .Toastify__close-button,
-.Toastify__close-button {
+/* Custom Toastify styles for close button */
+.Toastify__toast-theme--dark .Toastify__close-button {
   color: #ffffff !important;
   opacity: 0.7;
   transition: opacity 0.2s ease;
 }
 
-.Toastify__toast-theme--dark .Toastify__close-button:hover,
-.Toastify__close-button:hover {
+.Toastify__toast-theme--dark .Toastify__close-button:hover {
+  opacity: 1;
+}
+
+.Toastify__toast-theme--light .Toastify__close-button {
+  color: #000000 !important;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.Toastify__toast-theme--light .Toastify__close-button:hover {
   opacity: 1;
 }