From d506c37516c1e3e7d6d0fc50ca4ad57c468cf9d1 Mon Sep 17 00:00:00 2001 From: Bijin A B Date: Sat, 3 Jan 2026 23:40:39 +0530 Subject: [PATCH] chore: adjust indent borders, table stripes, modal bg & tooltip bg (#6646) --- .../EnvironmentVariables/StyledWrapper.js | 2 +- .../EnvironmentList/StyledWrapper.js | 4 +--- .../ResponsePane/ResponseHeaders/StyledWrapper.js | 2 +- .../ResponsePane/TestResults/StyledWrapper.js | 1 - .../WSResponseHeaders/StyledWrapper.js | 2 +- .../CollectionItem/ExampleItem/StyledWrapper.js | 4 ---- .../Collection/CollectionItem/StyledWrapper.js | 4 ++-- .../bruno-app/src/components/ToolHint/index.js | 2 +- .../EnvironmentList/StyledWrapper.js | 4 +--- .../bruno-app/src/themes/dark/catppuccin-frappe.js | 4 ++-- .../src/themes/dark/catppuccin-macchiato.js | 4 ++-- .../bruno-app/src/themes/dark/catppuccin-mocha.js | 6 +++--- .../bruno-app/src/themes/dark/dark-monochrome.js | 4 ++-- packages/bruno-app/src/themes/dark/dark-pastel.js | 12 ++++++------ packages/bruno-app/src/themes/dark/dark.js | 14 +++++++------- packages/bruno-app/src/themes/dark/nord.js | 4 ++-- packages/bruno-app/src/themes/dark/vscode.js | 6 +++--- .../bruno-app/src/themes/light/catppuccin-latte.js | 4 ++-- .../bruno-app/src/themes/light/light-monochrome.js | 4 ++-- .../bruno-app/src/themes/light/light-pastel.js | 4 ++-- packages/bruno-app/src/themes/light/light.js | 4 ++-- packages/bruno-app/src/themes/light/vscode.js | 4 ++-- 22 files changed, 45 insertions(+), 54 deletions(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js index 4b062d3d3..0f378dc01 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js index ad083f5b1..4a4bcd183 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js index bde8205d2..e69662e67 100644 --- a/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js index 5b029386e..e7f6962b9 100644 --- a/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/TestResults/StyledWrapper.js @@ -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 { diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js index 141057784..a7ab0c195 100644 --- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js +++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSResponseHeaders/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js index 2c508f3f1..d720d8a49 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index 8018fb1e1..b40449f50 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js @@ -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; } } diff --git a/packages/bruno-app/src/components/ToolHint/index.js b/packages/bruno-app/src/components/ToolHint/index.js index 5da713159..f8e9ff06b 100644 --- a/packages/bruno-app/src/components/ToolHint/index.js +++ b/packages/bruno-app/src/components/ToolHint/index.js @@ -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 = { diff --git a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js index 567d56039..51febec61 100644 --- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js +++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js @@ -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; diff --git a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js index 7a9113f6d..331f67dff 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js @@ -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 diff --git a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js index cf8881696..79b52808d 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js @@ -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 diff --git a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js index 52d4796ac..09136cca1 100644 --- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js +++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js @@ -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 } diff --git a/packages/bruno-app/src/themes/dark/dark-monochrome.js b/packages/bruno-app/src/themes/dark/dark-monochrome.js index 33f1c7227..b9136d29b 100644 --- a/packages/bruno-app/src/themes/dark/dark-monochrome.js +++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js @@ -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 diff --git a/packages/bruno-app/src/themes/dark/dark-pastel.js b/packages/bruno-app/src/themes/dark/dark-pastel.js index 40b554e89..4dc777a6b 100644 --- a/packages/bruno-app/src/themes/dark/dark-pastel.js +++ b/packages/bruno-app/src/themes/dark/dark-pastel.js @@ -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 } diff --git a/packages/bruno-app/src/themes/dark/dark.js b/packages/bruno-app/src/themes/dark/dark.js index 0721808c4..128536ed8 100644 --- a/packages/bruno-app/src/themes/dark/dark.js +++ b/packages/bruno-app/src/themes/dark/dark.js @@ -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)' }, diff --git a/packages/bruno-app/src/themes/dark/nord.js b/packages/bruno-app/src/themes/dark/nord.js index e24a9ddc8..371a1b040 100644 --- a/packages/bruno-app/src/themes/dark/nord.js +++ b/packages/bruno-app/src/themes/dark/nord.js @@ -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 diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js index 40587b9c4..accfa70c9 100644 --- a/packages/bruno-app/src/themes/dark/vscode.js +++ b/packages/bruno-app/src/themes/dark/vscode.js @@ -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 } diff --git a/packages/bruno-app/src/themes/light/catppuccin-latte.js b/packages/bruno-app/src/themes/light/catppuccin-latte.js index 60fdb7ddc..681644d79 100644 --- a/packages/bruno-app/src/themes/light/catppuccin-latte.js +++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js @@ -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 diff --git a/packages/bruno-app/src/themes/light/light-monochrome.js b/packages/bruno-app/src/themes/light/light-monochrome.js index 3d543ab5c..d4a495544 100644 --- a/packages/bruno-app/src/themes/light/light-monochrome.js +++ b/packages/bruno-app/src/themes/light/light-monochrome.js @@ -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 diff --git a/packages/bruno-app/src/themes/light/light-pastel.js b/packages/bruno-app/src/themes/light/light-pastel.js index a5b0f8fe0..7a8fba56f 100644 --- a/packages/bruno-app/src/themes/light/light-pastel.js +++ b/packages/bruno-app/src/themes/light/light-pastel.js @@ -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 diff --git a/packages/bruno-app/src/themes/light/light.js b/packages/bruno-app/src/themes/light/light.js index d7fb74285..1ee38b9f8 100644 --- a/packages/bruno-app/src/themes/light/light.js +++ b/packages/bruno-app/src/themes/light/light.js @@ -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 diff --git a/packages/bruno-app/src/themes/light/vscode.js b/packages/bruno-app/src/themes/light/vscode.js index 504e5062b..84da83302 100644 --- a/packages/bruno-app/src/themes/light/vscode.js +++ b/packages/bruno-app/src/themes/light/vscode.js @@ -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