style: update color references to use theme.draftColor for unsaved changes across multiple components#6641
Conversation
…anges across multiple components
WalkthroughThis PR introduces a Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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: 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/Overlay/index.js (1)
27-34: Button props are valid and consistent with codebase patterns.The
color="secondary"andsize="sm"props are supported by the Button component and are used extensively throughout the codebase, so this change is fine. However, note that ResponseLoadingOverlay displays during active request execution, not for draft/unsaved state—so the styling change here doesn't align with the PR's stated objective of using theme colors for unsaved changes. If this component is intentionally being updated for consistency with a broader theme refactor, confirm that the change is intentional.packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js (1)
16-16: Replace hardcoded color with theme property.The hardcoded
#777777at line 16 should use the project's theme system like other properties in this file. Use${(props) => props.theme.colors.text.muted}for consistency.🔎 Suggested fix
color: #777777; + color: ${(props) => props.theme.colors.text.muted};packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js (2)
24-24: Use strict equality for type safety.Line 24 uses loose equality (
!=) which can lead to unexpected type coercion. Use strict equality (!==) instead.🔎 Proposed fix
- const hasChanges = Boolean(content != apiSpec?.raw); + const hasChanges = Boolean(content !== apiSpec?.raw);
43-45: Fix typo in className.Line 44 contains a typo:
'oapcity-100'should be'opacity-100'. This prevents the opacity style from being applied correctly.🔎 Proposed fix
className={`absolute right-0 top-0 m-4 ${ - hasChanges ? 'cursor-pointer oapcity-100' : 'cursor-default opacity-50' + hasChanges ? 'cursor-pointer opacity-100' : 'cursor-default opacity-50' }`}
🧹 Nitpick comments (5)
packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js (1)
8-8: Consider if wrapper-level font-size is needed.Line 17 already applies
theme.font.size.smtothead. Adding it at the wrapper level will cascade totbodyas well. If that's intentional for consistency, this is fine. Otherwise, it's redundant.packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
68-68: Consider adding draftColor to the palette constants.The
draftColorvalue'#cc7b1b'is hardcoded, which differs from the pattern used throughout the theme where colors reference thecolorspalette (e.g.,colors.MAUVE,colors.TEXT). While this may be intentional for cross-theme consistency, consider defining it in the palette for maintainability.🔎 Proposed refactor to use palette constant
const colors = { // Catppuccin Macchiato Palette ROSEWATER: '#f4dbd6', ... + DRAFT: '#cc7b1b', WHITE: '#fff', BLACK: '#000',Then update line 68:
- draftColor: '#cc7b1b', + draftColor: colors.DRAFT,packages/bruno-app/src/themes/light/catppuccin-latte.js (1)
68-68: Consider adding draftColor to the palette constants.Similar to the dark theme variant,
draftColoris hardcoded rather than defined in thecolorspalette. For consistency with the rest of the theme structure, consider adding it to the palette constants.🔎 Proposed refactor to use palette constant
const colors = { // Catppuccin Latte Palette ROSEWATER: '#dc8a78', ... + DRAFT: '#cc7b1b', WHITE: '#fff', BLACK: '#000',Then update line 68:
- draftColor: '#cc7b1b', + draftColor: colors.DRAFT,packages/bruno-app/src/themes/light/light-monochrome.js (2)
329-333: Consider using colors constants for consistency.The
secondaryvariant uses hardcoded color values ('#e5e7eb','#d1d5db') rather than referencing thecolorsconstants like other properties in this theme. Consider using existingcolors.GRAY_Xconstants for better maintainability.🔎 Proposed refactor using colors constants
secondary: { - bg: '#e5e7eb', + bg: colors.GRAY_4, // or add to colors if needed text: colors.TEXT, - border: '#d1d5db' + border: colors.GRAY_5 // or add to colors if needed },Note: If these specific shades aren't in the current
colorsobject, they could be added to maintain consistency.
56-56: Monochrome themes intentionally use gray for draftColor—consider adding a clarifying comment.The light-monochrome theme uses
'#8a8a8a'(gray) fordraftColor, consistent with dark-monochrome.js, while all other themes use'#cc7b1b'(orange/amber). This appears intentional to maintain the grayscale aesthetic. Add a comment explaining this design choice (e.g.,// Gray to maintain monochrome aesthetic) to make the intent clear to future maintainers.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (31)
packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/index.jspackages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.jspackages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/ResponsePane/Overlay/index.jspackages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsxpackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/schema/oss.js
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/StyledWrapper.js
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{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/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/index.jspackages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/components/ResponsePane/Overlay/index.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsxpackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/dark-monochrome.js
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{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
Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Files:
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
🧠 Learnings (6)
📓 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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.jspackages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.jspackages/bruno-app/src/themes/schema/oss.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/WorkspaceHome/WorkspaceOverview/index.jspackages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.jspackages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.jspackages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.jspackages/bruno-app/src/components/RequestPane/WsQueryUrl/index.jspackages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.jspackages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.jspackages/bruno-app/src/components/RequestPane/QueryUrl/index.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/components/ResponsePane/Overlay/index.jspackages/bruno-app/src/themes/schema/oss.jspackages/bruno-app/src/themes/light/light-pastel.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/themes/light/light-monochrome.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/light/catppuccin-latte.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/themes/dark/dark-monochrome.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/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsxpackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/themes/dark/dark.jspackages/bruno-app/src/themes/light/light.jspackages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/themes/light/vscode.jspackages/bruno-app/src/themes/dark/dark-pastel.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/RequestPane/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js
📚 Learning: 2025-12-02T09:45:31.709Z
Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.709Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.
Applied to files:
packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js
🧬 Code graph analysis (17)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js (2)
packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
hasChanges(38-38)packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js (1)
hasChanges(44-44)
packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js (3)
packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js (1)
hasChanges(24-24)packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
hasChanges(38-38)packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)
hasChanges(57-57)
packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (3)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)
packages/bruno-app/src/themes/dark/vscode.js (2)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(3-39)packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)
packages/bruno-app/src/themes/dark/dark.js (1)
packages/bruno-app/src/themes/light/light.js (2)
palette(2-56)palette(2-56)
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx (2)
packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (1)
method(36-36)packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
method(30-30)
packages/bruno-app/src/themes/light/light-pastel.js (2)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)packages/bruno-app/src/themes/light/light-monochrome.js (1)
colors(3-40)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (2)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)
packages/bruno-app/src/themes/light/light-monochrome.js (11)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(3-39)packages/bruno-app/src/themes/dark/dark-pastel.js (1)
colors(10-60)packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)packages/bruno-app/src/themes/dark/nord.js (1)
colors(11-59)packages/bruno-app/src/themes/dark/vscode.js (1)
colors(6-62)packages/bruno-app/src/themes/light/catppuccin-latte.js (1)
colors(6-52)packages/bruno-app/src/themes/light/light-pastel.js (1)
colors(8-57)packages/bruno-app/src/themes/light/vscode.js (1)
colors(5-61)
packages/bruno-app/src/themes/light/light.js (1)
packages/bruno-app/src/themes/dark/dark.js (2)
palette(3-57)palette(3-57)
packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js (6)
packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js (1)
useTheme(11-11)packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (1)
useTheme(34-34)packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
useTheme(28-28)packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js (1)
useTheme(41-41)packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (1)
useTheme(17-17)packages/bruno-app/src/components/RequestTabs/RequestTab/index.js (1)
useTheme(29-29)
packages/bruno-app/src/themes/light/catppuccin-latte.js (1)
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (1)
colors(6-52)
packages/bruno-app/src/themes/light/vscode.js (2)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)packages/bruno-app/src/themes/light/light-monochrome.js (1)
colors(3-40)
packages/bruno-app/src/themes/dark/dark-pastel.js (1)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(88-93)
⏰ 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 - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: Playwright E2E Tests
🔇 Additional comments (36)
packages/bruno-app/src/components/ResponsePane/LargeResponseWarning/index.js (1)
62-93: Size prop additions are valid and properly supported by the Button component.The
size="sm"additions are uniform across all three buttons and follow JSX style guidelines with proper double quotes. The Button component inpackages/bruno-app/src/ui/Button/index.jsexplicitly supports size prop with options['xs', 'sm', 'base', 'md', 'lg'], defined in the styled-components StyledWrapper. No issues with these changes.packages/bruno-app/src/components/WorkspaceHome/WorkspaceDocs/index.js (3)
10-10: LGTM - Import correctly added.The
IconPlusimport is properly added and used in the button icon prop at line 118.
106-106: LGTM - Empty state icon sizing.The increased icon size (28 → 52) improves the visual prominence of the empty state.
118-120: Verify PR alignment with actual changes in this file.The button styling (color="light", size="sm", icon) is correct and follows the pattern used in WorkspaceOverview. However, the PR title states "use theme.draftColor for unsaved changes," but this file doesn't introduce
theme.draftColorusage at all. ThedraftColortoken is actively used elsewhere in the codebase (DraftTabIcon, RequestPane files) for draft indicators, but this button styling change uses a different approach. Clarify whether this button should usetheme.draftColorstyling to align with the PR's stated objective, or if the PR scope differs from the title.packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js (1)
5-5: LGTM—consistent theme token migration.The color reference update from
theme.colors.text.yellowtotheme.primary.textaligns with the broader theme refactor and matches the pattern applied across other auth wrappers.packages/bruno-app/src/components/RequestPane/WSRequestPane/WSAuth/StyledWrapper.js (1)
5-5: LGTM—consistent with auth wrapper refactor.Color token update matches the pattern applied across all auth wrappers in this PR.
packages/bruno-app/src/components/RequestPane/GrpcRequestPane/GrpcAuth/StyledWrapper.js (1)
5-5: LGTM—theme token migration complete for this wrapper.Consistent color reference update matching other auth components.
packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js (1)
15-15: LGTM—consistent theme token update.The
.inherit-mode-textcolor reference follows the same pattern as other auth wrappers.packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/index.js (1)
112-134: The "light" button variant is properly supported across all themes.Verification confirms the theme files (light.js and dark.js) define
button2.color.lightwith all required properties (bg, text, border). The Button component's color prop handler dynamically accesses theme values viaprops.theme.button2.color[color], meaning it automatically supports any color variant defined in the theme—including "light"—without needing explicit validation.packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
338-347: LGTM!The new
lightand updatedsecondarybutton variants correctly use palette constants and thergbahelper for transparency. The structure is consistent with other button color definitions.packages/bruno-app/src/components/RequestTabs/RequestTab/DraftTabIcon.js (1)
1-19: LGTM!Excellent adherence to the coding guidelines by using
theme.draftColorinstead of a hardcoded color value. The implementation correctly leverages theuseThemehook to access theme properties.As per coding guidelines, styled components and React components should use the theme prop for color management.
packages/bruno-app/src/themes/light/catppuccin-latte.js (1)
336-345: LGTM!The
lightandsecondarybutton color variants are properly structured and correctly use palette constants with appropriate transparency values viargba.packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx (1)
205-215: LGTM!The new method styles for gRPC, WebSocket, and GraphQL requests correctly use theme colors and follow the established pattern of existing HTTP method styles. This properly supports the extended method handling introduced in
index.jsx.As per coding guidelines, styled component CSS uses theme props for color management.
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx (1)
17-41: LGTM!The
getMethodInfohelper cleanly handles different request types (gRPC, WebSocket, GraphQL) and provides appropriate method text and CSS classes. The logic is sound and handles fallback cases correctly.packages/bruno-app/src/themes/light/light.js (3)
92-92: LGTM! Draft color added correctly.The
draftColorproperty is positioned appropriately in the theme structure and uses a distinct orange/amber shade suitable for indicating unsaved changes.
360-364: LGTM! Light button variant implemented correctly.The new
lightvariant uses appropriate semi-transparent styling withrgba()for subtle visual hierarchy.
365-369: No action needed. Thebutton2.color.secondarystructure is correct and intentionally limited tobg,text, andborderproperties as defined by the theme schema. The Button component correctly uses only these three properties;hoverBorderbelongs to the legacybutton.secondarystructure and is not part ofbutton2.Likely an incorrect or invalid review comment.
packages/bruno-app/src/themes/dark/catppuccin-mocha.js (3)
68-68: LGTM! Consistent draftColor implementation.The
draftColorvalue matches other themes and maintains consistency across the theme system.
338-342: LGTM! Light variant adapted correctly for Catppuccin Mocha.The variant correctly uses
colors.MAUVE(the theme's brand color) with appropriate transparency levels.
343-347: LGTM! Secondary variant correctly adapted to Catppuccin palette.The colors appropriately use the Catppuccin Mocha surface and text tokens.
packages/bruno-app/src/themes/light/vscode.js (1)
77-77: LGTM! VS Code theme updates are consistent.All changes correctly adapt the new
draftColor,light, andsecondarybutton variants to the VS Code Light+ color palette.Also applies to: 343-352
packages/bruno-app/src/themes/dark/nord.js (1)
75-75: LGTM! Nord theme updates are consistent.All changes properly adapt the new theme properties to the Nord color palette, maintaining the theme's characteristic aesthetic.
Also applies to: 341-350
packages/bruno-app/src/themes/light/light-monochrome.js (1)
324-328: LGTM! Light variant appropriately uses TEXT for monochrome consistency.Using
colors.TEXTinstead ofcolors.BRANDmaintains the monochrome aesthetic while providing the light button variant.packages/bruno-app/src/themes/dark/vscode.js (1)
78-78: LGTM! Draft color and button variants added correctly.The
draftColorand new button variants (light,secondary) are properly integrated into the VS Code Dark+ theme with appropriate color choices that match the theme's aesthetic.Also applies to: 344-353
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
68-68: LGTM! Theme changes align with Catppuccin Frappé palette.The
draftColorand button variants are properly implemented using the Catppuccin color scheme. Thelightvariant appropriately uses the MAUVE brand color with subtle opacity.Also applies to: 338-347
packages/bruno-app/src/themes/schema/oss.js (1)
8-8: LGTM! Schema correctly updated for new theme properties.The schema properly defines
draftColorand the newlightbutton variant with appropriate type definitions and required constraints. Changes are consistent with the theme implementations.Also applies to: 529-538, 580-580, 1189-1189
packages/bruno-app/src/themes/dark/dark-pastel.js (1)
76-76: LGTM! Theme updates maintain the dreamy pastel aesthetic.The
draftColorand button variants are properly integrated with colors that complement the "Nebula" theme's luminous pastel palette.Also applies to: 342-351
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
55-55: LGTM! Monochrome theme correctly uses grayscale draft color.The
draftColorappropriately uses#8a8a8a(gray) instead of orange to maintain the monochrome aesthetic. Button variants properly use grayscale colors consistent with the theme.Also applies to: 325-334
packages/bruno-app/src/themes/dark/dark.js (2)
100-100: LGTM – draftColor addition.The new
draftColorproperty provides a consistent theme token for indicating unsaved changes. The value'#cc7b1b'(warm orange) is appropriate for this purpose.
370-379: LGTM – button2 variant expansion.The new
lightvariant and updatedsecondaryvariant align with the PR's theming goals. The use ofrgba()for the light variant creates a subtle, translucent button style, and the secondary variant now uses semantic palette tokens for better theme consistency.packages/bruno-app/src/themes/light/light-pastel.js (2)
73-73: LGTM – consistent draftColor across themes.The
draftColorvalue matches the dark theme, ensuring a consistent visual indicator for unsaved changes regardless of theme selection.
339-348: LGTM – button2 variants align with theme structure.The
lightandsecondaryvariants follow the same pattern as the dark theme, using appropriate color tokens from the light-pastel palette.packages/bruno-app/src/components/ApiSpecPanel/FileEditor/index.js (1)
40-40: LGTM – consistent use of theme.draftColor.The icon color now correctly uses
theme.draftColorfor unsaved changes, aligning with the theming updates across the application.packages/bruno-app/src/components/RequestPane/QueryUrl/index.js (1)
415-415: LGTM – theme.draftColor for unsaved changes.The save icon now uses
theme.draftColorwhen there are unsaved changes, providing consistent visual feedback across the application.packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js (1)
384-384: LGTM – theme.draftColor applied to gRPC save icon.The save icon color correctly uses
theme.draftColorwhen there are unsaved changes (item.draft), maintaining consistency with other request types.packages/bruno-app/src/components/RequestPane/WsQueryUrl/index.js (1)
151-151: LGTM! Clean theme color migration.The change correctly uses
theme.draftColorto indicate unsaved changes, replacing the previous hardcoded yellow color reference. The ternary logic is sound and aligns with the PR's goal of standardizing draft state visualization across components.
| color: ${(props) => props.theme.primary.text}; | ||
| } | ||
| .auth-mode-label { | ||
| color: ${(props) => props.theme.colors.text.yellow}; |
There was a problem hiding this comment.
Incomplete color token refactor—.auth-mode-label still uses old path.
Line 18 still references theme.colors.text.yellow while the PR's objective is to update color references to use new theme tokens. Consider whether this should also be migrated to theme.primary.text or another appropriate token for consistency.
🔎 Suggested fix if this label should match inheritance text styling
.auth-mode-label {
- color: ${(props) => props.theme.colors.text.yellow};
+ color: ${(props) => props.theme.primary.text};
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/FolderSettings/Auth/StyledWrapper.js around
line 18, the .auth-mode-label still uses the old token theme.colors.text.yellow;
replace this with the new theme token consistent with the refactor (e.g.,
theme.primary.text if the label should use primary text color, or
theme.text.inherit if it should follow inherited text styling). Update the
styled-component interpolation to use the chosen token (props =>
props.theme.<token>) and run a quick visual check to confirm the color matches
other refactored components.
| <div className={`method ${getMethodInfo(item).methodClass}`}> | ||
| {getMethodInfo(item).methodText} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Optimize duplicate function calls.
getMethodInfo(item) is called twice—once for methodClass and once for methodText. This is inefficient. Call it once and destructure the result.
🔎 Proposed optimization
+ const { methodText, methodClass } = getMethodInfo(item);
- <div className={`method ${getMethodInfo(item).methodClass}`}>
- {getMethodInfo(item).methodText}
+ <div className={`method ${methodClass}`}>
+ {methodText}
</div>🤖 Prompt for AI Agents
In
packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/index.jsx
around lines 140 to 142, avoid calling getMethodInfo(item) twice by calling it
once, storing its result in a local variable (or destructuring methodClass and
methodText from it), and then using those variables in the JSX className and
content; update the code to compute the values before the return/JSX and replace
both getMethodInfo(item) calls with the local variables.
* fix: use themes within protobuf section (#6575) * fix: use themes within protobuf section * chore: fix font weight for protobuf settings --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * fix: radios buttons to use primary color (#6576) * fix: cookie modal theme (#6580) * fix: cookie modal theme * update toggle switch to use primary color * style: enhance theme dropdown and security settings with improved styles and active indicators (#6582) * style: enhance CodeMirror dropdown styles with theme integration (#6577) * style: enhance CodeMirror dropdown styles with theme integration for improved consistency * style: refine dropdown and CodeMirror hint styles for improved consistency and usability * style: clean up scrollbar and CodeMirror hint styles for improved readability * remove max height for keybinding table (#6586) * fix: Add New Request CTA alignment in tabs (#6584) * fix: Add New Request CTA alignment in tabs - Moved the '+' icon before the chevron to maintain alignment once chevrons appear - Added padding to the '+' icon for better spacing. * refactor: streamline New Request button rendering in RequestTabs component - Simplified the rendering logic for the New Request button by removing unnecessary conditional wrappers. - Ensured the button remains functional and maintains its styling within the tab layout. * chore: update delete confirmation modals to use danger button color (#6589) * refactor: remove size prop from Button components for consistency across modals and improve styling * style: update confirm button colors in modal components for consistency * fix: oauth2 callback url field placeholder text update (#6588) * Fix auth panel UI updates (#6590) * style: update padding and font size in OAuth2 and Table components for improved consistency * style: update font styles in OAuth2 components for improved readability * fix: add missing semicolon in StyledWrapper.js for consistent styling * fix: standardize table border colors and improve table styling (#6597) * style: update OAuth2 section labels for improved consistency and readability (#6598) * fix: prefrence modal width (#6595) * fix: theme within grpc timeline (#6581) * fix: theme within grpc timeline * fix: use font from the theme * remove y padding to make timeline item more compact * fix: font * fix: padding * fix: use fira code * fix: icon spacing * add border to the method search * show bg for message section within request * fix: collection already opened in other workspace (#6574) * fix: collection already opened in other workspace * fix * fixes * Merge pull request #6583 from naman-bruno/add/collection-docs add: collection-docs * add: beta tag for opencollection & fix create collection location behaviour (#6594) * add: beta tag for opencollection * fixes * fix * feat: improved dark mode color (#6616) * fix: resolve request pane tooltip visibility issue (#6615) * Feat/update file picker (#6614) * styling: file-picker editor component * use filepicker component within filebody and response example filebody * edit example to use button components * fix: hide delete, disable checkbox in preview mode * make label italic * chore: change example cta buttons to filled style --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * fix: folder docs save button visibility issue (#6617) * refactor: improve theme handling in ThemeProvider for better responsiveness to system preferences (#6606) * refactor: improve theme handling in ThemeProvider for better responsiveness to system preferences - Introduced helper functions to determine effective theme and apply it to the root element. - Updated theme application logic to respond to system theme changes more efficiently. - Simplified theme computation to avoid race conditions by directly using storedTheme. * fix: update displayedTheme initialization in ThemeProvider to use storedTheme for consistency * fix: use theme styling within timeline (#6604) * fix: use theme styling within timeline * fix: remove inline styling and use css classes * fix: network logs within dev tools * compact timeline for grpc * refactor: standardize CSS class naming in StyledWrapper components for better readability * remove styling configuration from Network component * fix: update colors * update colors * fix: color * feat: improve RunnerResults filter bar to use theme system (#6613) * feat: integrate theme support in RunnerResults component for improved styling * refactor: simplify RunnerResults component and enhance filter button styling * style: adjust padding in StyledWrapper and remove aria-pressed from FilterButton * add: global env and workspace flag (#6534) * add: global env and workspace flag * rm: await * update: option name * fix * fix * fix: invalid collection in workspace (#6612) * fix: update Notifications and StatusBar components for improved functionality and styling (#6607) * feat: use theme colors for Console method badges (#6603) * feat: use theme colors for Console method badges * chore(theme): bruno devtools UX updates --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * fix: update @opencollection/types to version 0.6.0 and refactor auth handling in request items (#6619) * feat: enhance HttpMethodSelector to include caret indicator when creating new request (#6620) * feat(theme): update secondary button styles (#6621) * feat: update toast UI to match theme (#6622) * Improve delete collection in workspace overview (#6587) * Improve delete collection in workspace overview * fixes * Feat/v3 UI updates (#6618) * style: enhance button layout and input styles across multiple components for improved UI consistency * style: update RequestsNotLoaded component with new warning styles and enhance theme color definitions for status indicators * refactor: update theme usage across components for consistency - Changed color references from theme.brand to theme.primary.text in various StyledWrapper components. - Added hover effects to enhance UI interactivity in CollectionSettings and FolderSettings. - Removed unnecessary margin and padding adjustments in several components for cleaner layout. - Improved accessibility by ensuring aria attributes are correctly set in MenuDropdown. - Standardized styling for method indicators in RequestPane components. These changes aim to create a more cohesive look and feel across the application while adhering to the updated theme guidelines. * refactor: clean up method selector styling in NewRequest component * chore: temp playwright test fixes * refactor: update modal sizes across various components for consistency - Changed modal size from "sm" to "md" in RenameWorkspace, CreateApiSpec, CloneCollection, DeleteCollectionItem, and RenameCollection components. - Improved styling in HttpMethodSelector by adding padding for better layout. - Updated theme color references in multiple theme files to use a new palette structure for consistency and maintainability. * refactor: enhance styling and theme integration in TimelineItem components - Updated HttpMethodSelector to clarify padding calculation in comments. - Integrated theme colors for OAuth2 indicator and timestamp in TimelineItem for better visual consistency. - Adjusted Method component to use uppercase styling for method display. - Modified RelativeTime component to apply muted text color for improved readability. - Updated INFO color in dark and light themes for better contrast and accessibility. * refactor: remove duplicate import statements in theme files - Cleaned up import statements in vscode.js and light-pastel.js by removing redundant lines for improved code clarity and maintainability. * refactor: improve styling and theme integration in various components - Added accent color and cursor style for checkbox inputs in Modal's StyledWrapper. - Updated border-radius values in HttpMethodSelector and NewRequest StyledWrapper components to use theme variables for consistency. - Introduced a new textbox class in NewRequest StyledWrapper for better styling control. - Changed modal size from "sm" to "md" in CreateEnvironment for improved layout. --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * fix(UX): fix sandbox selector options background color (#6626) * update cdn links (#6628) * fix: toggle switch color (#6627) * fix: modal icon colors to match button colors (#6624) * style: update warning icon color in RemoveCollection and ConfirmSwitchEnv components to use theme colors * fix: font size in BulkEditor * style: update error message styling to use theme colors in QueryResult component * style: update warning icon color * style: update warning color in ConfirmSwitchEnv * chore: minor pr comment --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * fix: folder settings var panel table alignment (#6631) * style: remove font size class from button (#6630) * fix: authmode in graphql (#6636) * fix: file picker component overflow (#6635) * fix: tooltip styling (#6632) * refactor: update color references in OAuth2 components to use theme.primary.text for improved consistency (#6629) * refactor: update color references in OAuth2 components to use theme.primary.text for improved consistency * refactor: update modal size in ImportCollectionLocation component for improved consistency * refactor: set isActiveTab prop in QueryResponse component and update active color in StyledWrapper for consistency * feat: update "Show in Folder" label based on platform in ManageWorkspace, Collection, CollectionItem, and WorkspaceHome components (#6623) * feat: update "Show in Folder" label based on platform in ManageWorkspace, Collection, CollectionItem, and WorkspaceHome components * refactor: remove duplicate "Rename" item push in CollectionItem component * style: update text color classes and button hover effects in RunnerResults (#6637) * style: update text color classes and button hover effects in RunnerResults and StyledWrapper components * Update StyledWrapper.jsx --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * style: update variable validation colors in StyledWrapper components to use theme colors (#6633) * refactor: update Tabs component structure and theme colors (#6638) - Replaced the div wrapper in the Tabs component with StyledWrapper for improved styling. - Simplified TabsList and TabsTrigger components by removing theme dependency and using classnames for styling. - Updated inactive background colors in multiple theme files to enhance visual consistency across themes. * feat: integrate theme support in ImportCollection component (#6639) * feat: integrate theme support in ImportCollection component for improved styling consistency * chore: remove debug console log from ImportCollection component * refactor: update theme import in ImportCollection component for improved consistency * style: enhance syntax highlighting in GQL Docs and Doc Gen (#6640) * style: enhance syntax highlighting and theme integration in QueryEditor and GenerateDocs components * fix: fixed generate code theming issues * style: update color references to use theme.draftColor for unsaved changes across multiple components (#6641) * chore: theme updates (#6642) --------- Co-authored-by: sanish chirayath <sanish@usebruno.com> Co-authored-by: Abhishek S Lal <abhishek@usebruno.com> Co-authored-by: Pooja <pooja@usebruno.com> Co-authored-by: Chirag Chandrashekhar <chirag@usebruno.com> Co-authored-by: Sanjai Kumar <161328623+sanjaikumar-bruno@users.noreply.github.com> Co-authored-by: lohit <lohit@usebruno.com> Co-authored-by: gopu-bruno <gopu@usebruno.com> Co-authored-by: naman-bruno <naman@usebruno.com> Co-authored-by: Anoop M D <anoop@usebruno.com>
Description
Update color references to use theme.draftColor for unsaved changes across multiple components
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
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.