Improve admin form workspace UX

components/delete-buttons.tsx

@@ -57,8 +57,8 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Trash2 className="w-4 h-4" />
+        <Button variant="ghost" size="icon" aria-label="Delete form">
+          <Trash2 />
         </Button>
       </DialogTrigger>
       <DialogContent>
@@ -75,7 +75,7 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
           <Button variant="destructive" disabled={deleting} onClick={handleDelete}>
             {deleting ? (
               <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Loader2 data-icon="inline-start" className="animate-spin" />
                 Deleting...
               </>
             ) : (
@@ -88,7 +88,15 @@ export function DeleteFormButton({ formId }: DeleteFormButtonProps) {
   );
 }
 
-export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redirectUrl?: string }) {
+export function DeleteSubmissionButton({
+  id,
+  redirectUrl,
+  compact = false,
+}: {
+  id: string;
+  redirectUrl?: string;
+  compact?: boolean;
+}) {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
@@ -113,9 +121,15 @@ export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redire
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button size="sm" variant="destructive" disabled={loading}>
-          {loading ? <Spinner /> : <Trash2 className="w-3.5 h-3.5" />}
-          Delete
+        <Button
+          size={compact ? "icon-sm" : "sm"}
+          variant={compact ? "ghost" : "destructive"}
+          disabled={loading}
+          aria-label="Delete response"
+          className={compact ? "text-destructive" : undefined}
+        >
+          {loading ? <Spinner /> : <Trash2 />}
+          {!compact && "Delete"}
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
@@ -127,7 +141,7 @@ export function DeleteSubmissionButton({ id, redirectUrl }: { id: string, redire
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+          <AlertDialogAction onClick={handleDelete} variant="destructive">
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -158,8 +172,8 @@ export function DeleteAllSubmissionsButton({ formId }: { formId: string }) {
     <AlertDialog>
       <AlertDialogTrigger asChild>
         <Button variant="destructive" disabled={loading}>
-          {loading ? <Spinner /> : <Trash2 className="w-4 h-4" />}
-          Delete All Submissions
+          {loading ? <Spinner data-icon="inline-start" /> : <Trash2 data-icon="inline-start" />}
+          Delete all responses
         </Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
@@ -171,8 +185,8 @@ export function DeleteAllSubmissionsButton({ formId }: { formId: string }) {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDeleteAll}>
-            Delete All
+          <AlertDialogAction onClick={handleDeleteAll} variant="destructive">
+            Delete all responses
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>