fix: export/import icons and styles#6462
Conversation
WalkthroughThis PR updates icon usage across import/export UI elements (download for imports, upload for exports), adds active dropdown item styling, reorders menu items in Collections, and removes the WorkspaceSelector component entirely. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/AppTitleBar/index.js(2 hunks)packages/bruno-app/src/components/ShareCollection/index.js(2 hunks)packages/bruno-app/src/components/Sidebar/Sections/CollectionsSection/index.js(1 hunks)packages/bruno-app/src/components/Sidebar/WorkspaceSelector/index.js(0 hunks)packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js(2 hunks)packages/bruno-app/src/components/WorkspaceHome/index.js(2 hunks)
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/Sidebar/WorkspaceSelector/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()notfunc ()
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/WorkspaceHome/WorkspaceOverview/index.jspackages/bruno-app/src/components/AppTitleBar/StyledWrapper.jspackages/bruno-app/src/components/WorkspaceHome/index.jspackages/bruno-app/src/components/Sidebar/Sections/CollectionsSection/index.jspackages/bruno-app/src/components/AppTitleBar/index.jspackages/bruno-app/src/components/ShareCollection/index.js
🧠 Learnings (4)
📚 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/WorkspaceHome/WorkspaceOverview/index.jspackages/bruno-app/src/components/AppTitleBar/StyledWrapper.jspackages/bruno-app/src/components/WorkspaceHome/index.jspackages/bruno-app/src/components/Sidebar/Sections/CollectionsSection/index.jspackages/bruno-app/src/components/AppTitleBar/index.jspackages/bruno-app/src/components/ShareCollection/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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/AppTitleBar/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/AppTitleBar/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} : 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/AppTitleBar/StyledWrapper.js
⏰ 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 - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Linux
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: Unit Tests
🔇 Additional comments (5)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js (1)
3-3: LGTM! Icon change is semantically consistent.The switch from
IconFileImporttoIconDownloadfor the Import Collection action aligns with the intuitive metaphor of importing as downloading content into the application.Also applies to: 119-119
packages/bruno-app/src/components/AppTitleBar/index.js (1)
2-2: LGTM! Consistent icon usage for import actions.Replacing
IconUploadwithIconDownloadfor the Import workspace menu item maintains semantic consistency with the PR's iconography updates.Also applies to: 224-224
packages/bruno-app/src/components/ShareCollection/index.js (1)
3-3: LGTM! Correct icon for export functionality.Switching to
IconUploadfor the Postman Collection export aligns with the semantic pattern of exports as uploading/sending data out of the application.Also applies to: 103-103
packages/bruno-app/src/components/Sidebar/Sections/CollectionsSection/index.js (1)
152-160: LGTM! Logical menu item ordering.Repositioning the Import collection menu item after Open collection creates a more intuitive menu flow.
packages/bruno-app/src/components/WorkspaceHome/index.js (1)
3-3: LGTM! Consistent export icon usage.The change from
IconDownloadtoIconUploadfor the Export workspace action completes the consistent iconography pattern across the PR where exports use upload icons and imports use download icons.Also applies to: 231-231
|
|
||
| .dropdown-item-active { | ||
| font-weight: 400 !important; | ||
| background-color: ${(props) => props.theme.dropdown.selectedBg} !important; | ||
| color: ${(props) => props.theme.dropdown.selectedColor} !important; | ||
| } |
There was a problem hiding this comment.
Review the necessity of !important flags.
The new .dropdown-item-active class uses !important on all three properties, which can make styles harder to maintain and override. Consider whether these flags are truly necessary or if the specificity issue can be resolved through more specific selectors.
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/AppTitleBar/StyledWrapper.js around lines
240 to 245, the .dropdown-item-active rule applies !important to font-weight,
background-color and color; remove the !important flags and instead resolve
specificity by using a more specific selector or nesting (for example target the
element via its parent class or chain the class e.g. .dropdown
.dropdown-item-active or nest inside the styled wrapper) so the theme values win
without forcing overrides; update the rule to use the theme values directly (no
!important), increase selector specificity as needed, and verify in the
browser/devtools that the styles apply and no other rule is unintentionally
overriding them.
Description
Contribution Checklist:
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
✏️ Tip: You can customize this high-level summary in your review settings.