resolved dark theme(Get started) #435
Conversation
|
@Samridha0305 is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
@sanjay-kv @iitzIrFan have a look on this |
There was a problem hiding this comment.
Pull Request Overview
This PR resolves visual issues in the dark theme for the "Get Started" page, specifically addressing styling problems in the stats section and feature section to improve the professional appearance.
- Consolidates and refactors dark theme CSS selectors for better organization
- Updates feature cards with improved gradients, shadows, and hover effects for dark theme
- Redesigns stat cards with enhanced styling, gradients, and proper color contrast
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| [data-theme='dark'] { | ||
| background: linear-gradient(135deg, #000000 0%, #0a0a0f 100%); | ||
| color: #f9fafb; | ||
| } |
There was a problem hiding this comment.
The selector [data-theme='dark'] is too broad and will apply these styles to any element with the dark theme attribute. This should be scoped to specific components or use a more specific class selector to avoid unintended styling conflicts.
Copilot uses AI. Check for mistakes.
| display: none !important; | ||
| content: none !important; |
There was a problem hiding this comment.
Using !important with display: none and content: none is redundant and violates best practices. Consider removing the pseudo-element entirely by restructuring the CSS or using proper cascade specificity.
| display: none !important; | |
| content: none !important; | |
| content: ""; | |
| opacity: 0; |
Copilot uses AI. Check for mistakes.
| /* .statCard:hover .statLabel { | ||
| color: white; | ||
| opacity: 1; | ||
| } | ||
| } */ |
There was a problem hiding this comment.
Commented-out code should be removed rather than left in the codebase. If this code might be needed in the future, it should be documented in version control history instead.
Copilot uses AI. Check for mistakes.
| [data-theme="dark"] .statLabel, | ||
| [data-theme="dark"] .statLabel * { | ||
| color: #ffffff !important; |
There was a problem hiding this comment.
The universal selector * combined with !important is overly aggressive and can break styling of child elements. This rule also uses double quotes while the rest of the file uses single quotes, creating inconsistency.
| [data-theme="dark"] .statLabel, | |
| [data-theme="dark"] .statLabel * { | |
| color: #ffffff !important; | |
| [data-theme='dark'] .statLabel { | |
| color: #ffffff; |
Copilot uses AI. Check for mistakes.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Good job @Samridha0305 |
3 participants
Description
This PR resolves multiple visual issues in the dark theme for the stats section and feature section to ensure a cleaner and more professional look.
Fixes #425
Screenshots
Before:
After:
Type of Change
Checklist
npm run buildand attached scrrenshot in this PR.