feat: use user's custom highlight color for Highlights tab

This commit is contained in:
Gigi
2025-10-13 12:14:25 +02:00
parent e1a3ae4b4d
commit 743968f7fb
2 changed files with 9 additions and 0 deletions

View File

@@ -171,6 +171,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
<div className="me-tabs">
<button
className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
data-tab="highlights"
onClick={() => setActiveTab('highlights')}
>
<FontAwesomeIcon icon={faHighlighter} />
@@ -178,6 +179,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
</button>
<button
className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
data-tab="reading-list"
onClick={() => setActiveTab('reading-list')}
>
<FontAwesomeIcon icon={faBookmark} />
@@ -185,6 +187,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
</button>
<button
className={`me-tab ${activeTab === 'library' ? 'active' : ''}`}
data-tab="library"
onClick={() => setActiveTab('library')}
>
<FontAwesomeIcon icon={faBook} />

View File

@@ -37,6 +37,12 @@
border-bottom-color: var(--primary-color, #8b5cf6);
}
/* Highlights tab uses the user's custom "my highlights" color */
.me-tab[data-tab="highlights"].active {
color: var(--highlight-color-mine, #ffff00);
border-bottom-color: var(--highlight-color-mine, #ffff00);
}
.me-tab svg {
font-size: 1rem;
}