fix: replacing the light mode bg in to nextui-pro section #4355
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. WalkthroughThe changes in this pull request involve the removal of the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (15)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
apps/docs/components/marketing/nextui-pro-section.tsx (1)
41-42: Add transition duration for smoother effectWhile the
ease-in-outtiming function is added, specifying a transition duration would make the effect more noticeable.- ? "ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]" - : "ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]"; + ? "transition-all duration-300 ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]" + : "transition-all duration-300 ease-in-out h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/docs/components/marketing/nextui-pro-section.tsx(2 hunks)
🔇 Additional comments (2)
apps/docs/components/marketing/nextui-pro-section.tsx (2)
37-38: Improved mobile gradient transition!
The switch from radial to linear gradient for mobile provides a better controlled fade effect, with appropriate transparency handling for both dark and light modes.
159-160: Verify contrast with reduced opacity
The changes improve the background handling with dynamic viewport height and simplified animation. However, please ensure that the 15% opacity on mobile provides sufficient contrast for content visibility.
✅ Verification successful
Let me gather more information about the opacity and contrast usage in the codebase.
The opacity change is safe and well-implemented
The reduced opacity (15%) is applied to a background image element that has multiple safeguards ensuring content visibility:
- The content is rendered in a separate z-indexed layer (z-30) above the background
- There are gradient overlays that enhance contrast (
mobileClassNameandwebClassName) - The opacity is only reduced on mobile, where the gradient overlay is stronger
- Text elements have additional contrast enhancement with text shadow
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any contrast-related accessibility guidelines in the codebase
rg -i "contrast|a11y|accessibility" --type md
Length of output: 510
Script:
#!/bin/bash
# Check for similar opacity patterns in the codebase
rg -i "opacity-\d+" --type tsx -A 2
# Check the parent component structure to understand the contrast context
ast-grep --pattern 'className="$$$opacity-15$$$"'
Length of output: 117
Script:
#!/bin/bash
# Check for similar opacity patterns in the codebase, using correct file extensions
rg -i "opacity-\d+" --type ts --type jsx --type tsx
# Check the component content to understand what's being rendered
cat "apps/docs/components/marketing/nextui-pro-section.tsx"
Length of output: 6416
|
@jrgarciadev since this section was looking bit plain on mobile, I have added the bg to mobile as well. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/docs/components/marketing/nextui-pro-section.tsx (2)
166-166: Fix duplicate transition propertyThe className contains a duplicate
transitionproperty:-"transition transition-opacity h-full w-full bg-[linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]" +"transition-opacity h-full w-full bg-[linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]"
163-194: Consider optimizing overlay transitions and performance
Transition properties are inconsistent:
- Mobile overlays: simple transition
- Desktop overlays: includes ease-linear, delay-75, duration-300
Multiple absolute-positioned overlays might impact performance.
Consider:
- Standardizing transition properties across all overlays
- Combining overlays using CSS variables for gradient colors to reduce DOM elements:
-<div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20"> - <div className={cn("transition-opacity h-full w-full bg-[linear-gradient(...)]", - isDarkMode && isMobile ? "opacity-100" : "opacity-0")} /> -</div> -<div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20"> - <div className={cn("transition-opacity h-full w-full bg-[linear-gradient(...)]", - !isDarkMode && isMobile ? "opacity-100" : "opacity-0")} /> -</div> +<div className="absolute inset-0 pointer-events-none top-0 z-20"> + <div + className="transition-all h-full w-full" + style={{ + '--gradient-color': isDarkMode ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)', + background: isMobile + ? `linear-gradient(to left, rgba(255,255,255, 0) 5%, var(--gradient-color) 100%)` + : `radial-gradient(at 80% 50%, rgba(255,255,255, 0) 20%, var(--gradient-color) 100%)`, + opacity: shouldShow ? 1 : 0 + }} + /> +</div>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/docs/components/marketing/nextui-pro-section.tsx(3 hunks)
🔇 Additional comments (3)
apps/docs/components/marketing/nextui-pro-section.tsx (3)
3-3: LGTM: Import change is appropriate
The addition of cn from @nextui-org/react is appropriate for the conditional class name handling implemented in the background overlays.
150-151: LGTM: Marquee component improvements
Good improvements:
- Reduced opacity on mobile (0.15) improves content visibility while maintaining the background effect
- Simplified duration prop removes unnecessary complexity
Line range hint 1-194: Overall implementation successfully meets PR objectives
The changes effectively:
- Improve mobile background visibility with appropriate opacity and gradients
- Handle both light and dark modes smoothly
- Maintain responsive design principles
While there are some minor optimization opportunities noted above, the implementation is solid and achieves the intended goals.
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
e8abe24 to
62e5fe8
Compare
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
62e5fe8 to
7828510
Compare
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
7828510 to
1a08a17
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/docs/components/marketing/nextui-pro-section.tsx (3)
37-54: Consolidate image preloading logicThere's duplicate image preloading implementation:
- useEffect hook creating Image objects
- Head component with preload link tags
Consider removing one of these implementations to avoid unnecessary duplicate preloading.
- useEffect(() => { - const imagesToPreload = [ - "/images/nextuipro-section-background.webp", - "/images/nextuipro-section-background-light.webp", - "/images/nextuipro-section-background@mobile.webp", - "/images/nextuipro-section-background-light@mobile.webp", - ]; - - const preloadImages = (images) => { - images.forEach((src) => { - const img = new Image(); - img.src = src; - }); - }; - - preloadImages(imagesToPreload); - }, []);Also applies to: 72-75
185-192: Extract mask styles for better maintainabilityThe mask implementation mixes complex conditional logic with styles. Consider extracting these styles into constants or a utility function for better maintainability.
+ const getMaskStyle = (isMobile: boolean) => { + const baseStyle = "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black transition transition-all duration-300"; + const desktopMask = "[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]"; + const mobileMask = "[-webkit-mask-image:linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]"; + return cn(baseStyle, isMobile ? mobileMask : desktopMask); + }; - className={cn( - "absolute inset-0 pointer-events-none z-20 bg-white dark:bg-black transition transition-all duration-300", - !isMobile && - "[-webkit-mask-image:radial-gradient(at_70%_50%,_rgba(255,255,255,0)_20%,_rgba(255,255,255,0.8)_40%,_rgba(0,0,0,1)_60%)]", - isMobile && - "[-webkit-mask-image:linear-gradient(to_left,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,1)_100%)]", - )} + className={getMaskStyle(isMobile)}
178-181: Improve Marquee component configurationThe Marquee implementation has hardcoded values and mixed concerns in className. Consider:
- Making duration configurable
- Separating opacity and layout classes
+ const MARQUEE_DURATION = 60; + const MARQUEE_BASE_CLASSES = "flex w-screen mt-4 absolute top-0 inset-0 isolate max-h-dvh"; + const MARQUEE_OPACITY_CLASSES = "opacity-15 md:opacity-100"; <Marquee vertical - className="flex opacity-15 md:opacity-100 w-screen mt-4 absolute top-0 inset-0 isolate max-h-dvh " - duration={60} + className={cn(MARQUEE_BASE_CLASSES, MARQUEE_OPACITY_CLASSES)} + duration={MARQUEE_DURATION} >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/components/marketing/nextui-pro-section.tsx(3 hunks)apps/docs/tailwind.config.js(2 hunks)
🔇 Additional comments (1)
apps/docs/tailwind.config.js (1)
330-333: LGTM! Animation configuration looks good
The fadeIn animation configuration is well-implemented with appropriate timing and easing function.
Also applies to: 343-343
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
1a08a17 to
65dc32f
Compare
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
65dc32f to
5a3c368
Compare
macci001
force-pushed
the
macci001/adding-nextuipro-bg-to-mobile
branch
from
5a3c368 to
cae01bc
Compare
macci001
changed the title
…ing-nextuipro-bg-to-mobile
Closes ENG-1636
📝 Description
PR changes the background image for the nextui-pro section and adds the bg for the mobile.
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No): No
Summary by CodeRabbit
New Features
NextUIProSectioncomponent for enhanced marketing display.NextUIProButton,NextUIProChip, andNextUIProImage.fadeInanimation for smoother transitions.Bug Fixes