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

chore: adjust indent borders, table stripes, modal bg & tooltip bg (#6646)

Browse Source
This commit is contained in:
Bijin A B
2026-01-03 23:40:39 +05:30
committed by GitHub
parent 0c4ad0ed60
commit d506c37516
22 changed files with 45 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
View File

@@ -154,7 +154,7 @@ const Wrapper = styled.div`
border-radius: ${(props) => props.theme.border.radius.base};
background: transparent;
color: ${(props) => props.theme.text};
border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
border: 1px solid ${(props) => props.theme.border.border1};
cursor: pointer;
transition: all 0.15s ease;

4
packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
View File

@@ -23,14 +23,12 @@ const StyledWrapper = styled.div`
z-index: 10;
background: ${(props) => props.theme.bg};
padding: 12px;
border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
}
/* Left Sidebar */
.sidebar {
width: 240px;
min-width: 240px;
border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
display: flex;
flex-direction: column;
}
@@ -87,7 +85,7 @@ const StyledWrapper = styled.div`
padding: 6px 8px 6px 28px;
font-size: 12px;
background: transparent;
border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
border: 1px solid ${(props) => props.theme.border.border1};
border-radius: 5px;
color: ${(props) => props.theme.text};
transition: all 0.15s ease;

2
packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js
View File

@@ -13,7 +13,7 @@ const Wrapper = styled.div`
border-collapse: collapse;
thead {
color: #777777;
color: ${(props) => props.theme.table.thead.color};
font-size: ${(props) => props.theme.font.size.sm};
font-weight: 500;

1
packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js
View File

@@ -5,7 +5,6 @@ const StyledWrapper = styled.div`
.test-summary {
transition: background-color 0.2s;
border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
color: ${(props) => props.theme.text};
&:hover {

2
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js
View File

@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
border-collapse: collapse;
thead {
color: #777777;
color: ${(props) => props.theme.table.thead.color};
font-size: ${(props) => props.theme.font.size.sm};
font-weight: 500;
text-transform: uppercase;

4
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
View File

@@ -17,10 +17,6 @@ const StyledWrapper = styled.div`
}
}
.indent-block {
border-right: 1px solid ${(props) => props.theme.border.border1};
}
.collection-item-name {
height: 1.6rem;
cursor: pointer;

4
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
View File

@@ -17,7 +17,7 @@ const Wrapper = styled.div`
}
.indent-block {
border-right: 1px solid ${(props) => props.theme.border.border1};
border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
}
.collection-item-name {
@@ -133,7 +133,7 @@ const Wrapper = styled.div`
}
.indent-block {
border-right: 1px solid ${(props) => props.theme.border.border1} !important;
border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder} !important;
}
}

2
packages/bruno-app/src/components/ToolHint/index.js
View File

