senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): elevate Dialog to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 15:08:52 +01:00
parent aa81603276
commit 8a3da49fbd
8 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/web/src/components/ui/Dialog.stories.tsx
View file

@ -46,7 +46,7 @@ export const Default: Story = {
title="Edit Profile"
>
<div className="py-4">
<p className="text-sm text-kodo-content-dim">
<p className="text-sm text-muted-foreground">
Make changes to your profile here. Click save when you're done.
</p>
</div>
@ -79,7 +79,7 @@ export const Alert: Story = {
onConfirm={() => setOpen(false)}
confirmLabel="Delete Account"
>
<p className="text-sm text-kodo-content-dim">
<p className="text-sm text-muted-foreground">
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</p>
</Dialog>
@ -96,7 +96,7 @@ export const Composition: Story = {
<Button onClick={() => setOpen(true)}>Open Composed Dialog</Button>
{open && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-kodo-ink border border-kodo-steel rounded-lg max-w-md w-full">
<div className="bg-card border border-border rounded-xl max-w-md w-full">
<DialogHeader>
<DialogTitle>Composed Dialog</DialogTitle>
<DialogDescription>

4
apps/web/src/components/ui/dialog.test.tsx
View file

@ -197,8 +197,8 @@ describe('Dialog Component', () => {
const confirmButton = screen.getByText('Confirm');
const buttonElement = confirmButton.closest('button');
// Kodo design: destructive variant uses text-kodo-red / bg-kodo-red
expect(buttonElement?.className).toMatch(/text-kodo-red|bg-kodo-red/);
// Design: destructive variant uses text-destructive / bg-destructive
expect(buttonElement?.className).toMatch(/text-destructive|bg-destructive/);
});
it('uses custom confirm and cancel labels', () => {

6
apps/web/src/components/ui/dialog/Dialog.tsx
View file

@ -15,9 +15,9 @@ const variantIcons: Record<
};
const variantStyles: Record<DialogVariant, string> = {
alert: 'text-kodo-red',
confirm: 'text-kodo-cyan',
info: 'text-kodo-steel',
alert: 'text-destructive',
confirm: 'text-primary',
info: 'text-muted-foreground',
default: '',
};

2
apps/web/src/components/ui/dialog/DialogBody.tsx
View file

@ -8,7 +8,7 @@ export function DialogBody({
}: DialogBodyProps) {
return (
<div
className={cn('p-8', variant === 'alert' && 'text-kodo-red', className)}
className={cn('p-8', variant === 'alert' && 'text-destructive', className)}
>
{children}
</div>

2
apps/web/src/components/ui/dialog/DialogDescription.tsx
View file

@ -6,6 +6,6 @@ export function DialogDescription({
className,
}: DialogDescriptionProps) {
return (
<p className={cn('text-sm text-kodo-content-dim', className)}>{children}</p>
<p className={cn('text-sm text-muted-foreground', className)}>{children}</p>
);
}

2
apps/web/src/components/ui/dialog/DialogFooter.tsx
View file

@ -5,7 +5,7 @@ export function DialogFooter({ children, className }: DialogFooterProps) {
return (
<div
className={cn(
'flex items-center justify-end gap-2 p-8 border-t border-kodo-steel',
'flex items-center justify-end gap-2 p-8 border-t border-border',
className,
)}
>

2
apps/web/src/components/ui/dialog/DialogHeader.tsx
View file

@ -8,7 +8,7 @@ export function DialogHeader({
return (
<div
className={cn(
'flex items-center justify-between p-8 border-b border-kodo-steel',
'flex items-center justify-between p-8 border-b border-border',
className,
)}
>

18
apps/web/src/components/ui/dialog/DialogSkeleton.tsx
View file

@ -13,24 +13,24 @@ export function DialogSkeleton({ className }: DialogSkeletonProps) {
return (
<div
className={cn(
'rounded-lg border border-kodo-steel bg-kodo-graphite dark:bg-kodo-ink',
'rounded-xl border border-border bg-card',
'min-h-layout-story',
className,
)}
role="status"
aria-label="Chargement du dialogue"
>
<div className="p-8 border-b border-kodo-steel">
<div className="h-8 w-2/3 max-w-md rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="p-8 border-b border-border">
<div className="h-8 w-2/3 max-w-md rounded bg-muted animate-pulse" />
</div>
<div className="p-8 space-y-2">
<div className="h-4 w-full rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="h-4 w-3/4 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="h-4 w-1/2 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="h-4 w-full rounded bg-muted animate-pulse" />
<div className="h-4 w-3/4 rounded bg-muted animate-pulse" />
<div className="h-4 w-1/2 rounded bg-muted animate-pulse" />
</div>
<div className="flex justify-end gap-2 p-8 border-t border-kodo-steel">
<div className="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="h-10 w-24 rounded bg-kodo-slate/30 dark:bg-kodo-slate/20 animate-pulse" />
<div className="flex justify-end gap-2 p-8 border-t border-border">
<div className="h-10 w-24 rounded bg-muted animate-pulse" />
<div className="h-10 w-24 rounded bg-muted animate-pulse" />
</div>
<span className="sr-only">Chargement du dialogue en cours...</span>
</div>