Skip to content

feat(keyboard-shortcut): enhance keyboard-shortcut button UI and background #575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(keyboard-shortcut): enhance keyboard-shortcut button UI and background #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions apps/web/src/components/keyboard-shortcuts-help.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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 ">
<Button variant="text" size="sm" className="gap-2 dark:bg-neutral-800 dark:border-neutral-800 dark:text-white bg-gray-200 border border-gray-300 text-black ">

The border-1 class is invalid in Tailwind CSS. Use border instead for a 1px border.

View Details

Analysis

The newly added styling includes border-1 which is not a valid Tailwind CSS class. Standard Tailwind CSS uses border for a 1px border, border-2 for 2px, border-4 for 4px, etc. The border-1 class doesn't exist and will not apply any styling.

Looking at the existing codebase, all border usage follows the standard Tailwind pattern with border for 1px borders (e.g., border border-destructive/20, border border-foreground/15) and border-2 for 2px borders where needed.

The fix is simple: change border-1 border-gray-300 to border border-gray-300.

<Keyboard className="w-4 h-4" />
Shortcuts
</Button>
Comment on lines +108 to 111
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Use design tokens/variants instead of hardcoded colors; replace non-standard border-1.

Prefer our system tokens and existing variants for cross-theme consistency. border-1 may be invalid without a custom Tailwind config.

-        <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 "> 
+        <Button variant="secondary" size="sm">
           <Keyboard className="w-4 h-4" />
           Shortcuts
         </Button>

To verify border-1 support and avoid regressions, run:

🏁 Script executed:

#!/bin/bash
set -euo pipefail
echo "Searching for 'border-1' usages..."
rg -n -S '\bborder-1\b' -C2

echo -e "\nChecking Tailwind config(s) for custom border widths..."
fd -a 'tailwind*.{js,ts,cjs,mjs}' | while read -r f; do
  echo "==> $f"
  rg -n 'borderWidth|extend' "$f" -C3 || true
done

echo -e "\nScanning for matchUtilities/addUtilities defining custom border classes..."
rg -n 'matchUtilities|addUtilities' --type js --type ts --type tsx --type jsx -C2

Length of output: 1223

🏁 Script executed:

#!/bin/bash
set -euo pipefail
echo "Searching for 'border-1' usages..."
rg -n -S '\bborder-1\b' -C2 .

echo -e "\nLocating Tailwind config files..."
find . -type f -name "tailwind.config.*" -print

echo -e "\nChecking Tailwind config(s) for custom borderWidth extends..."
find . -type f -name "tailwind.config.*" -print | while read -r f; do
  echo "==> $f"
  grep -nE 'borderWidth|extend' "$f" || true
done

echo -e "\nScanning for custom border utilities with matchUtilities or addUtilities..."
rg -nE 'matchUtilities\(|addUtilities\(' --type js --type ts --type tsx --type jsx -C2 .

Length of output: 1357

🏁 Script executed:

#!/bin/bash
set -euo pipefail
echo "Import statement for Button in keyboard-shortcuts-help.tsx:"
grep -n "import.*Button" apps/web/src/components/keyboard-shortcuts-help.tsx || true

echo -e "\nListing files in ui component directory:"
ls apps/web/src/components/ui || true

echo -e "\nDisplaying the beginning of the Button component implementation:"
for f in apps/web/src/components/ui/button.*; do
  if [[ -f "$f" ]]; then
    echo "==> $f"
    sed -n '1,100p' "$f"
  fi
done

Length of output: 3900

Replace hardcoded color classes and invalid border-1 with the secondary Button variant.

Use the built-in secondary variant (which applies theme tokens for background, border and text) and drop the custom className—the base buttonVariants already includes gap-2.

apps/web/src/components/keyboard-shortcuts-help.tsx

-        <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 "> 
+        <Button variant="secondary" size="sm">
           <Keyboard className="w-4 h-4" />
           Shortcuts
         </Button>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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>
<Button variant="secondary" size="sm">
<Keyboard className="w-4 h-4" />
Shortcuts
</Button>
🤖 Prompt for AI Agents 
In apps/web/src/components/keyboard-shortcuts-help.tsx around lines 108 to 111,
the Button uses hardcoded color classes and an invalid "border-1" class; replace
this by using the built-in "secondary" variant (which supplies background,
border and text tokens) and remove the custom className entirely since
buttonVariants already includes gap-2; update the Button to set
variant="secondary" and delete the className prop so styling comes from the
component variant.

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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={
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down