diff options
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 24 | ||||
| -rw-r--r-- | apps/web/src/components/ui/dialog.tsx | 12 |
2 files changed, 16 insertions, 20 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 9f0d1e57..95fb6031 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -21,7 +21,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { .replace("Shift", "⇧") .replace("←", "◀") .replace("→", "▶") - .replace("Space", "⎵"); + .replace("Space", "Space"); return ( <Badge variant="secondary" className="font-mono text-xs px-2 py-1"> @@ -31,7 +31,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { }; const ShortcutItem = ({ shortcut }: { shortcut: any }) => ( - <div className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50"> + <div className="flex items-center justify-between"> <div className="flex items-center gap-3"> {shortcut.icon && ( <div className="text-muted-foreground">{shortcut.icon}</div> @@ -67,7 +67,7 @@ export const KeyboardShortcutsHelp = () => { Shortcuts </Button> </DialogTrigger> - <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto"> + <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-hidden flex"> <DialogHeader> <DialogTitle className="flex items-center gap-2"> <Keyboard className="w-5 h-5" /> @@ -81,11 +81,11 @@ export const KeyboardShortcutsHelp = () => { <div className="space-y-6"> {categories.map((category) => ( - <div key={category}> - <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3"> + <div key={category} className="flex flex-col gap-1"> + <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> {category} </h3> - <div className="space-y-1"> + <div className="space-y-0.5"> {shortcuts .filter((shortcut) => shortcut.category === category) .map((shortcut, index) => ( @@ -95,18 +95,6 @@ export const KeyboardShortcutsHelp = () => { </div> ))} </div> - - <div className="mt-6 p-4 bg-muted/30 rounded-lg"> - <h4 className="font-medium text-sm mb-2">Tips:</h4> - <ul className="text-sm text-muted-foreground space-y-1"> - <li> - • Shortcuts work when the editor is focused (not typing in inputs) - </li> - <li>• J/K/L are industry-standard video editing shortcuts</li> - <li>• Use arrow keys for frame-perfect positioning</li> - <li>• Hold Shift with arrow keys for larger jumps</li> - </ul> - </div> </DialogContent> </Dialog> ); diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index 0a487d0a..ebfd8907 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef< <DialogPrimitive.Overlay ref={ref} className={cn( - "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", + "fixed inset-0 z-[100] bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className )} {...props} @@ -39,9 +39,17 @@ const DialogContent = React.forwardRef< <DialogPrimitive.Content ref={ref} className={cn( - "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", + "fixed left-[50%] top-[50%] z-[150] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className )} + onCloseAutoFocus={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} + onOpenAutoFocus={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} {...props} > <ScrollArea className="max-h-[85vh]"> |