From 2f8986624a62705c91cdce2617b10ea6a1687778 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Tue, 9 Dec 2025 04:05:50 +0530 Subject: [PATCH] feat: toolbar design updates --- .../EnvironmentSelector/StyledWrapper.js | 39 +++++--- .../Environments/EnvironmentSelector/index.js | 4 +- .../RequestTabs/CollectionToolBar/index.js | 14 +-- .../JsSandboxMode/StyledWrapper.js | 28 ++++-- .../SecuritySettings/JsSandboxMode/index.js | 12 ++- packages/bruno-app/src/themes/dark.js | 94 +++++++++++++------ packages/bruno-app/src/themes/light.js | 70 +++++++++++--- 7 files changed, 185 insertions(+), 76 deletions(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index d979718f1..1f05e9c03 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js @@ -5,43 +5,52 @@ const Wrapper = styled.div` border-radius: ${(props) => props.theme.border.radius.base}; padding: 0.25rem 0.5rem 0.25rem 0.75rem; user-select: none; - background-color: transparent; - border: 1px solid ${(props) => props.theme.dropdown.selectedColor}; + background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg}; + border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border}; line-height: 1rem; + transition: all 0.15s ease; + + &:hover { + border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBorder}; + background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.hoverBg}; + } .caret { margin-left: 0.25rem; - color: rgb(140, 140, 140); - fill: rgb(140, 140, 140); + color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret}; + fill: ${(props) => props.theme.app.collection.toolbar.environmentSelector.caret}; + align-self: center; } .env-icon { margin-right: 0.25rem; - color: ${(props) => props.theme.dropdown.selectedColor}; + color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.icon}; } .env-text { - color: ${(props) => props.theme.dropdown.selectedColor}; - font-size: ${(props) => props.theme.font.size.base}; + color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.text}; display: block; } .env-separator { - color: #8c8c8c; + color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator}; margin: 0 0.25rem; - opacity: 0.7; } .env-text-inactive { - color: ${(props) => props.theme.dropdown.color}; - font-size: ${(props) => props.theme.font.size.base}; - opacity: 0.7; + color: ${(props) => props.theme.colors.text.muted}; + font-size: ${(props) => props.theme.font.size.sm}; } &.no-environments { - background-color: ${(props) => props.theme.sidebar.badge.bg}; - border: 1px solid transparent; - color: ${(props) => props.theme.dropdown.secondaryText}; + color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.text}; + background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.bg}; + border: 1px dashed ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.border}; + + &:hover { + border-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBorder}; + background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.noEnvironment.hoverBg}; + } } } diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js index eb7bbc5e0..924fcaba3 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js @@ -162,7 +162,7 @@ const EnvironmentSelector = ({ collection }) => { )} ) : ( - No environments + No Environment ); return ( @@ -174,7 +174,7 @@ const EnvironmentSelector = ({ collection }) => { data-testid="environment-selector-trigger" > {displayContent} - + ); }); diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js index fe88ee9cc..438c76807 100644 --- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js +++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js @@ -49,22 +49,24 @@ const CollectionToolBar = ({ collection }) => { {collection?.name}
- - - - + - + - + + + + + + diff --git a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js index cad253fd9..915edceb3 100644 --- a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js +++ b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js @@ -1,15 +1,29 @@ import styled from 'styled-components'; const StyledWrapper = styled.div` - .safe-mode { - padding: 0.15rem 0.3rem; - color: ${(props) => props.theme.colors.text.green}; - border: solid 1px ${(props) => props.theme.colors.text.green} !important; + .sandbox-icon { + display: flex; + align-items: center; + justify-content: center; + width: 1.375rem; + height: 1.375rem; + border-radius: ${(props) => props.theme.border.radius.base}; + cursor: pointer; + transition: all 0.15s ease; + + &:hover { + opacity: 0.8; + } } + + .safe-mode { + background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.bg}; + color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.safeMode.color}; + } + .developer-mode { - padding: 0.15rem 0.3rem; - color: ${(props) => props.theme.colors.text.yellow}; - border: solid 1px ${(props) => props.theme.colors.text.yellow} !important; + background-color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.bg}; + color: ${(props) => props.theme.app.collection.toolbar.sandboxMode.developerMode.color}; } `; diff --git a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js index 9c7fb679c..2524f09ef 100644 --- a/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js +++ b/packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js @@ -1,5 +1,5 @@ import { useDispatch } from 'react-redux'; -import { IconShieldLock } from '@tabler/icons'; +import { IconShieldCheck, IconCode } from '@tabler/icons'; import { addTab } from 'providers/ReduxStore/slices/tabs'; import { uuid } from 'utils/common/index'; import JsSandboxModeModal from '../JsSandboxModeModal'; @@ -23,18 +23,20 @@ const JsSandboxMode = ({ collection }) => { {jsSandboxMode === 'safe' && (
- Safe Mode +
)} {jsSandboxMode === 'developer' && (
- Developer Mode +
)} {!jsSandboxMode ? : null} diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index 1a3439850..6dc631a41 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -1,12 +1,17 @@ const colors = { - BRAND: '#546de5', + BRAND: '#d9a342', TEXT: '#d4d4d4', + TEXT_MUTED: '#858585', TEXT_LINK: '#569cd6', - BACKGROUND: '#1e1e1e', + BG: '#1e1e1e', + + GREEN: '#4ec9b0', + YELLOW: '#d9a342', GRAY_1: '#666666', GRAY_2: '#444444', - GRAY_3: '#252526', + GRAY_3: '#3D3D3D', + GRAY_4: '#252526', CODEMIRROR_TOKENS: { DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast @@ -25,7 +30,7 @@ const darkTheme = { brand: colors.BRAND, text: colors.TEXT, textLink: colors.TEXT_LINK, - bg: colors.BACKGROUND, + bg: colors.BG, font: { size: { @@ -56,11 +61,11 @@ const darkTheme = { colors: { text: { - green: 'rgb(11 178 126)', + green: colors.GREEN, danger: '#f06f57', - muted: '#9d9d9d', + muted: colors.TEXT_MUTED, purple: '#cd56d6', - yellow: '#d9a342' + yellow: colors.YELLOW }, bg: { danger: '#d03544' @@ -96,19 +101,19 @@ const darkTheme = { sidebar: { color: '#ccc', muted: '#9d9d9d', - bg: colors.GRAY_3, + bg: colors.GRAY_4, dragbar: { border: 'transparent', activeBorder: colors.GRAY_1 }, badge: { - bg: '#3D3D3D' + bg: colors.GRAY_3 }, search: { border: '1px solid transparent', - bg: '#3D3D3D' + bg: colors.GRAY_3 }, collection: { @@ -151,7 +156,7 @@ const darkTheme = { listItem: { hoverBg: '#2A2D2F', - activeBg: '#3D3D3D' + activeBg: colors.GRAY_3 }, workspace: { @@ -177,7 +182,7 @@ const darkTheme = { indentBorder: 'solid 1px #313131', activeBg: '#37373c', search: { - bg: '#3D3D3D' + bg: colors.GRAY_3 } } }, @@ -200,7 +205,7 @@ const darkTheme = { requestTabPanel: { url: { - bg: colors.BACKGROUND, + bg: colors.BG, icon: 'rgb(204, 204, 204)', iconDanger: '#fa5343', errorHoverBg: '#4a2a2a', @@ -232,7 +237,7 @@ const darkTheme = { bg: '#252526', table: { thead: { - bg: '#3D3D3D', + bg: colors.GRAY_3, color: '#ccc' } } @@ -245,12 +250,12 @@ const darkTheme = { collection: { environment: { - bg: '#3D3D3D', + bg: colors.GRAY_3, settings: { - bg: '#3D3D3D', + bg: colors.GRAY_3, sidebar: { - bg: '#3D3D3D', + bg: colors.GRAY_3, borderRight: '#4f4f4f' }, item: { @@ -267,7 +272,7 @@ const darkTheme = { }, notifications: { - bg: '#3D3D3D', + bg: colors.GRAY_3, list: { bg: '3D3D3D', borderRight: '#4f4f4f', @@ -354,25 +359,25 @@ const darkTheme = { hoverBg: '#1e1e1e' }, active: { - bg: '#3D3D3D' + bg: colors.GRAY_3 }, shortTab: { color: '#ccc', bg: 'transparent', hoverColor: '#ccc', - hoverBg: '#3D3D3D' + hoverBg: colors.GRAY_3 } }, codemirror: { - bg: colors.BACKGROUND, - border: colors.BACKGROUND, + bg: colors.BG, + border: colors.BG, placeholder: { color: '#a2a2a2', opacity: 0.5 }, gutter: { - bg: colors.BACKGROUND + bg: colors.BG }, variable: { valid: 'rgb(11 178 126)', @@ -384,11 +389,11 @@ const darkTheme = { boxShadow: 'rgb(0 0 0 / 36%) 0px 2px 8px', editorBg: '#292929', iconColor: '#989898', - editorBorder: '#3D3D3D', + editorBorder: colors.GRAY_3, editorFocusBorder: '#CCCCCC', editableDisplayHoverBg: 'rgba(255,255,255,0.03)', border: '#4F4F4F', - editorBorder: '#3D3D3D' + editorBorder: colors.GRAY_3 } }, tokens: { @@ -419,7 +424,7 @@ const darkTheme = { }, plainGrid: { - hoverBg: '#3D3D3D' + hoverBg: colors.GRAY_3 }, scrollbar: { @@ -593,7 +598,7 @@ const darkTheme = { buttonIconColor: '#fff', border: '#444', urlBar: { - border: '#3D3D3D', + border: colors.GRAY_3, bg: '#292929' }, table: { @@ -605,6 +610,41 @@ const darkTheme = { checkbox: { color: '#000' } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.BG, + border: colors.GRAY_2, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.TEXT_MUTED, + separator: colors.GRAY_2, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_1, + + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.BG, + border: colors.GRAY_2, + hoverBg: colors.BG, + hoverBorder: colors.GRAY_1 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(78, 201, 176, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgb(217, 163, 66, 0.11)', + color: colors.YELLOW + } + } + } + } } }; diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 623713ee1..d9265aa72 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -1,14 +1,21 @@ const colors = { - BRAND: '#546de5', + BRAND: '#cf8730', TEXT: 'rgb(52, 52, 52)', + TEXT_MUTED: '#838383', TEXT_LINK: '#1663bb', BACKGROUND: '#fff', + WHITE: '#fff', BLACK: '#000', + GREEN: '#047857', + YELLOW: '#cf8730', + GRAY_1: '#f8f8f8', - GRAY_2: '#eaeaea', - GRAY_3: '#e5e5e5', - GRAY_4: '#cbcbcb', + GRAY_2: '#f3f3f3', + GRAY_3: '#eaeaea', + GRAY_4: '#e5e5e5', + GRAY_5: '#cbcbcb', + GRAY_6: '#b0b0b0', CODEMIRROR_TOKENS: { DEFINITION: '#566f4e', // Deep moss @@ -58,12 +65,12 @@ const lightTheme = { colors: { text: { - green: '#047857', + green: colors.GREEN, danger: '#B91C1C', warning: '#f57c00', muted: '#838383', purple: '#8e44ad', - yellow: '#cf8730' + yellow: colors.YELLOW }, bg: { danger: '#dc3545' @@ -101,8 +108,8 @@ const lightTheme = { muted: '#4b5563', bg: colors.GRAY_1, dragbar: { - border: colors.GRAY_3, - activeBorder: colors.GRAY_4 + border: colors.GRAY_4, + activeBorder: colors.GRAY_5 }, badge: { @@ -116,12 +123,12 @@ const lightTheme = { collection: { item: { - bg: colors.GRAY_2, - hoverBg: colors.GRAY_2, - focusBorder: colors.GRAY_4, - indentBorder: `solid 1px ${colors.GRAY_3}`, + bg: colors.GRAY_3, + hoverBg: colors.GRAY_3, + focusBorder: colors.GRAY_5, + indentBorder: `solid 1px ${colors.GRAY_4}`, active: { - indentBorder: `solid 1px ${colors.GRAY_3}` + indentBorder: `solid 1px ${colors.GRAY_4}` } } }, @@ -207,7 +214,7 @@ const lightTheme = { icon: '#515151', iconDanger: '#d91f11', errorHoverBg: '#fef2f2', - border: `solid 1px ${colors.GRAY_3}` + border: `solid 1px ${colors.GRAY_4}` }, dragbar: { border: '#efefef', @@ -615,6 +622,41 @@ const lightTheme = { checkbox: { color: '#fff' } + }, + + app: { + collection: { + toolbar: { + environmentSelector: { + bg: colors.WHITE, + border: colors.GRAY_4, + icon: colors.BRAND, + text: colors.TEXT, + caret: colors.GRAY_6, + separator: colors.GRAY_4, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_5, + + noEnvironment: { + text: colors.TEXT_MUTED, + bg: colors.WHITE, + border: colors.GRAY_5, + hoverBg: colors.WHITE, + hoverBorder: colors.GRAY_6 + } + }, + sandboxMode: { + safeMode: { + bg: 'rgba(4, 120, 87, 0.12)', + color: colors.GREEN + }, + developerMode: { + bg: 'rgba(204, 145, 73, 0.15)', + color: colors.YELLOW + } + } + } + } } };