From e6b90954543ef98b820d43dc2b386a946d1b2267 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Thu, 2 Jan 2025 11:33:07 +0100
Subject: [PATCH] NORY-47: fix alert dialog action styling

---
 .../src/app/(inside)/user/data-table.tsx      | 31 ++++++++++---------
 .../confirmation-dialog-wrapper.tsx           | 24 +++++---------
 dashboard/src/components/ui/alert-dialog.tsx  |  2 +-
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/dashboard/src/app/(inside)/user/data-table.tsx b/dashboard/src/app/(inside)/user/data-table.tsx
index 0a478fe..dd88dc8 100644
--- a/dashboard/src/app/(inside)/user/data-table.tsx
+++ b/dashboard/src/app/(inside)/user/data-table.tsx
@@ -15,7 +15,7 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Button } from '@/components/ui/button';
+import { Button, buttonVariants } from '@/components/ui/button';
 import Link from 'next/link';
 import { toast } from 'sonner';
 import {
@@ -259,12 +259,14 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
-                                    <AlertDialogAction onClick={() => deleteIdentitySessions(currentIdentity.id)}>
-                                        Invalidate sessions
-                                    </AlertDialogAction>
                                     <AlertDialogCancel>
                                         Cancel
                                     </AlertDialogCancel>
+                                    <AlertDialogAction
+                                        className={buttonVariants({ variant: 'destructive' })}
+                                        onClick={() => deleteIdentitySessions(currentIdentity.id)}>
+                                        Invalidate sessions
+                                    </AlertDialogAction>
                                 </AlertDialogFooter>
                             </AlertDialogContent>
                         </AlertDialog>
@@ -280,13 +282,13 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
+                                    <AlertDialogCancel>
+                                        Cancel
+                                    </AlertDialogCancel>
                                     <AlertDialogAction
                                         onClick={() => blockIdentity(currentIdentity.id)}>
                                         Block identity
                                     </AlertDialogAction>
-                                    <AlertDialogCancel>
-                                        Cancel
-                                    </AlertDialogCancel>
                                 </AlertDialogFooter>
                             </AlertDialogContent>
                         </AlertDialog>
@@ -302,13 +304,13 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
+                                    <AlertDialogCancel>
+                                        Cancel
+                                    </AlertDialogCancel>
                                     <AlertDialogAction
                                         onClick={() => unblockIdentity(currentIdentity.id)}>
                                         Unblock identity
                                     </AlertDialogAction>
-                                    <AlertDialogCancel>
-                                        Cancel
-                                    </AlertDialogCancel>
                                 </AlertDialogFooter>
                             </AlertDialogContent>
                         </AlertDialog>
@@ -325,13 +327,14 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>
-                                    <AlertDialogAction
-                                        onClick={() => deleteIdentity(currentIdentity.id)}>
-                                        Delete identity
-                                    </AlertDialogAction>
                                     <AlertDialogCancel>
                                         Cancel
                                     </AlertDialogCancel>
+                                    <AlertDialogAction
+                                        className={buttonVariants({ variant: 'destructive' })}
+                                        onClick={() => deleteIdentity(currentIdentity.id)}>
+                                        Delete identity
+                                    </AlertDialogAction>
                                 </AlertDialogFooter>
                             </AlertDialogContent>
                         </AlertDialog>
diff --git a/dashboard/src/components/confirmation-dialog-wrapper.tsx b/dashboard/src/components/confirmation-dialog-wrapper.tsx
index dbd8c83..f1d791a 100644
--- a/dashboard/src/components/confirmation-dialog-wrapper.tsx
+++ b/dashboard/src/components/confirmation-dialog-wrapper.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, ButtonProps } from '@/components/ui/button';
+import { ButtonProps, buttonVariants } from '@/components/ui/button';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -23,9 +23,8 @@ interface ButtonWithConfirmDialogProps {
     dialogTitle: string
     dialogDescription: string
     dialogButtonCancel?: string
-    dialogButtonCancelProps?: ButtonProps
     dialogButtonSubmit?: string
-    dialogButtonSubmitProps?: ButtonProps
+    dialogButtonSubmitProps?: typeof buttonVariants
     children: ReactNode
 }
 
@@ -37,7 +36,6 @@ export function ConfirmationDialogWrapper(
         dialogTitle,
         dialogDescription,
         dialogButtonCancel,
-        dialogButtonCancelProps,
         dialogButtonSubmit,
         dialogButtonSubmitProps,
         children,
@@ -59,19 +57,13 @@ export function ConfirmationDialogWrapper(
                         <AlertDialogDescription>{dialogDescription}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
-                        <AlertDialogCancel asChild>
-                            <Button
-                                onClick={onCancel}
-                                {...dialogButtonCancelProps}>
-                                {dialogButtonCancel ?? 'Cancel'}
-                            </Button>
+                        <AlertDialogCancel onClick={onCancel}>
+                            {dialogButtonCancel ?? 'Cancel'}
                         </AlertDialogCancel>
-                        <AlertDialogAction asChild>
-                            <Button
-                                onClick={onSubmit}
-                                {...dialogButtonSubmitProps}>
-                                {dialogButtonSubmit ?? 'Confirm'}
-                            </Button>
+                        <AlertDialogAction
+                            onClick={onSubmit}
+                            className={buttonVariants({ ...dialogButtonSubmitProps })}>
+                            {dialogButtonSubmit ?? 'Confirm'}
                         </AlertDialogAction>
                     </AlertDialogFooter>
                 </AlertDialogContent>
diff --git a/dashboard/src/components/ui/alert-dialog.tsx b/dashboard/src/components/ui/alert-dialog.tsx
index 0fce158..c6ec9fb 100644
--- a/dashboard/src/components/ui/alert-dialog.tsx
+++ b/dashboard/src/components/ui/alert-dialog.tsx
@@ -104,7 +104,7 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <AlertDialogPrimitive.Action
         ref={ref}
-        className={className}
+        className={(cn(buttonVariants(), className))}
         {...props}
     />
 ));