From 21a7be2f98b1548ad1dfe74c7443a6670fe94065 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 01:02:46 +0200
Subject: [PATCH] fix: unify highlight visibility button styling across app

- Remove blue primary variant from highlight filter buttons
- Use opacity (1.0 active, 0.4 inactive) instead of variant change
- Update settings to use IconButton like sidebar (DRY)
- Consistent styling: ghost variant + opacity + custom colors
- Settings buttons now match sidebar buttons exactly
---
 .../HighlightsPanel/HighlightsPanelHeader.tsx | 21 +++++---
 .../Settings/ReadingDisplaySettings.tsx       | 49 ++++++++++---------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
index fa156592..f98b3040 100644
--- a/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
+++ b/src/components/HighlightsPanel/HighlightsPanelHeader.tsx
@@ -40,8 +40,11 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                 })}
                 title="Toggle nostrverse highlights"
                 ariaLabel="Toggle nostrverse highlights"
-                variant={highlightVisibility.nostrverse ? 'primary' : 'ghost'}
-                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
+                variant="ghost"
+                style={{ 
+                  color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+                  opacity: highlightVisibility.nostrverse ? 1 : 0.4 
+                }}
               />
               <IconButton
                 icon={faUserGroup}
@@ -51,9 +54,12 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                 })}
                 title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
                 ariaLabel="Toggle friends highlights"
-                variant={highlightVisibility.friends ? 'primary' : 'ghost'}
+                variant="ghost"
                 disabled={!currentUserPubkey}
-                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
+                style={{ 
+                  color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined,
+                  opacity: highlightVisibility.friends ? 1 : 0.4 
+                }}
               />
               <IconButton
                 icon={faUser}
@@ -63,9 +69,12 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
                 })}
                 title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
                 ariaLabel="Toggle my highlights"
-                variant={highlightVisibility.mine ? 'primary' : 'ghost'}
+                variant="ghost"
                 disabled={!currentUserPubkey}
-                style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                style={{ 
+                  color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined,
+                  opacity: highlightVisibility.mine ? 1 : 0.4 
+                }}
               />
             </div>
           )}
diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx
index 34630425..e844ec60 100644
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
 import IconButton from '../IconButton'
@@ -102,33 +101,39 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
       <div className="setting-group setting-inline">
         <label>Default Highlight Visibility</label>
         <div className="highlight-level-toggles">
-          <button
+          <IconButton
+            icon={faNetworkWired}
             onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })}
-            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityNostrverse !== false) ? 'active' : ''}`}
             title="Nostrverse highlights"
-            aria-label="Toggle nostrverse highlights by default"
-            style={{ color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
-          >
-            <FontAwesomeIcon icon={faNetworkWired} />
-          </button>
-          <button
+            ariaLabel="Toggle nostrverse highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityNostrverse !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUserGroup}
             onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })}
-            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityFriends !== false) ? 'active' : ''}`}
             title="Friends highlights"
-            aria-label="Toggle friends highlights by default"
-            style={{ color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined }}
-          >
-            <FontAwesomeIcon icon={faUserGroup} />
-          </button>
-          <button
+            ariaLabel="Toggle friends highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityFriends !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUser}
             onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })}
-            className={`level-toggle-btn ${(settings.defaultHighlightVisibilityMine !== false) ? 'active' : ''}`}
             title="My highlights"
-            aria-label="Toggle my highlights by default"
-            style={{ color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined }}
-          >
-            <FontAwesomeIcon icon={faUser} />
-          </button>
+            ariaLabel="Toggle my highlights by default"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
+              opacity: (settings.defaultHighlightVisibilityMine !== false) ? 1 : 0.4
+            }}
+          />
         </div>
       </div>