Feat: Implement Landing Page Design System (#1146)#1153
Feat: Implement Landing Page Design System (#1146)#1153pranitaurlam wants to merge 2 commits intoAOSSIE-Org:mainfrom
Conversation
- Add accessible colors, improved typography, and standardized components in index.css - Refactor landing page to use new design tokens and fix component inconsistencies - Improve accessibility with proper contrast and semantic HTML - Fix unused imports in App.tsx and theme-provider.tsx Resolves AOSSIE-Org#1146
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThese changes implement design system tokens and refine the landing page visual design, adding CSS custom properties for typography, spacing, and brand colors while updating header gradients, button styles, and text styling. Code cleanup removes unused theme-related imports from React components. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 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 |
|
Hi @tushar1977 @rahulharpal1603! I've implemented the landing page design system improvements for issue #1146. Note on Design: Key Improvements:
Ready for review! Let me know if you have any feedback on the visual direction. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
landing-page/src/Pages/pictopy-landing.tsx (1)
191-195:⚠️ Potential issue | 🟠 MajorAnimation class name doesn't follow Tailwind conventions and lacks source definition.
The notification uses
animate-slideInRight(camelCase), which violates Tailwind's standard naming convention (should be kebab-case likeanimate-slide-in-right). More importantly, this animation is not defined intailwind.config.js,index.css, or anywhere in the source code—it only appears in the built output, making this a fragile build-time dependency.Define the animation properly in
tailwind.config.jsundertheme.extend.keyframesandtheme.extend.animation, or add it toindex.csswith standard naming:`@keyframes` slideInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } }Then reference it with the correct Tailwind class:
animate-slide-in-right(or update config to support the camelCase variant).
🤖 Fix all issues with AI agents
In `@landing-page/src/index.css`:
- Line 42: The CSS custom property --card in landing-page/src/index.css has an
invalid HSL lightness value "200%"; update the declaration for --card to use a
valid lightness (e.g., change the third component from 200% to 100% or another
intended value) so the HSL is within 0–100%, and verify any uses of the --card
variable still produce the expected color.
In `@landing-page/src/Pages/pictopy-landing.tsx`:
- Around line 164-168: The Button components (the Windows and Linux buttons)
declare variant="outline" but their className sets a green gradient and white
text which overrides the outline styles; remove the misleading prop or make the
visual match the outline variant—either delete variant="outline" from the Button
elements (e.g., the Button instance with className="bg-gradient-to-r
from-green-500...") or change the className to apply transparent background,
border styles and text color consistent with an outline button so that the
variant is actually represented.
🧹 Nitpick comments (6)
landing-page/src/context/theme-provider.tsx (1)
26-28: Pre-existing:storedThemeis hardcoded to an empty string, so theme is never persisted.Not introduced by this PR, but worth noting:
getInitialTheme()always falls through to the system-preference branch becausestoredThemeis''. If theme persistence is intended (e.g., vialocalStorage), this should be addressed in a follow-up.landing-page/src/index.css (2)
7-37: Design tokens defined but not consumed in this PR.The new CSS custom properties (
--font-display,--text-*,--space-*,--color-brand-*) are a good foundation, but the component changes inpictopy-landing.tsxuse Tailwind utility classes directly (e.g.,from-green-500,text-4xl) rather than referencing these tokens. This creates two parallel systems for the same values.Consider either:
- Extending
tailwind.configto map these tokens (e.g.,theme.extend.colors.brand.primary) so Tailwind utilities consume the tokens, or- Consuming the tokens directly in component styles via
var(--color-brand-primary).Without this wiring, the tokens risk going stale as the source of truth diverges.
33-37: Brand color tokens lack dark mode overrides.The brand colors are defined only in
:root. The.darkblock (Line 68) doesn't override them. If the brand palette should shift in dark mode (e.g., lighter green for better contrast on dark backgrounds), add corresponding overrides in.dark.landing-page/src/Pages/pictopy-landing.tsx (3)
154-187: Extract duplicated button className into a shared constant.All three buttons share an identical ~200-character className string. Any future style change requires updating three places in lockstep.
♻️ Proposed refactor
+ const downloadButtonClass = + "bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 dark:from-green-500 dark:to-green-600 dark:hover:from-green-600 dark:hover:to-green-700 h-12 px-8 transition-all duration-300 border-2 border-transparent hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"; + <Button - className="bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 dark:from-green-500 dark:to-green-600 dark:hover:from-green-600 dark:hover:to-green-700 h-12 px-8 transition-all duration-300 - border-2 border-transparent hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0" + className={downloadButtonClass} size="lg" ... >Apply the same to all three
<Button>elements.
134-134: Heading gradient text looks good, but verify accessibility of gradient text.Gradient text via
bg-clip-text text-transparentis not selectable/readable by all screen readers in the same way as solid text. The visual is appealing, but consider adding anaria-labelon the heading or ensuring the text remains accessible.
79-80:window.location.hrefnavigates away from the page for downloads.Using
window.location.href = downloadUrlwill navigate the current tab to the download URL. For a better UX that keeps the user on the page, consider using a temporary anchor with thedownloadattribute:♻️ Proposed fix
- // Trigger download - window.location.href = downloadUrl; + // Trigger download without navigating away + const link = document.createElement('a'); + link.href = downloadUrl; + link.setAttribute('download', ''); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link);
- Fix invalid HSL lightness value in index.css (200% -> 100%) - Remove conflicting variant='outline' prop from gradient buttons - Ensure consistent button styling across platforms
1 participant
Overview
Resolves #1146
This PR implements a comprehensive design system for the PictoPy landing page, establishing a cohesive visual language with improved typography, accessible colors, and standardized components.
Changes Made
Design System
Interwith semantic hierarchyComponent Refactor
Accessibility
Fixes
Verification #1146
npm run buildpasses successfullyScreenshots
(The reviewer can verify the visual improvements locally)
Summary by CodeRabbit
Release Notes
Style
Chores