Lotus Bot
df30476b53
C-1 complete sweep across all components and features: - Call controls: mic mute/unmute, deafen/undeafen, video, screenshare, chat - RoomInput: dismiss reply, attach file, sticker, emoji, GIF, location, toolbar - Media viewers: close in image/pdf/text viewers and editors - Settings dialogs: close buttons in all room/space/common settings panels - Lobby: back, toggle member list, scroll to top, pack add/remove - Auth: server picker, UIA flow cancel - Upload cards: cancel uploads - URL preview: prev/next buttons - Members drawer: close + scroll to top - RoomViewHeader: back, start call, toggle member list Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import {
|
|
Overlay,
|
|
OverlayBackdrop,
|
|
Box,
|
|
config,
|
|
Text,
|
|
TooltipProvider,
|
|
Tooltip,
|
|
Icons,
|
|
Icon,
|
|
Chip,
|
|
IconButton,
|
|
} from 'folds';
|
|
import FocusTrap from 'focus-trap-react';
|
|
|
|
export type UIAFlowOverlayProps = {
|
|
currentStep: number;
|
|
stepCount: number;
|
|
children: ReactNode;
|
|
onCancel: () => void;
|
|
};
|
|
export function UIAFlowOverlay({
|
|
currentStep,
|
|
stepCount,
|
|
children,
|
|
onCancel,
|
|
}: UIAFlowOverlayProps) {
|
|
return (
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
|
|
<Box style={{ height: '100%' }} direction="Column" grow="Yes" gap="400">
|
|
<Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center">
|
|
{children}
|
|
</Box>
|
|
<Box
|
|
style={{ padding: config.space.S200 }}
|
|
shrink="No"
|
|
justifyContent="Center"
|
|
alignItems="Center"
|
|
gap="200"
|
|
>
|
|
<Chip as="div" radii="Pill" outlined>
|
|
<Text as="span" size="T300">{`Step ${currentStep}/${stepCount}`}</Text>
|
|
</Chip>
|
|
<TooltipProvider
|
|
tooltip={
|
|
<Tooltip variant="Critical">
|
|
<Text>Exit</Text>
|
|
</Tooltip>
|
|
}
|
|
position="Top"
|
|
>
|
|
{(anchorRef) => (
|
|
<IconButton
|
|
ref={anchorRef}
|
|
variant="Critical"
|
|
aria-label="Cancel authentication"
|
|
size="300"
|
|
onClick={onCancel}
|
|
radii="Pill"
|
|
outlined
|
|
>
|
|
<Icon size="50" src={Icons.Cross} />
|
|
</IconButton>
|
|
)}
|
|
</TooltipProvider>
|
|
</Box>
|
|
</Box>
|
|
</FocusTrap>
|
|
</Overlay>
|
|
);
|
|
}
|