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

fix: unify highlight visibility button styling across app

Browse Source 
- 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
This commit is contained in:
Gigi
2025-10-14 01:02:46 +02:00
parent 4c720aa049
commit 21a7be2f98
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/HighlightsPanel/HighlightsPanelHeader.tsx
View File

@@ -40,8 +40,11 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
})} })}
title="Toggle nostrverse highlights" title="Toggle nostrverse highlights"
ariaLabel="Toggle nostrverse highlights" ariaLabel="Toggle nostrverse highlights"
variant={highlightVisibility.nostrverse ? 'primary' : 'ghost'} variant="ghost"
style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }} style={{
color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
opacity: highlightVisibility.nostrverse ? 1 : 0.4
}}
/> />
<IconButton <IconButton
icon={faUserGroup} icon={faUserGroup}
@@ -51,9 +54,12 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
})} })}
title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"} title={currentUserPubkey ? "Toggle friends highlights" : "Login to see friends highlights"}
ariaLabel="Toggle friends highlights" ariaLabel="Toggle friends highlights"
variant={highlightVisibility.friends ? 'primary' : 'ghost'} variant="ghost"
disabled={!currentUserPubkey} 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 <IconButton
icon={faUser} icon={faUser}
@@ -63,9 +69,12 @@ const HighlightsPanelHeader: React.FC<HighlightsPanelHeaderProps> = ({
})} })}
title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"} title={currentUserPubkey ? "Toggle my highlights" : "Login to see your highlights"}
ariaLabel="Toggle my highlights" ariaLabel="Toggle my highlights"
variant={highlightVisibility.mine ? 'primary' : 'ghost'} variant="ghost"
disabled={!currentUserPubkey} 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> </div>
)} )}

49
src/components/Settings/ReadingDisplaySettings.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react' import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons' import { faHighlighter, faUnderline, faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
import { UserSettings } from '../../services/settingsService' import { UserSettings } from '../../services/settingsService'
import IconButton from '../IconButton' import IconButton from '../IconButton'
@@ -102,33 +101,39 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
<div className="setting-group setting-inline"> <div className="setting-group setting-inline">
<label>Default Highlight Visibility</label> <label>Default Highlight Visibility</label>
<div className="highlight-level-toggles"> <div className="highlight-level-toggles">
<button <IconButton
icon={faNetworkWired}
onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })} onClick={() => onUpdate({ defaultHighlightVisibilityNostrverse: !(settings.defaultHighlightVisibilityNostrverse !== false) })}
className={`level-toggle-btn ${(settings.defaultHighlightVisibilityNostrverse !== false) ? 'active' : ''}`}
title="Nostrverse highlights" title="Nostrverse highlights"
aria-label="Toggle nostrverse highlights by default" ariaLabel="Toggle nostrverse highlights by default"
style={{ color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }} variant="ghost"
> style={{
<FontAwesomeIcon icon={faNetworkWired} /> color: (settings.defaultHighlightVisibilityNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
</button> opacity: (settings.defaultHighlightVisibilityNostrverse !== false) ? 1 : 0.4
<button }}
/>
<IconButton
icon={faUserGroup}
onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })} onClick={() => onUpdate({ defaultHighlightVisibilityFriends: !(settings.defaultHighlightVisibilityFriends !== false) })}
className={`level-toggle-btn ${(settings.defaultHighlightVisibilityFriends !== false) ? 'active' : ''}`}
title="Friends highlights" title="Friends highlights"
aria-label="Toggle friends highlights by default" ariaLabel="Toggle friends highlights by default"
style={{ color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined }} variant="ghost"
> style={{
<FontAwesomeIcon icon={faUserGroup} /> color: (settings.defaultHighlightVisibilityFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
</button> opacity: (settings.defaultHighlightVisibilityFriends !== false) ? 1 : 0.4
<button }}
/>
<IconButton
icon={faUser}
onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })} onClick={() => onUpdate({ defaultHighlightVisibilityMine: !(settings.defaultHighlightVisibilityMine !== false) })}
className={`level-toggle-btn ${(settings.defaultHighlightVisibilityMine !== false) ? 'active' : ''}`}
title="My highlights" title="My highlights"
aria-label="Toggle my highlights by default" ariaLabel="Toggle my highlights by default"
style={{ color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined }} variant="ghost"
> style={{
<FontAwesomeIcon icon={faUser} /> color: (settings.defaultHighlightVisibilityMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
</button> opacity: (settings.defaultHighlightVisibilityMine !== false) ? 1 : 0.4
}}
/>
</div> </div>
</div> </div>