BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add info button variant and reuse it in mobile sessions sheet

Browse Source 
Adds a new info-styled button variant for consistent secondary actions.
Updates mobile sessions sheet actions to use the shared Button component.
Cleans up the mobile footer buttons with the shared sizing and styling system.
This commit is contained in:
Bohdan Triapitsyn
2026-08-04 01:54:55 +03:00
parent baeefe1ae5
commit e9b957ffd2
2 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/apps/MobileSessionsSheet.tsx
+17 -13
View File
@@ -1800,26 +1800,28 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
style={{ paddingBottom: 'calc(0.375rem + var(--oc-safe-area-bottom, 0px))' }}
>
{footer.instanceLabel && footer.onOpenInstances ? (
<button
<Button
type="button"
className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-xl px-2 text-left transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
variant="info"
size="lg"
className="min-w-0 shrink justify-start"
onClick={footer.onOpenInstances}
aria-label={t('mobile.menu.instances')}
style={{ touchAction: 'manipulation' }}
>
<Icon name="server" className="size-[18px] shrink-0 text-muted-foreground" />
<span className="block min-w-0 truncate typography-ui-label text-foreground">
{footer.instanceLabel}
</span>
</button>
<Icon name="server" className="size-[18px]" />
<span className="block min-w-0 truncate">{footer.instanceLabel}</span>
</Button>
) : (
<div className="min-w-0 flex-1" />
)}
<div className="flex shrink-0 items-center gap-1">
{footer.onOpenUpdate ? (
<button
<Button
type="button"
className="relative flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
variant="default"
size="lg"
className="w-10 px-0"
onClick={footer.onOpenUpdate}
aria-label={t('mobile.menu.update')}
title={t('mobile.menu.update')}
@@ -1827,18 +1829,20 @@ export const MobileSessionsSheet: React.FC<MobileSessionsSheetProps> = ({ open,
>
<Icon name="download" className="size-5" />
<span className="absolute right-2 top-2 inline-flex size-2 rounded-full bg-primary" aria-hidden />
</button>
</Button>
) : null}
<button
<Button
type="button"
className="flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
variant="default"
size="lg"
className="w-10 px-0"
onClick={footer.onOpenSettings}
aria-label={t('mobile.menu.settings')}
title={t('mobile.menu.settings')}
style={{ touchAction: 'manipulation' }}
>
<Icon name="settings-3" className="size-5" />
</button>
</Button>
</div>
</div>
) : null}
packages/ui/src/components/ui/button.tsx
+13
View File
@@ -32,6 +32,18 @@ const TINT_DESTRUCTIVE = [
"dark:active:bg-[color-mix(in_srgb,var(--status-error)_20%,transparent)]",
].join(" ")
const TINT_INFO = [
"bg-[color-mix(in_srgb,var(--status-info)_4%,var(--background))]",
"text-[var(--status-info)]",
"border border-[color-mix(in_srgb,var(--status-info)_8%,transparent)]",
"hover:bg-[color-mix(in_srgb,var(--status-info)_7%,var(--background))]",
"active:bg-[color-mix(in_srgb,var(--status-info)_10%,var(--background))]",
"dark:bg-[color-mix(in_srgb,var(--status-info)_7%,transparent)]",
"dark:border-[color-mix(in_srgb,var(--status-info)_12%,transparent)]",
"dark:hover:bg-[color-mix(in_srgb,var(--status-info)_10%,transparent)]",
"dark:active:bg-[color-mix(in_srgb,var(--status-info)_14%,transparent)]",
].join(" ")
const buttonVariants = cva(
[
"group relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[10px] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[50px] typography-ui-label font-medium lowercase tracking-[0.01em] shrink-0 select-none",
@@ -49,6 +61,7 @@ const buttonVariants = cva(
TINT_DESTRUCTIVE,
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
),
info: TINT_INFO,
neutral:
"bg-interactive-hover text-foreground border border-border/60 hover:bg-interactive-active",
outline: