feat: improve kbd look

nainglinnkhant · Dec 22, 2024 · f60b450 · f60b450
1 parent 3c302bf
commit f60b450
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 7 deletions.
diff --git a/src/app/_components/create-task-dialog.tsx b/src/app/_components/create-task-dialog.tsx
@@ -90,7 +90,12 @@ export function CreateTaskDialog() {
           <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
             Add new task
             <div>
-              <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">N</Kbd>
+              <Kbd variant="outline" className="font-sans">
+                ⇧
+              </Kbd>{" "}
+              <Kbd variant="outline" className="font-sans">
+                N
+              </Kbd>
             </div>
           </TooltipContent>
         </Tooltip>

diff --git a/src/app/_components/tasks-table-toolbar-actions.tsx b/src/app/_components/tasks-table-toolbar-actions.tsx
@@ -63,7 +63,12 @@ export function TasksTableToolbarActions({
           <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
             Export csv
             <div>
-              <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">E</Kbd>
+              <Kbd variant="outline" className="font-sans">
+                ⇧
+              </Kbd>{" "}
+              <Kbd variant="outline" className="font-sans">
+                E
+              </Kbd>
             </div>
           </TooltipContent>
         </Tooltip>

diff --git a/src/components/data-table/advanced/data-table-filter-combobox.tsx b/src/components/data-table/advanced/data-table-filter-combobox.tsx
@@ -89,7 +89,12 @@ export function DataTableFilterCombobox<TData>({
             <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
               Open filter
               <div>
-                <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">F</Kbd>
+                <Kbd variant="outline" className="font-sans">
+                  ⇧
+                </Kbd>{" "}
+                <Kbd variant="outline" className="font-sans">
+                  F
+                </Kbd>
               </div>
             </TooltipContent>
           </Tooltip>

diff --git a/src/components/data-table/advanced/views/data-table-views-dropdown.tsx b/src/components/data-table/advanced/views/data-table-views-dropdown.tsx
@@ -97,8 +97,12 @@ export function DataTableViewsDropdown({
           <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
             Open views
             <div>
-              <Kbd variant="outline">{isMac ? "⌘" : "ctrl"}</Kbd>{" "}
-              <Kbd variant="outline">V</Kbd>
+              <Kbd variant="outline" className="font-sans">
+                {isMac ? "⌘" : "ctrl"}
+              </Kbd>{" "}
+              <Kbd variant="outline" className="font-sans">
+                V
+              </Kbd>
             </div>
           </TooltipContent>
         </Tooltip>

diff --git a/src/components/data-table/data-table-columns-visibility.tsx b/src/components/data-table/data-table-columns-visibility.tsx
@@ -51,7 +51,12 @@ export function DataTableColumnsVisibility() {
           <TooltipContent className="flex items-center gap-2 border bg-accent font-semibold text-foreground dark:bg-background/95 dark:backdrop-blur-md dark:supports-[backdrop-filter]:bg-background/40">
             Toggle columns
             <div>
-              <Kbd variant="outline">⇧</Kbd> <Kbd variant="outline">C</Kbd>
+              <Kbd variant="outline" className="font-sans">
+                ⇧
+              </Kbd>{" "}
+              <Kbd variant="outline" className="font-sans">
+                C
+              </Kbd>
             </div>
           </TooltipContent>
         </Tooltip>

diff --git a/src/components/kbd.tsx b/src/components/kbd.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const kbdVariants = cva(
-  "select-none rounded border px-1.5 py-px font-mono text-[0.7rem] font-normal shadow-sm disabled:opacity-50",
+  "select-none rounded border px-1 py-px font-mono text-[0.7rem] font-normal shadow-sm disabled:opacity-50",
   {
     variants: {
       variant: {