@@ -19,7 +19,7 @@ const ToolHint = ({
const { theme: contextTheme } = useTheme();
const appliedTheme = theme || contextTheme;
const toolhintBackgroundColor = appliedTheme?.background.surface1;
const toolhintBackgroundColor = appliedTheme?.background.surface0;
const toolhintTextColor = appliedTheme?.text;
const combinedToolhintStyle = {

4
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
View File

@@ -23,14 +23,12 @@ const StyledWrapper = styled.div`
z-index: 10;
background: ${(props) => props.theme.bg};
padding: 12px;
border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
}
/* Left Sidebar */
.sidebar {
width: 240px;
min-width: 240px;
border-right: 1px solid ${(props) => props.theme.sidebar.collection.item.indentBorder};
display: flex;
flex-direction: column;
}
@@ -87,7 +85,7 @@ const StyledWrapper = styled.div`
padding: 6px 8px 6px 28px;
font-size: 12px;
background: transparent;
border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
border: 1px solid ${(props) => props.theme.border.border1};
border-radius: 5px;
color: ${(props) => props.theme.text};
transition: all 0.15s ease;

4
packages/bruno-app/src/themes/dark/catppuccin-frappe.js
View File

@@ -190,9 +190,9 @@ const catppuccinFrappeTheme = {
bg: colors.SURFACE0,
hoverBg: colors.SURFACE0,
focusBorder: colors.SURFACE1,
indentBorder: `solid 1px ${colors.SURFACE2}`,
indentBorder: colors.SURFACE0,
active: {
indentBorder: `solid 1px ${colors.MAUVE}`
indentBorder: colors.SURFACE0
},
example: {
iconColor: colors.OVERLAY1

4
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
View File

@@ -190,9 +190,9 @@ const catppuccinMacchiatoTheme = {
bg: colors.SURFACE0,
hoverBg: colors.SURFACE0,
focusBorder: colors.SURFACE1,
indentBorder: `solid 1px ${colors.SURFACE2}`,
indentBorder: colors.SURFACE0,
active: {
indentBorder: `solid 1px ${colors.MAUVE}`
indentBorder: colors.SURFACE0
},
example: {
iconColor: colors.OVERLAY1

6
packages/bruno-app/src/themes/dark/catppuccin-mocha.js
View File

@@ -190,9 +190,9 @@ const catppuccinMochaTheme = {
bg: colors.SURFACE0,
hoverBg: colors.SURFACE0,
focusBorder: colors.SURFACE1,
indentBorder: `solid 1px ${colors.SURFACE2}`,
indentBorder: colors.SURFACE0,
active: {
indentBorder: `solid 1px ${colors.MAUVE}`
indentBorder: colors.SURFACE0
},
example: {
iconColor: colors.OVERLAY1
@@ -434,7 +434,7 @@ const catppuccinMochaTheme = {
thead: {
color: colors.TEXT
},
striped: colors.SURFACE0,
striped: rgba(colors.SURFACE0, 0.2),
input: {
color: colors.TEXT
}

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

@@ -177,9 +177,9 @@ const darkMonochromeTheme = {
bg: '#37373D',
hoverBg: '#2A2D2F',
focusBorder: '#4e4e4e',
indentBorder: 'solid 1px #585858',
indentBorder: colors.GRAY_2,
active: {
indentBorder: 'solid 1px #4c4c4c'
indentBorder: colors.GRAY_2
},
example: {
iconColor: colors.GRAY_5

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

@@ -196,10 +196,10 @@ const darkPastelTheme = {
item: {
bg: colors.GRAY_2,
hoverBg: colors.GRAY_3,
focusBorder: colors.BRAND,
indentBorder: `solid 1px ${colors.GRAY_4}`,
focusBorder: colors.GRAY_5,
indentBorder: colors.GRAY_3,
active: {
indentBorder: `solid 1px ${colors.BRAND}50`
indentBorder: colors.GRAY_3
},
example: {
iconColor: colors.GRAY_6
@@ -295,7 +295,7 @@ const darkPastelTheme = {
},
body: {
color: colors.TEXT,
bg: colors.GRAY_2
bg: colors.GRAY_1
},
input: {
bg: 'transparent',
@@ -434,11 +434,11 @@ const darkPastelTheme = {
},
table: {
border: colors.GRAY_4,
border: colors.GRAY_3,
thead: {
color: colors.TEXT_MUTED
},
striped: colors.GRAY_2,
striped: colors.GRAY_1,
input: {
color: colors.TEXT
}

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

@@ -28,7 +28,7 @@ export const palette = {
},
background: {
BASE: 'hsl(0deg 0% 10%)',
MANTLE: '#252526',
MANTLE: '#222224',
CRUST: '#1e1e1e',
SURFACE0: '#26292b',
SURFACE1: 'hsl(204, 4%, 23%)',
@@ -222,9 +222,9 @@ const darkTheme = {
bg: palette.background.SURFACE0,
hoverBg: palette.background.MANTLE,
focusBorder: palette.border.BORDER2,
indentBorder: `solid 1px ${palette.border.BORDER1}`,
indentBorder: palette.background.SURFACE0,
active: {
indentBorder: 'solid 1px #4c4c4c'
indentBorder: palette.background.SURFACE0
},
example: {
iconColor: palette.text.BASE
@@ -240,7 +240,7 @@ const darkTheme = {
dropdown: {
color: palette.text.BASE,
iconColor: palette.text.SUBTEXT2,
bg: palette.background.CRUST,
bg: palette.background.MANTLE,
hoverBg: palette.background.MANTLE,
shadow: 'none',
border: palette.border.BORDER1,
@@ -288,7 +288,7 @@ const darkTheme = {
responseOk: palette.hues.GREEN,
responseError: palette.hues.RED,
responsePending: palette.hues.BLUE,
responseOverlayBg: 'rgba(30, 30, 30, 0.6)',
responseOverlayBg: rgba(palette.background.BASE, 0.8),
card: {
bg: '#252526',
@@ -466,7 +466,7 @@ const darkTheme = {
thead: {
color: 'rgb(204, 204, 204)'
},
striped: '#2A2D2F',
striped: '#1e1e1e',
input: {
color: '#ccc'
}
@@ -487,7 +487,7 @@ const darkTheme = {
transition: 'all 0.1s ease'
},
infoTip: {
bg: '#1f1f1f',
bg: palette.background.MANTLE,
border: '#333333',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)'
},

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

@@ -196,9 +196,9 @@ const nordTheme = {
bg: colors.NORD1,
hoverBg: colors.NORD2,
focusBorder: colors.NORD3,
indentBorder: `solid 1px ${colors.NORD3}`,
indentBorder: colors.NORD2,
active: {
indentBorder: `solid 1px ${colors.NORD3}`
indentBorder: colors.NORD2
},
example: {
iconColor: colors.TEXT_MUTED

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

@@ -199,9 +199,9 @@ const vscodeDarkTheme = {
bg: colors.GRAY_2,
hoverBg: colors.GRAY_3,
focusBorder: colors.GRAY_4,
indentBorder: `solid 1px ${colors.BORDER}`,
indentBorder: colors.BORDER_LIGHT,
active: {
indentBorder: `solid 1px ${colors.BORDER}`
indentBorder: colors.BORDER_LIGHT
},
example: {
iconColor: colors.GRAY_7
@@ -440,7 +440,7 @@ const vscodeDarkTheme = {
thead: {
color: colors.TEXT
},
striped: colors.GRAY_2,
striped: colors.GRAY_1,
input: {
color: colors.TEXT
}

4
packages/bruno-app/src/themes/light/catppuccin-latte.js
View File

@@ -190,9 +190,9 @@ const catppuccinLatteTheme = {
bg: rgba(colors.SURFACE0, 0.5),
hoverBg: rgba(colors.SURFACE0, 0.7),
focusBorder: colors.LAVENDER,
indentBorder: `solid 1px ${colors.SURFACE1}`,
indentBorder: colors.SURFACE0,
active: {
indentBorder: `solid 1px ${colors.MAUVE}`
indentBorder: colors.SURFACE0
},
example: {
iconColor: colors.OVERLAY1

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

@@ -178,9 +178,9 @@ const lightMonochromeTheme = {
bg: colors.GRAY_3,
hoverBg: colors.GRAY_3,
focusBorder: colors.GRAY_5,
indentBorder: `solid 1px ${colors.GRAY_4}`,
indentBorder: colors.GRAY_4,
active: {
indentBorder: `solid 1px ${colors.GRAY_4}`
indentBorder: colors.GRAY_4
},
example: {
iconColor: colors.GRAY_7

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

@@ -194,9 +194,9 @@ const lightPastelTheme = {
bg: colors.GRAY_2,
hoverBg: rgba(colors.GRAY_3, 0.5),
focusBorder: colors.BRAND,
indentBorder: `solid 1px ${colors.GRAY_4}`,
indentBorder: colors.GRAY_3,
active: {
indentBorder: `solid 1px ${colors.BRAND}40`
indentBorder: colors.GRAY_3
},
example: {
iconColor: colors.GRAY_7

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

@@ -214,9 +214,9 @@ const lightTheme = {
bg: palette.background.SURFACE1,
hoverBg: palette.background.SURFACE1,
focusBorder: palette.border.BORDER2,
indentBorder: `solid 1px ${palette.border.BORDER1}`,
indentBorder: palette.border.BORDER1,
active: {
indentBorder: `solid 1px ${palette.border.BORDER1}`
indentBorder: palette.border.BORDER1
},
example: {
iconColor: palette.text.SUBTEXT2

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

@@ -198,9 +198,9 @@ const vscodeLightTheme = {
bg: colors.GRAY_2,
hoverBg: colors.GRAY_3,
focusBorder: colors.GRAY_5,
indentBorder: `solid 1px ${colors.BORDER}`,
indentBorder: colors.BORDER,
active: {
indentBorder: `solid 1px ${colors.BORDER}`
indentBorder: colors.BORDER
},
example: {
iconColor: colors.GRAY_7