74c6491b52
- App.tsx: replace the inline `style={{}}` on the re-auth banner wrapper with
Mantine style props (pos/top/bg) plus a `.reauth-banner-bar` class for the
z-index/box-shadow that have no Mantine shorthand.
- App.tsx: extract the ~100-line inline `onAuthorize` and the inline `onCancel`
step-up handlers into named `handleStepUpAuthorize`/`handleStepUpCancel`.
- ReAuthBanner: move the flat `styles={{ root }}` (background/border) into a
`reauth` Alert theme variant; replace the raw `<span>` with `<Text>`.
- StepUpAuthModal: extract the inline `onClick` wrapper into `handleAuthorize`.
No behavior change; validate + integration green.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DZyeWManYTvcXxjcrhxSQc
32 lines
738 B
TypeScript
32 lines
738 B
TypeScript
import { Alert, Button, Group, Text } from "@mantine/core";
|
|
|
|
export interface ReAuthBannerProps {
|
|
message: string;
|
|
onReauthenticate: () => void;
|
|
onDismiss: () => void;
|
|
}
|
|
|
|
export function ReAuthBanner({
|
|
message,
|
|
onReauthenticate,
|
|
onDismiss,
|
|
}: ReAuthBannerProps) {
|
|
return (
|
|
<Alert
|
|
color="red"
|
|
variant="reauth"
|
|
title="Re-authentication required"
|
|
withCloseButton
|
|
onClose={onDismiss}
|
|
>
|
|
<Group justify="space-between" align="center" wrap="nowrap" gap="md">
|
|
<Text component="span" size="sm">
|
|
{message}
|
|
</Text>
|
|
<Button size="xs" variant="filled" onClick={onReauthenticate}>
|
|
Re-authenticate
|
|
</Button>
|
|
</Group>
|
|
</Alert>
|
|
);
|
|
}
|