feat(docs): redesign docs site with dark-first brand theme#1178
feat(docs): redesign docs site with dark-first brand theme#1178
Conversation
Overhaul the docs landing page, header, footer, hero component, and global CSS to introduce the new Cua Design System (CDS) visual language — dark-first palette, glassy surfaces, gradient CTAs, and refined typography.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThese changes implement a comprehensive design system overhaul for the documentation site, introducing a dark-mode-first CSS variable system, redesigning the landing page with gradient-driven hero and updated navigation components, refactoring the header with improved dropdown interactions, expanding the footer layout, and establishing consistent border-radius standards across UI elements. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip You can validate your CodeRabbit configuration file in your editor.If your editor has YAML language server, you can enable auto-completion and validation by adding |
![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 (1)
docs/src/components/custom-header.tsx (1)
216-278:⚠️ Potential issue | 🟡 MinorAdd keyboard accessibility for dropdown menu.
The dropdown opens on click and closes when clicking outside, but lacks keyboard support:
- No
Escapekey handler to close the dropdown- No focus trapping within the dropdown when open
- No
aria-expandedattribute on the trigger buttonConsider adding these accessibility enhancements:
♿ Proposed accessibility improvements
<button onClick={() => setIsOpen(!isOpen)} + aria-expanded={isOpen} + aria-haspopup="true" className="ml-0.5 flex h-7 w-7 items-center justify-center rounded-lg border border-transparent text-[var(--ink-muted)] transition-colors hover:border-white/10 hover:bg-white/5 hover:text-white" aria-label="Switch docs site" >And add an effect to handle Escape key:
useEffect(() => { function handleKeyDown(event: KeyboardEvent) { if (event.key === 'Escape' && isOpen) { setIsOpen(false); } } document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, [isOpen]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/components/custom-header.tsx` around lines 216 - 278, The dropdown lacks keyboard accessibility: add an Escape key handler, focus trapping while open, and aria-expanded on the toggle. Implement a useEffect that adds a keydown listener which calls setIsOpen(false) when event.key === 'Escape' and isOpen is true (attach/detach on mount/unmount and when isOpen changes), add refs for the trigger button and dropdown container and on open move focus to the first focusable element in the dropdown, then intercept Tab/Shift+Tab keydowns inside the dropdown to cycle focus (wrap to first/last) to create a simple focus trap, and set aria-expanded={isOpen} on the toggle button that opens the menu (the same element that toggles isOpen). Ensure all listeners and refs are cleaned up and use the existing isOpen and setIsOpen symbols to close the menu.
🧹 Nitpick comments (4)
docs/src/providers/copilotkit-provider.tsx (1)
561-577: Fragile CSS selectors for CopilotKit components.Several selectors rely on class name substring matching (e.g.,
[class*="copilotKitPopup"],[class*="ScrollToBottom"]) which may break if CopilotKit updates its internal class naming conventions. Consider adding a comment noting this coupling to aid future maintainers.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/providers/copilotkit-provider.tsx` around lines 561 - 577, The CSS uses fragile substring class selectors like [class*="copilotKitPopup"], [class*="ScrollToBottom"], and [class*="scrollToBottom"] which couple our styles to CopilotKit internal class names; update the file to add a clear comment above the block referencing .copilotKitPopup, .copilotKitButton, and the scroll selectors explaining this coupling and the risk of breakage if CopilotKit renames classes, and include guidance to prefer using a stable hook or wrapper class (or to re-evaluate after any CopilotKit upgrade) so future maintainers know why these selectors exist and what to change if they break.docs/src/app/layout.tsx (1)
22-27: Consider reducing font weight variants to optimize bundle size.Loading 6 weights (
100,300,400,500,600,700) plus italic styles significantly increases the font payload. If the design only uses a subset (e.g.,400,500,600,700appear most common in the PR), consider trimming unused weights.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/app/layout.tsx` around lines 22 - 27, The Urbanist font import is currently loading many weight and style variants which bloats payload; update the Urbanist(...) call (the urbanist constant created via Urbanist) to only include the weights and styles actually used (e.g., reduce weight list to ['400','500','600','700'] and remove unused styles like 'italic' if not used) so the font bundle is trimmed; adjust the variable '--font-urbanist' usage remains unchanged and verify any components relying on lighter weights still render correctly after removing unused variants.docs/src/app/global.css (1)
104-113: High z-index on noise overlay may cause accessibility issues.The fixed overlay with
z-index: 9999could potentially cover interactive elements like modals, tooltips, or the CopilotKit popup (which usesz-index: 9999in copilotkit-provider.tsx). Consider lowering to a more reasonable value likez-index: 1sincepointer-events: noneensures it won't block interactions, but stacking context issues could still arise.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/app/global.css` around lines 104 - 113, The overlay created by the .dark body::after selector uses z-index: 9999 which can conflict with interactive components (e.g., CopilotKit popup that also uses z-index: 9999 in copilotkit-provider.tsx); lower the overlay z-index to a much smaller value (for example z-index: 1 or 0) while keeping pointer-events: none and position: fixed so it visually sits behind UI elements but still shows the noise texture without affecting stacking of modals/tooltips/popups.docs/src/app/(landing)/page.tsx (1)
110-113: Hardcoded GitHub star count will become stale.The star count
13.1kis hardcoded. Consider fetching this dynamically via GitHub API or removing it to avoid displaying outdated information.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/app/`(landing)/page.tsx around lines 110 - 113, The span containing the hardcoded "13.1k" (the JSX element immediately after the star SVG in page.tsx) will become stale; replace it with a dynamic value by fetching the repository's stargazer count (e.g., call GitHub REST API GET /repos/{owner}/{repo} and use the stargazers_count field) and render that value (or a formatted shorthand) instead, or remove the span entirely if you don't want live data; implement the fetch in a server-side data call or a client useEffect/state depending on whether this page is an SSR/SSG or client component and update the JSX to display the fetched value in place of the hardcoded text.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/src/app/`(landing)/page.tsx:
- Around line 152-153: The div with className containing
"group-hover:opacity-150" uses an invalid opacity value; replace the invalid
utility with a valid Tailwind opacity or a different hover effect: e.g., change
"group-hover:opacity-150" to "group-hover:opacity-100" (maps to opacity:1) or
remove the opacity change and implement "group-hover:brightness-125",
"group-hover:scale-105", or adjust the radial gradient colors in a hover variant
to increase glow intensity; target the div whose className includes "absolute
-inset-6 bg-[radial-gradient(...)] blur-2xl transition-opacity duration-300
group-hover:opacity-150" when making the fix.
---
Outside diff comments:
In `@docs/src/components/custom-header.tsx`:
- Around line 216-278: The dropdown lacks keyboard accessibility: add an Escape
key handler, focus trapping while open, and aria-expanded on the toggle.
Implement a useEffect that adds a keydown listener which calls setIsOpen(false)
when event.key === 'Escape' and isOpen is true (attach/detach on mount/unmount
and when isOpen changes), add refs for the trigger button and dropdown container
and on open move focus to the first focusable element in the dropdown, then
intercept Tab/Shift+Tab keydowns inside the dropdown to cycle focus (wrap to
first/last) to create a simple focus trap, and set aria-expanded={isOpen} on the
toggle button that opens the menu (the same element that toggles isOpen). Ensure
all listeners and refs are cleaned up and use the existing isOpen and setIsOpen
symbols to close the menu.
---
Nitpick comments:
In `@docs/src/app/`(landing)/page.tsx:
- Around line 110-113: The span containing the hardcoded "13.1k" (the JSX
element immediately after the star SVG in page.tsx) will become stale; replace
it with a dynamic value by fetching the repository's stargazer count (e.g., call
GitHub REST API GET /repos/{owner}/{repo} and use the stargazers_count field)
and render that value (or a formatted shorthand) instead, or remove the span
entirely if you don't want live data; implement the fetch in a server-side data
call or a client useEffect/state depending on whether this page is an SSR/SSG or
client component and update the JSX to display the fetched value in place of the
hardcoded text.
In `@docs/src/app/global.css`:
- Around line 104-113: The overlay created by the .dark body::after selector
uses z-index: 9999 which can conflict with interactive components (e.g.,
CopilotKit popup that also uses z-index: 9999 in copilotkit-provider.tsx); lower
the overlay z-index to a much smaller value (for example z-index: 1 or 0) while
keeping pointer-events: none and position: fixed so it visually sits behind UI
elements but still shows the noise texture without affecting stacking of
modals/tooltips/popups.
In `@docs/src/app/layout.tsx`:
- Around line 22-27: The Urbanist font import is currently loading many weight
and style variants which bloats payload; update the Urbanist(...) call (the
urbanist constant created via Urbanist) to only include the weights and styles
actually used (e.g., reduce weight list to ['400','500','600','700'] and remove
unused styles like 'italic' if not used) so the font bundle is trimmed; adjust
the variable '--font-urbanist' usage remains unchanged and verify any components
relying on lighter weights still render correctly after removing unused
variants.
In `@docs/src/providers/copilotkit-provider.tsx`:
- Around line 561-577: The CSS uses fragile substring class selectors like
[class*="copilotKitPopup"], [class*="ScrollToBottom"], and
[class*="scrollToBottom"] which couple our styles to CopilotKit internal class
names; update the file to add a clear comment above the block referencing
.copilotKitPopup, .copilotKitButton, and the scroll selectors explaining this
coupling and the risk of breakage if CopilotKit renames classes, and include
guidance to prefer using a stable hook or wrapper class (or to re-evaluate after
any CopilotKit upgrade) so future maintainers know why these selectors exist and
what to change if they break.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f8b678b5-f00c-4ed1-a2c3-5f2979c36d52
⛔ Files ignored due to path filters (11)
docs/public/apple-touch-icon.pngis excluded by!**/*.pngdocs/public/favicon.icois excluded by!**/*.icodocs/public/favicon.pngis excluded by!**/*.pngdocs/public/img/bg-dark.jpgis excluded by!**/*.jpgdocs/public/img/bg-light.jpgis excluded by!**/*.jpgdocs/public/img/cua-logo-accent.svgis excluded by!**/*.svgdocs/public/img/cua_logo_white_new.svgis excluded by!**/*.svgdocs/public/img/hero.pngis excluded by!**/*.pngdocs/public/img/logos/linkedin-white.svgis excluded by!**/*.svgdocs/public/img/logos/x-white.svgis excluded by!**/*.svgdocs/src/app/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (7)
docs/src/app/(landing)/page.tsxdocs/src/app/global.cssdocs/src/app/layout.tsxdocs/src/components/custom-header.tsxdocs/src/components/footer.tsxdocs/src/components/hero.tsxdocs/src/providers/copilotkit-provider.tsx
| > | ||
| <div className="absolute -inset-6 bg-[radial-gradient(circle,rgba(97,188,255,0.18),rgba(88,200,190,0.06),transparent_72%)] blur-2xl transition-opacity duration-300 group-hover:opacity-150" /> |
There was a problem hiding this comment.
Invalid opacity value in hover state.
hover:opacity-150 is invalid CSS—opacity values range from 0 to 1 (or 0% to 100%). This will be ignored by the browser. If you want to increase brightness/glow on hover, consider using a different approach.
🐛 Proposed fix
-<div className="absolute -inset-6 bg-[radial-gradient(circle,rgba(97,188,255,0.18),rgba(88,200,190,0.06),transparent_72%)] blur-2xl transition-opacity duration-300 group-hover:opacity-150" />
+<div className="absolute -inset-6 bg-[radial-gradient(circle,rgba(97,188,255,0.18),rgba(88,200,190,0.06),transparent_72%)] blur-2xl opacity-70 transition-opacity duration-300 group-hover:opacity-100" />Or to increase the glow intensity, adjust the gradient colors directly in a hover state variant.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| > | |
| <div className="absolute -inset-6 bg-[radial-gradient(circle,rgba(97,188,255,0.18),rgba(88,200,190,0.06),transparent_72%)] blur-2xl transition-opacity duration-300 group-hover:opacity-150" /> | |
| > | |
| <div className="absolute -inset-6 bg-[radial-gradient(circle,rgba(97,188,255,0.18),rgba(88,200,190,0.06),transparent_72%)] blur-2xl opacity-70 transition-opacity duration-300 group-hover:opacity-100" /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/src/app/`(landing)/page.tsx around lines 152 - 153, The div with
className containing "group-hover:opacity-150" uses an invalid opacity value;
replace the invalid utility with a valid Tailwind opacity or a different hover
effect: e.g., change "group-hover:opacity-150" to "group-hover:opacity-100"
(maps to opacity:1) or remove the opacity change and implement
"group-hover:brightness-125", "group-hover:scale-105", or adjust the radial
gradient colors in a hover variant to increase glow intensity; target the div
whose className includes "absolute -inset-6 bg-[radial-gradient(...)] blur-2xl
transition-opacity duration-300 group-hover:opacity-150" when making the fix.
1 participant
Summary
--bg-base,--ink-strong,--brand-500, etc.)RootProvidernow defaults to dark theme;ThemeToggleremoved from headerTest plan
Summary by CodeRabbit
New Features
Style