Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughA broad theming and spacing refactor: hard-coded margins, radii, heights, and a few font-weight/padding values were replaced or adjusted to use theme tokens; light/dark theme objects were updated (added tabs.marginRight, replaced keyboardFocusBg → focusBorder, and tweaked some colors). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Areas requiring extra attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR implements design updates for v3, focusing on visual refinements and UI polish. The changes include color adjustments, spacing modifications, and border/focus styling improvements.
- Updated yellow accent color from
#d97706to#cf8730across themes - Replaced keyboard focus background with border-based focus indicators in collection items
- Standardized tab margins using theme variables and adjusted element heights/sizes for better visual consistency
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-app/src/themes/light.js | Updated yellow color, changed focus styling from background to border, added marginRight property, and adjusted requestTabs background color |
| packages/bruno-app/src/themes/dark.js | Changed focus styling from background to border and added marginRight property |
| packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js | Reduced input container height from 2.3rem to 2.1rem |
| packages/bruno-app/src/components/Sidebar/Collections/StyledWrapper.js | Removed horizontal padding from collections list |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js | Reduced collection name height from 1.75rem to 1.6rem |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js | Removed keyboard focus condition from item-focused-in-tab class |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js | Updated item height and replaced background-based keyboard focus with border-based focus indicator |
| packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js | Reduced collection item name height from 1.75rem to 1.6rem |
| packages/bruno-app/src/components/ShareCollection/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/ResponsePane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/RequestTabs/StyledWrapper.js | Adjusted margin-bottom, mask gradients, and removed font-weight from active tab |
| packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js | Removed font-weight from tab-method class |
| packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js | Changed hardcoded border-radius to theme variable and reduced has-changes icon size |
| packages/bruno-app/src/components/RequestTabPanel/index.js | Reduced top padding from pt-4 to pt-3 |
| packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js | Reduced height from 2.3rem to 2.1rem |
| packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/RequestPane/QueryUrl/index.js | Reduced icon sizes from 22 to 20 for all action icons |
| packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js | Reduced height from 2.3rem to 2.1rem |
| packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js | Reduced height from 2.3rem to 2.1rem |
| packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/FolderSettings/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
| packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js | Changed hardcoded border-radius to use theme variable |
| packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js | Changed hardcoded margin-right to use theme variable |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| border: none; | ||
| border-bottom: solid 2px transparent; | ||
| margin-right: 1.25rem; | ||
| margin-right: ${(props) => props.theme.tabs.marginRight};; |
There was a problem hiding this comment.
Double semicolon detected. Remove the extra semicolon at the end of the line.
| margin-right: ${(props) => props.theme.tabs.marginRight};; | |
| margin-right: ${(props) => props.theme.tabs.marginRight}; |
| }, | ||
|
|
||
| tabs: { | ||
| marginRight: '1.2rem', |
There was a problem hiding this comment.
Inconsistent marginRight value between light and dark themes. The light theme uses '1.2rem' while the dark theme uses '1.1rem' (line 330). Consider using the same value for consistency unless this difference is intentional.
| marginRight: '1.2rem', | |
| marginRight: '1.1rem', |
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js (1)
9-48: Align tab margin with theme (good) and fix small styling issuesThe switch to
props.theme.tabs.marginRightfor WS tabs is correct, but there’s an extra semicolon to clean up, and.stream-status.streamingis referencingprops.theme.colors.text.blue, which does not exist in either theme’scolors.textmap, so the color is effectively undefined.- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight}; @@ - &.streaming { - color: ${(props) => props.theme.colors.text.blue}; - } + &.streaming { + /* Consider reusing an existing blue-ish theme token instead of a missing colors.text.blue */ + color: ${(props) => props.theme.textLink}; + }If you prefer a dedicated stream blue, you could instead add
bluetocolors.textin bothlight.jsanddark.jsand keep this selector as-is.packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js (1)
35-56: gRPC tabs now respect theme spacing; address extra semicolon and missing blue tokenUsing
props.theme.tabs.marginRightis consistent with the new theme token, but there’s an extra semicolon, and.stream-status.streamingagain referencesprops.theme.colors.text.blue, which isn’t defined in the themes.- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight}; @@ - &.streaming { - color: ${(props) => props.theme.colors.text.blue}; - } + &.streaming { + /* Mirror whatever blue/brand you choose for WS streaming state */ + color: ${(props) => props.theme.textLink}; + }As with the WS pane, alternatively introduce a
colors.text.bluetoken in both themes and keep the selector unchanged.Also applies to: 60-75
packages/bruno-app/src/themes/light.js (1)
117-126: Update StyledWrapper.js to usefocusBorderinstead ofkeyboardFocusBgThe token rename in both light and dark themes is breaking the StyledWrapper.js component, which still references the old
keyboardFocusBgproperty at lines 99 and 103. Update the component to usefocusBorderto match the renamed theme tokens.packages/bruno-app/src/themes/dark.js (1)
114-123: Update StyledWrapper.js to use the renamed focusBorder token instead of keyboardFocusBgThe theme token was renamed from
keyboardFocusBgtofocusBorderin dark.js, but the styled component still references the old token name at lines 99 and 103 inpackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js. Replaceprops.theme.sidebar.collection.item.keyboardFocusBgwithprops.theme.sidebar.collection.item.focusBorderin both locations to match the updated theme definition.
🧹 Nitpick comments (11)
packages/bruno-app/src/components/RequestTabPanel/index.js (1)
246-254: Header padding change is safe; aligns with design updatesThe
pt-4→pt-3adjustment on Line 246 is a straightforward visual tweak with no behavioral impact and is consistent with existing utility-class usage in this component. If the long‑term plan is to centralize spacing via theme tokens, this header block could eventually be migrated to use those as well, but that’s not blocking for this PR.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js (1)
134-138: Keyboard focus via borders: check layout shift and focus visibilitySwitching to top/bottom
focusBorderlines is a nice move towards tokenized focus styling, but the added 1px borders may cause a tiny vertical layout shift when focus appears and relies entirely on this custom indicator afteroutline: none. Consider either:
- using
box-sizing: border-box(or equivalent) to avoid any jump, and/or- verifying that
focusBorderhas sufficient contrast and is clearly visible in all themes.This generally aligns with the theming approach of keeping colors in styled components rather than Tailwind utilities. Based on learnings, ...
packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js (1)
9-9: Theme-based spacing looks good; drop the extra semicolon for consistencyUsing
props.theme.tabs.marginRightaligns with the theme-first styling guidelines, but the trailing;;is unnecessary noise. Recommend keeping a single semicolon:- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};Based on learnings, this matches the preferred use of theme tokens; this is just a small cleanup.
packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js (1)
9-9: Remove redundant semicolon after theme-based marginGood move switching to
props.theme.tabs.marginRight, but there’s an extra semicolon:- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};Keeps the CSS tidy and consistent with other StyledWrapper files.
packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js (1)
9-9: Tidy up duplicated semicolon in margin declarationThe theme-aware margin is correct, but the extra semicolon can be dropped:
- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};Helps keep the styling consistent with other tab wrappers.
packages/bruno-app/src/components/ResponsePane/StyledWrapper.js (1)
9-9: Consistent theme usage; remove extra semicolonTabs now use
props.theme.tabs.marginRight, which is consistent with the rest of the theming work. Just drop the redundant semicolon:- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};Based on learnings, the color usage below is correctly driven by the theme.
packages/bruno-app/src/components/FolderSettings/StyledWrapper.js (1)
11-11: Minor CSS cleanup: duplicate semicolonThe switch to
props.theme.tabs.marginRightis correct and matches other settings views. Suggest trimming the extra semicolon:- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js (1)
9-9: Drop the redundant semicolon after margin-rightTheme-based spacing is correct here too. For consistency with other StyledWrapper files, remove the extra
;:- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};packages/bruno-app/src/themes/light.js (1)
59-67: Yellow accent update is fine; consider centralizing this colorUpdating
colors.text.yellowto'#cf8730'is reasonable, but the same hex is now duplicated in other places (e.g.,tabs.active.border), and older accent usages still reference#D97706. In a follow‑up, it may be worth consolidating these into a single shared token to avoid subtle inconsistencies.packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js (1)
5-30: Theme-based tab margin is correct; clean up the extra semicolonUsing
props.theme.tabs.marginRightis exactly what we want, but there’s a stray extra semicolon at the end of the declaration.- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js (1)
4-26: Theme-based tab margin is correct; remove redundant semicolonHooking the response-example tabs to
props.theme.tabs.marginRightis consistent with the rest of the PR; just drop the extra semicolon at the end of the declaration.- margin-right: ${(props) => props.theme.tabs.marginRight};; + margin-right: ${(props) => props.theme.tabs.marginRight};
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (30)
packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/FolderSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/QueryUrl/index.js(3 hunks)packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestTabPanel/index.js(1 hunks)packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js(2 hunks)packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js(0 hunks)packages/bruno-app/src/components/RequestTabs/StyledWrapper.js(2 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/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js(2 hunks)packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js(1 hunks)packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/Sidebar/Collections/StyledWrapper.js(0 hunks)packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js(1 hunks)packages/bruno-app/src/themes/dark.js(2 hunks)packages/bruno-app/src/themes/light.js(4 hunks)
💤 Files with no reviewable changes (2)
- packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
- packages/bruno-app/src/components/Sidebar/Collections/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()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/GrpcQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/RequestTabPanel/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.jspackages/bruno-app/src/themes/dark.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.jspackages/bruno-app/src/themes/light.js
🧠 Learnings (3)
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/RequestPane/GrpcQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/RequestPane/WSRequestPane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.jspackages/bruno-app/src/components/ShareCollection/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
🧬 Code graph analysis (3)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)
theme(28-28)
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js (1)
packages/bruno-app/src/selectors/tab.js (2)
isTabForItemActive(3-5)isTabForItemActive(3-5)
packages/bruno-app/src/themes/light.js (1)
packages/bruno-app/src/themes/dark.js (1)
colors(1-22)
🔇 Additional comments (17)
packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js (1)
14-18: Height reduction looks good; please sanity‑check for clipping across statesThe shared
height: 2.1remfor.method-selector-containerand.input-containerkeeps them visually aligned and is consistent with theme usage here. Just make sure in the UI that the reduced height doesn’t clip the method label, URL text, or any dropdown icons at common zoom levels and OS font scaling (especially focus state where borders can visually shrink content space).packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
130-130: New QueryUrl component introduces appropriately sized icons.This is a new component being introduced in the design updates. All four icons (IconCode, IconDeviceFloppy, IconSquareRoundedX, IconArrowRight) are consistently sized at 20px with proper theme colors and correct formatting following the coding guidelines (2-space indentation, single quotes, semicolons, arrow function parentheses).
Likely an incorrect or invalid review comment.
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js (1)
22-28: Height reduction on.collection-item-nameThe reduced height to
1.6remlooks fine and keeps the row compact; just sanity‑check in the UI that text isn’t getting vertically cropped and that the clickable area still feels comfortable for selection.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/StyledWrapper.js (1)
4-4: LGTM! Height adjustment aligns with design updates.Consistent with similar height changes in QueryUrl and WsQueryUrl wrappers.
packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js (1)
5-5: LGTM! Height adjustment for collection items.Consistent with the broader design refinement across sidebar components.
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/StyledWrapper.js (1)
24-24: LGTM! Height adjustment matches parent collection styling.Maintains visual consistency across collection hierarchy.
packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js (1)
4-4: LGTM! Height adjustment aligns with RequestPane design updates.Consistent with GrpcQueryUrl and WsQueryUrl wrapper changes.
packages/bruno-app/src/components/RequestPane/WsQueryUrl/StyledWrapper.js (1)
4-4: LGTM! Height adjustment completes RequestPane uniformity.All RequestPane URL wrappers now use 2.1rem height.
packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js (2)
50-50: LGTM! Theme-based border-radius.Good adoption of theme tokens for consistency.
71-72: LGTM! Icon size reduction for refined UI.The smaller dimensions (8x8) create a more subtle visual indicator.
packages/bruno-app/src/components/ShareCollection/StyledWrapper.js (1)
9-9: LGTM on theme-based tab spacing
margin-right: ${(props) => props.theme.tabs.marginRight};is clean and consistent with the new theme-driven spacing approach. No changes needed.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js (1)
202-208: Active-tab styling now independent of keyboard focusChanging
'item-focused-in-tab'to depend solely onisTabForItemActivesimplifies the mental model: the row is marked as “active in a tab” regardless of how focus is managed, and can coexist with'item-keyboard-focused'.Looks good; just make sure the CSS for
.item-focused-in-taband.item-keyboard-focusedplays nicely when both are present (no conflicting colors/borders).packages/bruno-app/src/themes/dark.js (1)
329-345: Newtabs.marginRighttoken is a good additionUsing
props.theme.tabs.marginRightcentralizes tab spacing and matches the rest of the PR’s theme‑driven spacing work; no issues from a theme API perspective.packages/bruno-app/src/themes/light.js (2)
333-338: Tabs spacing and active border changes look consistentAdding
tabs.marginRightand updating the active border to'#cf8730'lines up with the new yellow token and the theme‑driven spacing pattern; no issues from a theming API standpoint.
351-369: Slight request tabs background tweak is safeThe
requestTabs.bgadjustment to'#f6f6f6'is a minor visual change and still fits the existing contrast/border setup; nothing blocking here.packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js (1)
3-46: Good move to use theme radius for.current-environmentSwitching to
props.theme.border.radius.baseremoves a hard‑coded radius and stays consistent with the theme‑driven border‑radius scheme; looks solid.packages/bruno-app/src/components/RequestTabs/StyledWrapper.js (1)
49-96: Tab spacing and overflow gradient tweaks look fineReducing the bottom margin and tightening the fade (
calc(100% - 12px)) are localized visual refinements and don’t affect theme contracts; this looks good.
packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
Outdated
Show resolved
Hide resolved
packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
Outdated
Show resolved
Hide resolved
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 (2)
packages/bruno-app/src/themes/dark.js (1)
269-275: Fix invalid hex color fornotifications.list.bg
notifications.list.bgis set to'3D3D3D'(missing#), which will be treated as an invalid color and fall back to inherited styles.Suggested fix:
notifications: { bg: '#3D3D3D', list: { - bg: '3D3D3D', + bg: '#3D3D3D', borderRight: '#4f4f4f', borderBottom: '#545454', hoverBg: '#434343',packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js (1)
46-48: Definecolors.text.blueacross all theme files or use an existing color tokenThree files reference
colors.text.blue, which is undefined in all themes (dark.js and light.js only define green, danger, muted, purple, and yellow under colors.text). This causes silent fallback to inherited colors instead of explicit theming.Affected locations:
- packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js:47 (streaming state)
- packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js:47
- packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js:73
Add
blueto thecolors.textobject in all theme files, or update references to use an existing token (e.g., textLink).
🧹 Nitpick comments (1)
packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js (1)
3-31: Consider extracting shared tab styles into a reusable helperThis tab block (padding, borders, margin-right, focus/active states) closely matches other Request/Response pane wrappers. Long term, it may be worth extracting a shared styled component or mixin for tab styling to keep v3 design tweaks DRY and easier to update across panes.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/FolderSettings/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js(1 hunks)packages/bruno-app/src/components/RequestPane/WSRequestPane/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/themes/dark.js(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
- packages/bruno-app/src/components/RunnerResults/ResponsePane/StyledWrapper.js
- packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/StyledWrapper.js
- packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/StyledWrapper.js
- packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
- packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
- packages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/StyledWrapper.js
- packages/bruno-app/src/components/RequestPane/WSRequestPane/StyledWrapper.js
- packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/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()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/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/themes/dark.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
🧠 Learnings (9)
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
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/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Semicolons go at the end of the line, not on a new line
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : No trailing commas
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Always add semicolons at the end of statements
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Space before and after the arrow in arrow functions. `() => {}` is good
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use 2 spaces for indentation. No tabs, just spaces
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:32.975Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:32.975Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Always use parentheses around parameters in arrow functions, even for single params
Applied to files:
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/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: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Linux
- GitHub Check: Unit Tests
🔇 Additional comments (4)
packages/bruno-app/src/components/FolderSettings/StyledWrapper.js (1)
7-27: Tab spacing correctly moved to theme token
margin-right: ${(props) => props.theme.tabs.marginRight};is syntactically correct, follows the arrow-function and semicolon guidelines, and aligns tab spacing with the shared theme tokens, consistent with the broader v3 theming changes. As per coding guidelines, this is the right direction for layout/theming.packages/bruno-app/src/themes/dark.js (1)
114-123: Sidebar focus + tabs margin theme tokens look consistentThe new
sidebar.collection.item.focusBorderandtabs.marginRightentries plug cleanly into the theme and support the tab spacing/focus refactor. No issues from my side here.Also applies to: 329-345
packages/bruno-app/src/components/ResponsePane/WsResponsePane/StyledWrapper.js (1)
9-31: Tabs margin now theme-driven – aligned with v3 tokensSwitching
margin-righttoprops.theme.tabs.marginRightkeeps this tab strip in sync with the new theme spacing token and other panes. Looks good.packages/bruno-app/src/components/RequestPane/GrpcRequestPane/StyledWrapper.js (1)
4-25: gRPC tabs now use theme-based right marginUsing
props.theme.tabs.marginRighthere aligns gRPC tabs with the shared tab spacing token and keeps behavior consistent across panes. No issues.
Design Updates for v3
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.