fix: example icon color (#6447)

* fix: example icon color fix: example color * fix: indentation * fix: use gray color from colors for example * fix: margin issues
2026-06-23 20:55:41 +00:00 · 2025-12-18 20:37:59 +05:30
parent aac219d4cd
commit 052d143d6e
6 changed files with 55 additions and 24 deletions
--- a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -115,8 +115,8 @@ const ExampleTab = ({ tab, collection }) => {
          }
        }}
      >
-        <ExampleIcon size={14} color="currentColor" className="mr-1.5 text-gray-500 flex-shrink-0" />
-        <span className="tab-name" title={example.name}>
+        <ExampleIcon size={14} color="currentColor" className="example-icon flex-shrink-0" />
+        <span className="tab-name ml-1" title={example.name}>
          {example.name}
        </span>
      </div>
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -28,6 +28,10 @@ const StyledWrapper = styled.div`
    // so that the name does not cutoff when italicized
    padding-right: 2px;
  }
+
+  .example-icon {
+    color: ${(props) => props.theme.requestTabs.example.iconColor};
+  }
 `;

 export default StyledWrapper;
--- 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
@@ -49,6 +49,11 @@ const StyledWrapper = styled.div`
      }
    }
  }
+
+  .example-icon {
+    color: ${(props) => props.theme.sidebar.collection.item.example.iconColor};
+  }
+
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
@@ -198,8 +198,8 @@ const ExampleItem = ({ example, item, collection }) => {
        style={{ paddingLeft: 8 }}
      >
        <div style={{ width: 16, minWidth: 16 }}></div>
-        <ExampleIcon size={16} color="currentColor" className="mr-2 text-gray-400 flex-shrink-0" />
-        <span className="item-name truncate text-gray-700 dark:text-gray-300 ">{example.name}</span>
+        <ExampleIcon size={16} color="currentColor" className="example-icon mr-1 flex-shrink-0" />
+        <span className="item-name truncate">{example.name}</span>
      </div>
      <div className="menu-icon pr-2">
        <MenuDropdown
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -8,10 +8,16 @@ const colors = {
  GREEN: '#4ec9b0',
  YELLOW: '#d9a342',

-  GRAY_1: '#666666',
-  GRAY_2: '#444444',
-  GRAY_3: '#3D3D3D',
-  GRAY_4: '#252526',
+  GRAY_1: '#252526',
+  GRAY_2: '#3D3D3D',
+  GRAY_3: '#444444',
+  GRAY_4: '#666666',
+  GRAY_5: '#b0b0b0',
+  GRAY_6: '#cbcbcb',
+  GRAY_7: '#e5e5e5',
+  GRAY_8: '#eaeaea',
+  GRAY_9: '#f3f3f3',
+  GRAY_10: '#f8f8f8',

  CODEMIRROR_TOKENS: {
    DEFINITION: '#9ccc9c', // Softer, brighter sage — better contrast
@@ -101,19 +107,19 @@ const darkTheme = {
  sidebar: {
    color: '#ccc',
    muted: '#9d9d9d',
-    bg: colors.GRAY_4,
+    bg: colors.GRAY_1,
    dragbar: {
      border: 'transparent',
-      activeBorder: colors.GRAY_1
+      activeBorder: colors.GRAY_4
    },

    badge: {
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
    },

    search: {
      border: '1px solid transparent',
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
    },

    collection: {
@@ -124,6 +130,9 @@ const darkTheme = {
        indentBorder: 'solid 1px #585858',
        active: {
          indentBorder: 'solid 1px #4c4c4c'
+        },
+        example: {
+          iconColor: colors.GRAY_5
        }
      }
    },
@@ -182,7 +191,7 @@ const darkTheme = {
      indentBorder: 'solid 1px #313131',
      activeBg: '#37373c',
      search: {
-        bg: colors.GRAY_3
+        bg: colors.GRAY_2
      }
    }
  },
@@ -209,7 +218,7 @@ const darkTheme = {
      icon: 'rgb(204, 204, 204)',
      iconDanger: '#fa5343',
      errorHoverBg: '#4a2a2a',
-      border: `solid 1px ${colors.GRAY_2}`
+      border: `solid 1px ${colors.GRAY_3}`
    },
    dragbar: {
      border: '#444',
@@ -237,7 +246,7 @@ const darkTheme = {
      bg: '#252526',
      table: {
        thead: {
-          bg: colors.GRAY_3,
+          bg: colors.GRAY_2,
          color: '#ccc'
        }
      }
@@ -250,12 +259,12 @@ const darkTheme = {

  collection: {
    environment: {
-      bg: colors.GRAY_3,
+      bg: colors.GRAY_2,

      settings: {
-        bg: colors.GRAY_3,
+        bg: colors.GRAY_2,
        sidebar: {
-          bg: colors.GRAY_3,
+          bg: colors.GRAY_2,
          borderRight: '#4f4f4f'
        },
        item: {
@@ -359,8 +368,11 @@ const darkTheme = {
      hoverColor: 'rgb(204, 204, 204)',
      hoverBg: '#1e1e1e'
    },
+    example: {
+      iconColor: colors.GRAY_5
+    },
    active: {
-      bg: colors.GRAY_3
+      bg: colors.GRAY_2
    },
    shortTab: {
      color: '#ccc',
@@ -617,20 +629,20 @@ const darkTheme = {
      toolbar: {
        environmentSelector: {
          bg: colors.BG,
-          border: colors.GRAY_2,
+          border: colors.GRAY_3,
          icon: colors.BRAND,
          text: colors.TEXT,
          caret: colors.TEXT_MUTED,
-          separator: colors.GRAY_2,
+          separator: colors.GRAY_3,
          hoverBg: colors.BG,
-          hoverBorder: colors.GRAY_1,
+          hoverBorder: colors.GRAY_4,

          noEnvironment: {
            text: colors.TEXT_MUTED,
            bg: colors.BG,
-            border: colors.GRAY_2,
+            border: colors.GRAY_3,
            hoverBg: colors.BG,
-            hoverBorder: colors.GRAY_1
+            hoverBorder: colors.GRAY_4
          }
        },
        sandboxMode: {
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -17,6 +17,10 @@ const colors = {
  GRAY_4: '#e5e5e5',
  GRAY_5: '#cbcbcb',
  GRAY_6: '#b0b0b0',
+  GRAY_7: '#666666',
+  GRAY_8: '#444444',
+  GRAY_9: '#3D3D3D',
+  GRAY_10: '#252526',

  CODEMIRROR_TOKENS: {
    DEFINITION: '#566f4e', // Deep moss
@@ -130,6 +134,9 @@ const lightTheme = {
        indentBorder: `solid 1px ${colors.GRAY_4}`,
        active: {
          indentBorder: `solid 1px ${colors.GRAY_4}`
+        },
+        example: {
+          iconColor: colors.GRAY_7
        }
      }
    },
@@ -366,6 +373,9 @@ const lightTheme = {
      hoverColor: 'rgb(76 76 76)',
      hoverBg: 'rgb(234, 234, 234)'
    },
+    example: {
+      iconColor: colors.GRAY_7
+    },
    active: {
      bg: '#e7e7e7'
    },