fix: modal icon colors to match button colors by sanjaikumar-bruno · Pull Request #6624 · usebruno/bruno

sanjaikumar-bruno · 2026-01-02T10:25:45Z

Summary by CodeRabbit

Style
- Warning and alert icons now use themed warning colors in modals and dialogs for consistent visuals.
- Error and warning text styles updated to use themed colors for improved visual consistency.
New Features
- Bulk editor now respects the user’s configured code font and also supports a configured code font size for improved readability.

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

coderabbitai · 2026-01-02T10:25:54Z

Caution

Review failed

The pull request is closed.

Walkthrough

Adds theme-backed warning/error styles, replaces hardcoded utility classes with theme-based classes/inline colors, and reads editor font preferences via lodash.get; all changes are presentational or small local logic tweaks without API or behavioral changes.

Changes

Cohort / File(s)	Summary
RemoveCollection styling `packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js`, `packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js`	Adds `.warning-icon` using `theme.status.warning.text`; changes `IconAlertCircle` className from `text-red-500` to `warning-icon`.
ConfirmSwitchEnv theming `packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js`	Imports `useTheme`, reads `theme.status.warning.text` into `warningColor`, and applies it as inline color to `IconAlertTriangle` (replacing `text-yellow-600`).
QueryResult error styling `packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js`, `packages/bruno-app/src/components/ResponsePane/QueryResult/index.js`	Adds `.error` class using `theme.colors.text.danger`; replaces `text-red-500` with `error` for error message rendering.
BulkEditor preference handling `packages/bruno-app/src/components/BulkEditor/index.js`	Adds `import get from 'lodash/get'`; uses `get(preferences, 'font.codeFont', 'default')` and `get(preferences, 'font.codeFontSize')` for font and fontSize access.

Sequence Diagram(s)

(omitted — changes are styling/theme and small local logic tweaks, not a new multi-component control flow)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

chore: update delete confirmation modals to use danger button color #6589: Modifies styling for the RemoveCollection modal and warning/danger visuals in the same component area.

Suggested reviewers

helloanoop
lohit-bruno

Poem

A tiny tint, a themed design,
Icons shifted, fonts align.
Errors dressed in proper hue,
Small fixes, tidy through and through. 🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating modal icon colors to use theme-based warning/error colors instead of hardcoded Tailwind classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff1b4f1 and b554b7e.

📒 Files selected for processing (1)

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 058d2e0 and 503268e.

📒 Files selected for processing (3)

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

🧠 Learnings (5)

📓 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

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

📚 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/Sidebar/Collections/Collection/RemoveCollection/index.js
packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.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/Sidebar/Collections/Collection/RemoveCollection/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/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js

📚 Learning: 2025-12-05T20:31:33.005Z

Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Use styled component's theme prop to manage CSS colors and not CSS variables when in the context of a styled component or any React component using the styled component

Applied to files:

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js
packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

🧬 Code graph analysis (1)

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js (7)

packages/bruno-app/src/components/CollectionSettings/Headers/index.js (1)

useTheme (19-19)

packages/bruno-app/src/components/CollectionSettings/Tests/index.js (1)

useTheme (15-15)

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js (1)

useTheme (28-28)

packages/bruno-app/src/components/CollectionSettings/Script/index.js (1)

useTheme (20-20)

packages/bruno-app/src/components/FolderSettings/Headers/index.js (1)

useTheme (19-19)

packages/bruno-app/src/components/FolderSettings/Tests/index.js (1)

useTheme (15-15)

packages/bruno-app/src/components/FolderSettings/Script/index.js (1)

useTheme (20-20)

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

🔇 Additional comments (3)

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

48-48: Excellent migration from Tailwind to theme-based styling.

Replacing text-red-500 with warning-icon correctly moves the color management to the styled-component theme system, ensuring consistent warning colors across the application.

Based on learnings, this properly removes color definition from Tailwind classes and relies on styled-component theming.

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js (2)

6-10: Clean theme integration.

The useTheme hook integration correctly derives the warning color from the theme configuration, maintaining consistency with the other changes in this PR.

Based on learnings, this properly uses the theme prop to manage colors rather than hardcoded values.

27-27: Inline style approach is appropriate here.

Since this component doesn't use StyledWrapper, applying the theme color via inline style is the right choice. This differs from the CSS class approach in RemoveCollection/index.js, but both methods are valid—the CSS class approach works well with StyledWrapper, while inline styles are cleaner when no wrapper exists.

coderabbitai · 2026-01-02T10:29:00Z

...es/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js

+  .warning-icon {
+    color: ${(props) => props.theme.button2.color.warning.bg};
+  }


⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# Search for theme configuration files fd -e js -e ts -e json "theme" | grep -E "(theme|config)" | head -20

Repository: usebruno/bruno

Length of output: 40

🏁 Script executed:

# Search for button2 color definitions rg -n "button2" --type=js --type=ts | head -30

Repository: usebruno/bruno

Length of output: 3154

🏁 Script executed:

# Look for warning color definitions in theme context rg -n "warning.*bg|color.*warning" --type=js --type=ts | head -30

Repository: usebruno/bruno

Length of output: 4648

🏁 Script executed:

# Look at the button2 structure in a theme file rg -A 30 "button2:" packages/bruno-app/src/themes/schema/oss.js | head -50

Repository: usebruno/bruno

Length of output: 1006

🏁 Script executed:

# Also check a specific theme implementation rg -A 20 "button2:" packages/bruno-app/src/themes/light/vscode.js | head -40

