rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-09 06:55:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance theme dropdown and security settings with improved styles and active indicators (#6582)

Browse Source
This commit is contained in:
Abhishek S Lal
2025-12-31 14:29:52 +05:30
committed by GitHub
parent 2827a6f133
commit 746a49faed
4 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/bruno-app/src/components/StatusBar/ThemeDropdown/StyledWrapper.js
View File

@@ -103,11 +103,23 @@ const StyledWrapper = styled.div`
}
.theme-list-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: ${(props) => props.theme.dropdown.mutedText};
margin-bottom: 8px;
}
.active-badge {
font-size: 10px;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
background: ${(props) => rgba(props.theme.dropdown.selectedColor, 0.12)};
color: ${(props) => props.theme.dropdown.selectedColor};
}
/* Theme item */
.theme-item {
display: flex;

9
packages/bruno-app/src/components/StatusBar/ThemeDropdown/index.js
View File

@@ -34,6 +34,7 @@ const ThemeDropdown = ({ children }) => {
const {
storedTheme,
setStoredTheme,
displayedTheme,
themeVariantLight,
themeVariantDark,
setThemeVariantLight,
@@ -209,10 +210,14 @@ const ThemeDropdown = ({ children }) => {
const renderThemeList = (themes, isLight, currentVariant, label) => {
const refs = isLight ? lightItemRefs : darkItemRefs;
const section = isLight ? 'light' : 'dark';
const isActiveSystemTheme = isSystemMode && ((isLight && displayedTheme === 'light') || (!isLight && displayedTheme === 'dark'));
return (
<div className="theme-list" role="listbox" aria-label={label}>
<div className="theme-list-label">{label}</div>
<div className="theme-list-label">
{label}
{isActiveSystemTheme && <span className="active-badge">Active</span>}
</div>
{themes.map((theme, index) => {
const isActive = currentVariant === theme.id;
return (
@@ -270,7 +275,7 @@ const ThemeDropdown = ({ children }) => {
aria-label="Theme selector"
>
<div className="mode-section">
<div className="mode-label" id="mode-label">Mode</div>
<div className="mode-label" id="mode-label">Appearance</div>
{renderModeButtons()}
</div>