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

feat: toolbar design updates

Browse Source
This commit is contained in:
Anoop M D
2025-12-09 04:05:50 +05:30
parent 0197ae37c8
commit 2f8986624a
7 changed files with 185 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
View File

@@ -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};
}
}
}

4
packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
View File

@@ -162,7 +162,7 @@ const EnvironmentSelector = ({ collection }) => {
)}
</>
) : (
<span className="env-text-inactive max-w-36 truncate no-wrap">No environments</span>
<span className="env-text-inactive max-w-36 truncate no-wrap">No Environment</span>
);
return (
@@ -174,7 +174,7 @@ const EnvironmentSelector = ({ collection }) => {
data-testid="environment-selector-trigger"
>
{displayContent}
<IconCaretDown className="caret" size={14} strokeWidth={2} />
<IconCaretDown className="caret flex items-center justify-center" size={12} strokeWidth={2} />
</div>
);
});

14
packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js
View File

@@ -49,22 +49,24 @@ const CollectionToolBar = ({ collection }) => {
<span className="ml-2 mr-4 font-medium">{collection?.name}</span>
</div>
<div className="flex flex-3 items-center justify-end">
<span className="mr-2">
<JsSandboxMode collection={collection} />
</span>
<span className="mr-3">
<ToolHint text="Runner" toolhintId="RunnnerToolhintId" place="bottom">
<IconRun className="cursor-pointer" size={18} strokeWidth={1.5} onClick={handleRun} />
<IconRun className="cursor-pointer" size={16} strokeWidth={1.5} onClick={handleRun} />
</ToolHint>
</span>
<span className="mr-3">
<ToolHint text="Variables" toolhintId="VariablesToolhintId">
<IconEye className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewVariables} />
<IconEye className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewVariables} />
</ToolHint>
</span>
<span className="mr-3">
<ToolHint text="Collection Settings" toolhintId="CollectionSettingsToolhintId">
<IconSettings className="cursor-pointer" size={18} strokeWidth={1.5} onClick={viewCollectionSettings} />
<IconSettings className="cursor-pointer" size={16} strokeWidth={1.5} onClick={viewCollectionSettings} />
</ToolHint>
</span>
<span className="mr-2">
<ToolHint text="Javascript Sandbox" toolhintId="JavascriptSandboxToolhintId" place="bottom">
<JsSandboxMode collection={collection} />
</ToolHint>
</span>
<span>

28
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/StyledWrapper.js
View File

@@ -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};
}
`;

12
packages/bruno-app/src/components/SecuritySettings/JsSandboxMode/index.js
View File

@@ -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 }) => {
<StyledWrapper className="flex">
{jsSandboxMode === 'safe' && (
<div
className="flex items-center border rounded-md text-xs cursor-pointer safe-mode"
className="sandbox-icon safe-mode"
onClick={viewSecuritySettings}
title="Safe Mode"
>
Safe Mode
<IconShieldCheck size={14} strokeWidth={2} />
</div>
)}
{jsSandboxMode === 'developer' && (
<div
className="flex items-center border rounded-md text-xs cursor-pointer developer-mode"
className="sandbox-icon developer-mode"
onClick={viewSecuritySettings}
title="Developer Mode"
>
Developer Mode
<IconCode size={14} strokeWidth={2} />
</div>
)}
{!jsSandboxMode ? <JsSandboxModeModal collection={collection} /> : null}

94
packages/bruno-app/src/themes/dark.js
View File

@@ -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
}
}
}
}
}
};

70
packages/bruno-app/src/themes/light.js
View File

@@ -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
}
}
}
}
}
};