Jakob Wennberg
e51a2c8102
The founder wants the yellow boxes gone everywhere. The design system already agreed: status colors are data, not chrome (convention 12) and attention is a single ochre sentence, never a banner (convention 6). This enforces it: - ConfirmationDialog: the amber warning panel is now an AttnLine, and the hardcoded Swedish default warningText is gone: it injected an immutability warning into dialogs whose authors never asked for one (every current caller passes the prop explicitly, so no behavior change at any call site). - Badge warning variant: amber fill replaced with a hairline chip and ochre text. - DestructiveConfirmDialog warning variant: neutral icon disc, default primary confirm button (only --destructive survives as chrome). - BankSyncStatusChip stale state: same neutral shape as the healthy chip, ochre text carries the signal. - SandboxBanner: solid amber bar becomes secondary-on-border chrome. - BankIdAuth, BankIdCompanyPicker, SessionTimeoutModal: the last three raw-amber (bg-amber-*) holdouts moved onto tokens, the company-picker banner becoming a plain AttnLine. - Mechanical sweep of the ~58 hand-rolled bg-warning/border-warning boxes across 45 files: fills to bg-muted/30 (icon discs bg-muted), borders to border-border, text-warning-foreground to text-attn. The account-class dots in account-number.tsx keep bg-warning: they are data indicators, not chrome. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { Loader2, ShieldAlert } from 'lucide-react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import type { SessionTimeoutReason } from '@/lib/auth/session-timeout-shared'
|
|
|
|
export function SessionTimeoutModal({
|
|
reason,
|
|
seconds,
|
|
isExtending,
|
|
onContinue,
|
|
}: {
|
|
reason: SessionTimeoutReason
|
|
seconds: number
|
|
isExtending: boolean
|
|
onContinue: () => void
|
|
}) {
|
|
const t = useTranslations('session_timeout')
|
|
|
|
return (
|
|
<Dialog open onOpenChange={() => {}}>
|
|
<DialogContent
|
|
className="max-w-md [&>button]:hidden"
|
|
onEscapeKeyDown={(event) => event.preventDefault()}
|
|
onPointerDownOutside={(event) => event.preventDefault()}
|
|
onInteractOutside={(event) => event.preventDefault()}
|
|
>
|
|
<DialogHeader>
|
|
<div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-muted text-attn">
|
|
<ShieldAlert className="h-5 w-5" aria-hidden="true" />
|
|
</div>
|
|
<DialogTitle>{t('warning_title')}</DialogTitle>
|
|
<DialogDescription>
|
|
{reason === 'idle'
|
|
? t('idle_warning', { seconds })
|
|
: t('absolute_warning', { seconds })}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button onClick={onContinue} disabled={isExtending} autoFocus>
|
|
{isExtending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{reason === 'idle' ? t('continue') : t('sign_in_again')}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|