Skip to content

Dark Mode Bug Fix for Blog and Projects Pages #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ankushkhakale wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Dark Mode Bug Fix for Blog and Projects Pages #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

110 changes: 54 additions & 56 deletions src/components/Blog/Blog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const Blog: React.FC = () => {

if (loading) {
return (
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
<p className="text-gray-600">Loading blog posts...</p>
Copy link

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The loading text should have a dark mode variant to ensure readability on dark backgrounds. Add dark:text-gray-300 to match the pattern used elsewhere in the component.

Suggested change
<p className="text-gray-600">Loading blog posts...</p>
<p className="text-gray-600 dark:text-gray-300">Loading blog posts...</p>

Copilot uses AI. Check for mistakes.
Expand All @@ -98,11 +98,11 @@ export const Blog: React.FC = () => {
if (error) {
return (
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
Copy link

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The error state container background is missing the dark mode class. Add dark:bg-gray-900 to the outer div to match the styling pattern used in the loading state and main content.

Suggested change
<div className="min-h-screen bg-gray-50 py-12 flex items-center justify-center">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center">

Copilot uses AI. Check for mistakes.
<div className="text-center bg-white p-8 rounded-lg shadow-lg max-w-md">
<div className="text-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-md">
<div className="text-red-500 text-4xl mb-4">⚠️</div>
<h2 className="text-xl font-bold text-gray-900 mb-2">Failed to Load Blog Posts</h2>
<p className="text-gray-600 mb-4">{error}</p>
<button
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Failed to Load Blog Posts</h2>
<p className="text-gray-600 dark:text-gray-300 mb-4">{error}</p>
<button
onClick={() => window.location.reload()}
className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"
>
Expand All @@ -115,16 +115,16 @@ export const Blog: React.FC = () => {

if (selectedPost) {
return (
<div className="min-h-screen bg-gray-50 py-8">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
Copy link

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] For consistency with other components in the codebase (Community, Challenges, Profile, etc.), consider adding transition-colors duration-300 to the main container div to provide smooth transitions when toggling dark mode.

Suggested change
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-8 transition-colors duration-300">

Copilot uses AI. Check for mistakes.
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<button
onClick={() => setSelectedPost(null)}
className="inline-flex items-center space-x-2 text-gray-600 hover:text-purple-600 transition-colors mb-8"
className="inline-flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors mb-8"
>
<span>← Back to Blog</span>
</button>

<article className="bg-white rounded-2xl shadow-sm overflow-hidden">
<article className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
<div className="relative h-64 bg-gradient-to-br from-purple-600 to-blue-600">
<div className="absolute inset-0 bg-black/20"></div>
<div className="relative h-full flex items-center justify-center">
Expand All @@ -139,8 +139,8 @@ export const Blog: React.FC = () => {
</div>
</div>

<div className="px-6 py-6 border-b border-gray-200">
<div className="flex items-center space-x-6 text-sm text-gray-600">
<div className="px-6 py-6 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-6 text-sm text-gray-600 dark:text-gray-300">
<div className="flex items-center space-x-2">
<User className="h-4 w-4" />
<span className="font-medium">{selectedPost.author}</span>
Expand Down Expand Up @@ -168,13 +168,13 @@ export const Blog: React.FC = () => {
</div>

<div className="px-6 py-8">
<div className="prose prose-lg max-w-none">
<p className="text-gray-700 leading-relaxed">
<div className="prose prose-lg max-w-none dark:prose-invert">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{selectedPost.content}
</p>
<p className="text-gray-700 leading-relaxed mt-6">
This approach has helped countless developers transition from tutorial hell to building
production-ready applications. The journey isn't always smooth, but every challenge
<p className="text-gray-700 dark:text-gray-300 leading-relaxed mt-6">
This approach has helped countless developers transition from tutorial hell to building
production-ready applications. The journey isn't always smooth, but every challenge
you overcome makes you a stronger developer.
</p>
</div>
Expand All @@ -186,15 +186,15 @@ export const Blog: React.FC = () => {
}

return (
<div className="min-h-screen bg-gray-50 py-12">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
Copy link

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] For consistency with other components in the codebase (Community, Challenges, Profile, etc.), consider adding transition-colors duration-300 to the main container div to provide smooth transitions when toggling dark mode.

Suggested change
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 transition-colors duration-300">

Copilot uses AI. Check for mistakes.
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
Community Blog
</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Stories, insights, and tutorials celebrating diversity, inclusion, and positive collaboration
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Stories, insights, and tutorials celebrating diversity, inclusion, and positive collaboration
in technology. Every voice matters, every story has value.
</p>
</div>
Expand All @@ -208,34 +208,32 @@ export const Blog: React.FC = () => {
placeholder="Search posts..."
value={searchTerm}
onChange={(e) => handleSearch(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
className="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
/>
</div>

<div className="flex items-center justify-center flex-wrap gap-2">
<div className="flex items-center space-x-2 mr-4">
<Tag className="h-4 w-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">Filter by tag:</span>
<Tag className="h-4 w-4 text-gray-500 dark:text-gray-400" />
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Filter by tag:</span>
</div>
<button
onClick={() => handleTagFilter('all')}
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
selectedTag === 'all'
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTag === 'all'
? 'bg-purple-600 text-white'
: 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
}`}
: 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
}`}
>
All
</button>
{getAllTags().map(tag => (
<button
key={tag}
onClick={() => handleTagFilter(tag)}
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
selectedTag === tag
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTag === tag
? 'bg-purple-600 text-white'
: 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
}`}
: 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:border-gray-700'
}`}
>
{tag}
</button>
Expand All @@ -246,9 +244,9 @@ export const Blog: React.FC = () => {
{/* Posts Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredPosts.map(post => (
<article
<article
key={post.id}
className="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden cursor-pointer group"
className="bg-white dark:bg-gray-800 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden cursor-pointer group"
onClick={() => setSelectedPost(post)}
>
<div className="relative h-24 bg-gradient-to-br from-purple-100 to-blue-100 overflow-hidden">
Expand All @@ -269,15 +267,15 @@ export const Blog: React.FC = () => {
</div>

<div className="p-6">
<h2 className="text-lg font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors">
<h2 className="text-lg font-bold text-gray-900 dark:text-white mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
{post.title}
</h2>
<p className="text-gray-600 mb-4">

<p className="text-gray-600 dark:text-gray-300 mb-4">
{post.summary}
</p>

<div className="flex items-center justify-between text-sm text-gray-500 mb-4">
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-4">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-1">
<User className="h-4 w-4" />
Expand All @@ -298,7 +296,7 @@ export const Blog: React.FC = () => {
{post.tags.slice(0, 3).map((tag, index) => (
<span
key={index}
className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium"
className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded-md font-medium"
>
#{tag}
</span>
Expand All @@ -314,37 +312,37 @@ export const Blog: React.FC = () => {
</div>

{/* Code of Conduct Reminder */}
<div className="mt-16 bg-green-50 border border-green-200 rounded-2xl p-8">
<div className="mt-16 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-2xl p-8">
<div className="text-center mb-6">
<h2 className="text-2xl font-bold text-green-900 mb-4">Our Community Values</h2>
<p className="text-green-800 max-w-3xl mx-auto">
All blog content and community interactions are guided by our commitment to respect,
<h2 className="text-2xl font-bold text-green-900 dark:text-green-100 mb-4">Our Community Values</h2>
<p className="text-green-800 dark:text-green-200 max-w-3xl mx-auto">
All blog content and community interactions are guided by our commitment to respect,
inclusion, and empathy. We celebrate diverse perspectives and create space for everyone to learn and grow.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div className="bg-white p-4 rounded-lg border border-green-200">
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
<div className="text-2xl mb-2">🤝</div>
<h3 className="font-semibold text-green-900 mb-1">Respect</h3>
<p className="text-sm text-green-700">Every person deserves dignity and consideration</p>
<h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Respect</h3>
<p className="text-sm text-green-700 dark:text-green-300">Every person deserves dignity and consideration</p>
</div>
<div className="bg-white p-4 rounded-lg border border-green-200">
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
<div className="text-2xl mb-2">🌍</div>
<h3 className="font-semibold text-green-900 mb-1">Inclusion</h3>
<p className="text-sm text-green-700">All backgrounds and perspectives are welcome</p>
<h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Inclusion</h3>
<p className="text-sm text-green-700 dark:text-green-300">All backgrounds and perspectives are welcome</p>
</div>
<div className="bg-white p-4 rounded-lg border border-green-200">
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-green-200 dark:border-green-900/50">
<div className="text-2xl mb-2">💚</div>
<h3 className="font-semibold text-green-900 mb-1">Empathy</h3>
<p className="text-sm text-green-700">We seek to understand and support each other</p>
<h3 className="font-semibold text-green-900 dark:text-green-100 mb-1">Empathy</h3>
<p className="text-sm text-green-700 dark:text-green-300">We seek to understand and support each other</p>
</div>
</div>

<div className="text-center mt-6">
<a
href="#code-of-conduct"
className="inline-flex items-center text-green-700 hover:text-green-900 font-medium transition-colors"
<a
href="#code-of-conduct"
className="inline-flex items-center text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 font-medium transition-colors"
>
Read our full Code of Conduct
<ExternalLink className="h-4 w-4 ml-2" />
Expand All @@ -356,7 +354,7 @@ export const Blog: React.FC = () => {
<div className="mt-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-8 text-center text-white">
<h2 className="text-2xl font-bold mb-4">Join Our Inclusive Community</h2>
<p className="text-purple-100 mb-6 max-w-2xl mx-auto">
Get updates on community posts, inclusive tech content, and opportunities to connect
Get updates on community posts, inclusive tech content, and opportunities to connect
with like-minded developers who value diversity and collaboration.
</p>
<div className="max-w-md mx-auto flex space-x-4">
Expand Down
Loading