feat(api-status): redesign dashboard with brand-driven chrome#1104
Merged
Conversation
Extracts the inline PLATFORM_TINT map from the homepage feature row into src/components/platform-navigation/platform-colors.ts as the single source of truth for platform brand color across the site. Covers every platform key consumed by PlatformBadge — including the clay umbrella + clay_* variants — and exposes both the Tailwind tint string and the underlying hex/bg values so the PlatformBadge CSS can stay in lockstep with what the homepage row uses. Brand mapping: apple family (ios, macos) -> zinc android -> emerald harmony -> rose web / web_lynx -> orange windows -> sky clay umbrella + variants -> cyan Change-Id: I10af83dc736bf9e057e3b6bd1a6d0c4a0c93d7fe
Three coordinated changes so the API-doc PlatformBadge stops fighting the
rest of the site:
1. Palette unified to the shared platform color tokens. iOS goes from
saturated blue back to Apple's zinc-silver, Harmony from orange to the
Huawei rose, web from purple to lynx orange, and the four clay_*
variants collapse from cyan/indigo/teal/sky into one Clay cyan so
ClayAndroidOnly stays visually distinct from AndroidOnly even though
they share the Android glyph.
2. Contrast quieted. Background drops from a saturated ~500@10% wash to a
tinted 50/950, while the icon stays in full platform color so the badge
is still scannable at a glance — the icon does the signalling.
3. Visual semantics for *Only / No*. Previously info/warning/danger all
rendered in the same platform color, so "iOS Only" and "No iOS" looked
like the same chip with different words. Now:
default platform color, subtle bg
.platform-badge--only adds an inset platform-tinted ring (emphasis)
.platform-badge--no drops platform color, mutes to neutral, strikes
the label, dims the icon (negation)
Also relabels bare `clay` as "Desktop" in the user-facing label only — the
component export names (ClayOnly, NoClay), APIStatus colors, and compat
tables keep `clay`. Temporary until the desktop branding settles.
Change-Id: If12a812aab5d351e19c39f01065847954ca24d85
The previous commit changed mapPlatformNameToFullName('clay') to return
'Desktop' so the badge would read "Desktop", but that same function also
drove the dynamic component-name derivation. Result: generatedComponents
held 'DesktopOnly'/'NoDesktop' while the destructured exports still asked
for 'ClayOnly'/'NoClay', so both came back as undefined and every MDX page
that rendered <ClayOnly/> SSG-failed with React #130.
Split the responsibility:
- mapPlatformNameToTechnicalName -> stable 'Clay'/'Harmony'/... drives
the generatedComponents keys, so ClayOnly/NoClay stay valid.
- mapPlatformNameToLabel -> what the user sees, returns
'Desktop' for clay.
Also drops em dashes from comments in this PR's new code per repo prose
preferences.
Change-Id: Ib82b76c1511b665405204e76a7475c58dc092dad
Change-Id: I98a04f9a62cc6e860d74719f5e4f1d0f6bb968ea
The Rspress Badge is inline-flex, which baseline-aligns its line box to the surrounding text baseline. That looks fine next to body text and code chips, but inside a heading it makes the chip cling to the bottom of the heading line and read as stranded. Setting vertical-align: middle on the chip re-centers it on the line box and fixes alignment in body, TOC, and heading contexts without changing the chip's size. Also moves the icon size from inline Tailwind utilities into the same CSS rule (--icon-size: 0.9rem) so future tweaks live in one place. Change-Id: Ibc9c30567a716e666be65a20e55b9e323d7963d5
Two adjacent fixes for how platform chips read on the api/status page. 1. Android SVG viewBox cropped from `0 0 21 20` to `1.5 1.5 18 18`. The half-dome glyph only fills the lower half of the original viewBox, so at the same `--icon-size` the rendered Android glyph looked visibly smaller than Apple / Harmony / Web (which fill their viewBoxes). The new square crop centers on the glyph centroid and removes the dead margin so the rendered icon picks up the same visual weight as the other platforms. 2. API-status support chips in `APIStatusDashboard.tsx` shrunk to match the older compact pill. Icon 10px -> 8px, dot 6px -> 4px, padding 4/2px -> 2/1px, gap 2px -> 1px. The chip footprint goes from ~26x14 down to ~16x10, restoring the tight pill feel. Change-Id: I5f45a45f00c314871207eab1ebc98112be3c50af
…ine-block on dot
Tailwind `w-2 h-2` lost to `.icon { width: var(--size) }` in CSS source
order, so the chip icons rendered at 1rem (16px) instead of the intended
8px. Pass `--icon-size: 0.5rem` on the chip wrapper so the .icon rule
picks up the right size, and switch the status dot from `<span>` (inline,
ignores width/height) to an inline-block element so the 4px circle
actually renders.
Change-Id: I50f994b4a40449a20c80cf10f62d3e9c93fad799
Previous shrink went too tight: icon (8px) and dot (4px) sat right next to each other with 1px gap and 2px padding, so the chip read as a single cramped square instead of an "icon + status" pill. Back off slightly to match the reference proportions: --icon-size: 0.625rem (10px) dot 6px gap 4px padding 4px / 2px Chip footprint becomes roughly 22 x 14 — small enough on mobile to fit a multi-platform row, comfortable enough on desktop that the icon and the status dot don't read as one blob. Change-Id: I2303122243c05c347974668186381e84abddf2bb
The previous attempt set --icon-size on the chip wrapper hoping it would
cascade into the .icon child, but .icon's `width: var(--size)` was still
winning at the rendered size (~16px) on desktop, so the chips read as
huge despite the smaller Tailwind paddings. Add a `style` pass-through
on PlatformSvg + the api-status icon factory, and set the chip icon to
{ width: 10, height: 10 } directly. Inline style sits above any cascade
contest so the icon actually renders at 10px now.
Change-Id: I1a2a182b24f183ed3d3e1ce2e981133166f41a5a
Sidebar, header, and all four pages adopt the homepage's color-mix +
lifted-card vocabulary (mirrors SubsiteRow / ChoiceTabs / shared-tabs).
Sidebar
- Pages as full-width brand-washed rows; no PAGES eyebrow, no caret on active row
- Platforms as icon rail with per-cell --platform brand color; coverage % below
- Clay aggregate + "Show Clay surfaces" toggle that opens a flush tray
- Collapsed (icon-only) state works for pages, platforms, and Clay expand
- Sidebar header overrides shadcn's flex-col/p-2 defaults so it lines up
with the page header bar (64px tall, shared bottom border)
Header (APIStatusLayout)
- Page title + brand stem accent + short subtitle on the left
- Single quiet meta line on the right ("Updated DATE · X of Y platforms")
- Sidebar fixed-position override (!top-16) so it aligns with rspress's
64px-tall top nav (shadcn defaults to top-14)
Coverage page
- Replaces stat-card grid with a horizontal parity list (one row per
platform, full-width bar dominant)
- Trend chart fills its plate width (preserveAspectRatio="none"), per-
platform Y offset so overlapping lines render visibly separated,
end-of-line platform labels in brand color
Categories / Recent / Search
- Categories flattened: dropped the plate wrapper, header row sits above
the CategoryTable so its own dividers carry the page
- Recent: per-platform stat cards with version-block layout; version
chips inherit --platform so they tint to the parent card's color
- Search: search bar in a plate that picks up a brand focus ring,
transparent filter selects, quiet results meta line
Token system
- All chrome reads from color-mix() over --platform or --rp-c-brand
- Dark mode adjusts mix percentages, not hardcoded alternates
Change-Id: I34b37d4404b18a69e13d48a246b41c0fa08939c2
✅ Deploy Preview for lynx-doc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 24 minutes and 52 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughThis PR introduces a centralized platform color system, refactors platform badge styling with CSS variables, extends icon infrastructure to support inline styles, and completely redesigns the API Status dashboard with new layout structure, sidebar navigation, shared page styling conventions, and per-page component refactors. ChangesPlatform Color System & Icon Infrastructure
Platform Badge Component Refactor
API Status Dashboard Layout & Architecture
🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR redesigns the /api/status dashboard UI to align with the site’s brand-driven “color-mix” chrome, introducing new SCSS-based components for the sidebar and page interiors and consolidating platform color tokens for reuse across the site.
Changes:
- Introduces a new API Status sidebar + page chrome (SCSS-driven) to replace the prior shadcn/admin-template look.
- Adds a centralized platform color mapping (
platform-colors.ts) and wires homepage platform icons to use it. - Updates platform badges and API status pages/components to support brand-tinted styling and new layouts (coverage parity list, trend chart, recent/search/category chrome).
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/platform-navigation/PlatformIcon.tsx | Allows passing inline style to the masked platform icon renderer. |
| src/components/platform-navigation/platform-colors.ts | Adds a shared platform color token map (tint + hex/bg pairs). |
| src/components/home-comps/features/icon.tsx | Switches homepage platform tinting to the centralized token map. |
| src/components/api-table/compat-table/assets/icons/android.svg | Adjusts Android icon viewBox for improved framing. |
| src/components/api-status/pages/SearchPage.tsx | Redesigns search UI into a unified “plate” search/filter bar + results meta line. |
| src/components/api-status/pages/RecentPage.tsx | Replaces shadcn cards with new aps-* stat-card and version-block chrome. |
| src/components/api-status/pages/CoveragePage.tsx | Replaces stat-card grid with parity list and redesigns trend chart rendering. |
| src/components/api-status/pages/CategoriesPage.tsx | Flattens categories layout and introduces new pill-group header controls. |
| src/components/api-status/constants.tsx | Extends platform icon components to accept style props (for CSS-var driven layouts). |
| src/components/api-status/APIStatusSidebar.tsx | Major sidebar redesign: page rows, platform rail, Clay tray, footer utilities. |
| src/components/api-status/APIStatusSidebar.scss | New sidebar chrome implementing brand-wash/active/hover states and collapsed mode. |
| src/components/api-status/APIStatusPages.scss | New shared page chrome (plates, parity rows, stat cards, search bar, etc.). |
| src/components/api-status/APIStatusLayout.tsx | New layout header bar with page meta + updated platform count display. |
| src/components/api-status/APIStatusLayout.scss | New layout shell + imports shared pages chrome. |
| src/components/api-status/APIStatusDashboard.tsx | Tweaks APIItem platform-status badges to use styled icons and inline-flex layout. |
| src/components/api-badge/PlatformBadge.tsx | Separates technical vs user-facing labels (“Clay” vs “Desktop”) and adds variant modifiers. |
| src/components/api-badge/PlatformBadge.css | Rebuilds badge styling using platform color vars + adds “Only”/“No” visual variants. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
48
to
69
| export const PlatformSvg = ({ | ||
| platformName, | ||
| className, | ||
| key, | ||
| style, | ||
| }: { | ||
| platformName: PlatformName | string; | ||
| className?: string; | ||
| key?: string; | ||
| style?: React.CSSProperties; | ||
| }) => { | ||
| const svgUrl = toIconUrl(platformName); | ||
| return ( | ||
| <div | ||
| className={cn('icon', className)} | ||
| key={key} | ||
| style={{ | ||
| maskImage: `url(${svgUrl})`, | ||
| WebkitMaskImage: `url(${svgUrl})`, | ||
| ...style, | ||
| }} | ||
| /> |
Comment on lines
+18
to
26
| /* apple family (ios, macos) → zinc */ | ||
| .platform-badge-ios, | ||
| .platform-badge-clay_ios, | ||
| .platform-badge-macos, | ||
| .platform-badge-clay_macos { | ||
| --platform-badge-fg: #52525b; /* zinc-600 */ | ||
| --platform-badge-bg: #fafafa; /* zinc-50 */ | ||
| --platform-badge-ring: #d4d4d8; /* zinc-300 */ | ||
| } |
Comment on lines
+57
to
64
| /* clay umbrella + variants → cyan (Clay/Desktop signature) */ | ||
| .platform-badge-clay, | ||
| .platform-badge-clay_android, | ||
| .platform-badge-clay_windows { | ||
| --rp-container-info-text: #0369a1; | ||
| --rp-container-info-bg: #0ea5e91a; | ||
| --rp-container-warning-text: #0369a1; | ||
| --rp-container-warning-bg: #0ea5e91a; | ||
| --rp-container-danger-text: #0369a1; | ||
| --rp-container-danger-bg: #0ea5e91a; | ||
| --platform-badge-fg: #0891b2; | ||
| --platform-badge-bg: #ecfeff; | ||
| --platform-badge-ring: #a5f3fc; | ||
| } |
Comment on lines
+66
to
74
| /* Dark mode bumps foreground to ~400 and swaps bg to a deep tinted wash. */ | ||
| :where(html.rp-dark, html.dark) .platform-badge-ios, | ||
| :where(html.rp-dark, html.dark) .platform-badge-clay_ios, | ||
| :where(html.rp-dark, html.dark) .platform-badge-macos, | ||
| :where(html.rp-dark, html.dark) .platform-badge-clay_macos { | ||
| --platform-badge-fg: #d4d4d8; | ||
| --platform-badge-bg: #27272a99; | ||
| --platform-badge-ring: #52525b; | ||
| } |
Comment on lines
101
to
+107
| :where(html.rp-dark, html.dark) .platform-badge-clay, | ||
| :where(html.rp-dark, html.dark) .platform-badge-clay_android { | ||
| --rp-container-info-text: #2dd4bf; | ||
| --rp-container-info-bg: #14b8a626; | ||
| --rp-container-warning-text: #2dd4bf; | ||
| --rp-container-warning-bg: #14b8a626; | ||
| --rp-container-danger-text: #2dd4bf; | ||
| --rp-container-danger-bg: #14b8a626; | ||
| :where(html.rp-dark, html.dark) .platform-badge-clay_android, | ||
| :where(html.rp-dark, html.dark) .platform-badge-clay_windows { | ||
| --platform-badge-fg: #22d3ee; | ||
| --platform-badge-bg: #08344499; | ||
| --platform-badge-ring: #155e75; | ||
| } |
Comment on lines
+128
to
133
| <input | ||
| className="aps-search-input" | ||
| value={searchQuery} | ||
| onChange={(e) => setSearchQuery(e.target.value)} | ||
| placeholder={t.searchPlaceholder} | ||
| /> |
Comment on lines
353
to
+355
| title={`${PLATFORM_CONFIG[platform]?.label || platform}: ${isSupported ? 'Supported' : 'Not supported'}`} | ||
| > | ||
| {Icon && <Icon className="w-2.5 h-2.5" />} | ||
| {Icon && <Icon style={{ width: 10, height: 10 } as any} />} |
Comment on lines
5
to
7
| import { APIStatusSidebar, type PageType } from './APIStatusSidebar'; | ||
| import { PLATFORM_CONFIG } from './constants'; | ||
| import { CategoriesPage } from './pages/CategoriesPage'; |
Comment on lines
+108
to
+114
| const surfaceCount = selectedPlatforms.length; | ||
| // Total native surfaces in the dataset (= dataset size of selectable | ||
| // platforms minus the clay aggregate, since that's a roll-up not its own | ||
| // surface). Kept defensively in case the schema gains new ones. | ||
| const totalSurfaces = Object.keys(stats.summary.by_platform).filter( | ||
| (p) => p !== 'clay', | ||
| ).length; |
Comment on lines
+299
to
+305
| .aps-plate { | ||
| position: relative; | ||
| background: color-mix(in srgb, currentColor 3%, transparent); | ||
| border: 1px solid color-mix(in srgb, currentColor 10%, transparent); | ||
| border-radius: 14px; | ||
| overflow: hidden; | ||
| } |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/api-status/APIStatusDashboard.tsx (1)
192-198:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winMissing
styleprop support breaks icon sizing at line 355.The
PlatformIconcomponent does not accept astyleparameter, but line 355 attempts to passstyle={{ width: 10, height: 10 }}. This will silently fail, causing the icon to render at its default size instead of the intended 10×10 pixels. Other page components (CoveragePage, RecentPage) correctly extendPlatformIconwithstylesupport.🔧 Proposed fix
-const PlatformIcon: React.FC<{ platform: string; className?: string }> = ({ - platform, - className, -}) => { +const PlatformIcon: React.FC<{ + platform: string; + className?: string; + style?: React.CSSProperties; +}> = ({ platform, className, style }) => { const Icon = PLATFORM_CONFIG[platform]?.icon; - return Icon ? <Icon className={className} /> : null; + return Icon ? <Icon className={className} style={style} /> : null; };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/api-status/APIStatusDashboard.tsx` around lines 192 - 198, PlatformIcon currently only accepts platform and className so passing style={{...}} is ignored; update the PlatformIcon component signature to accept an optional style prop (e.g., style?: React.CSSProperties), include it in the props destructuring for the PlatformIcon function, and forward that style to the rendered Icon (from PLATFORM_CONFIG[platform]?.icon) along with className so the consumer-provided sizing (e.g., width/height) is applied.src/components/api-status/pages/CoveragePage.tsx (1)
95-210:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift
preserveAspectRatio="none"will distort interactive elements and text.Setting
preserveAspectRatio="none"(line 99) causes the SVG to stretch non-uniformly to fill its container. On narrow or wide viewports, this will:
- Turn interactive circles (lines 156-170, radii 18/6/3.5) into ellipses, degrading hover precision.
- Horizontally stretch/compress platform labels (lines 176-185) and axis text, reducing readability.
- Create inconsistent visual weight across different viewport sizes.
While
vectorEffect="non-scaling-stroke"preserves stroke width, it does not prevent distortion of circles, text, or layout proportions. The PR summary mentions this is intentional ("chart fills width"), but the user experience trade-off may be significant.Consider either:
- Using
preserveAspectRatio="xMidYMid meet"to maintain proportions with letterboxing.- Implementing dynamic viewBox calculation based on container aspect ratio.
- Accepting the distortion as a design constraint and documenting it.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/api-status/pages/CoveragePage.tsx` around lines 95 - 210, The SVG chart uses `preserveAspectRatio="none"` which causes non-uniform scaling that distorts the interactive circles and text labels across different viewport sizes. Replace the `preserveAspectRatio="none"` attribute with `preserveAspectRatio="xMidYMid meet"` to maintain proper aspect ratio with letterboxing, which will preserve the circular shape of the interactive points (those with radii of 18, 6, and 3.5), keep platform labels legible, and ensure consistent visual appearance. This maintains the intended chart behavior while preventing the distortion of interactive elements and improving the user experience across different screen sizes.
🧹 Nitpick comments (3)
src/components/api-status/APIStatusSidebar.scss (1)
22-22: 💤 Low valueConsider using lowercase
currentcolorfor CSS keyword consistency.Consistent with the other SCSS files in this PR, using the canonical lowercase form of CSS color keywords is preferred for linter compliance.
Also applies to: 25-25, 91-91, 140-140, 174-174, 267-267, 422-422, 443-443, 489-489, 512-512, 658-659
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/api-status/APIStatusSidebar.scss` at line 22, Replace the CSS keyword usage of "currentColor" with the canonical lowercase "currentcolor" inside the color-mix(...) calls in src/components/api-status/APIStatusSidebar.scss; specifically update the border-bottom and all other color-mix occurrences (the lines using color-mix(in srgb, currentColor 8%, transparent)) so they use "currentcolor" consistently across the file (also update the other listed occurrences on the same file: lines referencing color-mix at the noted positions).Source: Linters/SAST tools
src/components/api-status/APIStatusLayout.scss (1)
18-18: 💤 Low valueConsider using lowercase
currentcolorfor CSS keyword consistency.CSS color keywords are case-insensitive, but the canonical lowercase form (
currentcolor) is preferred by linters and modern style guides.♻️ Proposed fix
- border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent); + border-bottom: 1px solid color-mix(in srgb, currentcolor 8%, transparent);Apply similar changes on lines 130, 137, 143, 155.
Also applies to: 130-130, 137-137, 143-143, 155-155
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/api-status/APIStatusLayout.scss` at line 18, Replace the capitalized CSS keyword "currentColor" with the canonical lowercase "currentcolor" in the color-mix() usages within APIStatusLayout.scss (specifically the occurrences shown around the border and similar rules), i.e., update each color-mix(in srgb, currentColor ...) to color-mix(in srgb, currentcolor ...) for the occurrences at the reported sites (lines shown in the review: 18, 130, 137, 143, 155) so the stylesheet matches linter/style-guide expectations.Source: Linters/SAST tools
src/components/api-status/APIStatusPages.scss (1)
118-118: 💤 Low valueConsider using lowercase
currentcolorfor CSS keyword consistency.Similar to the layout stylesheet, using the canonical lowercase form of CSS color keywords is preferred for consistency and linter compliance.
Also applies to: 176-176, 211-211, 235-235, 301-302, 313-313, 380-381, 471-471, 490-491, 580-581, 613-613
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/api-status/APIStatusPages.scss` at line 118, Replace the capitalized CSS keyword currentColor with the canonical lowercase currentcolor wherever used in the color-mix background rules (e.g., the declarations using "background: color-mix(in srgb, currentColor 8%, transparent)"); update each occurrence listed (and any other matches) so the property reads "background: color-mix(in srgb, currentcolor 8%, transparent)" to maintain consistent CSS keyword casing and satisfy linters.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/api-badge/PlatformBadge.css`:
- Around line 19-22: The CSS groups .platform-badge-clay_ios and
.platform-badge-clay_macos with Apple/zinc hues causing inconsistency with the
centralized mapping in platform-colors.ts; update PlatformBadge.css so the
selectors .platform-badge-clay_ios and .platform-badge-clay_macos use the
Clay/cyan color variables (same tokens used by platform-colors.ts) instead of
the Apple/zinc ones, and make the same change for the duplicate selectors at
lines 67-70 to restore single-source-of-truth styling.
---
Outside diff comments:
In `@src/components/api-status/APIStatusDashboard.tsx`:
- Around line 192-198: PlatformIcon currently only accepts platform and
className so passing style={{...}} is ignored; update the PlatformIcon component
signature to accept an optional style prop (e.g., style?: React.CSSProperties),
include it in the props destructuring for the PlatformIcon function, and forward
that style to the rendered Icon (from PLATFORM_CONFIG[platform]?.icon) along
with className so the consumer-provided sizing (e.g., width/height) is applied.
In `@src/components/api-status/pages/CoveragePage.tsx`:
- Around line 95-210: The SVG chart uses `preserveAspectRatio="none"` which
causes non-uniform scaling that distorts the interactive circles and text labels
across different viewport sizes. Replace the `preserveAspectRatio="none"`
attribute with `preserveAspectRatio="xMidYMid meet"` to maintain proper aspect
ratio with letterboxing, which will preserve the circular shape of the
interactive points (those with radii of 18, 6, and 3.5), keep platform labels
legible, and ensure consistent visual appearance. This maintains the intended
chart behavior while preventing the distortion of interactive elements and
improving the user experience across different screen sizes.
---
Nitpick comments:
In `@src/components/api-status/APIStatusLayout.scss`:
- Line 18: Replace the capitalized CSS keyword "currentColor" with the canonical
lowercase "currentcolor" in the color-mix() usages within APIStatusLayout.scss
(specifically the occurrences shown around the border and similar rules), i.e.,
update each color-mix(in srgb, currentColor ...) to color-mix(in srgb,
currentcolor ...) for the occurrences at the reported sites (lines shown in the
review: 18, 130, 137, 143, 155) so the stylesheet matches linter/style-guide
expectations.
In `@src/components/api-status/APIStatusPages.scss`:
- Line 118: Replace the capitalized CSS keyword currentColor with the canonical
lowercase currentcolor wherever used in the color-mix background rules (e.g.,
the declarations using "background: color-mix(in srgb, currentColor 8%,
transparent)"); update each occurrence listed (and any other matches) so the
property reads "background: color-mix(in srgb, currentcolor 8%, transparent)" to
maintain consistent CSS keyword casing and satisfy linters.
In `@src/components/api-status/APIStatusSidebar.scss`:
- Line 22: Replace the CSS keyword usage of "currentColor" with the canonical
lowercase "currentcolor" inside the color-mix(...) calls in
src/components/api-status/APIStatusSidebar.scss; specifically update the
border-bottom and all other color-mix occurrences (the lines using color-mix(in
srgb, currentColor 8%, transparent)) so they use "currentcolor" consistently
across the file (also update the other listed occurrences on the same file:
lines referencing color-mix at the noted positions).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e3b3ecc4-4a8d-44b7-82b2-4dc55b92d4f6
⛔ Files ignored due to path filters (1)
src/components/api-table/compat-table/assets/icons/android.svgis excluded by!**/*.svg
📒 Files selected for processing (16)
src/components/api-badge/PlatformBadge.csssrc/components/api-badge/PlatformBadge.tsxsrc/components/api-status/APIStatusDashboard.tsxsrc/components/api-status/APIStatusLayout.scsssrc/components/api-status/APIStatusLayout.tsxsrc/components/api-status/APIStatusPages.scsssrc/components/api-status/APIStatusSidebar.scsssrc/components/api-status/APIStatusSidebar.tsxsrc/components/api-status/constants.tsxsrc/components/api-status/pages/CategoriesPage.tsxsrc/components/api-status/pages/CoveragePage.tsxsrc/components/api-status/pages/RecentPage.tsxsrc/components/api-status/pages/SearchPage.tsxsrc/components/home-comps/features/icon.tsxsrc/components/platform-navigation/PlatformIcon.tsxsrc/components/platform-navigation/platform-colors.ts
Comment on lines
+19
to
+22
| .platform-badge-ios, | ||
| .platform-badge-clay_ios, | ||
| .platform-badge-macos, | ||
| .platform-badge-clay_macos { |
There was a problem hiding this comment.
Clay variant badge colors are inconsistent with the centralized platform contract.
clay_ios and clay_macos are grouped with Apple/zinc here, but src/components/platform-navigation/platform-colors.ts maps all clay_* to the Clay/cyan hue. This breaks the “single source of truth” behavior and makes Clay variants visually inconsistent.
Proposed fix
-/* apple family (ios, macos) → zinc */
+/* apple family (ios, macos) → zinc */
.platform-badge-ios,
-.platform-badge-clay_ios,
.platform-badge-macos,
-.platform-badge-clay_macos {
+.platform-badge-macos {
--platform-badge-fg: `#52525b`; /* zinc-600 */
--platform-badge-bg: `#fafafa`; /* zinc-50 */
--platform-badge-ring: `#d4d4d8`; /* zinc-300 */
}
@@
-/* clay umbrella + variants → cyan (Clay/Desktop signature) */
+/* clay umbrella + variants → cyan (Clay/Desktop signature) */
.platform-badge-clay,
+.platform-badge-clay_ios,
.platform-badge-clay_android,
+.platform-badge-clay_macos,
.platform-badge-clay_windows {
--platform-badge-fg: `#0891b2`;
--platform-badge-bg: `#ecfeff`;
--platform-badge-ring: `#a5f3fc`;
}
@@
:where(html.rp-dark, html.dark) .platform-badge-ios,
-:where(html.rp-dark, html.dark) .platform-badge-clay_ios,
:where(html.rp-dark, html.dark) .platform-badge-macos,
-:where(html.rp-dark, html.dark) .platform-badge-clay_macos {
+:where(html.rp-dark, html.dark) .platform-badge-macos {
--platform-badge-fg: `#d4d4d8`;
--platform-badge-bg: `#27272a99`;
--platform-badge-ring: `#52525b`;
}
@@
:where(html.rp-dark, html.dark) .platform-badge-clay,
+:where(html.rp-dark, html.dark) .platform-badge-clay_ios,
:where(html.rp-dark, html.dark) .platform-badge-clay_android,
+:where(html.rp-dark, html.dark) .platform-badge-clay_macos,
:where(html.rp-dark, html.dark) .platform-badge-clay_windows {
--platform-badge-fg: `#22d3ee`;
--platform-badge-bg: `#08344499`;
--platform-badge-ring: `#155e75`;
}Also applies to: 67-70
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/api-badge/PlatformBadge.css` around lines 19 - 22, The CSS
groups .platform-badge-clay_ios and .platform-badge-clay_macos with Apple/zinc
hues causing inconsistency with the centralized mapping in platform-colors.ts;
update PlatformBadge.css so the selectors .platform-badge-clay_ios and
.platform-badge-clay_macos use the Clay/cyan color variables (same tokens used
by platform-colors.ts) instead of the Apple/zinc ones, and make the same change
for the duplicate selectors at lines 67-70 to restore single-source-of-truth
styling.
Deploying lynx-website-next with
|
| Latest commit: |
2213c3c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0a47357f.lynx-website-next.pages.dev |
| Branch Preview URL: | https://feat-unify-platform-colors.lynx-website-next.pages.dev |
- APIStatusLayout: drop unused PLATFORM_CONFIG import - APIStatusLayout: totalSurfaces now mirrors the sidebar rail's count (native + 1 clay-aggregate in collapsed mode, native + 4 clay_* in detail mode) so the header reads "X of 5" / "X of 8" consistently with the sidebar's "X/Y" instead of always "X of 8" - SearchPage: type="search" + aria-label on the search input so screen readers announce it properly and browsers can offer search UA chrome - CoveragePage: correct the trend-chart comment — preserveAspectRatio is "none" (intentional horizontal stretch), with non-scaling strokes keeping line width constant. Previous comment incorrectly described it as "scales without distorting strokes" - APIStatusPages.scss: declare container-type on .aps-plate so the parity-row's @container (max-width: 540px) query actually matches (was a dormant no-op without a container ancestor) Change-Id: Ia547f44d818e43e73e3a9e4602aaba7a37e352a4
…ynx-website into feat/unify-platform-colors Change-Id: I4cdcc839363be28e76aa757c7afba3dca8af0d41
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
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
Redesigns the API Status dashboard (
/api/status) to match the homepage's design language. Sidebar, header bar, and all four pages (Search, Categories, Coverage, Recent) adopt the samecolor-mixbrand-driven token system used bySubsiteRow/ChoiceTabs/shared-tabs.scss.The old surface mixed shadcn admin-template chrome (checkbox rows,
bg-emerald-500/10Tailwind shorthand, identical stat-card grids) with the rest of the docs site. This PR brings it into one design system.What changed
Sidebar (
APIStatusSidebar)PAGESeyebrow, no chevron caret — wash + bold text already mark active)--platformbrand color; coverage % under each cellShow Clay surfacestoggle that opens a flush teal-tinted tray with the 4 sub-platformsflex-col gap-2 p-2defaults so it lines up with the page header bar (64pxtall, shared bottom border)Header (
APIStatusLayout)Updated DATE · X of Y platforms!top-16override on theSidebarso its fixed-position container matches rspress's 64px-tall top nav (shadcn defaults totop-14)Coverage page
preserveAspectRatio="none"), per-platform Y offset so overlapping lines render visibly separated, end-of-line platform labels in brand colorCategories / Recent / Search
CategoryTable's own dividers carry the page (was: outer border + bg tint stacking over internal zebra stripes)--platformso they tint to the parent card's colorToken system
color-mix()over--platformor--rp-c-brandTest plan
/api/statuslight mode: sidebar + all 4 pages render with brand-tinted chrometop=64, bottom=128)Redesign API Status dashboard with brand-driven color and layout system
Centralize platform color tokens into
platform-colors.tsand unify the API Status dashboard (/api/status) with brand-driven chrome, creating a cohesive visual system across sidebar, header, and page content.Platform colors and badge system
src/components/platform-navigation/platform-colors.tsas a centralized single source of truth, covering iOS, macOS, Android, Harmony, Web, Web Lynx, Windows, and clay variantsPlatformBadgeto derive user-facing text from a label-mapping helper (map "clay" to "Desktop") while preserving technical component names and keysPlatformBadge.cssto use a variable-driven system with--platform-badge-*CSS variables and add--onlyand--nomodifier variants with strikethrough and dimming effectsSidebar and navigation redesign
APIStatusSidebarto render page navigation as full-width brand-washed rows and platform selection as a square icon rail with per-platform--platformcolor variables[data-state='collapsed']responsive mode converting full-width rows and platform cells into compact 32×32 icon chipsAPIStatusSidebar.scsswith complete visual styling for sidebar structure, platform rail, clay toggle, and collapse animationsPageTypeandAPIStatusSidebaras named exports for reusabilityHeader and layout updates
APIStatusLayoutto use per-page localized metadata with title and subtitle, derived fromuseLang()for English/Chinese supportAPIStatusLayout.scssfor flex-based header structure with responsive subtitle/meta hiding and scrollable main content areaPage-specific redesigns
CoveragePagecard-grid layout with horizontal parity list showing one full-width row per platform, trend chart with larger coordinate system and per-platform Y offsets, and platform labels rendered directly on chartCategoriesPagecard structure and introduce pill-style highlight toggles driven by CSS variable--tintand shared class selectorsRecentPageto render per-platform sections as stat cards with header icon/label and total count, using newaps-stat-cardclass structureSearchPageinput UI to use plain controlled<input>with newaps-search-bar-*classNames and restructured results meta showing count ratioComponent and style improvements
APIStatusPages.scssdefining shared chrome for stat cards, parity lists, plates, category sections, pill toggles, version chips, search bar, and empty statesPlatformIcon(PlatformSvg) and icon factory to accept optionalstyleprop for CSS variable injectionPlatformIconWrapperto use typedPlatformKeyinstead of genericstringand importPLATFORM_TINTfrom centralized platform-colors moduleinline-blockalongside dimensions