diff --git a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js index 930753319..4304f37dc 100644 --- a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js +++ b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js @@ -5,12 +5,12 @@ const StyledWrapper = styled.div` display: flex; align-items: center; justify-content: space-between; - padding: 0 16px; - height: 22px; + padding: 0 1rem; + height: 1.5rem; background: ${(props) => props.theme.sidebar.bg}; border-top: 1px solid ${(props) => props.theme.statusBar.border}; - color: ${(props) => props.theme.sidebar.color}; - font-size: 12px; + color: ${(props) => props.theme.statusBar.color}; + font-size: 0.75rem; user-select: none; position: relative; } @@ -32,9 +32,7 @@ const StyledWrapper = styled.div` align-items: center; justify-content: center; padding: 0 4px; - color: ${(props) => props.theme.sidebar.color}; cursor: pointer; - opacity: 0.7; position: relative; outline: none; } @@ -43,13 +41,11 @@ const StyledWrapper = styled.div` display: flex; align-items: center; justify-content: center; - gap: 6px; + gap: 0.25rem; position: relative; } .console-label { - font-size: 11px; - font-weight: 500; white-space: nowrap; } @@ -66,17 +62,13 @@ const StyledWrapper = styled.div` width: 1px; height: 16px; background: ${(props) => props.theme.sidebar.dragbar}; - margin: 0 8px; - opacity: 0.3; + opacity: 0.4; } .status-bar-version { display: flex; align-items: center; padding: 2px 6px; - font-size: 10px; - color: ${(props) => props.theme.sidebar.muted}; - font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; } `; diff --git a/packages/bruno-app/src/components/StatusBar/index.js b/packages/bruno-app/src/components/StatusBar/index.js index fc4718bbb..64f7c8de0 100644 --- a/packages/bruno-app/src/components/StatusBar/index.js +++ b/packages/bruno-app/src/components/StatusBar/index.js @@ -71,18 +71,6 @@ const StatusBar = () => { - - - -
@@ -92,7 +80,20 @@ const StatusBar = () => {
-
+
+ +
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index f56217e7a..00a42cb66 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -299,6 +299,7 @@ const darkTheme = { statusBar: { border: '#323233', + color: 'rgb(169, 169, 169)' }, console: { bg: '#1e1e1e', diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index a012fdd31..ef3cd135b 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -300,6 +300,7 @@ const lightTheme = { statusBar: { border: '#E9E9E9', + color: 'rgb(100, 100, 100)' }, console: { bg: '#f8f9fa',