aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-06 08:24:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): align color pickers and labels for better visual layout

Browse Source
This commit is contained in:
Gigi
2025-10-05 22:18:55 +01:00
parent 6d41d95627
commit 5f7aab90a7
2 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Settings.tsx
View File

@@ -122,27 +122,33 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
<div className="setting-group setting-inline">
<label>My Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorMine || '#ffff00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
/>
<label className="setting-label">My Highlights</label>
<div className="setting-control">
<ColorPicker
selectedColor={localSettings.highlightColorMine || '#ffff00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
/>
</div>
</div>
<div className="setting-group setting-inline">
<label>Friends Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
/>
<label className="setting-label">Friends Highlights</label>
<div className="setting-control">
<ColorPicker
selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
/>
</div>
</div>
<div className="setting-group setting-inline">
<label>Nostrverse Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorNostrverse || '#800080'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
/>
<label className="setting-label">Nostrverse Highlights</label>
<div className="setting-control">
<ColorPicker
selectedColor={localSettings.highlightColorNostrverse || '#800080'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
/>
</div>
</div>
<div className="setting-preview">

11
src/index.css
View File

@@ -1855,6 +1855,17 @@ body {
gap: 1rem;
}
.setting-label {
text-align: left;
flex: 1;
}
.setting-control {
display: flex;
justify-content: flex-end;
align-items: center;
}
.setting-group.setting-inline label {
margin-bottom: 0;
}