openclaw/hermes-agent
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

style(desktop): padding-driven, square non-icon buttons

Browse Source 
Default button sizing was vanilla-shadcn chunky (fixed h-9, 16px padding) and
inconsistent with the icon-button radius pass. Size text variants by
padding + line-height instead of fixed heights so they stay snug and scale
with content, and drop the radius on non-icon buttons (icon buttons keep the
shared 4px). Move the update-overlay CTAs off a hardcoded h-10 onto the
padding-based lg variant. Composer and the inline approval strip are untouched.
This commit is contained in:
Brooklyn Nicholson
2026-06-03 21:50:03 -05:00
parent 35a750eedd
commit 712bf4d8e4
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/desktop/src/app/updates-overlay.tsx
View File

@ -222,7 +222,7 @@ function IdleView({
</div>
<div className="grid gap-2">
<Button className="h-10 text-sm font-semibold" onClick={onInstall} size="default">
<Button className="font-semibold" onClick={onInstall} size="lg">
Update now
</Button>
<button
@ -267,9 +267,9 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
</div>
<button
type="button"
onClick={handleCopy}
className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/30 px-4 py-3 text-left transition-colors hover:border-border hover:bg-muted/50"
onClick={handleCopy}
type="button"
>
<code className="select-all font-mono text-sm text-foreground">
<span className="text-muted-foreground">$ </span>
@ -294,7 +294,7 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
Hermes will pick up the new version next time you launch it.
</p>
<Button className="h-10 text-sm font-semibold" onClick={onDone} variant="outline">
<Button className="font-semibold" onClick={onDone} size="lg" variant="outline">
Done
</Button>
</div>
@ -352,7 +352,7 @@ function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss
</div>
<div className="grid gap-2">
<Button className="h-10 text-sm font-semibold" onClick={onRetry}>
<Button className="font-semibold" onClick={onRetry} size="lg">
Try again
</Button>
<button

13
apps/desktop/src/components/ui/button.tsx
View File

@ -4,8 +4,11 @@ import * as React from 'react'
import { cn } from '@/lib/utils'
// Text buttons are square (no radius) and sized by padding + line-height — no
// fixed heights — so they stay snug and scale with content. Only icon buttons
// (inherently square) carry the shared 4px radius.
const buttonVariants = cva(
"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-none text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
@ -19,10 +22,10 @@ const buttonVariants = cva(
link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
default: 'px-3.5 py-1.5 has-[>svg]:px-3',
xs: "gap-1 px-2 py-1 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: 'gap-1.5 px-3 py-1 has-[>svg]:px-2.5',
lg: 'px-6 py-2.5 has-[>svg]:px-4',
icon: 'size-9 rounded-[4px]',
'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
'icon-sm': 'size-8 rounded-[4px]',