Repository: usebruno/bruno

Length of output: 507

🏁 Script executed:

# Check the actual file and surrounding context cat -n packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js

Repository: usebruno/bruno

Length of output: 987

🏁 Script executed:

# Check if button2.color.warning.text is available rg -A 10 "warning:" packages/bruno-app/src/themes/light/vscode.js | grep -A 3 "warning:"

Repository: usebruno/bruno

Length of output: 270

🏁 Script executed:

# Look for similar warning icon patterns in codebase rg "\.warning-icon|warning.*icon" --type=js --type=jsx -B 2 -A 2

Repository: usebruno/bruno

Length of output: 85

🏁 Script executed:

# Check how Button component uses button2.color.warning rg "button2.color" packages/bruno-app/src/ui/Button/StyledWrapper.js -B 3 -A 3 | grep -A 5 -B 5 "warning"

Repository: usebruno/bruno

Length of output: 40

🏁 Script executed:

# Search for other uses of warning icon styling to understand the pattern rg "warning.*icon|icon.*warning" --type=js -B 2 -A 2

Repository: usebruno/bruno

Length of output: 5091

Use the correct theme property for warning icon color.

The theme path exists but button2.color.warning.bg is the background color (#bf8803). For icon styling, use button2.color.warning.text (white) or follow the codebase pattern of theme.colors.text.warning, which other warning icons use (see Cookies/StyledWrapper.js, LargeResponseWarning/StyledWrapper.js).

🤖 Prompt for AI Agents

In packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js around lines 24 to 26, the .warning-icon color uses props.theme.button2.color.warning.bg (a background hex) but should use the theme value intended for icon/text; change the property to either props.theme.button2.color.warning.text or to the shared pattern props.theme.colors.text.warning to match other warning icons (Cookies/StyledWrapper.js, LargeResponseWarning/StyledWrapper.js), update the reference accordingly and ensure imports/types still align with the chosen theme path.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/bruno-app/src/components/BulkEditor/index.js (1)

25-26: CodeEditor gracefully handles undefined fontSize, but consider adding a default for consistency.

The font property receives a default value ('default'), while fontSize doesn't. Though CodeEditor's StyledWrapper falls back to 'inherit' when fontSize is undefined, this pattern is inconsistent. All 27+ CodeEditor usages across the codebase follow the same pattern without a default, suggesting this is intentional. Adding a default (e.g., '13', which the Preferences component uses) would improve consistency.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 503268e and eb1fc5b.

📒 Files selected for processing (1)

packages/bruno-app/src/components/BulkEditor/index.js

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

packages/bruno-app/src/components/BulkEditor/index.js

🧠 Learnings (1)

📚 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/BulkEditor/index.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: CLI Tests
GitHub Check: Playwright E2E Tests
GitHub Check: Unit Tests
GitHub Check: SSL Tests - macOS
GitHub Check: SSL Tests - Windows
GitHub Check: SSL Tests - Linux

🔇 Additional comments (1)

packages/bruno-app/src/components/BulkEditor/index.js (1)

2-2: LGTM! Safe property access pattern.

The lodash get import enables safe access to nested preferences, preventing potential runtime errors if the preferences structure is undefined.

...es/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js

…hEnv components to use theme colors

…t component

...o-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

* 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) --------- 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>

* 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>

sanjaikumar-bruno requested review from bijin-bruno, helloanoop, lohit-bruno and naman-bruno as code owners January 2, 2026 10:25

pull-request-size bot added the size/S label Jan 2, 2026

coderabbitai bot reviewed Jan 2, 2026

View reviewed changes

bijin-bruno requested changes Jan 2, 2026

View reviewed changes

...es/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js Outdated Show resolved Hide resolved

sanjaikumar-bruno added 3 commits January 2, 2026 17:38

style: update warning icon color in RemoveCollection and ConfirmSwitc…

a058a63

…hEnv components to use theme colors

fix: font size in BulkEditor

642f14f

style: update error message styling to use theme colors in QueryResul…

4c58318

…t component

sanjaikumar-bruno force-pushed the fix/modal-icon-colors branch from df99ab8 to 4c58318 Compare January 2, 2026 12:09

sanjaikumar-bruno added 2 commits January 2, 2026 17:41

style: update warning icon color

b5a13db

style: update warning color in ConfirmSwitchEnv

ff1b4f1

bijin-bruno previously approved these changes Jan 2, 2026

View reviewed changes

sanish-bruno suggested changes Jan 2, 2026

View reviewed changes

...o-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js Outdated Show resolved Hide resolved

chore: minor pr comment

b554b7e

bijin-bruno dismissed their stale review via b554b7e January 2, 2026 12:48

bijin-bruno approved these changes Jan 2, 2026

View reviewed changes

bijin-bruno merged commit f90f256 into usebruno:main Jan 2, 2026
7 of 8 checks passed

sanjaikumar-bruno deleted the fix/modal-icon-colors branch January 2, 2026 12:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: modal icon colors to match button colors#6624

fix: modal icon colors to match button colors#6624
bijin-bruno merged 6 commits intousebruno:mainfrom
sanjaikumar-bruno:fix/modal-icon-colors

sanjaikumar-bruno commented Jan 2, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 2, 2026 •

edited

Loading

Review failed

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Jan 2, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sanjaikumar-bruno commented Jan 2, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 2, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sanjaikumar-bruno commented Jan 2, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 2, 2026 •

edited

Loading