Skip to content

Commit c9f7d28

Browse files
antfuantfu
committed
chore: update ui
1 parent d8c2ff0 commit c9f7d28

4 files changed

Lines changed: 15 additions & 11 deletions

File tree

‎plugins/a11y/src/spa/components/FixPromptsDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export function FixPromptsDialog(props: FixPromptsDialogProps) {
6464
</button>
6565
</div>
6666

67-
<textarea class="flex-1 min-h-60 resize-none w-full p-3 bg-base border border-base rounded-lg font-mono text-[11.5px] leading-relaxed color-base whitespace-pre overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40" readonly aria-label="Generated fix prompt">{prompt()}</textarea>
67+
<textarea class="flex-1 min-h-60 resize-none w-full p-3 bg-base border border-base rounded-lg font-mono text-[11.5px] leading-relaxed color-base ws-break-spaces overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40" readonly aria-label="Generated fix prompt">{prompt()}</textarea>
6868

6969
<div class="flex items-center gap-2.5">
7070
<span class="min-w-0 truncate text-[11px] color-faint">

‎plugins/a11y/src/spa/components/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function Header(props: HeaderProps) {
2929
</span>
3030
<button
3131
type="button"
32-
class={button({ variant: 'secondary', size: 'sm' })}
32+
class={button({ variant: props.selectedCount === 0 ? 'secondary' : 'primary', size: 'sm' })}
3333
onClick={() => props.onGenerate()}
3434
disabled={props.selectedCount === 0}
3535
title="Generate AI fix prompts for the selected violations"
@@ -44,7 +44,7 @@ export function Header(props: HeaderProps) {
4444
</button>
4545
<button
4646
type="button"
47-
class={button({ variant: 'primary', size: 'sm' })}
47+
class={button({ variant: 'secondary', size: 'sm' })}
4848
onClick={() => props.onRescan()}
4949
disabled={!props.agentReady || props.scanning}
5050
>

‎plugins/a11y/src/spa/components/Summary.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,12 @@ export function Summary(props: SummaryProps) {
2727
return (
2828
<button
2929
type="button"
30-
class="flex items-baseline gap-1.5 px-2.5 py-1.5 text-left bg-secondary border border-base border-l-3 border-l-[color:var(--impact)] rounded-md cursor-pointer transition hover:bg-active outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
31-
classList={{ 'bg-[color-mix(in_srgb,var(--impact)_16%,transparent)]! border-[color:var(--impact)]!': pressed() }}
30+
class="flex items-baseline gap-1.5 px-3 py-2 text-left bg-secondary border border-base border-l-3 border-l-[color:var(--impact)] cursor-pointer transition hover:bg-active outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
31+
classList={{
32+
'bg-[color-mix(in_srgb,var(--impact)_16%,transparent)]! border-[color:var(--impact)]!': pressed(),
33+
'color-[var(--impact)]': count() > 0,
34+
'color-muted': count() === 0,
35+
}}
3236
style={{ '--impact': IMPACT_COLOR[impact] }}
3337
aria-pressed={pressed()}
3438
aria-label={`${count()} ${IMPACT_LABEL[impact]} issues — filter and highlight`}
@@ -38,10 +42,10 @@ export function Summary(props: SummaryProps) {
3842
onFocus={() => props.onHover?.(impact)}
3943
onBlur={() => props.onHover?.(null)}
4044
>
41-
<span class={`text-base font-bold tabular-nums leading-none ${count() === 0 ? 'color-faint' : 'color-base'}`}>
45+
<span class="text-lg font-bold tabular-nums leading-none">
4246
{count()}
4347
</span>
44-
<span class={`text-[9.5px] font-semibold tracking-wide uppercase ${count() === 0 ? 'color-faint' : 'text-[color:var(--impact)]'}`}>
48+
<span class="text-xs font-semibold tracking-wide uppercase">
4549
{IMPACT_LABEL[impact]}
4650
</span>
4751
</button>

‎plugins/a11y/src/spa/components/ViolationRow.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ export function ViolationRow(props: ViolationRowProps) {
2828
return (
2929
<li
3030
id={ruleCardId(props.route, v().ruleId)}
31-
class="relative bg-secondary border border-base border-l-3 border-l-[color:var(--impact)] rounded-md overflow-hidden transition hover:shadow-md"
31+
class="relative bg-secondary border border-base border-l-3 border-l-[color:var(--impact)] overflow-hidden transition hover:shadow-md"
3232
classList={{ 'bg-[color-mix(in_srgb,var(--impact)_8%,transparent)]! border-[color:var(--impact)]/60': props.selected }}
3333
style={{ '--impact': IMPACT_COLOR[v().impact] }}
3434
onMouseLeave={() => props.channel.clearPreview()}
3535
>
3636
<div class="flex items-stretch">
3737
<input
3838
type="checkbox"
39-
class="shrink-0 self-center size-[15px] ml-3 accent-primary-500 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
39+
class="shrink-0 self-center size-[15px] ml-3 accent-[var(--impact)] cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
4040
checked={props.selected}
4141
aria-label={`Select ${v().ruleId} to highlight and add to fix prompts`}
4242
onChange={() => props.onToggleSelect()}
@@ -53,7 +53,7 @@ export function ViolationRow(props: ViolationRowProps) {
5353
onBlur={() => props.channel.clearPreview()}
5454
>
5555
<span class="flex items-center gap-1.5">
56-
<span class="text-[9px] font-bold tracking-wide uppercase text-[color:var(--impact)]">{IMPACT_LABEL[v().impact]}</span>
56+
<span class="text-[9px] font-bold tracking-wide uppercase color-[var(--impact)]">{IMPACT_LABEL[v().impact]}</span>
5757
<Show when={v().bestPractice}>
5858
<span class="text-[9.5px] font-bold tracking-wide uppercase color-muted border border-base rounded-full px-1.5" title="axe best-practice rule (not a WCAG success criterion)">best practice</span>
5959
</Show>
@@ -76,7 +76,7 @@ export function ViolationRow(props: ViolationRowProps) {
7676
<li>
7777
<button
7878
type="button"
79-
class="block w-full text-left bg-base border border-base rounded px-2.5 py-1.5 cursor-pointer transition hover:bg-active outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
79+
class="block w-full bg-[#8881] text-left border border-base rounded px-2.5 py-1.5 cursor-pointer transition hover:bg-hover outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
8080
onMouseEnter={() => props.channel.preview(node)}
8181
onFocus={() => props.channel.preview(node)}
8282
onMouseLeave={() => props.channel.clearPreview()}

0 commit comments

Comments
 (0)