feat: enhance UI with new background gradients and responsive design adjustments across various components

components/accounts/account-bulk-actions.tsx

@@ -3,6 +3,8 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Trash2 } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
 
 interface AccountBulkActionsProps {
   selectedCount: number;
@@ -13,18 +15,39 @@ export function AccountBulkActions({
   selectedCount,
   onDelete,
 }: AccountBulkActionsProps) {
+  const isMobile = useIsMobile();
+  
   if (selectedCount === 0) return null;
 
   return (
-    <Card className="bg-destructive/5 border-destructive/20">
-      <CardContent className="py-3">
-        <div className="flex items-center gap-4">
-          <span className="text-sm font-medium">
+    <Card className="bg-destructive/5 border-destructive/20 sticky top-0 z-10 mb-4">
+      <CardContent className={cn(
+        "py-3",
+        isMobile && "px-3"
+      )}>
+        <div className={cn(
+          "flex items-center gap-2 sm:gap-4",
+          isMobile && "flex-col sm:flex-row"
+        )}>
+          <span className={cn(
+            "font-medium",
+            isMobile ? "text-xs" : "text-sm"
+          )}>
             {selectedCount} compte{selectedCount > 1 ? "s" : ""} sélectionné
             {selectedCount > 1 ? "s" : ""}
           </span>
-          <Button size="sm" variant="destructive" onClick={onDelete}>
-            <Trash2 className="w-4 h-4 mr-1" />
+          <Button 
+            size={isMobile ? "sm" : "sm"} 
+            variant="destructive" 
+            onClick={onDelete}
+            className={cn(
+              isMobile && "w-full sm:w-auto"
+            )}
+          >
+            <Trash2 className={cn(
+              isMobile ? "w-3.5 h-3.5" : "w-4 h-4",
+              "mr-1"
+            )} />
             Supprimer
           </Button>
         </div>