fix: update dropdown item text color to use theme text color by abhishek-bruno · Pull Request #6543 · usebruno/bruno

abhishek-bruno · 2025-12-29T13:42:50Z

Description

Update dropdown item text color to use theme text color for consistency; enhance ExampleItem dropdown behavior with fixed positioning

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

Bug Fixes
- Fixed dropdown menu positioning in sidebar collection items to prevent rendering outside content boundaries and ensure menus display correctly within the designated container area.
Style
- Updated color theming for delete and danger action items throughout the interface, including sidebar controls and menu options, to maintain visual consistency and improve overall theme coherence.

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

…istency; enhance ExampleItem dropdown behavior with fixed positioning

coderabbitai · 2025-12-29T13:43:03Z

Walkthrough

These changes update theme color references for danger text styling across dropdown menus and improve dropdown positioning in the ExampleItem component by leveraging sidebar accordion context to control where the menu renders.

Changes

Cohort / File(s)	Summary
Theme color updates `packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js`	Migrated danger text color from `props.theme.colors.danger` to `props.theme.colors.text.danger` for dropdown menu items and delete options; maintains hover/background styling.
ExampleItem dropdown positioning `packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js`	Integrated `useSidebarAccordion` hook to extract `dropdownContainerRef` and configured dropdown menu with fixed positioning strategy for proper container-relative rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

PR #6447: Modifies ExampleItem and related sidebar collection item styling—overlaps with this PR's ExampleItem component changes.

Suggested labels

size/M

Suggested reviewers

lohit-bruno
helloanoop
bijin-bruno

Poem

🎨 Colors dance in shades refined,
From danger bold to text-aligned,
Dropdowns find their rightful place,
With refs that guide them with such grace. ✨

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 main changes: updating dropdown item text colors to use theme text color across multiple components (StyledWrapper.js files and ExampleItem).
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 018f392 and 832b768.

📒 Files selected for processing (3)

packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.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/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.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} : 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/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/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 Component CSS might also change layout but Tailwind classes shouldn't define colors

Applied to files:

packages/bruno-app/src/components/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/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/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/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/ApiSpecPanel/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

🧬 Code graph analysis (1)

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

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

useSidebarAccordion (51-51)

packages/bruno-app/src/components/Sidebar/SidebarAccordionContext.js (1)

dropdownContainerRef (15-15)

⏰ 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: SSL Tests - Linux
GitHub Check: SSL Tests - macOS
GitHub Check: SSL Tests - Windows
GitHub Check: Playwright E2E Tests
GitHub Check: CLI Tests
GitHub Check: Unit Tests

🔇 Additional comments (4)

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

10-10: LGTM! Consistent theme color usage.

The change correctly uses the text-specific danger color variant from the theme, which improves consistency with how text colors should be referenced.

Based on learnings, styled components should use theme props for color management.

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

152-152: LGTM! Consistent with the theme color update pattern.

This change aligns with the same text color theming update made in ApiSpecPanel/StyledWrapper.js, ensuring consistent danger text styling across dropdown menus.

Based on learnings, styled components should use theme props for color management.

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

22-25: LGTM! Proper context hook integration.

The useSidebarAccordion hook usage correctly extracts the dropdown container reference, following the same pattern established in other files like CollectionItem/index.js and Collection/index.js.

211-212: LGTM! Safe dropdown positioning configuration.

The implementation correctly:

Uses optional chaining with a safe fallback to document.body

Applies strategy: 'fixed' for proper positioning within scrollable containers

This ensures the dropdown renders correctly regardless of the container context.

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.}

fix: update dropdown item text color to use theme text color for cons…

832b768

…istency; enhance ExampleItem dropdown behavior with fixed positioning

abhishek-bruno requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners December 29, 2025 13:42

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

bijin-bruno merged commit 63d3182 into usebruno:main Dec 29, 2025
8 checks passed

coderabbitai bot mentioned this pull request Jan 2, 2026

feat: integrate theme support in ImportCollection component #6639

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update dropdown item text color to use theme text color #6543

fix: update dropdown item text color to use theme text color #6543
bijin-bruno merged 1 commit intousebruno:mainfrom
abhishek-bruno:fix/example-more-options

abhishek-bruno commented Dec 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

abhishek-bruno commented Dec 29, 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 29, 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 labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

abhishek-bruno commented Dec 29, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 29, 2025 •

edited

Loading