fix: example icon color by sanish-bruno · Pull Request #6447 · usebruno/bruno

sanish-bruno · 2025-12-18T08:39:20Z

Description

Contribution Checklist:

I've used AI significantly to create this pull request
The pull request only addresses one issue or adds one feature.
The pull request does not introduce any breaking changes
I have added screenshots or gifs to help explain the change if applicable.
I have read the contribution guidelines.
Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

Style
- Example icons now use theme-controlled color for consistent light/dark appearance and have adjusted spacing.
- Example item labels have updated spacing and no longer rely on hard-coded light/dark text classes, letting themes control text color.
- Theme palettes extended with additional grayscale tokens and now expose example iconColor in both light and dark themes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-18T08:39:33Z

Walkthrough

Replaced inline utility color classes on example icons and adjacent labels with a new example-icon CSS class in RequestTabs and Sidebar components, and added example.iconColor tokens in both light and dark themes. No control-flow, API, or exported-signature changes.

Changes

Cohort / File(s)	Summary
Example icon usage `packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js`	Replaced literal utility color classes on ExampleIcon with `example-icon`; adjusted adjacent name span spacing (added `ml-1`) and removed explicit text color utilities.
StyledWrapper: example-icon rule `packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js`	Added `.example-icon` CSS rule reading color from theme paths (`props.theme.requestTabs.example.iconColor` and `props.theme.sidebar.collection.item.example.iconColor`).
Theme tokens `packages/bruno-app/src/themes/dark.js`, `packages/bruno-app/src/themes/light.js`	Added additional GRAY tokens and introduced `example.iconColor` under both `darkTheme` and `lightTheme` for `sidebar.collection.item` and `requestTabs`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pay attention to:
- Correct theme token property names/paths.
- CSS specificity so .example-icon isn't overridden.
- Visual contrast in both light and dark themes.

Possibly related PRs

chore: updated request tab padding #6368 — Related edits to RequestTabs/RequestTab/StyledWrapper.js affecting tab presentation/styling.
Design improvements #6372 — Touches the same ExampleTab/ExampleItem components and related styling changes.

Suggested reviewers

lohit-bruno
bijin-bruno
helloanoop

Poem

✨ A class reborn, a hue set free,
Icons whisper through the theme.
Tokens added, margins slight,
Small tweaks make the UI bright. 🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the primary change—updating example icon color styling across multiple components and theme files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc9081a and 1fe99d3.

📒 Files selected for processing (2)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1 hunks)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js

🧠 Learnings (2)

📓 Common learnings

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

📚 Learning: 2025-12-17T21:41:24.730Z

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (3)

packages/bruno-app/src/components/Icons/ExampleIcon/index.js (1)

ExampleIcon (3-19)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

example (21-21)

packages/bruno-app/src/providers/ReduxStore/slices/collections/exampleReducers.js (15)

example (153-153)

example (218-218)

example (248-248)

example (278-278)

example (302-302)

example (329-329)

example (359-359)

example (390-390)

example (437-437)

example (479-479)

example (506-506)

example (542-542)

example (578-578)

example (614-614)

example (644-644)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

GitHub Check: CLI Tests
GitHub Check: SSL Tests - Windows
GitHub Check: Unit Tests
GitHub Check: Playwright E2E Tests
GitHub Check: SSL Tests - macOS
GitHub Check: SSL Tests - Linux

🔇 Additional comments (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1)

201-202: LGTM! Color management correctly refactored to styled components.

The removal of inline Tailwind color classes (text-gray-400, text-gray-700, dark:text-gray-300) in favor of the example-icon CSS class with theme-based colors aligns with the project's coding standards. The margin adjustment from mr-2 to mr-1 tightens the spacing appropriately.

Based on learnings, this approach correctly delegates color management to styled component theme properties rather than using Tailwind utility classes.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

118-118: Consider using styled components for color management.

The implementation works, but Tailwind color classes (text-gray-500 dark:text-gray-400) violate the project's coding standards. Colors should be managed through StyledWrapper's theme prop instead.

Based on learnings, Tailwind classes shouldn't define colors in JSX/TSX files.

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1)

201-201: Consider using styled components for color management.

The dark mode implementation works correctly, but the Tailwind color classes (text-gray-500 dark:text-gray-400) should be replaced with StyledWrapper theme props per coding standards.

Based on learnings, Tailwind classes shouldn't define colors in JSX/TSX files.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 78ee99e and cc199c3.

📒 Files selected for processing (2)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1 hunks)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

🧠 Learnings (3)

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors

Applied to files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

📚 Learning: 2025-12-17T21:41:24.730Z

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

Applied to files:

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

