1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-04-10 11:58:41 +00:00

NORY-47: fix alert dialog action styling

This commit is contained in:
Markus Thielker 2025-01-02 11:33:07 +01:00
parent 6edf6ee1b3
commit e6b9095454
No known key found for this signature in database
3 changed files with 26 additions and 31 deletions

View file

@ -15,7 +15,7 @@ import {
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button'; import { Button, buttonVariants } from '@/components/ui/button';
import Link from 'next/link'; import Link from 'next/link';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { import {
@ -259,12 +259,14 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogAction onClick={() => deleteIdentitySessions(currentIdentity.id)}>
Invalidate sessions
</AlertDialogAction>
<AlertDialogCancel> <AlertDialogCancel>
Cancel Cancel
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: 'destructive' })}
onClick={() => deleteIdentitySessions(currentIdentity.id)}>
Invalidate sessions
</AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
@ -280,13 +282,13 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
onClick={() => blockIdentity(currentIdentity.id)}> onClick={() => blockIdentity(currentIdentity.id)}>
Block identity Block identity
</AlertDialogAction> </AlertDialogAction>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
@ -302,13 +304,13 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
onClick={() => unblockIdentity(currentIdentity.id)}> onClick={() => unblockIdentity(currentIdentity.id)}>
Unblock identity Unblock identity
</AlertDialogAction> </AlertDialogAction>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
@ -325,13 +327,14 @@ export function IdentityDataTable({ data, pageSize, pageToken, query, fetchIdent
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogAction
onClick={() => deleteIdentity(currentIdentity.id)}>
Delete identity
</AlertDialogAction>
<AlertDialogCancel> <AlertDialogCancel>
Cancel Cancel
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction
className={buttonVariants({ variant: 'destructive' })}
onClick={() => deleteIdentity(currentIdentity.id)}>
Delete identity
</AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>

View file

@ -1,6 +1,6 @@
'use client'; 'use client';
import { Button, ButtonProps } from '@/components/ui/button'; import { ButtonProps, buttonVariants } from '@/components/ui/button';
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -23,9 +23,8 @@ interface ButtonWithConfirmDialogProps {
dialogTitle: string dialogTitle: string
dialogDescription: string dialogDescription: string
dialogButtonCancel?: string dialogButtonCancel?: string
dialogButtonCancelProps?: ButtonProps
dialogButtonSubmit?: string dialogButtonSubmit?: string
dialogButtonSubmitProps?: ButtonProps dialogButtonSubmitProps?: typeof buttonVariants
children: ReactNode children: ReactNode
} }
@ -37,7 +36,6 @@ export function ConfirmationDialogWrapper(
dialogTitle, dialogTitle,
dialogDescription, dialogDescription,
dialogButtonCancel, dialogButtonCancel,
dialogButtonCancelProps,
dialogButtonSubmit, dialogButtonSubmit,
dialogButtonSubmitProps, dialogButtonSubmitProps,
children, children,
@ -59,19 +57,13 @@ export function ConfirmationDialogWrapper(
<AlertDialogDescription>{dialogDescription}</AlertDialogDescription> <AlertDialogDescription>{dialogDescription}</AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel asChild> <AlertDialogCancel onClick={onCancel}>
<Button {dialogButtonCancel ?? 'Cancel'}
onClick={onCancel}
{...dialogButtonCancelProps}>
{dialogButtonCancel ?? 'Cancel'}
</Button>
</AlertDialogCancel> </AlertDialogCancel>
<AlertDialogAction asChild> <AlertDialogAction
<Button onClick={onSubmit}
onClick={onSubmit} className={buttonVariants({ ...dialogButtonSubmitProps })}>
{...dialogButtonSubmitProps}> {dialogButtonSubmit ?? 'Confirm'}
{dialogButtonSubmit ?? 'Confirm'}
</Button>
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>

View file

@ -104,7 +104,7 @@ const AlertDialogAction = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action <AlertDialogPrimitive.Action
ref={ref} ref={ref}
className={className} className={(cn(buttonVariants(), className))}
{...props} {...props}
/> />
)); ));