Uh oh!
There was an error while loading. Please reload this page.
feat(swingset): refine sidebar styling and add Mosaic branding - #8812
Conversation
- Smaller type scale, compact nav items, chevron beside the group label - Section header hover/active uses the Clerk brand color (text only, no bg) - Overview link shows the component JSX tag in monospace, floated right - Header gains the Mosaic logo and 'Mosaic - Swingset' wordmark - Add reusable --brand token (light #6c47ff / dark #9f87ff) - Pointer cursor on the ui/switch control
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
🦋 Changeset detectedLatest commit: df5aad4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughUpdates Swingset UI: introduces brand CSS variables for light/dark themes, redesigns the sidebar header with an inline SVG and "Mosaic - Swingset" label, refactors sidebar label classes using ChangesSidebar UI and Branding Updates
Estimated Code Review Effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested Labels
Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Comment |
@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/expo@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/hono@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/react@clerk/react-router@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/ui@clerk/upgrade@clerk/vuecommit: |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@packages/swingset/src/components/app-sidebar.tsx`:
- Around line 32-62: The SVG's primary rect uses a hardcoded fill '`#6C47FF`' so
the logo won't adapt to dark mode; update the rect in the SidebarHeader's SVG
(the <svg> / <rect> elements) to use an adaptive color such as
fill='currentColor' or fill='var(--brand)' and then control that color via the
surrounding CSS/class (e.g., set a light-mode/dark-mode text or CSS variable on
the SidebarHeader or the svg element) so the logo switches to the dark variant
(`#9f87ff`) when dark theme styles are applied.
🪄 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: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 5d72ca75-9470-4666-8f4d-98eccca72c5a
📒 Files selected for processing (4)
.changeset/smaller-sidebar-chevrons.mdpackages/swingset/src/app/globals.csspackages/swingset/src/components/app-sidebar.tsxpackages/swingset/src/components/ui/switch.tsx
Uh oh!
There was an error while loading. Please reload this page.
TLDR
Just some styling updates while I waited for some other PRs to progress
Description
Polishes the private
@clerk/swingsetdev tool's left sidebar — smaller type, compact nav items, the chevron beside each group label, and a text-only muted→Clerk-brand hover/active on section headers (no background) — and adds the Mosaic logo plus a "Mosaic - Swingset" wordmark to the header. The Overview link now shows the component's JSX tag (e.g.<Button />) in right-aligned monospace, a reusable--brandtoken is added (#6c47fflight /#9f87ffdark), and theui/switchcontrol gets a pointer cursor. Everything is scoped to the unpublished Swingset package, so there's no consumer-facing impact (hence the empty changeset). To test: runpnpm run dev:swingsetand view the sidebar in light and dark mode.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Style