🧬 Code graph analysis (2)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1)

packages/bruno-app/src/components/Icons/ExampleIcon/index.js (1)

ExampleIcon (3-19)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

packages/bruno-app/src/components/Icons/ExampleIcon/index.js (1)

ExampleIcon (3-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

GitHub Check: CLI Tests
GitHub Check: Playwright E2E Tests
GitHub Check: SSL Tests - Windows
GitHub Check: SSL Tests - Linux
GitHub Check: SSL Tests - macOS
GitHub Check: Unit Tests

fix: example color

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)
118-118: Optional: Remove redundant color prop.

The color="currentColor" prop is now redundant since ExampleIcon defaults to color='currentColor' (see packages/bruno-app/src/components/Icons/ExampleIcon/index.js). The .example-icon CSS class already sets the color, and the prop adds no additional value.
🔎 Apply this diff if you prefer more concise code:
-        <ExampleIcon size={14} color="currentColor" className="example-icon mr-1.5 flex-shrink-0" />
+        <ExampleIcon size={14} className="example-icon mr-1.5 flex-shrink-0" />

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cc199c3 and 8f293f1.

📒 Files selected for processing (6)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1 hunks)
packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js (1 hunks)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js (1 hunks)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1 hunks)
packages/bruno-app/src/themes/dark.js (2 hunks)
packages/bruno-app/src/themes/light.js (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
packages/bruno-app/src/themes/dark.js
packages/bruno-app/src/themes/light.js

🧠 Learnings (4)

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors

Applied to files:

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

Applied to files:

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles

Applied to files:

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js

📚 Learning: 2025-12-17T21:41:24.730Z

Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
packages/bruno-app/src/themes/dark.js
packages/bruno-app/src/themes/light.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

packages/bruno-app/src/components/Icons/ExampleIcon/index.js (1)

ExampleIcon (3-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

GitHub Check: CLI Tests
GitHub Check: Unit Tests
GitHub Check: Playwright E2E Tests
GitHub Check: SSL Tests - Linux
GitHub Check: SSL Tests - Windows
GitHub Check: SSL Tests - macOS

🔇 Additional comments (4)

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js (1)

31-34: LGTM!

Clean implementation of theme-based icon coloring. This properly moves color management from inline Tailwind classes to styled-components theming, aligning with the project's architecture.

Based on learnings, this correctly uses styled-components theme props for managing CSS colors rather than Tailwind utility classes.

packages/bruno-app/src/themes/light.js (1)

133-136: LGTM!

Theme configuration correctly adds example.iconColor tokens for both sidebar and request tabs. The color value #6b7280 (gray-500) is consistently applied, and the helpful comments aid maintainability.

Also applies to: 372-374

packages/bruno-app/src/themes/dark.js (1)

127-130: LGTM!

Dark theme configuration correctly mirrors the light theme structure with example.iconColor tokens. The color value #9ca3af (gray-400) provides appropriate contrast for dark mode.

Also applies to: 365-367

packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)

118-118: LGTM!

The change correctly replaces the Tailwind color class text-gray-500 with the new example-icon class, which pulls the color from the theme configuration. This aligns with the project's architecture of using styled-components for color management.

Based on learnings, Tailwind classes are used for layout while styled-components manage colors.

...pp/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js

sanish-bruno requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners December 18, 2025 08:39

pull-request-size bot added the size/XS label Dec 18, 2025

coderabbitai bot reviewed Dec 18, 2025

View reviewed changes

pull-request-size bot added size/S and removed size/XS labels Dec 18, 2025

fix: example icon color

8f293f1

fix: example color

sanish-bruno force-pushed the fix/ui-issues branch from 8c1a577 to 8f293f1 Compare December 18, 2025 09:44

coderabbitai bot reviewed Dec 18, 2025

View reviewed changes

...pp/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js Show resolved Hide resolved

sanish-bruno added 2 commits December 18, 2025 15:24

fix: indentation

078b13d

fix: use gray color from colors for example

bc9081a

pull-request-size bot added size/M and removed size/S labels Dec 18, 2025

fix: margin issues

1fe99d3

bijin-bruno approved these changes Dec 18, 2025

View reviewed changes

bijin-bruno merged commit 052d143 into usebruno:main Dec 18, 2025
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: example icon color#6447

fix: example icon color#6447
bijin-bruno merged 4 commits intousebruno:mainfrom
sanish-bruno:fix/ui-issues

sanish-bruno commented Dec 18, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 18, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sanish-bruno commented Dec 18, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contribution Checklist:

Publishing to New Package Managers

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sanish-bruno commented Dec 18, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 18, 2025 •

edited

Loading