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
20 lines
537 B
TypeScript
20 lines
537 B
TypeScript
import { Alert } from "@mantine/core";
|
|
|
|
export const ThemeAlert = Alert.extend({
|
|
defaultProps: {
|
|
radius: "md",
|
|
},
|
|
styles: (_theme, props) => {
|
|
// Re-auth banner: body-colored surface with a red hairline border, used
|
|
// for the persistent mid-session re-authentication banner.
|
|
if (props.variant === "reauth") {
|
|
return {
|
|
root: {
|
|
backgroundColor: "var(--mantine-color-body)",
|
|
border: "1px solid var(--mantine-color-red-3)",
|
|
},
|
|
};
|
|
}
|
|
return { root: {} };
|
|
},
|
|
});
|