738811dbe7
Text sizes now follow a --font-scale variable that is 1 on wider screens and 8/7 below 768px, so the 14px base text reads at 16px on phones (Safari stops zooming into fields at that size) and every other size grows by the same ratio. One-off pixel sizes in the shell move onto the shared text tokens so they scale too. The stage subtitle now truncates inside the screen instead of spilling past both edges. Claude-Session: https://claude.ai/code/session_01PFEDgbyJm12ExL3Kn4Dk8B Co-authored-by: Claude <noreply@anthropic.com>
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { Trans, useLingui } from "@lingui/react/macro";
|
|
import { Button, Popover, PopoverContent, PopoverTrigger } from "@rakazo/ui-web";
|
|
import { Gauge, LogOut, Settings } from "lucide-react";
|
|
|
|
/** The account button at the foot of the sidebar and its menu. */
|
|
export function UserMenu({
|
|
open,
|
|
onOpenChange,
|
|
initials,
|
|
userName,
|
|
onOpenSettings,
|
|
onOpenUsage,
|
|
onLogOut,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
initials: string;
|
|
userName: string;
|
|
onOpenSettings: () => void;
|
|
onOpenUsage: () => void;
|
|
onLogOut: () => void;
|
|
}) {
|
|
const { t } = useLingui();
|
|
return (
|
|
<Popover open={open} onOpenChange={onOpenChange}>
|
|
<PopoverTrigger
|
|
data-testid="user-menu-trigger"
|
|
className="flex items-center gap-[11px] px-[18px] py-3.5"
|
|
>
|
|
<span className="grid size-control-lg place-items-center rounded-full bg-accent text-ui-body-sm text-foreground/75">
|
|
{initials}
|
|
</span>
|
|
<span className="text-ui-body-sm text-foreground/90">{userName}</span>
|
|
</PopoverTrigger>
|
|
{open ? (
|
|
<PopoverContent
|
|
side="top"
|
|
align="start"
|
|
className="w-[calc(316px-1.5rem)] max-w-[calc(100vw-3rem)] gap-0 p-1 data-closed:animate-none"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-start font-normal"
|
|
aria-label={t`Settings`}
|
|
onClick={() => {
|
|
onOpenChange(false);
|
|
onOpenSettings();
|
|
}}
|
|
>
|
|
<Settings className="text-muted-foreground" strokeWidth={1.75} />
|
|
<Trans>Settings</Trans>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full justify-start font-normal"
|
|
aria-label={t`Usage`}
|
|
onClick={() => {
|
|
onOpenChange(false);
|
|
onOpenUsage();
|
|
}}
|
|
>
|
|
<Gauge className="text-muted-foreground" strokeWidth={1.75} />
|
|
<Trans>Usage</Trans>
|
|
</Button>
|
|
<Button variant="ghost" className="w-full justify-start font-normal" onClick={onLogOut}>
|
|
<LogOut className="text-muted-foreground" strokeWidth={1.75} />
|
|
<Trans>Log out</Trans>
|
|
</Button>
|
|
</PopoverContent>
|
|
) : null}
|
|
</Popover>
|
|
);
|
|
}
|