Merge pull request #6463 from usebruno/feat/design-tweaks

feat: design tweaks
2026-06-16 04:11:29 +00:00 · 2025-12-19 00:32:49 +05:30
parent 397ccbb425 8c1975ba7b
commit 6a05b04676
18 changed files with 82 additions and 91 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Vars/index.js
@@ -14,11 +14,11 @@ const Vars = ({ collection }) => {
  return (
    <StyledWrapper className="w-full flex flex-col">
      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+        <div className="mb-3 title text-xs">Pre Request</div>
        <VarsTable collection={collection} vars={requestVars} varType="request" />
      </div>
      <div className="flex-1">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <div className="mt-3 mb-3 title text-xs">Post Response</div>
        <VarsTable collection={collection} vars={responseVars} varType="response" />
      </div>
      <div className="mt-6">
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -17,18 +17,18 @@ const StyledWrapper = styled.div`
    border-collapse: collapse;
    table-layout: fixed;
    font-size: ${(props) => props.theme.font.size.base};
+    font-weight: normal !important;
  }

  thead {
-    color: ${(props) => props.theme.colors.text} !important;
+    color: ${(props) => props.theme.table.thead.color} !important;
    background: ${(props) => props.theme.sidebar.bg};
-    font-size: ${(props) => props.theme.font.size.base};
    user-select: none;

    border: none !important;

    td {
-      padding: 8px 10px;
+      padding: 5px 10px !important;
      border-top: none !important;
      border-left: none !important;
      border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
@@ -55,7 +55,7 @@ const StyledWrapper = styled.div`
      }

      td {
-        padding: 2px 10px;
+        padding: 1px 10px !important;
        border-top: none !important;
        border-left: none !important;
        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
@@ -93,7 +93,6 @@ const StyledWrapper = styled.div`
    background-color: transparent;
    color: ${(props) => props.theme.text};
    padding: 0;
-    font-size: 12px;
    border-radius: 4px;
    transition: all 0.15s ease;

@@ -106,7 +105,7 @@ const StyledWrapper = styled.div`
    cursor: pointer;
    width: 14px;
    height: 14px;
-    accent-color: ${(props) => props.theme.workspace.accent};
+    accent-color: ${(props) => props.theme.colors.accent};
    vertical-align: middle;
    margin: 0;
  }
--- 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
@@ -39,13 +39,13 @@ const Wrapper = styled.div`
    }

    thead {
-      color: ${(props) => props.theme.colors.text};
+      color: ${(props) => props.theme.table.thead.color} !important;
      background: ${(props) => props.theme.sidebar.bg};
      font-size: ${(props) => props.theme.font.size.base};
      user-select: none;

      td {
-        padding: 8px 10px;
+        padding: 5px 10px !important;
        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
        border-right: ${(props) => props.theme.workspace.environments.indentBorder};

@@ -107,7 +107,6 @@ const Wrapper = styled.div`
    background-color: transparent;
    color: ${(props) => props.theme.text};
    padding: 0;
-    font-size: 12px;
    border-radius: 4px;
    transition: all 0.15s ease;

@@ -120,7 +119,7 @@ const Wrapper = styled.div`
    cursor: pointer;
    width: 14px;
    height: 14px;
-    accent-color: ${(props) => props.theme.workspace.accent};
+    accent-color: ${(props) => props.theme.colors.accent};
    vertical-align: middle;
    margin: 0;
  }
@@ -147,12 +146,11 @@ const Wrapper = styled.div`
  }

  .submit {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
    border: none;
-    background: ${(props) => props.theme.workspace.accent};
+    background: ${(props) => props.theme.brand};
    color: ${(props) => props.theme.bg};
    cursor: pointer;
    transition: opacity 0.15s ease;
@@ -165,18 +163,16 @@ const Wrapper = styled.div`
  .reset {
    background: transparent;
    padding: 6px 16px;
-    border: 1px solid ${(props) => props.theme.workspace.accent};
-    color: ${(props) => props.theme.workspace.accent};
+    color: ${(props) => props.theme.brand};
    &:hover {
      opacity: 0.9;
    }
  }

  .discard {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
    background: transparent;
    color: ${(props) => props.theme.text};
    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -16,8 +16,8 @@ const StyledWrapper = styled.div`
    flex-shrink: 0;

    .title {
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
      color: ${(props) => props.theme.text};
      margin: 0;
    }
@@ -35,7 +35,7 @@ const StyledWrapper = styled.div`
          outline: none;
          color: ${(props) => props.theme.text};
          font-size: 15px;
-          font-weight: 600;
+          font-weight: 500;
          padding: 4px 8px;
          border-radius: 5px;
        }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -41,8 +41,8 @@ const StyledWrapper = styled.div`
    padding: 16px 16px 12px 16px;
    
    .title {
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
      color: ${(props) => props.theme.text};
      margin: 0;
    }
--- a/packages/bruno-app/src/components/FolderSettings/Vars/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/Vars/index.js
@@ -14,11 +14,11 @@ const Vars = ({ collection, folder }) => {
  return (
    <StyledWrapper className="w-full flex flex-col">
      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+        <div className="mb-3 title text-xs">Pre Request</div>
        <VarsTable folder={folder} collection={collection} vars={requestVars} varType="request" />
      </div>
      <div className="flex-1">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <div className="mt-3 mb-3 title text-xs">Post Response</div>
        <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
      </div>
      <div className="mt-6">
--- a/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/StyledWrapper.js
@@ -40,7 +40,7 @@ const StyledWrapper = styled.div`
    gap: 6px;
    padding: 6px 12px;
    border-radius: ${(props) => props.theme.border.radius.base};
-    background: ${(props) => props.theme.workspace.accent};
+    background: ${(props) => props.theme.brand};
    color: white;
    font-size: ${(props) => props.theme.font.size.sm};
    font-weight: 500;
@@ -87,7 +87,7 @@ const StyledWrapper = styled.div`
    }

    &.regular {
-      color: ${(props) => props.theme.workspace.accent};
+      color: ${(props) => props.theme.brand};
    }
  }

--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -136,7 +136,7 @@ const QueryParams = ({ item, collection }) => {
  return (
    <StyledWrapper className="w-full flex flex-col">
      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Query</div>
+        <div className="mb-3 title text-xs">Query</div>
        <EditableTable
          columns={queryColumns}
          rows={queryParams || []}
@@ -151,7 +151,7 @@ const QueryParams = ({ item, collection }) => {
          </button>
        </div>

-        <div className="mb-2 title text-xs flex items-stretch">
+        <div className="mb-3 title text-xs flex items-stretch">
          <span>Path</span>
          <InfoTip infotipId="path-param-InfoTip">
            <div>
--- a/packages/bruno-app/src/components/RequestPane/Vars/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/index.js
@@ -10,11 +10,11 @@ const Vars = ({ item, collection }) => {
  return (
    <StyledWrapper className="w-full flex flex-col">
      <div className="mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+        <div className="mb-3 title text-xs">Pre Request</div>
        <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
      </div>
      <div>
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+        <div className="mt-3 mb-3 title text-xs">Post Response</div>
        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
      </div>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleHeaders/index.js
@@ -130,7 +130,7 @@ const ResponseExampleHeaders = ({ editMode, item, collection, exampleUid }) => {

  return (
    <StyledWrapper className="w-full mt-4">
-      <div className="mb-1 title text-xs font-bold">Headers</div>
+      <div className="mb-3 title text-xs font-bold">Headers</div>
      <EditableTable
        columns={columns}
        rows={headers || []}
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleParams/index.js
@@ -183,7 +183,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {

  return (
    <StyledWrapper className="w-full mt-4">
-      <div className="mb-1 title text-xs font-bold">Query parameters</div>
+      <div className="mb-3 title text-xs font-bold">Query parameters</div>
      <EditableTable
        columns={queryColumns}
        rows={queryParams || []}
@@ -205,7 +205,7 @@ const ResponseExampleParams = ({ editMode, item, collection, exampleUid }) => {
      )}
      {pathParams && pathParams.length > 0 && (
        <>
-          <div className="mb-1 title text-xs font-bold flex items-stretch mt-4">
+          <div className="mb-3 title text-xs font-bold flex items-stretch mt-4">
            <span>Path parameters</span>
            <InfoTip infotipId="path-param-InfoTip">
              <div>
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
@@ -120,7 +120,7 @@ const StyledWrapper = styled.div`

      &::before {
        content: '\\2022';
-        color: ${(props) => props.theme.workspace.accent};
+        color: ${(props) => props.theme.brand};
        margin-right: 6px;
      }
    }
@@ -129,8 +129,8 @@ const StyledWrapper = styled.div`
  .add-docs-btn {
    padding: 8px 16px;
    background: transparent;
-    color: ${(props) => props.theme.workspace.accent};
-    border: 1px solid ${(props) => props.theme.workspace.accent};
+    color: ${(props) => props.theme.brand};
+    border: 1px solid ${(props) => props.theme.brand};
    border-radius: ${(props) => props.theme.border.radius.base};
    font-size: ${(props) => props.theme.font.size.sm};
    font-weight: 500;
@@ -138,7 +138,7 @@ const StyledWrapper = styled.div`
    transition: all 0.15s ease;

    &:hover {
-      background: ${(props) => props.theme.workspace.accent}14;
+      background: ${(props) => props.theme.brand}10;
    }
  }
 `;
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -16,7 +16,6 @@ const Wrapper = styled.div`
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
-    font-size: 12px;

    td {
      vertical-align: middle;
@@ -39,13 +38,13 @@ const Wrapper = styled.div`
    }

    thead {
-      color: ${(props) => props.theme.colors.text};
+      color: ${(props) => props.theme.table.thead.color} !important;
      background: ${(props) => props.theme.sidebar.bg};
      font-size: ${(props) => props.theme.font.size.base};
      user-select: none;
      
      td {
-        padding: 8px 10px;
+        padding: 5px 10px !important;
        border-bottom: ${(props) => props.theme.workspace.environments.indentBorder};
        border-right: ${(props) => props.theme.workspace.environments.indentBorder};
        
@@ -107,7 +106,6 @@ const Wrapper = styled.div`
    background-color: transparent;
    color: ${(props) => props.theme.text};
    padding: 0;
-    font-size: 12px;
    border-radius: 4px;
    transition: all 0.15s ease;

@@ -120,7 +118,7 @@ const Wrapper = styled.div`
    cursor: pointer;
    width: 14px;
    height: 14px;
-    accent-color: ${(props) => props.theme.workspace.accent};
+    accent-color: ${(props) => props.theme.colors.accent};
    vertical-align: middle;
    margin: 0;
  }
@@ -147,12 +145,11 @@ const Wrapper = styled.div`
  }
  
  .submit {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
    border: none;
-    background: ${(props) => props.theme.workspace.accent};
+    background: ${(props) => props.theme.brand};
    color: ${(props) => props.theme.bg};
    cursor: pointer;
    transition: opacity 0.15s ease;
@@ -165,18 +162,16 @@ const Wrapper = styled.div`
  .reset {
    background: transparent;
    padding: 6px 16px;
-    border: 1px solid ${(props) => props.theme.workspace.accent};
-    color: ${(props) => props.theme.workspace.accent};
+    color: ${(props) => props.theme.brand};
    &:hover {
      opacity: 0.9;
    }
  }
  
  .discard {
-    padding: 7px 16px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
+    padding: 6px 16px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    border-radius: ${(props) => props.theme.border.radius.base};
    background: transparent;
    color: ${(props) => props.theme.text};
    border: ${(props) => props.theme.sidebar.collection.item.indentBorder};
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/StyledWrapper.js
@@ -16,8 +16,8 @@ const StyledWrapper = styled.div`
    flex-shrink: 0;
    
    .title {
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
      color: ${(props) => props.theme.text};
      margin: 0;
    }
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/StyledWrapper.js
@@ -41,8 +41,8 @@ const StyledWrapper = styled.div`
    padding: 16px 16px 12px 16px;
    
    .title {
-      font-size: 13px;
-      font-weight: 600;
+      font-size: ${(props) => props.theme.font.size.base};
+      font-weight: 500;
      color: ${(props) => props.theme.text};
      margin: 0;
    }
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/StyledWrapper.js
@@ -67,17 +67,16 @@ const StyledWrapper = styled.div`
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
-    border: 1px solid ${(props) => props.theme.workspace.accent};
+    border: 1px solid ${(props) => props.theme.brand};
    border-radius: ${(props) => props.theme.border.radius.base};
    background: transparent;
-    color: ${(props) => props.theme.workspace.accent};
+    color: ${(props) => props.theme.brand};
    font-size: ${(props) => props.theme.font.size.sm};
-    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover {
-      background: ${(props) => props.theme.workspace.accent}14;
+      background: ${(props) => props.theme.brand}10;
    }
  }

--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -75,7 +75,8 @@ const darkTheme = {
    },
    bg: {
      danger: '#d03544'
-    }
+    },
+    accent: colors.BRAND
  },

  input: {
@@ -198,18 +199,18 @@ const darkTheme = {

  request: {
    methods: {
-      get: '#8cd656',
-      post: '#cd56d6',
-      put: '#d69956',
-      delete: '#f06f57',
-      // customize these colors if needed
-      patch: '#d69956',
-      options: '#d69956',
-      head: '#d69956'
+      get: '#5fbf7a', // Fresh jade — readable, calm success tone
+      post: '#b58adf', // Soft amethyst — cool, composed accent
+      put: '#d7a35a', // Warm amber-bronze — bridges BRAND + STRING
+      delete: '#e06c75', // VSCode red — destructive but readable
+      patch: '#d7a35a', // Same as PUT
+      options: '#c8b072', // Muted olive-gold — neutral method
+      head: '#9da5b4' // Cool gray-blue — subtle, low priority
    },
-    grpc: '#6366f1',
-    ws: '#d9a342',
-    gql: '#e535ab'
+
+    grpc: '#5fb3c4', // Steel cyan — technical, protocol-heavy, calm
+    ws: '#d9a342', // Brand gold — perfect as-is
+    gql: '#c96ab1' // Softened GraphQL pink — less neon, still iconic
  },

  requestTabPanel: {
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -79,7 +79,8 @@ const lightTheme = {
    },
    bg: {
      danger: '#dc3545'
-    }
+    },
+    accent: '#b96f1d'
  },

  input: {
@@ -202,18 +203,18 @@ const lightTheme = {

  request: {
    methods: {
-      get: 'rgb(5, 150, 105)',
-      post: '#8e44ad',
-      put: '#ca7811',
-      delete: 'rgb(185, 28, 28)',
-      // customize these colors if needed
-      patch: '#ca7811',
-      options: '#ca7811',
-      head: '#ca7811'
+      get: '#3f8f7a', // Muted jade green (aligned with NUMBER / VARIABLE)
+      post: '#7c5aa8', // Soft plum (matches ATOM family)
+      put: '#b8742f', // Warm bronze (close to BRAND, slightly darker)
+      delete: '#a54b4b', // Muted brick red (fits KEYWORD ruby tone)
+      patch: '#b8742f', // Same as PUT (semantic consistency)
+      options: '#8a7a52', // Olive slate (neutral, non-invasive)
+      head: '#6b7a8f' // Slate blue (reuses OPERATOR tone)
    },
-    grpc: '#6366f1',
-    ws: '#f59e0b',
-    gql: '#e535ab'
+
+    grpc: '#5b65c8', // Muted indigo (technical, calm)
+    ws: '#c28a2c', // Golden bronze (pairs with BRAND without overpowering)
+    gql: '#b04a8f' // Dusty magenta (softened GraphQL pink)
  },

  requestTabPanel: {