diff options
Diffstat (limited to 'apps/web')
| -rw-r--r-- | apps/web/src/app/globals.css | 22 | ||||
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 18 |
2 files changed, 16 insertions, 24 deletions
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index bc9638ef..2f7158cc 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -86,25 +86,3 @@ overscroll-behavior-x: contain; } } - -.shortcut-key { - @apply inline-flex; - @apply font-sans; - @apply text-xs; - @apply rounded; - @apply px-2; - @apply min-w-[1.5rem]; - @apply min-h-[1.5rem]; - @apply leading-none; - @apply items-center; - @apply justify-center; - @apply shadow-sm; - @apply border; - - background-color: rgba(0, 0, 0, 0.2); - border-color: rgba(255, 255, 255, 0.1); - - &:not(:last-child) { - @apply mr-1; - } -} diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index a33ba666..a48b3c21 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -56,9 +56,9 @@ const ShortcutItem = ({ shortcut }: { shortcut: any }) => { <div key={index} className="flex items-center gap-1"> <div className="flex items-center"> {key.split("+").map((keyPart: string, partIndex: number) => ( - <kbd key={partIndex} className="shortcut-key"> + <ShortcutKey key={partIndex}> {getKeyWithModifier(keyPart)} - </kbd> + </ShortcutKey> ))} </div> {index < displayKeys.length - 1 && ( @@ -119,3 +119,17 @@ export const KeyboardShortcutsHelp = () => { </Dialog> ); }; + +function ShortcutKey({ children }: { children: React.ReactNode }) { + return ( + <kbd + className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1" + style={{ + backgroundColor: "rgba(0, 0, 0, 0.2)", + borderColor: "rgba(255, 255, 255, 0.1)" + }} + > + {children} + </kbd> + ); +}; |