Improve light mode styling for home and communities pages #194
Conversation
- Enhanced hero section with beautiful cyan-to-blue gradients - Improved text hierarchy with better contrast and readability - Upgraded primary buttons with solid cyan backgrounds and elevated shadows - Added light blue gradients to code blocks with proper syntax highlighting - Enhanced hover states for better visual feedback - Added professional shadows for depth without overwhelming the design - Improved secondary button styling with subtle hover effects
|
@Sappymukherjee214 is attempting to deploy a commit to the Divya Tiwari's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for tiwaridivya25-devconnect ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Thanks for creating a PR for your Issue!
|
|
👋 Hi @Sappymukherjee214, Please link an issue using one of the following formats:
Linking issues helps us track work and close issues automatically. Thanks! 🙌 |
|
👋 Hi @Sappymukherjee214, Please link an issue using one of the following formats:
Linking issues helps us track work and close issues automatically. Thanks! 🙌 |
|
@TiwariDivya25 I have improved the Light mode styling of home and communities pages. Please label the PR for the issue #187. |
There was a problem hiding this comment.
Pull request overview
This pull request improves light mode styling for the home and communities pages by updating color palettes, gradients, text styling, and visual effects in src/theme.css. The changes aim to enhance visual clarity, contrast, and consistency across the application's light mode theme.
Changes:
- Updated gradient backgrounds to use lighter blue tones with enhanced shadow and border effects
- Refined text colors and reduced font weights for more balanced typography
- Enhanced button and hover states with improved visual feedback
- Added code block styling with gradient backgrounds and syntax highlighting colors
Comments suppressed due to low confidence (5)
src/theme.css:204
- This changes
.bg-cyan-900/20from a semi-transparent backgroundrgba(8, 145, 178, 0.1)to a fully opaque solid cyan color#0891b2. This is a significant change that could affect the visual design, as the original was 10% opacity (0.1 alpha) and the new one is 100% opaque. This may not provide the intended visual effect in light mode, as it will be a very prominent cyan color rather than a subtle tint. Consider using a lighter shade or maintaining some transparency, such asrgba(8, 145, 178, 0.2)or a lighter cyan color like#e0f2fe.
color: #000000 !important;
src/theme.css:116
- The color changes from
#1f2937(darker gray) to#334155(still fairly dark gray) combined with reducing font-weight from 600 to 500 may reduce contrast and readability. In light mode, lighter text colors generally need sufficient contrast against light backgrounds. Verify that the contrast ratio between#334155and the background colors (like#ffffffor#f8fafc) meets WCAG AA standards (minimum 4.5:1 for normal text, 3:1 for large text). The previous color#1f2937provided higher contrast.
html.light .text-4xl {
color: #000000 !important;
font-weight: 800 !important;
}
/* Navbar and main titles */
html.light nav {
src/theme.css:289
- The code syntax highlighting colors have been updated for light mode. Verify that these colors provide sufficient contrast against the code block background
linear-gradient(to bottom right, #e0f2fe, #dbeafe):
.text-green-400:#059669(emerald-600 in Tailwind).text-emerald-400:#10b981(emerald-500 in Tailwind).text-yellow-400:#d97706(amber-600 in Tailwind)
These are darker shades appropriate for light backgrounds. Ensure they meet WCAG contrast requirements against the light blue gradient background for code readability.
background-color: rgba(8, 145, 178, 0.2) !important;
}
html.light .bg-red-900\/20 {
background-color: rgba(220, 38, 38, 0.1) !important;
}
html.light .bg-red-900\/40 {
background-color: rgba(220, 38, 38, 0.15) !important;
}
html.light .hover\:text-cyan-400:hover {
color: #0e7490 !important;
}
src/theme.css:293
- This selector is overly broad and incorrect. The
~is a general sibling combinator that targets all siblings after theborder-cyan-400/50element, and the*matches any element. This means any element that comes after an element with theborder-cyan-400/50class will get white text with bold font weight, which is likely not the intended behavior.
Based on the usage in the codebase (e.g., in Home.tsx and CommunitiesPage.tsx), the .bg-cyan-600/30 buttons already have .text-cyan-300 applied directly. If the goal is to ensure button text is visible, a more specific selector targeting the text within the button would be appropriate, such as .bg-cyan-600\/30 .text-cyan-300 or .bg-cyan-600\/30.
background-color: rgba(8, 145, 178, 0.1) !important;
}
src/theme.css:292
- The selector
.bg-cyan-600\/30 .text-cyan-300is intended to target text elements with the classtext-cyan-300that are descendants of elements with classbg-cyan-600/30. However, there's no base styling rule defined for.bg-cyan-600\/30itself in this file. Looking at the usage in Home.tsx and CommunitiesPage.tsx, buttons withbg-cyan-600/30are being used, but without a corresponding CSS rule to define what this class does in light mode. Consider adding a base rule likehtml.light .bg-cyan-600\/30 { background-color: ...; }to define the background color for this class.
background-color: rgba(8, 145, 178, 0.1) !important;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@Sappymukherjee214 All checks except Vercel authorization must be passed before PR can be merged. Make sure that the deploy preview is working and your branch is in sync. |
- Remove unused imports across components and pages - Fix TypeScript 'any' types with proper type definitions - Remove unused variables and functions - Configure ESLint to allow context exports - Auto-fix remaining warnings
|
👋 Hi @Sappymukherjee214, Please link an issue using one of the following formats:
Linking issues helps us track work and close issues automatically. Thanks! 🙌 |
|
👋 Hi @Sappymukherjee214, Please link an issue using one of the following formats:
Linking issues helps us track work and close issues automatically. Thanks! 🙌 |
|
@TiwariDivya25 Now everything is working, please check and merge the PR for the issue #194 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 participants
Fixes #187
This pull request updates the light mode color palette and styling in
src/theme.cssto improve visual clarity, contrast, and consistency across gradients, backgrounds, text, code blocks, and buttons. The changes focus on refining gradients, adjusting text colors and weights, enhancing background and shadow effects, and improving code and button styling for better accessibility and aesthetics.Gradient and background improvements:
.from-slate-900,.via-slate-950,.to-slate-950, and.bg-gradient-to-bto use lighter blue tones and improved shadow/border effects for better separation and visual depth..bg-cyan-900/20to use a solid cyan color and stronger shadow, improving visual prominence.Text color and weight adjustments:
.text-gray-300,.text-slate-300,.text-slate-400, and added.text-gray-400for more readable and consistent typography in light mode.Button and hover styling enhancements:
.hover:bg-cyan-600/50,.bg-slate-800/50, and.hover:bg-slate-800, with adjusted colors and shadowing for better feedback and separation.Code block and syntax highlighting:
.bg-linear-to-br,.from-cyan-500/10,.to-blue-500/10, and bold color for code syntax elements like.text-green-400,.text-emerald-400, and.text-yellow-400.Button text and secondary button improvements:
Here is the screenshot for improvement of Light mode styling of home and communities pages:
Home Page
Communities Page