Match WC's native pill + fix stat card alignment with subvalue#27
Merged
Merged
Conversation
Two small UX fixes after testing with real order data:
1. StatusPill — match wc-admin's native .order-status styling.
The pre-fix pill used a rounded-oval shape with ~12px radius and
muted colors. The native WC pill is a rounded rectangle (4px
radius), bigger vertical padding via line-height, subtle
rgba(0,0,0,0.05) bottom border, and the exact color palette
wc-admin ships. Changes:
- Fixed processing color: was #c8d7e1 (blue-gray, matches
completed) → #c6e1c6/#5b841b (green, matches native).
The pre-fix version made every active order look completed.
- Shape: 4px border-radius (not 12px), line-height: 2.5em,
padding: 0 1em, borderBottom with the WC depth cue, negative
vertical margin so the pill doesn't expand row height.
- Element: <mark> with className="order-status status-{key}"
so any future load of wc-admin's CSS would layer cleanly
over our inline styles (idempotent — merchants with wc-admin
native screens see the same look).
- title={label} for native hover tooltip, matching WC's
Orders list accessibility affordance.
- Font size bumped 12→13px with weight 400, which is the
native WC value.
2. StatCard — inline subvalue instead of stacking.
The pre-fix layout stacked the subvalue below the value as a
separate block, which made the AI Orders card visually taller
than the three subvalue-less cards next to it. The "1" big
number shifted upward relative to "4 categories" / "10" / "USD
55.36", breaking the four-across row alignment.
Fix: value + subvalue share one flex row with align-items:
baseline + justify-content: center. The big "1" and the small
"10% of total" sit on the same baseline, side by side. Every
card's big number now occupies the same y-coordinate regardless
of whether it has a subvalue.
Part of the visual-polish pass after DataViews migration; no
test changes needed (both fixes are pure render).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two small UX fixes after real-order testing surfaced them:
.order-statuslook. Rounded rectangle (4px not 12px), bigger vertical padding, subtle bottom-border depth cue,titleattribute for native hover tooltip, and — importantly — corrected the Processing color from blue-gray to green. The pre-fix version made Processing and Completed look identical, which is wrong: in WC's palette Processing is green, Completed is the blue-gray.Before / After
StatusPill
title={label}Element is now
<mark>withclassName="order-status status-{key}"so if wc-admin's CSS ever loads later, it'd layer idempotently.StatCard
Before:
valuestacked abovesubvaluestacked abovelabel— three rows.After:
value+subvalueshare one flex row (baseline-aligned, gap 6px),labelunderneath — two rows.Test plan
ai-syndication-settings.cssShips as
Merged to
main, not tagged. Queue now 7 PRs past v1.6.7.🤖 Generated with Claude Code