style: unify keyboard shortcut hints across tools using Pastel style
- Add shortcut hints below tool descriptions in Figlet and Units pages - Revert experimental button-based shortcut layout in Units - Remove redundant shortcut hints from Units footer - Ensure consistent kbd tag styling across the application
This commit is contained in:
@@ -9,6 +9,12 @@ export default function FigletPage() {
|
||||
<p className="text-muted-foreground">
|
||||
ASCII Art Text Generator with 373 Fonts
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
|
||||
<span>Focus Search</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
|
||||
<span>Clear Search</span>
|
||||
</div>
|
||||
</div>
|
||||
<FigletConverter />
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,14 @@ export default function UnitsPage() {
|
||||
<p className="text-muted-foreground">
|
||||
Smart unit converter with 187 units across 23 categories
|
||||
</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
|
||||
<span>Focus Search</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">Ctrl+K</kbd>
|
||||
<span>Command Palette</span>
|
||||
<kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
|
||||
<span>Close Dialogs</span>
|
||||
</div>
|
||||
</div>
|
||||
<MainConverter />
|
||||
</div>
|
||||
|
||||
@@ -65,24 +65,6 @@ export default function Footer() {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Keyboard Shortcuts */}
|
||||
<div className="mt-4">
|
||||
<h4 className="font-semibold text-sm mb-2">Keyboard Shortcuts</h4>
|
||||
<ul className="space-y-1 text-xs text-muted-foreground">
|
||||
<li>
|
||||
<kbd className="px-1.5 py-0.5 bg-muted rounded">/</kbd> Focus search
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="px-1.5 py-0.5 bg-muted rounded">Ctrl</kbd>
|
||||
{' + '}
|
||||
<kbd className="px-1.5 py-0.5 bg-muted rounded">K</kbd> Command palette
|
||||
</li>
|
||||
<li>
|
||||
<kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd> Close dialogs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user