refactor: replace button elements with Button component for improved consistency and styling across multiple UI components

This commit is contained in:
Anish Sarkar 2026-05-14 14:17:44 +05:30
parent 23e05acc7c
commit 3d42712b3f
27 changed files with 401 additions and 424 deletions

View file

@ -96,13 +96,14 @@ export function CommunityPromptsContent() {
{prompt.prompt}
</p>
{prompt.prompt.length > 100 && (
<button
<Button
type="button"
variant="link"
onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
className="mt-1 text-[11px] text-primary hover:underline cursor-pointer"
className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
>
{expandedId === prompt.id ? "See less" : "See more"}
</button>
</Button>
)}
</div>
<Button

View file

@ -97,17 +97,18 @@ function HotkeyRow({
<RotateCcw className="size-3" />
</Button>
)}
<button
<Button
ref={inputRef}
type="button"
variant="ghost"
title={recording ? "Press shortcut keys" : "Click to edit shortcut"}
onClick={() => setRecording(true)}
onKeyDown={handleKeyDown}
onBlur={() => setRecording(false)}
className={
recording
? "flex h-7 items-center rounded-md border border-transparent bg-primary/5 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
: "flex h-7 cursor-pointer items-center rounded-md border border-transparent bg-transparent outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
? "h-7 border border-transparent bg-primary/5 px-0 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
: "h-7 cursor-pointer border border-transparent bg-transparent px-0 outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
}
>
{recording ? (
@ -115,7 +116,7 @@ function HotkeyRow({
) : (
<ShortcutKbd keys={displayKeys} className="ml-0 px-1.5 text-foreground/85" />
)}
</button>
</Button>
</div>
</div>
);

View file

@ -277,22 +277,25 @@ export function PromptsContent() {
{prompt.prompt}
</p>
{prompt.prompt.length > 100 && (
<button
<Button
type="button"
variant="link"
onClick={() => setExpandedId(expandedId === prompt.id ? null : prompt.id)}
className="mt-1 text-[11px] text-primary hover:underline cursor-pointer"
className="mt-1 h-auto cursor-pointer px-0 py-0 text-[11px] text-primary"
>
{expandedId === prompt.id ? "See less" : "See more"}
</button>
</Button>
)}
</div>
<div className="hidden group-hover:flex items-center gap-1 shrink-0">
<button
<Button
type="button"
variant="ghost"
size="icon"
title={prompt.is_public ? "Make private" : "Share with community"}
onClick={() => handleTogglePublic(prompt)}
disabled={togglingPublicIds.has(prompt.id)}
className="flex items-center justify-center size-7 rounded-md text-muted-foreground hover:text-accent-foreground hover:bg-accent transition-colors disabled:opacity-50 disabled:pointer-events-none"
className="size-7 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
{togglingPublicIds.has(prompt.id) ? (
<Spinner className="size-3.5" />
@ -301,7 +304,7 @@ export function PromptsContent() {
) : (
<Globe className="size-3.5" />
)}
</button>
</Button>
<Button
variant="ghost"
size="icon"

View file

@ -207,13 +207,14 @@ export default function DesktopPermissionsPage() {
<Button disabled className="text-sm h-9 min-w-[180px]">
Grant permissions to continue
</Button>
<button
<Button
type="button"
variant="link"
onClick={handleSkip}
className="block mx-auto text-xs text-muted-foreground hover:text-foreground transition-colors"
className="mx-auto h-auto px-0 py-0 text-xs text-muted-foreground hover:text-foreground"
>
Skip for now
</button>
</Button>
</>
)}
</div>