Conversation
WalkthroughThe PR applies consistent active tab font-weight styling across multiple tab components throughout the app by introducing Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR updates tab styling across the Bruno application by generalizing font-weight into theme configuration and making minor padding adjustments. The changes enable themes to control active tab font-weight while also improving visual presentation of request tabs and the overflow "More" dropdown.
- Added
fontWeightproperty to both light and dark theme configurations for active tabs - Applied the theme-based font-weight consistently across all tab components
- Updated the overflow tabs dropdown from a dots icon to a "More" label with chevron icon
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-tests/collection/ping.bru | Changed test URL from templated variable to hardcoded endpoint (appears unrelated to PR purpose) |
| packages/bruno-app/src/themes/light.js | Added SLATE_BLACK color constant and fontWeight property to active tab theme |
| packages/bruno-app/src/themes/dark.js | Added fontWeight property to active tab theme |
| packages/bruno-app/src/components/ShareCollection/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/ResponsePane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js | Added 2px right padding to prevent text cutoff when italicized |
| packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js | Changed overflow dropdown from IconDots to "More" text with IconChevronDown |
| packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js | Applied theme-based fontWeight and simplified more-tabs styling |
| packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/FolderSettings/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
| packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js | Adjusted padding values for better spacing |
| packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js | Applied theme-based fontWeight to active tabs |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js (1)
132-135: Inconsistent with PR objective: missing font-weight for active tab.The
.tab-button.activestyling lacks the font-weight property that was added to other tab components throughout this PR (e.g., CollectionSettings/StyledWrapper.js line 23). This appears inconsistent with the stated goal to "generalise the font weight for tabs."Apply this diff to align with the pattern used elsewhere:
&.active { + font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important; color: ${(props) => props.theme.tabs.active.color}; border-bottom-color: ${(props) => props.theme.tabs.active.border}; }
🧹 Nitpick comments (2)
packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js (1)
157-160: Nice UX improvement with the explicit "More" label.The dropdown trigger is now clearer with the text label and chevron icon. Code follows all guidelines and improves user experience.
Optional: If the app supports internationalization, consider extracting the "More" text to support multiple languages.
packages/bruno-app/src/components/ResponsePane/StyledWrapper.js (1)
22-26: Response pane active tab styling is consistent with shared tab themeHooking
.tab.activeintotheme.tabs.active.fontWeightalongside existing color/border theming is consistent and keeps active tab emphasis centrally controlled in the theme. As per coding guidelines, centralizing such visual tokens in the theme is preferred.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js(2 hunks)packages/bruno-app/src/components/FolderSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js(2 hunks)packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js(2 hunks)packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ResponsePane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/ShareCollection/StyledWrapper.js(1 hunks)packages/bruno-app/src/themes/dark.js(1 hunks)packages/bruno-app/src/themes/light.js(2 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()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/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/themes/light.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/themes/dark.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js
🧠 Learnings (4)
📓 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} : 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-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/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/themes/light.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/themes/dark.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/RequestPaneTabs/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/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/RequestPaneTabs/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/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/RequestPaneTabs/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 - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
🔇 Additional comments (16)
packages/bruno-app/src/components/RequestPane/RequestPaneTabs/index.js (1)
4-4: LGTM!Import correctly updated to match the new chevron-down icon usage in the dropdown trigger.
packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js (1)
6-6: LGTM!The spacing adjustments are consistent with the PR's padding update objective.
Also applies to: 37-37
packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js (1)
23-23: LGTM!The font-weight addition correctly implements the PR's objective to generalize tab font styling via theme configuration.
packages/bruno-app/src/themes/dark.js (1)
334-340: Active tab font weight wired into dark themeAdding
fontWeight: 400ontabs.activeis consistent with the new StyledWrapper usage and keeps typography centralized in the theme.packages/bruno-app/src/themes/light.js (2)
8-20: Introduce SLATE_BLACK for reuseDefining
SLATE_BLACKincolorsis a nice cleanup that avoids repeating#343434and keeps tab colors consistent with other text usages.
341-347: Light theme active tab now fully theme-drivenUsing
fontWeight: 400andcolor: colors.SLATE_BLACKontabs.activealigns with the dark theme and the new StyledWrapper usage so active tabs can be themed consistently.packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js (1)
22-26: Active tab uses theme font weightHooking
&.activeup totheme.tabs.active.fontWeightkeeps GRPC request tabs in sync with global tab typography and respects theming.packages/bruno-app/src/components/FolderSettings/StyledWrapper.js (1)
24-28: Folder settings tabs now respect themed font weightUsing
theme.tabs.active.fontWeightfor.tab.activeis consistent with other tab UIs and keeps styling centralized in the theme.packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js (1)
22-26: Active tab font weight aligned with themeThis change makes the response example pane’s active tab typography follow
theme.tabs.active.fontWeight, matching the rest of the app.packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js (1)
22-26: Runner results tabs now share global active tab weightGood use of
theme.tabs.active.fontWeightto keep active tab emphasis consistent with other panes.packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js (1)
27-31: WebSocket response tabs wired to theme font weightActive WS tabs now correctly use
theme.tabs.active.fontWeight, consistent with other tabbed panes.packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js (1)
53-57: gRPC query result tabs follow themed font weightActive tabs now use
theme.tabs.active.fontWeight, matching the rest of the tab system and keeping styles centralized.If there are any additional custom themes (beyond light/dark), double‑check that they also define
tabs.active.fontWeightto avoid inconsistent active tab styling.packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js (1)
22-29: Tab name padding change to prevent italic clipping looks goodAdding
padding-right: 2pxon.tab-nameis a minimal, targeted fix to avoid text cutoff when italicized and doesn’t introduce layout risk.packages/bruno-app/src/components/ShareCollection/StyledWrapper.js (1)
22-26: Active tab font-weight now theme-driven – aligns with PR goalUsing
props.theme.tabs.active.fontWeightfor.tab.activekeeps the visual emphasis configurable per theme and consistent with other tab components.packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js (1)
27-31: Grpc response tabs correctly pick up themed active font-weightThe added
font-weight: ${(props) => props.theme.tabs.active.fontWeight} !important;on.tab.activematches the shared tab styling pattern and keeps all active tab states in sync across panes.packages/bruno-app/src/components/RequestPane/RequestPaneTabs/StyledWrapper.js (1)
5-8: More-tabs inactive styling and active tab font-weight are coherent with global tab design
div.more-tabsnow usingvar(--color-tab-inactive)and a 2px transparent bottom border matches the base tab treatment and avoids visual jumps when switching states..tab.activepicking uptheme.tabs.active.fontWeightkeeps request pane tabs aligned with the rest of the app’s active tab styling and allows themes to override the weight cleanly.No issues spotted with these changes.
Also applies to: 33-37
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.