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">
|
<p className="text-muted-foreground">
|
||||||
ASCII Art Text Generator with 373 Fonts
|
ASCII Art Text Generator with 373 Fonts
|
||||||
</p>
|
</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>
|
</div>
|
||||||
<FigletConverter />
|
<FigletConverter />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,6 +9,14 @@ export default function UnitsPage() {
|
|||||||
<p className="text-muted-foreground">
|
<p className="text-muted-foreground">
|
||||||
Smart unit converter with 187 units across 23 categories
|
Smart unit converter with 187 units across 23 categories
|
||||||
</p>
|
</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>
|
</div>
|
||||||
<MainConverter />
|
<MainConverter />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -65,24 +65,6 @@ export default function Footer() {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user