Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
To view this pull requests documentation preview, visit the following URL: docs.page/invertase/docs.page~451 Documentation is deployed and generated using docs.page. |
|
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive visual and structural update to the docs.page landing page, transitioning to a new design system (v4) built on HSL design tokens and standardized UI components. Key technical improvements include the addition of Cursor rules for design token management and UI best practices, an updated Biome configuration for enhanced linting, and the introduction of several new SVG assets. Feedback primarily addresses the need for stricter adherence to the design system's color palette by replacing default black utilities with the zinc-950 token. Additionally, a logic error in the custom scrollbar drag calculation was identified, and several unused components and files were flagged for removal to maintain a clean codebase.
| zinc: { | ||
| ...defaultTheme.colors.zinc, | ||
| /* Align with `--color-design-black` (#040406), not default Tailwind zinc-950. */ | ||
| 950: "hsl(var(--color-design-black) / <alpha-value>)", |
There was a problem hiding this comment.
The design system defines a specific black shade (#040406) as --color-design-black. However, Tailwind's default black utility still points to #000000. This can lead to visual inconsistencies when bg-black is used alongside bg-background (which resolves to the design system black in dark mode). Consider overriding the black color in the Tailwind configuration to match the design token.
| const platformGridCardClassName = "min-h-0 flex-1 border-0 !shadow-none"; | ||
|
|
||
| const platformCell = cn( | ||
| "flex min-h-0 flex-col bg-black dark:bg-transparent", |
There was a problem hiding this comment.
Consider using bg-zinc-950 instead of bg-black to ensure consistency with the design system's black color (#040406), which is aliased to zinc-950 in the Tailwind configuration.
| "flex min-h-0 flex-col bg-black dark:bg-transparent", | |
| "flex min-h-0 flex-col bg-zinc-950 dark:bg-transparent", |
| layout === "stacked" && | ||
| "hover:bg-muted hover:shadow-none dark:hover:bg-muted/30 dark:hover:text-foreground", | ||
| layout === "overlay" && | ||
| "hover:!bg-black dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", |
There was a problem hiding this comment.
Consider using zinc-950 instead of black to maintain consistency with the design system's primary black shade.
| "hover:!bg-black dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", | |
| "hover:!bg-zinc-950 dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", |
| className={cn( | ||
| platformCardVariants(), | ||
| "group/platform-tile w-full text-foreground transition-colors duration-200", | ||
| "hover:!bg-black dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", |
There was a problem hiding this comment.
Consider using zinc-950 instead of black to maintain consistency with the design system's primary black shade.
| "hover:!bg-black dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", | |
| "hover:!bg-zinc-950 dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", |
| "hover:!bg-black dark:hover:!bg-marketing-platform-inner-dark dark:hover:!text-foreground", | ||
| "min-h-[21rem] sm:min-h-[22.5rem] md:min-h-[24rem] lg:min-h-[26.25rem]", | ||
| "relative overflow-hidden !shadow-none", | ||
| "!bg-black dark:!bg-marketing-platform-inner-dark", |
There was a problem hiding this comment.
Consider using zinc-950 instead of black to maintain consistency with the design system's primary black shade.
| "!bg-black dark:!bg-marketing-platform-inner-dark", | |
| "!bg-zinc-950 dark:!bg-marketing-platform-inner-dark", |
| /* Full-card inset tint from `platformCardVariants` darkens art; overlay tiles skip it. */ | ||
| "relative overflow-hidden !shadow-none", | ||
| /* Light mode: `bg-card` + `from-background` scrim read as white behind dark art — use black. */ | ||
| "!bg-black dark:!bg-marketing-platform-inner-dark", |
There was a problem hiding this comment.
Consider using zinc-950 instead of black to maintain consistency with the design system's primary black shade.
| "!bg-black dark:!bg-marketing-platform-inner-dark", | |
| "!bg-zinc-950 dark:!bg-marketing-platform-inner-dark", |
| const onMove = (ev: PointerEvent) => { | ||
| const dx = ev.clientX - startX; | ||
| scroll.scrollLeft = | ||
| trackW > 0 ? startScroll + (dx / trackW) * maxScroll : startScroll; |
There was a problem hiding this comment.
The scrollbar drag logic is slightly off. It calculates the scroll position based on the total track width (trackW) instead of the available track space for the thumb (trackW - thumbW). This means dragging the thumb to the end of the track won't reach the end of the scrollable content. The denominator should be adjusted to account for the thumb width.
| @@ -0,0 +1,137 @@ | |||
| "use client"; | |||
There was a problem hiding this comment.
This component appears to be unused in the current pull request. If it's not intended for immediate use, consider removing it to keep the codebase clean.
| @@ -0,0 +1,169 @@ | |||
| "use client"; | |||
There was a problem hiding this comment.
This component appears to be unused in the current pull request. Consider removing it if it's not required for the landing page v4 implementation.
| @@ -0,0 +1,11 @@ | |||
| /** | |||
There was a problem hiding this comment.
This file and its exported constants appear to be unused in the current pull request.
2 participants
v4 of landing page for comparison