Fix: Article title disappears on hover in dark mode #55
Conversation
- Added dark:text-white to article title for visibility in dark mode - Added dark mode gradient colors (dark:group-hover:from-[#32CD32] dark:group-hover:to-[#FFD700]) for hover effect - Added dark:bg-gray-800 to article card background - Added dark mode text colors to excerpt (dark:text-gray-300) and author info (dark:text-gray-400) - Added dark:group-hover:text-[#32CD32] for author name hover effect in dark mode Fixes the issue where hovering over article cards in dark mode made the title invisible due to the gradient text effect lacking dark mode overrides.
WalkthroughAdds Tailwind CSS dark mode styling variants to the blog card component, including dark backgrounds, text colors, and hover effects. The changes preserve all existing light-mode styles while providing visual consistency for dark theme users. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes This is a straightforward styling change applying a consistent pattern of dark mode Tailwind variants across a single component with no logic modifications or API changes. Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/blog-card.tsx(2 hunks)
🔇 Additional comments (3)
components/blog-card.tsx (3)
47-49: Excellent dark mode title styling.The addition of
dark:text-whitedirectly addresses the visibility issue mentioned in the PR objectives. The dark mode hover gradient (#32CD32to#FFD700) uses appropriately brighter colors compared to the light mode gradient, ensuring good visibility and visual appeal on dark backgrounds.
51-51: Good choice for excerpt text color.The
dark:text-gray-300provides appropriate contrast against the dark background while maintaining the visual hierarchy between title, excerpt, and metadata.
53-54: Consistent dark mode metadata and hover styling.The addition of
dark:text-gray-400for metadata text anddark:group-hover:text-[#32CD32]for the author name hover creates a cohesive dark mode experience. The lime green hover color matches the starting color of the title's hover gradient, maintaining visual consistency across the component.
| return ( | ||
| <Link href={`/a/${post.slug}`} className="group h-full"> | ||
| <article className="flex flex-col h-full bg-white shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg"> | ||
| <article className="flex flex-col h-full bg-white dark:bg-gray-800 shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 relative rounded-lg"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
git ls-files components/blog-card.tsxRepository: StabilityNexus/StableViewpoints
Length of output: 99
🏁 Script executed:
# Get file size first
wc -l components/blog-card.tsxRepository: StabilityNexus/StableViewpoints
Length of output: 102
🏁 Script executed:
# Read the blog-card.tsx file
cat -n components/blog-card.tsx | head -60Repository: StabilityNexus/StableViewpoints
Length of output: 2971
🏁 Script executed:
# Search for Tailwind config files
fd -e config.ts -e config.js -e tailwind.config.ts -e tailwind.config.jsRepository: StabilityNexus/StableViewpoints
Length of output: 93
🏁 Script executed:
# Search for any custom utility definitions for border-gradient
rg "border-gradient" -A 2 -B 2Repository: StabilityNexus/StableViewpoints
Length of output: 4560
🏁 Script executed:
cat -n tailwind.config.tsRepository: StabilityNexus/StableViewpoints
Length of output: 3708
Remove non-functional border-gradient-to-r classes; use standard Tailwind border styling instead.
The border-gradient-to-r from-[#228B22]/10 to-[#FFBF00]/10 classes on line 22 are not standard Tailwind CSS utilities and are not defined in the project's tailwind.config.ts. These classes will be ignored by Tailwind and provide no styling. Replace with a standard Tailwind border color utility (e.g., border-gray-200 dark:border-gray-700) or implement gradient borders using CSS if gradient borders are intentional.
🤖 Prompt for AI Agents
In components/blog-card.tsx around line 22, the classes "border-gradient-to-r
from-[#228B22]/10 to-[#FFBF00]/10" are not valid Tailwind utilities in this
project and are ignored; replace them with a standard Tailwind border utility
such as "border-gray-200 dark:border-gray-700" to apply a visible border, or if
a gradient border is required implement it via a custom CSS class (defined in a
stylesheet or tailwind.config.ts) and apply that class instead.
1 participant
Fixes the issue where hovering over article cards in dark mode made the title invisible due to the gradient text effect lacking dark mode overrides.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.