aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-19 07:34:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: change empty state text color from red to gray

Browse Source 
- Create new .explore-empty class with muted gray color (zinc-400)
- Keep .explore-error red for actual errors
- Update all empty state divs in Me.tsx to use .explore-empty
- Empty states (no highlights, no bookmarks, etc.) no longer appear as errors
This commit is contained in:
Gigi
2025-10-14 01:38:35 +02:00
parent f973c75ff5
commit 1e82e3f240
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Me.tsx
View File

@@ -220,7 +220,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
switch (activeTab) { switch (activeTab) {
case 'highlights': case 'highlights':
return highlights.length === 0 ? ( return highlights.length === 0 ? (
<div className="explore-error"> <div className="explore-empty">
<p> <p>
{isOwnProfile {isOwnProfile
? 'No highlights yet. Start highlighting content to see them here!' ? 'No highlights yet. Start highlighting content to see them here!'
@@ -242,7 +242,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
case 'reading-list': case 'reading-list':
return allIndividualBookmarks.length === 0 ? ( return allIndividualBookmarks.length === 0 ? (
<div className="explore-error"> <div className="explore-empty">
<p>No bookmarks yet. Bookmark articles to see them here!</p> <p>No bookmarks yet. Bookmark articles to see them here!</p>
</div> </div>
) : ( ) : (
@@ -293,7 +293,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
case 'archive': case 'archive':
return readArticles.length === 0 ? ( return readArticles.length === 0 ? (
<div className="explore-error"> <div className="explore-empty">
<p>No read articles yet. Mark articles as read to see them here!</p> <p>No read articles yet. Mark articles as read to see them here!</p>
</div> </div>
) : ( ) : (
@@ -310,7 +310,7 @@ const Me: React.FC<MeProps> = ({ relayPool, activeTab: propActiveTab, pubkey: pr
case 'writings': case 'writings':
return writings.length === 0 ? ( return writings.length === 0 ? (
<div className="explore-error"> <div className="explore-empty">
<p>No articles written yet. Publish your first article to see it here!</p> <p>No articles written yet. Publish your first article to see it here!</p>
</div> </div>
) : ( ) : (

3
src/styles/components/cards.css
View File

@@ -73,9 +73,10 @@
.explore-header { text-align: center; margin-bottom: 3rem; } .explore-header { text-align: center; margin-bottom: 3rem; }
.explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: rgb(99 102 241); /* indigo-500 */ display: flex; align-items: center; justify-content: center; gap: 1rem; } .explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: rgb(99 102 241); /* indigo-500 */ display: flex; align-items: center; justify-content: center; gap: 1rem; }
.explore-subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); margin: 0; } .explore-subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.7); margin: 0; }
.explore-loading, .explore-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); } .explore-loading, .explore-error, .explore-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); }
.explore-loading { min-height: 0; padding: 0.25rem 0; } .explore-loading { min-height: 0; padding: 0.25rem 0; }
.explore-error { color: rgb(239 68 68); /* red-500 */ } .explore-error { color: rgb(239 68 68); /* red-500 */ }
.explore-empty { color: rgb(161 161 170); /* zinc-400 */ }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; } .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
.blog-post-card { background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; } .blog-post-card { background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
.blog-post-card:hover { border-color: rgb(99 102 241); /* indigo-500 */ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); } .blog-post-card:hover { border-color: rgb(99 102 241); /* indigo-500 */ transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }