Conversation
…d updated styling.
…son visual and add UI label and switch components.
… new features, and refine existing descriptions.
…, new icons, and a new brand color.
… bar for smooth scrolling.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR introduces a comprehensive landing page redesign featuring new Radix UI component wrappers (Label, Switch), extensive framer-motion animation integration across all major sections, four new visual components (HeroVisual, ComparisonVisual, ProblemVisual, SolutionVisual), restructured section layouts with animated Bento-style grids, navigation refactored to in-page smooth-scroll anchors, a grayscale color scheme overhaul, and UI framework configuration via components.json. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (9)
web/src/components/landing/ProblemVisual.tsx (1)
45-45: Biome lint warnings are false positives for intentional code comment text.The static analysis flags these lines because they contain
//patterns. However, these are intentionally rendered text showing "polluted" code comments as part of the visual demonstration—not actual JSX comments. You can safely ignore or suppress these warnings with inline comments if desired.{/* biome-ignore lint/suspicious/noCommentText: Intentional code comment display */} <span className="...">// TODO: Refactor this later...</span>Also applies to: 63-63, 73-73
web/tailwind.config.js (1)
54-58: Brand colors use hardcoded hex values while other tokens use CSS variables.This is a minor inconsistency —
brandcolors are hardcoded hex values, while semantic colors (primary, secondary, etc.) reference CSS variables. Consider using CSS variables for brand colors too if you want to support theme switching.brand: { - orange: '#FF8A3D', - navy: '#0B1220', - warm: '#F4F1E9', + orange: 'hsl(var(--brand-orange))', + navy: 'hsl(var(--brand-navy))', + warm: 'hsl(var(--brand-warm))', },web/src/components/ui/label.tsx (2)
1-1: The"use client"directive is unnecessary in a Vite project.This directive is specific to Next.js App Router. In a Vite-based React project (as indicated by
package.json), it has no effect and can be safely removed.-"use client" - import * as React from "react"
9-11: CVA setup is extensible but currently has no variants.The
labelVariantsusescvawith only base styles and no variants defined. This is fine if you plan to add variants later, but if not, you could simplify to just use the className string directly.web/src/components/Navigation.tsx (1)
22-57: Extract duplicated smooth-scroll logic into a reusable handler.The onClick logic is repeated three times with only the element ID changing. Consider extracting this into a helper function.
export function Navigation() { const location = useLocation() + + const handleSectionClick = (e: React.MouseEvent, sectionId: string) => { + if (location.pathname === '/') { + e.preventDefault(); + document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' }); + } + }; return ( // ... <Link to="/#problem" - onClick={(e) => { - if (location.pathname === '/') { - e.preventDefault(); - document.getElementById('problem')?.scrollIntoView({ behavior: 'smooth' }); - } - }} + onClick={(e) => handleSectionClick(e, 'problem')} className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary" >web/src/components/landing/HeroVisual.tsx (1)
44-61: Consider accessibility for the animated note.The animated note appears after a 1.5s delay. Screen reader users may not be aware of this delayed content. Consider adding
aria-live="polite"to announce the note when it appears, or ensure the note content is available in the DOM from the start (just visually hidden initially).web/src/components/landing/FeaturesSection.tsx (1)
86-100: Considerwill-changeor reduced motion for infinite animations.These three infinite animations run continuously and may consume GPU resources on low-end devices. Consider:
- Adding
will-change: transformto optimize compositing- Respecting
prefers-reduced-motionmedia query to pause animations for users who prefer reduced motionYou could wrap these in a reduced-motion check:
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Then conditionally set animate prop to undefined when reduced motion is preferredweb/src/components/landing/ComparisonVisual.tsx (2)
80-115: Consider extracting the clutter comment block into a reusable component.The two AnimatePresence blocks (lines 81-94 and 102-115) are nearly identical, violating the DRY principle. Extract this pattern into a reusable component.
Apply this refactor:
+function ClutterComment({ isClean, comment }: { isClean: boolean; comment: string }) { + return ( + <AnimatePresence> + {!isClean && ( + <motion.div + initial={{ opacity: 0, height: 0 }} + animate={{ opacity: 1, height: "auto" }} + exit={{ opacity: 0, height: 0 }} + className="overflow-hidden" + > + <div className="pl-4 py-1 text-slate-500 italic flex items-center bg-red-500/5 border-l-2 border-red-500/30 my-1"> + {comment} + </div> + </motion.div> + )} + </AnimatePresence> + ); +} // In the main component, replace both blocks: -<AnimatePresence> - {!isClean && ( - <motion.div - initial={{ opacity: 0, height: 0 }} - animate={{ opacity: 1, height: "auto" }} - exit={{ opacity: 0, height: 0 }} - className="overflow-hidden" - > - <div className="pl-4 py-1 text-slate-500 italic flex items-center bg-red-500/5 border-l-2 border-red-500/30 my-1"> - <span>// TODO: This timeout logic is flaky on weekends. Needs fix.</span> - </div> - </motion.div> - )} -</AnimatePresence> +<ClutterComment isClean={isClean} comment="// TODO: This timeout logic is flaky on weekends. Needs fix." />
194-214: Consider a more maintainable syntax highlighting approach.The current implementation hardcodes keywords and identifiers (e.g., "gateway", "timeout" at line 207), making it brittle and difficult to extend. For a demo component this works, but consider using a lightweight syntax highlighting library like
prism-react-rendererif this pattern expands.Alternative approach using a library:
import Highlight, { defaultProps } from "prism-react-renderer"; function CodeLine({ line, indent = 0 }: { line: string; indent?: number }) { return ( <div style={{ paddingLeft: `${indent * 1.5}rem` }}> <Highlight {...defaultProps} code={line} language="typescript"> {({ tokens, getLineProps, getTokenProps }) => ( <div {...getLineProps({ line: tokens[0] })}> {tokens[0].map((token, key) => ( <span {...getTokenProps({ token, key })} /> ))} </div> )} </Highlight> </div> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (18)
web/components.json(1 hunks)web/package.json(2 hunks)web/src/components/Navigation.tsx(2 hunks)web/src/components/landing/CTASection.tsx(4 hunks)web/src/components/landing/ComparisonVisual.tsx(1 hunks)web/src/components/landing/FeaturesSection.tsx(1 hunks)web/src/components/landing/HeroSection.tsx(1 hunks)web/src/components/landing/HeroVisual.tsx(1 hunks)web/src/components/landing/ProblemSolutionSection.tsx(1 hunks)web/src/components/landing/ProblemVisual.tsx(1 hunks)web/src/components/landing/QuickStartSection.tsx(2 hunks)web/src/components/landing/SolutionVisual.tsx(1 hunks)web/src/components/landing/StatsSection.tsx(2 hunks)web/src/components/ui/label.tsx(1 hunks)web/src/components/ui/switch.tsx(1 hunks)web/src/index.css(3 hunks)web/src/lib/utils.ts(1 hunks)web/tailwind.config.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (9)
web/src/components/landing/FeaturesSection.tsx (1)
web/src/components/landing/index.ts (1)
FeaturesSection(3-3)
web/src/components/ui/label.tsx (1)
web/src/lib/utils.ts (1)
cn(4-6)
web/src/components/landing/ComparisonVisual.tsx (1)
web/src/lib/utils.ts (1)
cn(4-6)
web/src/components/landing/StatsSection.tsx (1)
web/src/components/ui/card.tsx (2)
Card(75-75)CardContent(75-75)
web/src/components/landing/QuickStartSection.tsx (1)
web/src/components/landing/index.ts (1)
QuickStartSection(4-4)
web/src/components/landing/ProblemSolutionSection.tsx (3)
web/src/components/landing/index.ts (1)
ProblemSolutionSection(2-2)web/src/components/landing/ComparisonVisual.tsx (1)
ComparisonVisual(7-192)web/src/components/ui/card.tsx (4)
Card(75-75)CardHeader(75-75)CardTitle(75-75)CardContent(75-75)
web/src/components/landing/HeroSection.tsx (1)
web/src/components/landing/HeroVisual.tsx (1)
HeroVisual(4-74)
web/src/components/landing/CTASection.tsx (2)
web/src/components/landing/index.ts (1)
CTASection(6-6)web/src/components/ui/button.tsx (1)
Button(56-56)
web/src/components/ui/switch.tsx (1)
web/src/lib/utils.ts (1)
cn(4-6)
🪛 Biome (2.1.2)
web/src/components/landing/HeroVisual.tsx
[error] 68-68: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
web/src/components/landing/ProblemVisual.tsx
[error] 45-45: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 63-63: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 73-73: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
web/src/components/landing/ComparisonVisual.tsx
[error] 90-90: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
[error] 111-111: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🔇 Additional comments (29)
web/src/components/landing/ProblemVisual.tsx (1)
4-97: LGTM!The component is well-structured with appropriate Framer Motion animations. Good use of
viewport={{ once: true }}to prevent re-triggering animations, and the staggered delays create a nice progressive reveal effect. Dark mode support is properly implemented.web/src/components/landing/QuickStartSection.tsx (2)
150-157: Using array index as key is acceptable for static data.The
key={index}usage is fine here sincestepsis a static array that never changes during the component's lifecycle. No reordering or dynamic additions occur, so index-based keys won't cause reconciliation issues.
119-122: Verify thatbg-grid-patternclass is defined.The section uses
bg-grid-patternwhich should be defined in your CSS. Based on the changes inindex.css, this class is being added as part of this PR.web/src/index.css (2)
162-173: Grid pattern implementation looks good.The
bg-grid-patternclass is well-implemented with:
- Appropriate 40px grid size
- Subtle orange-tinted grid lines using brand color
- Fade-out mask for smooth edge transition
- Reduced opacity in dark mode for better visual balance
- Vendor prefix (
-webkit-mask-image) for Safari support
236-251: Good accessibility handling for reduced motion preferences.The
prefers-reduced-motionmedia query properly disables animations and transitions for users who prefer reduced motion. This is an important accessibility consideration.web/src/lib/utils.ts (1)
1-6: LGTM!Import reordering and trailing newline addition. No functional changes.
web/components.json (1)
14-20: Path aliases are correctly configured.The
@/*path alias inweb/tsconfig.json("@/*": ["./src/*"]) properly supports all aliases defined in components.json. No action needed.web/tailwind.config.js (1)
1-96: Configuration follows the shadcn/ui pattern correctly.The color tokens, border radius, and accordion animations are properly structured for Radix UI integration.
web/src/components/ui/switch.tsx (1)
6-27: Well-structured Switch component following shadcn/ui conventions.The component properly forwards refs, merges classNames, includes focus-visible states for accessibility, and sets displayName for DevTools. The thumb translation math is correct for the switch dimensions.
web/src/components/ui/label.tsx (1)
13-26: Label component implementation is correct.Properly forwards refs, merges classNames, and sets displayName. The peer-disabled styling enables nice form integration patterns.
web/src/components/Navigation.tsx (2)
22-57: Hash navigation from other pages won't trigger smooth scroll.When a user navigates from
/docsto/#features, the page will navigate but the smooth scroll won't apply — the browser will jump directly to the hash anchor. If smooth scrolling is important in this scenario, consider using auseEffectto detect hash changes and scroll smoothly after navigation.
58-71: Documentation and Changelog links are correctly preserved.Standard routing for these pages with proper active state highlighting.
web/src/components/landing/HeroVisual.tsx (1)
1-3: LGTM!Imports are clean and minimal - only pulling in what's needed from framer-motion and lucide-react.
web/src/components/landing/SolutionVisual.tsx (2)
1-2: LGTM!Imports are appropriate for the component's needs.
74-98: LGTM!The external note window panel is well-structured with good visual hierarchy. The skewed rotation effect creates a nice "sticky note" aesthetic. The animation timing with the 0.2s delay creates a pleasant staggered entrance.
web/src/components/landing/ProblemSolutionSection.tsx (3)
1-5: LGTM!Clean imports with clear separation of UI components, icons, animation library, and local component.
8-24: LGTM!The benefits data structure is clean and well-organized. Each benefit has an icon component reference, title, and description - good pattern for rendering dynamic content.
66-91: LGTM!The benefits grid implementation is solid:
- Responsive 3-column layout
- Proper use of
indexas key (acceptable for static data)- Well-orchestrated staggered animations with progressive delays
- Good hover interactions on cards
web/src/components/landing/FeaturesSection.tsx (2)
1-12: LGTM!Imports are well-organized with icons grouped together and motion imported separately.
122-148: LGTM!The Bento grid implementation is clean:
- Responsive breakpoints (1 → 2 → 3 columns)
- Unique keys with
feat-${index}prefix- Smooth hover transitions with appropriate duration
- Good use of group-hover for coordinated child animations
web/src/components/landing/CTASection.tsx (3)
1-3: LGTM!Clean imports with proper module paths.
38-72: LGTM!The button group is well-implemented:
- External links correctly use
target="_blank"withrel="noopener noreferrer"for security- Primary CTA has distinct styling with brand colors
- Secondary buttons have consistent outline styling
- Accessible with descriptive link text and icons
7-13: LGTM!Good use of decorative background layers with proper
pointer-events-noneto prevent interaction issues. The gradient blob positioning with transforms is clean.web/src/components/landing/ComparisonVisual.tsx (1)
7-8: LGTM!The state management approach is clean and appropriate for toggling between the two visual modes.
web/src/components/landing/StatsSection.tsx (2)
11-11: LGTM!The migration to framer-motion is clean and well-structured. Using
viewport={{ once: true }}prevents animation re-triggers on scroll, which is good for performance. The new background styling aligns well with the overall landing page redesign.Also applies to: 60-82
84-143: LGTM!The staggered animation pattern (
index * 0.1delays) creates an appealing cascading effect. The animation properties are consistent across similar elements, and the use ofviewport={{ once: true }}ensures good performance by preventing re-animations.web/src/components/landing/HeroSection.tsx (3)
5-6: LGTM!The component structure is well-organized with proper layering and z-index management. The responsive grid layout and decorative background elements create a visually appealing hero section.
Also applies to: 10-19
22-107: LGTM!The staggered animation sequence (0s → 0.1s → 0.2s → 0.3s → 0.4s) creates a smooth, professional entrance effect. The consistent use of
initial,animate, andtransitionprops across all motion elements demonstrates good practice.
110-113: LGTM!The HeroVisual integration is clean and properly centered. The fixed height on large screens (
lg:h-[600px]) ensures consistent visual balance with the content column.
| "dependencies": { | ||
| "@radix-ui/react-label": "^2.1.8", | ||
| "@radix-ui/react-slot": "^1.0.2", | ||
| "@radix-ui/react-switch": "^1.2.6", | ||
| "class-variance-authority": "^0.7.1", | ||
| "clsx": "^2.1.1", | ||
| "framer-motion": "^12.23.24", | ||
| "lucide-react": "^0.294.0", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-router-dom": "^6.20.1", | ||
| "@radix-ui/react-slot": "^1.0.2", | ||
| "class-variance-authority": "^0.7.0", | ||
| "clsx": "^2.0.0", | ||
| "lucide-react": "^0.294.0", | ||
| "tailwind-merge": "^2.0.0" | ||
| "tailwind-merge": "^2.6.0" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
latest version framer-motion npm package 2025
💡 Result:
The latest framer-motion npm version is 12.23.24 (published Oct 10, 2025). [1][2]
Sources:
[1] Release history for framer-motion (release dates). [2] Package info summary (framer-motion — latest version 12.23.24).
🌐 Web query:
latest version lucide-react npm package 2025
💡 Result:
Latest lucide-react on npm: 0.542.0 (published Nov 21, 2025). [1]
Install: npm i lucide-react@0.542.0.
Sources:
[1] npm package page — lucide-react (shows version 0.542.0).
Update lucide-react to the latest version.
framer-motion at ^12.23.24 is current, but lucide-react at ^0.294.0 is significantly outdated. The latest version is 0.542.0 (published Nov 21, 2025). Upgrade to lucide-react@^0.542.0 to get bug fixes and new features.
The other dependencies—Radix UI components, clsx, tailwind-merge, and class-variance-authority—are appropriate for the UI redesign, and the clsx + tailwind-merge pattern via a cn utility is standard practice.
🤖 Prompt for AI Agents
In web/package.json around lines 17 to 28, the lucide-react dependency is
outdated (currently "^0.294.0"); update the version string to "^0.542.0" in the
dependencies block, then run your package manager (npm install or yarn
install/pnpm install) to update node_modules and regenerate the lockfile
(package-lock.json/yarn.lock/pnpm-lock.yaml) so the new version is pinned;
verify the app builds and run tests to ensure no breaking API changes need code
updates.
| className="overflow-hidden" | ||
| > | ||
| <div className="pl-4 py-1 text-slate-500 italic flex items-center bg-red-500/5 border-l-2 border-red-500/30 my-1"> | ||
| <span>// TODO: This timeout logic is flaky on weekends. Needs fix.</span> |
There was a problem hiding this comment.
Wrap comment-like strings in JSX braces.
Lines 90 and 111 contain comment-like strings that should be wrapped in braces per React best practices. While functional, this improves clarity and avoids potential JSX parsing ambiguity.
Apply this diff:
-<span>// TODO: This timeout logic is flaky on weekends. Needs fix.</span>
+{`// TODO: This timeout logic is flaky on weekends. Needs fix.`}-<span>// FIXME: Legacy API endpoint. Migration planned for Q4.</span>
+{`// FIXME: Legacy API endpoint. Migration planned for Q4.`}Also applies to: 111-111
🧰 Tools
🪛 Biome (2.1.2)
[error] 90-90: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🤖 Prompt for AI Agents
In web/src/components/landing/ComparisonVisual.tsx around lines 90 and 111, the
span elements contain comment-like string literals (e.g. "// TODO: ...") which
should be wrapped in JSX braces to avoid parsing ambiguity; replace those
literal children with JSX expressions like {"// TODO: This timeout logic is
flaky on weekends. Needs fix."} (or {'// TODO: ...'}) for both occurrences so
the text is rendered as a plain string expression rather than a raw JSX-like
token.
| <div className="flex"> | ||
| <span className="text-slate-600 w-8 select-none">5</span> | ||
| <span className="text-slate-500">// End of file</span> | ||
| </div> |
There was a problem hiding this comment.
Wrap the comment text in a JSX expression.
The // End of file text on line 68 is rendered as plain text inside JSX children. While this works in practice, Biome flags it because leading // can be confusing and may cause issues with certain JSX parsers. Wrap comments in braces for clarity.
<div className="flex">
<span className="text-slate-600 w-8 select-none">4</span>
</div>
<div className="flex">
<span className="text-slate-600 w-8 select-none">5</span>
- <span className="text-slate-500">// End of file</span>
+ <span className="text-slate-500">{`// End of file`}</span>
</div>📝 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="flex"> | |
| <span className="text-slate-600 w-8 select-none">5</span> | |
| <span className="text-slate-500">// End of file</span> | |
| </div> | |
| <div className="flex"> | |
| <span className="text-slate-600 w-8 select-none">5</span> | |
| <span className="text-slate-500">{`// End of file`}</span> | |
| </div> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 68-68: Wrap comments inside children within braces.
Unsafe fix: Wrap the comments with braces
(lint/suspicious/noCommentText)
🤖 Prompt for AI Agents
In web/src/components/landing/HeroVisual.tsx around lines 66 to 69, the literal
comment text "// End of file" is being rendered directly as JSX children; update
that child to be a JSX expression containing the same string (i.e., put the
comment text inside braces as a string) so the text is rendered via an
expression rather than raw leading-slash text, resolving the Biome warning.
| > | ||
| <div className="h-px w-8 bg-brand-orange/30 dashed" /> | ||
| <div className="p-1.5 rounded-full bg-brand-orange/10 border border-brand-orange/30"> | ||
| <ArrowRight className="w-4 h-4" /> | ||
| </div> | ||
| <div className="h-px w-8 bg-brand-orange/30 dashed" /> | ||
| </motion.div> |
There was a problem hiding this comment.
Invalid Tailwind class dashed - lines will appear solid.
The dashed class on lines 67 and 71 is not a valid Tailwind utility. The lines will render as solid instead of dashed. If you intended dashed lines, you need border properties instead, or use a custom class.
<motion.div
className="hidden md:flex flex-col items-center justify-center text-brand-orange"
initial={{ opacity: 0, scale: 0 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
- <div className="h-px w-8 bg-brand-orange/30 dashed" />
+ <div className="h-px w-8 border-t border-dashed border-brand-orange/30" />
<div className="p-1.5 rounded-full bg-brand-orange/10 border border-brand-orange/30">
<ArrowRight className="w-4 h-4" />
</div>
- <div className="h-px w-8 bg-brand-orange/30 dashed" />
+ <div className="h-px w-8 border-t border-dashed border-brand-orange/30" />
</motion.div>📝 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="h-px w-8 bg-brand-orange/30 dashed" /> | |
| <div className="p-1.5 rounded-full bg-brand-orange/10 border border-brand-orange/30"> | |
| <ArrowRight className="w-4 h-4" /> | |
| </div> | |
| <div className="h-px w-8 bg-brand-orange/30 dashed" /> | |
| </motion.div> | |
| > | |
| <div className="h-px w-8 border-t border-dashed border-brand-orange/30" /> | |
| <div className="p-1.5 rounded-full bg-brand-orange/10 border border-brand-orange/30"> | |
| <ArrowRight className="w-4 h-4" /> | |
| </div> | |
| <div className="h-px w-8 border-t border-dashed border-brand-orange/30" /> | |
| </motion.div> |
🤖 Prompt for AI Agents
In web/src/components/landing/SolutionVisual.tsx around lines 66–72 the divs
intended as dashed connector lines use the invalid Tailwind class "dashed", so
they render solid; remove "dashed" and replace it with proper Tailwind border
utilities (e.g. use a zero-height element with a top border and the
"border-dashed" utility plus the desired border color/width) or apply a custom
CSS class that sets border-style: dashed; ensure the width, thickness and color
match the original intent.
| --background: 0 0% 100%; | ||
| /* F4F1E9 - Pin & Note base (warm white) */ | ||
| --foreground: 215 85% 9%; | ||
| --foreground: 0 0% 3.9%; | ||
| /* 0B1220 - Navy (braces & note lines) */ | ||
| --card: 42 33% 95%; | ||
| --card: 0 0% 100%; | ||
| /* F4F1E9 - Pin & Note base (warm white) */ | ||
| --card-foreground: 215 85% 9%; | ||
| --card-foreground: 0 0% 3.9%; | ||
| /* 0B1220 - Navy */ | ||
| --popover: 42 33% 95%; | ||
| --popover: 0 0% 100%; | ||
| /* F4F1E9 */ | ||
| --popover-foreground: 215 85% 9%; | ||
| --popover-foreground: 0 0% 3.9%; | ||
| /* 0B1220 */ | ||
| --primary: 22 100% 61%; | ||
| --primary: 0 0% 9%; | ||
| /* FF8A3D - Primary Orange */ | ||
| --primary-foreground: 0 0% 100%; | ||
| --primary-foreground: 0 0% 98%; | ||
| /* FFFFFF - Pin highlight */ | ||
| --secondary: 215 85% 9%; | ||
| --secondary: 0 0% 96.1%; | ||
| /* 0B1220 - Navy */ | ||
| --secondary-foreground: 42 33% 95%; | ||
| --secondary-foreground: 0 0% 9%; | ||
| /* F4F1E9 */ | ||
| --muted: 215 43% 13%; | ||
| --muted: 0 0% 96.1%; | ||
| /* 142036 - Navy soft (inner shadow) */ | ||
| --muted-foreground: 215 43% 35%; | ||
| --muted-foreground: 0 0% 45.1%; | ||
| /* Lighter navy for better contrast on light backgrounds */ | ||
| --accent: 22 100% 70%; | ||
| --accent: 0 0% 96.1%; | ||
| /* FFA766 - Orange highlight */ | ||
| --accent-foreground: 215 85% 9%; | ||
| --accent-foreground: 0 0% 9%; | ||
| /* 0B1220 */ | ||
| --destructive: 0 84.2% 60.2%; | ||
| --destructive-foreground: 210 40% 98%; | ||
| --border: 22 100% 70%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 0 0% 89.8%; | ||
| /* FFA766 - Orange highlight */ | ||
| --input: 215 43% 13%; | ||
| --input: 0 0% 89.8%; | ||
| /* 142036 */ | ||
| --ring: 22 100% 61%; | ||
| --ring: 0 0% 3.9%; | ||
| /* FF8A3D - Primary Orange */ | ||
| --radius: 0.5rem; | ||
| --chart-1: 12 76% 61%; | ||
| --chart-2: 173 58% 39%; | ||
| --chart-3: 197 37% 24%; | ||
| --chart-4: 43 74% 66%; | ||
| --chart-5: 27 87% 67%; |
There was a problem hiding this comment.
Comments are misleading—they reference brand colors that no longer match the values.
The inline comments reference specific brand colors (e.g., FF8A3D - Primary Orange, 0B1220 - Navy) but the actual CSS variable values are now grayscale (0 0% 9%, 0 0% 98%, etc.). This creates confusion for future maintainers who may expect the described colors.
Either update the comments to reflect the new grayscale scheme or remove them.
1 participant
Description
Please provide a brief description of the changes in this PR.
Type of Change
Please check the relevant option(s):
Related Issues
Link to related issues:
Fixes #(issue number)
Closes #(issue number)
Related to #(issue number)
Changes Made
Please describe the changes in detail:
Testing
Describe the tests you ran to verify your changes:
Test Coverage:
Manual Testing Steps:
Screenshots (if applicable)
Add screenshots to demonstrate the changes (especially for UI changes):
Checklist
Please check all that apply:
Documentation
Have you updated the relevant documentation?
Breaking Changes
If this is a breaking change, please describe the impact and migration path:
Performance Impact
Describe any performance implications of these changes:
Additional Notes
Any additional information that reviewers should know:
Summary by CodeRabbit
Release Notes
New Features
UI Improvements
✏️ Tip: You can customize this high-level summary in your review settings.