fix: update design language

This commit is contained in:
Austin Pickett 2026-04-28 10:57:30 -04:00
parent a9369fc193
commit e5601d1e85
9 changed files with 124 additions and 266 deletions

View file

@ -180,8 +180,8 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
className="inline-flex"
title={`Open ${p.name} docs`}
>
<Button outlined className="!p-1.5 aspect-square">
<ExternalLink className="h-3.5 w-3.5" />
<Button ghost size="icon">
<ExternalLink />
</Button>
</a>
)}

View file

@ -110,9 +110,9 @@ export function ConfirmDialog({
<Button
data-confirm
type="button"
destructive={destructive}
onClick={onConfirm}
disabled={loading}
className={destructive ? "!bg-destructive !text-destructive-foreground" : undefined}
>
{loading ? "…" : confirmLabel}
</Button>

View file

@ -345,11 +345,11 @@ export default function ConfigPage() {
</code>
</div>
<div className="flex items-center gap-1.5">
<Button outlined onClick={handleExport} title={t.config.exportConfig} aria-label={t.config.exportConfig} className="!p-2 aspect-square">
<Download className="h-3.5 w-3.5" />
<Button ghost size="icon" onClick={handleExport} title={t.config.exportConfig} aria-label={t.config.exportConfig}>
<Download />
</Button>
<Button outlined onClick={() => fileInputRef.current?.click()} title={t.config.importConfig} aria-label={t.config.importConfig} className="!p-2 aspect-square">
<Upload className="h-3.5 w-3.5" />
<Button ghost size="icon" onClick={() => fileInputRef.current?.click()} title={t.config.importConfig} aria-label={t.config.importConfig}>
<Upload />
</Button>
<input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImport} />
{!yamlMode && (() => {
@ -358,8 +358,8 @@ export default function ConfigPage() {
: prettyCategoryName(activeCategory);
const resetTitle = t.config.resetScopeTooltip.replace("{scope}", resetScopeLabel);
return (
<Button outlined onClick={handleReset} title={resetTitle} aria-label={resetTitle} className="!p-2 aspect-square">
<RotateCcw className="h-3.5 w-3.5" />
<Button ghost size="icon" onClick={handleReset} title={resetTitle} aria-label={resetTitle}>
<RotateCcw />
</Button>
);
})()}

View file

@ -304,39 +304,39 @@ export default function CronPage() {
<div className="flex items-center gap-1 shrink-0">
<Button
outlined
ghost
size="icon"
title={job.state === "paused" ? t.cron.resume : t.cron.pause}
aria-label={
job.state === "paused" ? t.cron.resume : t.cron.pause
}
onClick={() => handlePauseResume(job)}
className="!p-2 aspect-square"
className={
job.state === "paused" ? "text-success" : "text-warning"
}
>
{job.state === "paused" ? (
<Play className="h-4 w-4 text-success" />
) : (
<Pause className="h-4 w-4 text-warning" />
)}
{job.state === "paused" ? <Play /> : <Pause />}
</Button>
<Button
outlined
ghost
size="icon"
title={t.cron.triggerNow}
aria-label={t.cron.triggerNow}
onClick={() => handleTrigger(job)}
className="!p-2 aspect-square"
>
<Zap className="h-4 w-4" />
<Zap />
</Button>
<Button
outlined
ghost
destructive
size="icon"
title={t.common.delete}
aria-label={t.common.delete}
onClick={() => jobDelete.requestDelete(job.id)}
className="!p-2 aspect-square"
>
<Trash2 className="h-4 w-4 text-destructive" />
<Trash2 />
</Button>
</div>
</CardContent>

View file

@ -204,13 +204,10 @@ function EnvVarRow({
</div>
{info.is_set && (
<Button outlined onClick={() => onReveal(varKey)}
<Button ghost size="icon" onClick={() => onReveal(varKey)}
title={isRevealed ? t.env.hideValue : t.env.showValue}
aria-label={isRevealed ? `Hide ${varKey}` : `Reveal ${varKey}`}
className="!p-2 aspect-square">
{isRevealed
? <EyeOff className="h-4 w-4" />
: <Eye className="h-4 w-4" />}
aria-label={isRevealed ? `Hide ${varKey}` : `Reveal ${varKey}`}>
{isRevealed ? <EyeOff /> : <Eye />}
</Button>
)}
@ -220,8 +217,7 @@ function EnvVarRow({
</Button>
{info.is_set && (
<Button outlined prefix={<Trash2 />}
className="text-destructive hover:!text-destructive"
<Button outlined destructive prefix={<Trash2 />}
onClick={() => onClear(varKey)} disabled={saving === varKey || clearDialogOpen}>
{saving === varKey ? "..." : t.common.clear}
</Button>

View file

@ -356,8 +356,9 @@ function SessionRow({
</Badge>
{resumeInChatEnabled && (
<Button
outlined
className="!p-1.5 aspect-square text-muted-foreground hover:text-success"
ghost
size="icon"
className="text-muted-foreground hover:text-success"
aria-label={t.sessions.resumeInChat}
title={t.sessions.resumeInChat}
onClick={(e) => {
@ -365,19 +366,20 @@ function SessionRow({
navigate(`/chat?resume=${encodeURIComponent(session.id)}`);
}}
>
<Play className="h-3.5 w-3.5" />
<Play />
</Button>
)}
<Button
outlined
className="!p-1.5 aspect-square text-muted-foreground hover:text-destructive"
ghost
destructive
size="icon"
aria-label={t.sessions.deleteSession}
onClick={(e) => {
e.stopPropagation();
onDelete();
}}
>
<Trash2 className="h-3.5 w-3.5" />
<Trash2 />
</Button>
</div>
</div>
@ -807,12 +809,12 @@ export default function SessionsPage() {
<div className="flex items-center gap-1">
<Button
outlined
className="!p-1.5 aspect-square"
size="icon"
disabled={page === 0}
onClick={() => setPage((p) => p - 1)}
aria-label={t.sessions.previousPage}
>
<ChevronLeft className="h-4 w-4" />
<ChevronLeft />
</Button>
<span className="text-xs text-muted-foreground px-2">
{t.common.page} {page + 1} {t.common.of}{" "}
@ -820,12 +822,12 @@ export default function SessionsPage() {
</span>
<Button
outlined
className="!p-1.5 aspect-square"
size="icon"
disabled={(page + 1) * PAGE_SIZE >= total}
onClick={() => setPage((p) => p + 1)}
aria-label={t.sessions.nextPage}
>
<ChevronRight className="h-4 w-4" />
<ChevronRight />
</Button>
</div>
</div>