Merge pull request #6345 from usebruno/feat/design-updates

feat: design updates
2026-06-15 20:01:28 +00:00 · 2025-12-08 14:42:06 +05:30
parent f87460b00e
commit f3aebf6374
30 changed files with 42 additions and 46 deletions
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .current-environment {
-    border-radius: 0.9375rem;
+    border-radius: ${(props) => props.theme.border.radius.base};
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    user-select: none;
    background-color: transparent;
--- a/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FolderSettings/StyledWrapper.js
@@ -8,7 +8,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  height: 2.3rem;
+  height: 2.1rem;
  border: ${(props) => props.theme.requestTabPanel.url.border};
  border-radius: ${(props) => props.theme.border.radius.base};

--- a/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  height: 2.3rem;
+  height: 2.1rem;
  border: ${(props) => props.theme.requestTabPanel.url.border};
  border-radius: ${(props) => props.theme.border.radius.base};

--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -127,7 +127,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
              handleGenerateCode(e);
            }}
          >
-            <IconCode color={theme.requestTabs.icon.color} strokeWidth={1.5} size={22} className="cursor-pointer" />
+            <IconCode color={theme.requestTabs.icon.color} strokeWidth={1.5} size={20} className="cursor-pointer" />
            <span className="infotiptext text-xs">Generate Code</span>
          </div>
          <div
@@ -142,7 +142,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
            <IconDeviceFloppy
              color={hasChanges ? theme.colors.text.yellow : theme.requestTabs.icon.color}
              strokeWidth={1.5}
-              size={22}
+              size={20}
              className={`${hasChanges ? 'cursor-pointer' : 'cursor-default'}`}
            />
            <span className="infotiptext text-xs">
@@ -153,7 +153,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
            <IconSquareRoundedX
              color={theme.requestTabPanel.url.iconDanger}
              strokeWidth={1.5}
-              size={22}
+              size={20}
              data-testid="cancel-request-icon"
              onClick={handleCancelRequest}
            />
@@ -161,7 +161,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
            <IconArrowRight
              color={theme.requestTabPanel.url.icon}
              strokeWidth={1.5}
-              size={22}
+              size={20}
              data-testid="send-arrow-icon"
            />
          )}
--- a/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  height: 2.3rem;
+  height: 2.1rem;
  position: relative;
  border: ${(props) => props.theme.requestTabPanel.url.border};
  border-radius: ${(props) => props.theme.border.radius.base};
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -243,7 +243,7 @@ const RequestTabPanel = () => {
        isVerticalLayout ? 'vertical-layout' : ''
      }`}
    >
-      <div className="pt-4 pb-3 px-4">
+      <div className="pt-3 pb-3 px-4">
        {
          isGrpcRequest
            ? <GrpcQueryUrl item={item} collection={collection} handleRun={handleRun} />
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js
@@ -47,7 +47,7 @@ const StyledWrapper = styled.div.attrs((props) => ({
    align-items: center;
    width: 22px;
    height: 22px;
-    border-radius: 4px;
+    border-radius: ${(props) => props.theme.border.radius.base};
    cursor: pointer;
    transition: background-color 0.12s ease;

@@ -68,8 +68,8 @@ const StyledWrapper = styled.div.attrs((props) => ({
  }

  .has-changes-icon {
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
  }

  .draft-icon-wrapper { 
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -15,7 +15,6 @@ const StyledWrapper = styled.div`

  .tab-method {
    font-size: 0.6875rem;
-    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@@ -61,7 +61,7 @@ const Wrapper = styled.div`
      padding: 6px 0;
      flex-shrink: 0;
      transition: background-color 0.15s ease;
-      margin-bottom: 4px;
+      margin-bottom: 3px;

      .tab-container {
        width: 100%;
@@ -84,13 +84,13 @@ const Wrapper = styled.div`
        mask-image: linear-gradient(
          to right,
          ${(props) => props.theme.requestTabs.color} 0%,
-          ${(props) => props.theme.requestTabs.color} calc(100% - 24px),
+          ${(props) => props.theme.requestTabs.color} calc(100% - 12px),
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          to right,
          ${(props) => props.theme.requestTabs.color} 0%,
-          ${(props) => props.theme.requestTabs.color} calc(100% - 24px),
+          ${(props) => props.theme.requestTabs.color} calc(100% - 12px),
          transparent 100%
        );
      }
