feat: update statusbar styling, enhance cookie button accessibility, and adjust theme colors (#5185)

Co-authored-by: Maintainer Bruno <code@usebruno.com>

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

packages/bruno-app/src/components/StatusBar/index.js

@@ -71,18 +71,6 @@ const StatusBar = () => {
               </button>
             </ToolHint>
             
-            <ToolHint text="Cookies" toolhintId="Cookies" place="top" offset={10}>
-              <button
-                className="status-bar-button"
-                data-trigger="cookies"
-                onClick={() => setCookiesOpen(true)}
-                tabIndex={0}
-                aria-label="Open Cookies Settings"
-              >
-                <IconCookie size={16} strokeWidth={1.5} aria-hidden="true" />
-              </button>
-            </ToolHint>
-            
             <ToolHint text="Notifications" toolhintId="Notifications" place="top" offset={10}>
               <div className="status-bar-button">
                 <Notifications />
@@ -92,7 +80,20 @@ const StatusBar = () => {
         </div>
 
         <div className="status-bar-section">
-          <div className="status-bar-group">
+          <div className="flex items-center gap-3">
+            <button
+              className="status-bar-button"
+              data-trigger="cookies"
+              onClick={() => setCookiesOpen(true)}
+              tabIndex={0}
+              aria-label="Open Cookies"
+            >
+              <div className="console-button-content">
+                <IconCookie size={16} strokeWidth={1.5} aria-hidden="true" />
+                <span className="console-label">Cookies</span>
+              </div>
+            </button>
+            
             <button
               className={`status-bar-button ${errorCount > 0 ? 'has-errors' : ''}`}
               data-trigger="dev-tools"
@@ -100,13 +101,13 @@ const StatusBar = () => {
               tabIndex={0}
               aria-label={`Open Dev Tools${errorCount > 0 ? ` (${errorCount} errors)` : ''}`}
             >
-                <div className="console-button-content">
-                  <IconTool size={16} strokeWidth={1.5} aria-hidden="true" />
-                  <span className="console-label">Dev Tools</span>
-                  {errorCount > 0 && (
-                    <span className="error-count-inline">{errorCount}</span>
-                  )}
-                </div>
+              <div className="console-button-content">
+                <IconTool size={16} strokeWidth={1.5} aria-hidden="true" />
+                <span className="console-label">Dev Tools</span>
+                {errorCount > 0 && (
+                  <span className="error-count-inline">{errorCount}</span>
+                )}
+              </div>
             </button>
             
             <div className="status-bar-divider"></div>

packages/bruno-app/src/themes/dark.js

@@ -299,6 +299,7 @@ const darkTheme = {
 
   statusBar: {
     border: '#323233',
+    color: 'rgb(169, 169, 169)'
   },
   console: {
     bg: '#1e1e1e',

packages/bruno-app/src/themes/light.js

@@ -300,6 +300,7 @@ const lightTheme = {
 
   statusBar: {
     border: '#E9E9E9',
+    color: 'rgb(100, 100, 100)'
   },
   console: {
     bg: '#f8f9fa',