From 038fdbb040fdaf20231cdcf2d34b0d57200c6187 Mon Sep 17 00:00:00 2001 From: Bijin A B Date: Tue, 30 Dec 2025 03:22:25 +0530 Subject: [PATCH] feat(UX): update theme selector in preferences modal --- .../Preferences/Themes/StyledWrapper.js | 35 ++++----- .../components/Preferences/Themes/index.js | 72 +++++++++---------- .../src/components/Preferences/index.js | 8 +++ packages/bruno-app/src/themes/index.js | 10 +-- 4 files changed, 68 insertions(+), 57 deletions(-) diff --git a/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js index 75f8e72b3..69af595f4 100644 --- a/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js +++ b/packages/bruno-app/src/components/Preferences/Themes/StyledWrapper.js @@ -2,28 +2,30 @@ import styled from 'styled-components'; import { rgba } from 'polished'; const StyledWrapper = styled.div` - .theme-mode-selector { - display: flex; - gap: 16px; - margin-bottom: 24px; - } - + padding: 8px 0; + .theme-mode-option { - display: flex; - align-items: center; - gap: 6px; - cursor: pointer; - } + border: 1px solid ${(props) => props.theme.input.border}; + border-radius: ${(props) => props.theme.border.radius.md}; + box-shadow: none; + padding: 6px 8px; + width: auto; - .theme-variant-section { - margin-top: 20px; + &.selected { + border: 1px solid ${(props) => props.theme.accents.primary}; + background: ${(props) => rgba(props.theme.accents.primary, 0.07)}; + cursor: default; + } + + &:hover { + border: 1px solid ${(props) => props.theme.accents.primary}; + } } .theme-variant-label { font-size: ${(props) => props.theme.font.size.sm}; color: ${(props) => props.theme.colors.text.muted}; margin-bottom: 12px; - font-weight: 500; } .theme-variants { @@ -41,7 +43,7 @@ const StyledWrapper = styled.div` border-radius: ${(props) => props.theme.border.radius.md}; cursor: pointer; transition: all 0.15s ease; - min-width: 120px; + min-width: 165px; &:hover { border-color: ${(props) => props.theme.input.focusBorder}; @@ -50,6 +52,7 @@ const StyledWrapper = styled.div` &.selected { border-color: ${(props) => props.theme.accents.primary}; background: ${(props) => rgba(props.theme.accents.primary, 0.07)}; + cursor: default; } } @@ -90,7 +93,7 @@ const StyledWrapper = styled.div` .section-divider { height: 1px; background: ${(props) => props.theme.input.border}; - margin: 24px 0; + margin: 15px 0; } `; diff --git a/packages/bruno-app/src/components/Preferences/Themes/index.js b/packages/bruno-app/src/components/Preferences/Themes/index.js index 5d494ea70..c1241a664 100644 --- a/packages/bruno-app/src/components/Preferences/Themes/index.js +++ b/packages/bruno-app/src/components/Preferences/Themes/index.js @@ -1,12 +1,16 @@ import React from 'react'; +import { rgba } from 'polished'; import { useTheme } from 'providers/Theme'; -import { getLightThemes, getDarkThemes } from 'themes/index'; +import themes, { getLightThemes, getDarkThemes } from 'themes/index'; +import { IconBrightnessUp, IconMoon, IconDeviceDesktop } from '@tabler/icons'; import StyledWrapper from './StyledWrapper'; const ThemePreview = ({ themeId, isDark }) => { - const bgColor = isDark ? '#1e1e1e' : '#ffffff'; - const sidebarColor = isDark ? '#252526' : '#f8f8f8'; - const lineColor = isDark ? '#3d3d3d' : '#e5e5e5'; + const theme = themes[themeId] || themes[isDark ? 'dark' : 'light']; + + const bgColor = theme.background.base; + const sidebarColor = theme.sidebar.bg; + const lineColor = rgba(theme.brand, 0.5); return (
@@ -44,6 +48,12 @@ const Themes = () => { const lightThemes = getLightThemes(); const darkThemes = getDarkThemes(); + const themeModes = [ + { key: 'light', label: 'Light', icon: IconBrightnessUp }, + { key: 'dark', label: 'Dark', icon: IconMoon }, + { key: 'system', label: 'System', icon: IconDeviceDesktop } + ]; + const handleModeChange = (mode) => { setStoredTheme(mode); }; @@ -69,40 +79,30 @@ const Themes = () => {
Appearance
-
- - - -
+
+ {themeModes.map((mode) => { + const Icon = mode.icon; + const isSelected = storedTheme === mode.key; + + return ( + + ); + })} +
+ +
+ {storedTheme === 'light' && ( <> {renderThemeVariants(lightThemes, themeVariantLight, setThemeVariantLight, 'Light Theme')} diff --git a/packages/bruno-app/src/components/Preferences/index.js b/packages/bruno-app/src/components/Preferences/index.js index b8f365f5d..dcd060569 100644 --- a/packages/bruno-app/src/components/Preferences/index.js +++ b/packages/bruno-app/src/components/Preferences/index.js @@ -1,6 +1,7 @@ import Modal from 'components/Modal/index'; import classnames from 'classnames'; import React, { useState } from 'react'; +import { IconSettings, IconPalette, IconBrowser, IconUserCircle, IconKeyboard, IconZoomQuestion, IconSquareLetterB } from '@tabler/icons'; import Support from './Support'; import General from './General'; @@ -59,24 +60,31 @@ const Preferences = ({ onClose }) => {
setTab('general')}> + General
setTab('themes')}> + Themes
setTab('display')}> + Display
setTab('proxy')}> + Proxy
setTab('keybindings')}> + Keybindings
setTab('support')}> + Support
setTab('beta')}> + Beta
diff --git a/packages/bruno-app/src/themes/index.js b/packages/bruno-app/src/themes/index.js index 2bd122f6c..1bc3cbe95 100644 --- a/packages/bruno-app/src/themes/index.js +++ b/packages/bruno-app/src/themes/index.js @@ -32,7 +32,7 @@ const themes = { export const themeRegistry = { 'light': { id: 'light', - name: 'Bruno Light', + name: 'Light', mode: 'light' }, 'light-monochrome': { @@ -42,7 +42,7 @@ export const themeRegistry = { }, 'light-pastel': { id: 'light-pastel', - name: 'Bruno Light Pastel', + name: 'Light Pastel', mode: 'light' }, 'catppuccin-latte': { @@ -52,17 +52,17 @@ export const themeRegistry = { }, 'dark': { id: 'dark', - name: 'Bruno Dark', + name: 'Dark', mode: 'dark' }, 'dark-monochrome': { id: 'dark-monochrome', - name: 'Bruno Dark Monochrome', + name: 'Dark Monochrome', mode: 'dark' }, 'dark-pastel': { id: 'dark-pastel', - name: 'Bruno Dark Pastel', + name: 'Dark Pastel', mode: 'dark' }, 'catppuccin-frappe': {