@@ -115,7 +115,6 @@ const Wrapper = styled.div`
        border: 1px solid ${(props) => props.theme.requestTabs.bottomBorder};
        border-bottom-color: ${(props) => props.theme.bg || '#ffffff'};
        border-radius: 8px 8px 0 0;
-        font-weight: 500;
        z-index: 2;
        margin-bottom: -2px;
        padding-bottom: 12px;
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
@@ -37,7 +37,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
@@ -11,7 +11,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js
@@ -11,7 +11,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- a/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ShareCollection/StyledWrapper.js
@@ -6,7 +6,7 @@ const StyledWrapper = styled.div`
      padding: 6px 0px;
      border: none;
      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
+      margin-right: ${(props) => props.theme.tabs.marginRight};
      color: var(--color-tab-inactive);
      cursor: pointer;

--- 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
@@ -21,7 +21,7 @@ const StyledWrapper = styled.div`
  }

  .collection-item-name {
-    height: 1.75rem;
+    height: 1.6rem;
    cursor: pointer;
    user-select: none;
    position: relative;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -20,7 +20,7 @@ const Wrapper = styled.div`
  }

  .collection-item-name {
-    height: 1.75rem;
+    height: 1.6rem;
    cursor: pointer;
    user-select: none;
    position: relative;
@@ -132,12 +132,9 @@ const Wrapper = styled.div`
    }

    &.item-keyboard-focused {
-      background: ${(props) => props.theme.sidebar.collection.item.keyboardFocusBg};
+      border-top: 1px solid ${(props) => props.theme.sidebar.collection.item.focusBorder};
+      border-bottom: 1px solid ${(props) => props.theme.sidebar.collection.item.focusBorder};
      outline: none;
-
-      &:hover {
-        background: ${(props) => props.theme.sidebar.collection.item.keyboardFocusBg} !important;
-      }
    }

    div.tippy-box {
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -200,7 +200,7 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
  });

  const itemRowClassName = classnames('flex collection-item-name relative items-center', {
-    'item-focused-in-tab': isTabForItemActive && !isKeyboardFocused,
+    'item-focused-in-tab': isTabForItemActive,
    'item-hovered': isOver && canDrop,
    'drop-target': isOver && dropType === 'inside',
    'drop-target-above': isOver && dropType === 'adjacent',
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .collection-name {
-    height: 1.75rem;
+    height: 1.6rem;
    cursor: pointer;
    user-select: none;
    padding-left: 4px;
--- a/packages/bruno-app/src/components/Sidebar/Collections/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/StyledWrapper.js
@@ -10,7 +10,6 @@ const Wrapper = styled.div`

  .collections-list {
    min-height: 0;
-    padding: 0 4px;
    padding-top: 4px;
    overflow-y: auto;

--- a/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js
@@ -14,7 +14,7 @@ const StyledWrapper = styled.div`
  div.method-selector-container,
  div.input-container {
    background-color: ${(props) => props.theme.modal.input.bg};
-    height: 2.3rem;
+    height: 2.1rem;
  }
  div.input-container {
    border: solid 1px ${(props) => props.theme.modal.input.border};
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -115,7 +115,7 @@ const darkTheme = {
      item: {
        bg: '#37373D',
        hoverBg: '#2A2D2F',
-        keyboardFocusBg: 'rgba(10, 132, 255, 0.2)',
+        focusBorder: '#4e4e4e',
        indentBorder: 'solid 1px #585858',
        active: {
          indentBorder: 'solid 1px #4c4c4c'
@@ -327,6 +327,7 @@ const darkTheme = {
  },

  tabs: {
+    marginRight: '1.2rem',
    active: {
      color: '#CCCCCC',
      border: '#d9a342'
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -63,7 +63,7 @@ const lightTheme = {
      warning: '#f57c00',
      muted: '#838383',
      purple: '#8e44ad',
-      yellow: '#d97706'
+      yellow: '#cf8730'
    },
    bg: {
      danger: '#dc3545'
@@ -118,7 +118,7 @@ const lightTheme = {
      item: {
        bg: colors.GRAY_2,
        hoverBg: colors.GRAY_2,
-        keyboardFocusBg: 'rgba(10, 132, 255, 0.2)',
+        focusBorder: colors.GRAY_4,
        indentBorder: `solid 1px ${colors.GRAY_3}`,
        active: {
          indentBorder: `solid 1px ${colors.GRAY_3}`
@@ -331,9 +331,10 @@ const lightTheme = {
  },

  tabs: {
+    marginRight: '1.2rem',
    active: {
      color: '#343434',
-      border: '#D97706'
+      border: '#cf8730'
    },
    secondary: {
      active: {
@@ -349,7 +350,7 @@ const lightTheme = {

  requestTabs: {
    color: 'rgb(52, 52, 52)',
-    bg: '#f7f7f7',
+    bg: '#f6f6f6',
    bottomBorder: '#efefef',
    icon: {
      color: '#9f9f9f',