From 1870cc0f6ef880147c22ded614360095198c13ed Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 30 Apr 2025 16:20:20 +0200
Subject: [PATCH] courrier formatting

---
 components/email/BulkActionsToolbar.tsx | 98 ++++++++++++++++---------
 1 file changed, 64 insertions(+), 34 deletions(-)

diff --git a/components/email/BulkActionsToolbar.tsx b/components/email/BulkActionsToolbar.tsx
index cd445d7b..414e249b 100644
--- a/components/email/BulkActionsToolbar.tsx
+++ b/components/email/BulkActionsToolbar.tsx
@@ -3,6 +3,12 @@
 import React from 'react';
 import { Trash2, Archive, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface BulkActionsToolbarProps {
   selectedCount: number;
@@ -14,40 +20,64 @@ export default function BulkActionsToolbar({
   onBulkAction
 }: BulkActionsToolbarProps) {
   return (
-    <div className="bg-white border-b border-gray-100 px-4 py-2">
-      <div className="flex items-center gap-2 mb-2">
-        <span className="text-sm text-gray-600">
-          {selectedCount} selected
-        </span>
-      </div>
-      <div className="flex items-center gap-1.5">
-        <Button
-          variant="ghost"
-          size="sm"
-          className="text-gray-600 hover:text-gray-900 h-8 px-2"
-          onClick={() => onBulkAction('mark-read')}
-        >
-          <EyeOff className="h-4 w-4 mr-1" />
-          <span className="text-sm">Mark as read</span>
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="text-gray-600 hover:text-gray-900 h-8 px-2"
-          onClick={() => onBulkAction('archive')}
-        >
-          <Archive className="h-4 w-4 mr-1" />
-          <span className="text-sm">Archive</span>
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="text-red-600 hover:text-red-700 h-8 px-2"
-          onClick={() => onBulkAction('delete')}
-        >
-          <Trash2 className="h-4 w-4 mr-1" />
-          <span className="text-sm">Delete</span>
-        </Button>
+    <div className="bg-white border-b border-gray-100 px-4 py-1.5 flex items-center justify-between">
+      <span className="text-xs text-gray-600">
+        {selectedCount} selected
+      </span>
+      <div className="flex items-center gap-1">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-gray-600 hover:text-gray-900"
+                onClick={() => onBulkAction('mark-read')}
+              >
+                <EyeOff className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Mark as read</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-gray-600 hover:text-gray-900"
+                onClick={() => onBulkAction('archive')}
+              >
+                <Archive className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Archive</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-red-600 hover:text-red-700"
+                onClick={() => onBulkAction('delete')}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Delete</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
     </div>
   );