Enhance UI components and animations: Introduce a shimmer animation effect in globals.css, refactor FeedbackPageClient, LoginPage, RegisterPage, and AdminPanel components to utilize new UI components for improved consistency and maintainability. Update event and feedback handling in EventsPageSection and FeedbackModal, ensuring a cohesive user experience across the application.

components/BackgroundPreferences.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useMemo } from "react";
 import ImageSelector from "@/components/ImageSelector";
 import { updateSitePreferences } from "@/actions/admin/preferences";
+import { Button, Card } from "@/components/ui";
 
 interface SitePreferences {
   id: string;
@@ -142,7 +143,7 @@ export default function BackgroundPreferences({
   };
 
   return (
-    <div className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4">
+    <Card variant="default" className="p-3 sm:p-4">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3 mb-4">
         <div className="min-w-0 flex-1">
           <h3 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
@@ -153,12 +154,14 @@ export default function BackgroundPreferences({
           </p>
         </div>
         {!isEditing && (
-          <button
+          <Button
             onClick={handleEdit}
-            className="px-3 sm:px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap flex-shrink-0"
+            variant="primary"
+            size="sm"
+            className="whitespace-nowrap flex-shrink-0"
           >
             Modifier
-          </button>
+          </Button>
         )}
       </div>
 
@@ -195,18 +198,12 @@ export default function BackgroundPreferences({
             label="Background Leaderboard"
           />
           <div className="flex flex-col sm:flex-row gap-2 pt-4">
-            <button
-              onClick={handleSave}
-              className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition"
-            >
+            <Button onClick={handleSave} variant="success" size="md">
               Enregistrer
-            </button>
-            <button
-              onClick={handleCancel}
-              className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
-            >
+            </Button>
+            <Button onClick={handleCancel} variant="secondary" size="md">
               Annuler
-            </button>
+            </Button>
           </div>
         </div>
       ) : (
@@ -381,6 +378,6 @@ export default function BackgroundPreferences({
           </div>
         </div>
       )}
-    </div>
+    </Card>
   );
 }