From 39caed963acbe42f52b517c7ce9008450b457cd3 Mon Sep 17 00:00:00 2001
From: Harsh <harshchalwadi027@gmail.com>
Date: Fri, 29 Aug 2025 15:14:37 +0530
Subject: [PATCH] updated the keyboard-shortcut button ui/background

---
 apps/web/src/app/globals.css                        | 4 ++--
 apps/web/src/components/keyboard-shortcuts-help.tsx | 8 ++++----
 apps/web/src/components/ui/button.tsx               | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ca78ee263..9672fecb9 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -43,7 +43,7 @@
   --sidebar-ring: hsl(0 0% 16.9%);
   --panel-background: hsl(216 13% 92%);
   --panel-accent: hsl(216, 8%, 86%);
-
+  
   /* Radius base */
   --radius: 1rem;
 }
@@ -87,7 +87,7 @@
 
 @layer base {
   /*
-    The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
     so we've added these compatibility styles to make sure everything still
     looks the same as it did with Tailwind CSS v3.
 
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index dd6a500ba..13484cda0 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -105,7 +105,7 @@ export function KeyboardShortcutsHelp() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="text" size="sm" className="gap-2">
+        <Button variant="text" size="sm" className="gap-2 dark:bg-neutral-800 dark:border-neutral-800 dark:text-white bg-gray-200 border-1 border-gray-300 text-black "> 
           <Keyboard className="w-4 h-4" />
           Shortcuts
         </Button>
@@ -178,14 +178,14 @@ function ShortcutItem({
   });
 
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center py-0.5 justify-between">
       <div className="flex items-center gap-3">
         {shortcut.icon && (
           <div className="text-muted-foreground">{shortcut.icon}</div>
         )}
         <span className="text-sm">{shortcut.description}</span>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1"> 
         {displayKeys.map((key: string, index: number) => (
           <div key={key} className="flex items-center gap-1">
             <div className="flex items-center">
@@ -232,7 +232,7 @@ function EditableShortcutKey({
       variant="outline"
       size="sm"
       className={`font-sans px-2 min-w-6 min-h-6 leading-none mr-1 hover:bg-opacity-80 ${
-        isRecording ? "border-primary bg-primary/10" : "border bg-accent/50"
+        isRecording ? "border-primary bg-primary/10" : "border bg-foreground/15"
       }`}
       onClick={handleClick}
       title={
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 0e07ccb8c..017ad0979 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -21,7 +21,7 @@ const buttonVariants = cva(
           "border border-input bg-background shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
-        text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
+        text: "bg-transparent p-0 rounded-none opacity-100 hover:bg-foreground/15 transition-opacity", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {