fix(search): enlarge sub-12px text for senior legibility (#739 review)
Leonie (UX): the toggle pill (text-[7.5px]) and loading subtitle (text-[9px]) were below the 12px floor for the 60+ audience. Bump both to text-xs and the toggle icon to h-3.5/w-3.5. Overrides the visual spec's tokens, which conflicted with the issue's own legibility mandate. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -19,7 +19,7 @@ function toggle() {
|
|||||||
type="button"
|
type="button"
|
||||||
aria-pressed={smartMode}
|
aria-pressed={smartMode}
|
||||||
onclick={toggle}
|
onclick={toggle}
|
||||||
class="pointer-events-auto absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-[7.5px] font-bold uppercase outline-none focus-visible:ring-2 focus-visible:ring-brand-navy {smartMode
|
class="pointer-events-auto absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold uppercase outline-none focus-visible:ring-2 focus-visible:ring-brand-navy {smartMode
|
||||||
? 'border border-primary bg-primary text-primary-fg'
|
? 'border border-primary bg-primary text-primary-fg'
|
||||||
: 'border border-line bg-muted text-ink-2'}"
|
: 'border border-line bg-muted text-ink-2'}"
|
||||||
>
|
>
|
||||||
@@ -27,7 +27,7 @@ function toggle() {
|
|||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
class="h-2.5 w-2.5"
|
class="h-3.5 w-3.5"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path d="M12 2l2.09 6.26L20 10l-5.91 1.74L12 18l-2.09-6.26L4 10l5.91-1.74L12 2z" />
|
<path d="M12 2l2.09 6.26L20 10l-5.91 1.74L12 18l-2.09-6.26L4 10l5.91-1.74L12 2z" />
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ const body = $derived(
|
|||||||
class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
|
class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
|
||||||
></div>
|
></div>
|
||||||
<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
|
<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
|
||||||
<p class="max-w-xs text-[9px] text-ink-3 motion-safe:animate-pulse">
|
<p class="max-w-xs text-xs text-ink-3 motion-safe:animate-pulse">
|
||||||
{m.search_loading_nl_sub()}
|
{m.search_loading_nl_sub()}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user