From 770735b8a34deed5b81eb6da85fbcda865e87764 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 28 Sep 2026 11:35:25 -0500
Subject: [PATCH] fix(desktop): keybind clear and reset are ghost icon Buttons

They were raw buttons with transition-all.
---
 .../src/app/settings/keybind-settings.tsx     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/app/settings/keybind-settings.tsx b/apps/desktop/src/app/settings/keybind-settings.tsx
index 1cb4b71c65..3fcfb5b290 100644
--- a/apps/desktop/src/app/settings/keybind-settings.tsx
+++ b/apps/desktop/src/app/settings/keybind-settings.tsx
@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react'
 import { useContext, useMemo, useState } from 'react'
 
+import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { DisclosureCaret } from '@/components/ui/disclosure-caret'
 import { Kbd, KbdCombo } from '@/components/ui/kbd'
@@ -278,28 +279,30 @@ function KeybindRow({ action }: { action: KeybindActionMeta }) {
       {isDefault ? (
         combos.length > 0 ? (
           <Tip label={k.clear}>
-            <button
+            <Button
               aria-label={k.clear}
-              className="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground/70 opacity-0 transition-all hover:bg-(--ui-control-active-background) hover:text-foreground group-hover:opacity-100"
+              className="shrink-0 text-(--ui-text-tertiary) opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
               onClick={() => clearBinding(action.id)}
-              type="button"
+              size="icon-xs"
+              variant="ghost"
             >
               <Codicon name="close" size="0.8125rem" />
-            </button>
+            </Button>
           </Tip>
         ) : (
           <span aria-hidden className="size-6 shrink-0" />
         )
       ) : (
         <Tip label={k.reset}>
-          <button
+          <Button
             aria-label={k.reset}
-            className="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground/70 opacity-0 transition-all hover:bg-(--ui-control-active-background) hover:text-foreground group-hover:opacity-100"
+            className="shrink-0 text-(--ui-text-tertiary) opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
             onClick={() => resetBinding(action.id)}
-            type="button"
+            size="icon-xs"
+            variant="ghost"
           >
             <Codicon name="discard" size="0.8125rem" />
-          </button>
+          </Button>
         </Tip>
       )}
     </div>