chore: updated request tab padding (#6368)

* chore: updated request tab padding
2026-06-15 20:01:28 +00:00 · 2025-12-10 04:30:58 +05:30
parent 43f24ad0f1
commit 7fe6b47aa0
16 changed files with 26 additions and 11 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
  .current-environment {
    border-radius: ${(props) => props.theme.border.radius.base};
-    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    padding: 0.25rem 0.3rem 0.25rem 0.5rem;
    user-select: none;
    background-color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.bg};
    border: 1px solid ${(props) => props.theme.app.collection.toolbar.environmentSelector.border};
@@ -34,7 +34,7 @@ const Wrapper = styled.div`

    .env-separator {
      color: ${(props) => props.theme.app.collection.toolbar.environmentSelector.separator};
-      margin: 0 0.25rem;
+      margin: 0 0.35rem;
    }

    .env-text-inactive {
--- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
@@ -22,6 +22,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
@@ -3,11 +3,8 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
  &.tabs {
    div.more-tabs {
-      color: ${(props) => props.theme.text} !important;
-      background-color: ${(props) => props.theme.requestTabs.bg} !important;
-      &:hover {
-        background-color: ${(props) => props.theme.requestTabs.icon.hoverBg} !important;
-      }
+      color: var(--color-tab-inactive) !important;
+      border-bottom: solid 2px transparent;
    }

    div.tab {
@@ -34,6 +31,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
-import { IconDots } from '@tabler/icons';
+import { IconChevronDown } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';

 const DROPDOWN_WIDTH = 60;
@@ -154,8 +154,9 @@ const RequestPaneTabs = ({
      {overflowTabs.length > 0 && (
        <Dropdown
          icon={(
-            <div className="tab more-tabs select-none flex items-center cursor-pointer rounded-md" style={{ padding: '2px 8px' }}>
-              <IconDots size={18} />
+            <div className="more-tabs select-none flex items-center cursor-pointer gap-1">
+              <span>More</span>
+              <IconChevronDown size={14} strokeWidth={2} />
            </div>
          )}
          placement="bottom-start"
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -24,6 +24,9 @@ const StyledWrapper = styled.div`
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.8125rem;
+
+    // so that the name does not cutoff when italicized
+    padding-right: 2px;
  }
 `;

--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
@@ -51,6 +51,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
@@ -25,6 +25,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
@@ -25,6 +25,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
@@ -20,6 +20,7 @@ const StyledWrapper = styled.div`
      }

      &.active {
+        font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;
        color: ${(props) => props.theme.tabs.active.color} !important;
        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
      }
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -334,6 +334,7 @@ const darkTheme = {
  tabs: {
    marginRight: '1.2rem',
    active: {
+      fontWeight: 400,
      color: '#CCCCCC',
      border: '#d9a342'
    },
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -7,6 +7,7 @@ const colors = {

  WHITE: '#fff',
  BLACK: '#000',
+  SLATE_BLACK: '#343434',
  GREEN: '#047857',
  YELLOW: '#cf8730',

@@ -340,7 +341,8 @@ const lightTheme = {
  tabs: {
    marginRight: '1.2rem',
    active: {
-      color: '#343434',
+      fontWeight: 400,
+      color: colors.SLATE_BLACK,
      border: '#cf8730'
    },
    secondary: {