fix: replacing the light mode bg and adding bg to nextui-pro section … #4355
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes in this pull request focus on the Changes
Possibly related PRs
Suggested reviewers
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. |
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
Bug Fixes