dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make keyboard hint pill legible over busy thumbnails

Browse Source 
The bottom-center hint bar used bg-surface/40 + text-text-muted, which
left busy photos leaking through and washed the text out — users
couldn't actually read the shortcut labels when a bright thumbnail sat
directly behind the pill. Switched to a near-opaque bg-black/80 with
white-alpha text + white/15 key caps. Backdrop blur stays for the
subtle glass feel, but the contrast is now unconditional on the
photo underneath.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-09 17:44:04 +02:00
parent 64b84e2069
commit f4c51f6f92
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/KeyboardHints.tsx
View File

@@ -31,24 +31,27 @@ export function KeyboardHints() {
// inside the main column in App.tsx so it isn't offset by the
// sidebar widths.
<div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
<div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
{/* Near-opaque dark pill so the hints stay legible against busy
* thumbnails. The previous bg-surface/40 + 5% white ring left
* text washed out when a bright photo sat directly behind it. */}
<div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-white/15 bg-black/80 px-4 py-1.5 shadow-xl ring-1 ring-black/40 backdrop-blur-md">
{hints.map((hint, i) => (
<div key={i} className="flex items-center gap-1.5">
<kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text">
<kbd className="rounded bg-white/15 px-1.5 py-0.5 text-[11px] font-medium text-white shadow-sm">
{hint.key}
</kbd>
<span className="whitespace-nowrap text-xs text-text-muted">
<span className="whitespace-nowrap text-xs text-white/85">
{hint.action}
</span>
{i < hints.length - 1 && (
<span className="ml-1 text-text-faint">•</span>
<span className="ml-1 text-white/30">•</span>
)}
</div>
))}
{selectedCount > 0 && (
<>
<span className="text-text-faint">•</span>
<span className="whitespace-nowrap text-xs font-medium text-primary">
<span className="text-white/30">•</span>
<span className="whitespace-nowrap text-xs font-semibold text-primary">
{selectedCount} selected
</span>
</>