feat: revamp global styles and component designs with enhanced gradients, shadows, and responsive layouts for a modern fintech aesthetic

components/ui/select.tsx

@@ -56,17 +56,71 @@ function SelectContent({
   position = "popper",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const element = contentRef.current;
+    if (!element) return;
+
+    const disableAnimations = () => {
+      element.style.setProperty('animation', 'none', 'important');
+      element.style.setProperty('transition', 'none', 'important');
+      // Ne pas toucher au transform car il est utilisé pour le positionnement
+      element.style.setProperty('opacity', '1', 'important');
+      element.style.setProperty('will-change', 'auto', 'important');
+      
+      // Supprimer toutes les classes d'animation Tailwind
+      const classesToRemove = Array.from(element.classList).filter(cls => 
+        cls.includes('animate') || cls.includes('fade') || cls.includes('zoom') || cls.includes('slide')
+      );
+      classesToRemove.forEach(cls => element.classList.remove(cls));
+    };
+
+    // Désactiver immédiatement
+    disableAnimations();
+
+    // Observer pour les changements d'attributs
+    const observer = new MutationObserver(() => {
+      disableAnimations();
+    });
+
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ['class', 'data-state'],
+      subtree: false,
+    });
+
+    // Observer pour les changements dans le DOM
+    const domObserver = new MutationObserver(() => {
+      disableAnimations();
+    });
+
+    domObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+      domObserver.disconnect();
+    };
+  }, []);
+
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
+        ref={contentRef}
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "bg-popover text-popover-foreground relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           className,
         )}
         position={position}
+        style={{
+          animation: 'none !important',
+          transition: 'none !important',
+          opacity: '1 !important',
+        } as React.CSSProperties}
         {...props}
       >
         <SelectScrollUpButton />