fix: oauth setup component colors#6565
Conversation
WalkthroughRefactors OAuth2 UI styling across multiple grant-type components to use theme-driven colors via Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
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: 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/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (1)
51-51: Fix CSS syntax error.Line 51 has invalid CSS syntax with a colon after the selector.
🔎 Proposed fix
- .tippy-content: { + .tippy-content {packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (1)
37-37: Fix CSS syntax error.Line 37 has invalid CSS syntax with a colon after the selector.
🔎 Proposed fix
- .tippy-content: { + .tippy-content {
🧹 Nitpick comments (6)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
2-17: Theme-driven styling looks good, but consider simplifying the conditional.The new rgba-based theming for icon containers and icons follows the project's styling standards correctly.
Optional: Simplify redundant dark mode conditional
Lines 8-11 have both branches returning the same value. Consider simplifying:
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }Based on learnings, styled components use the theme prop for color management.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (1)
2-17: Theme-driven styling implemented correctly, with simplification opportunity.The new rgba-based theming for icon containers and icons follows the project's styling standards.
Optional: Simplify redundant dark mode conditional
Lines 8-11 have both branches returning the same value. Consider simplifying:
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }Based on learnings, styled components use the theme prop for color management.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (1)
2-17: Theme-driven styling looks good, with simplification opportunity.The rgba-based theming aligns with the project's styling standards and the broader OAuth2 UI refactor.
Optional: Simplify redundant dark mode conditional
Lines 8-11 have both branches returning the same value. Consider simplifying:
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }Based on learnings, styled components use the theme prop for color management.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (1)
2-17: Theme-driven styling implemented correctly, with simplification opportunity.The new rgba-based theming for icon containers and icons follows the project's styling standards.
Optional: Simplify redundant dark mode conditional
Lines 8-11 have both branches returning the same value. Consider simplifying:
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }Based on learnings, styled components use the theme prop for color management.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
5-17: Simplify the redundant conditional.The dark mode check returns the same value for both branches. Consider simplifying:
🔎 Proposed simplification
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }Based on learnings, the theme-driven color approach is correct.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js (1)
5-13: Simplify the redundant conditional.The dark mode check returns the same value for both branches.
🔎 Proposed simplification
.oauth2-icon-container { - background-color: ${(props) => { - const primaryColor = props.theme.primary.solid; - if (props.theme.mode === 'dark') { - return rgba(primaryColor, 0.1); - } - return rgba(primaryColor, 0.1); - }}; + background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)}; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
🧠 Learnings (7)
📓 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-02T07:24:50.311Z
Learnt from: bijin-bruno
Repo: usebruno/bruno PR: 6263
File: packages/bruno-requests/src/auth/oauth2-helper.ts:249-249
Timestamp: 2025-12-02T07:24:50.311Z
Learning: In OAuth2 Basic Auth headers for Bruno, clientSecret is optional and can be omitted. When constructing the Authorization header in `packages/bruno-requests/src/auth/oauth2-helper.ts`, use `clientSecret || ''` instead of `clientSecret!` to properly handle cases where only clientId is provided, per community requests.
Applied to files:
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/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/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/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/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.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/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/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/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js
🧬 Code graph analysis (7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (4)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (2)
Wrapper(4-67)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (2)
Wrapper(4-75)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js (5)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
Wrapper(4-71)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
Wrapper(4-71)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (1)
Wrapper(4-67)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (1)
Wrapper(4-75)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (1)
Wrapper(4-71)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (3)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (2)
Wrapper(4-67)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (2)
Wrapper(4-75)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (2)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (2)
Wrapper(4-67)primaryColor(7-7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (3)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (2)
Wrapper(4-71)primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (2)
Wrapper(4-67)primaryColor(7-7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (3)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
Wrapper(4-71)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
Wrapper(4-71)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (1)
Wrapper(4-75)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js (5)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (1)
primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (1)
primaryColor(7-7)packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (1)
primaryColor(7-7)
⏰ 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: Unit Tests
- GitHub Check: CLI Tests
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - Linux
🔇 Additional comments (11)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js (1)
2-11: LGTM! Theme-driven styling implemented correctly.The rgba-based theming for the copy button aligns with the project's styling standards and the broader OAuth2 UI refactor. The hover state provides good visual feedback.
Based on learnings, styled components should use the theme prop for colors rather than CSS variables.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
51-51: Good catch on the CSS syntax fix.Correcting
.tippy-content: {to.tippy-content {fixes the invalid CSS syntax.packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js (1)
77-78: LGTM! Class refactor aligns with theming strategy.Replacing inline Tailwind color utilities with the generic
oauth2-icon-containerandoauth2-iconclasses centralizes styling in the StyledWrapper and follows the project's coding guidelines.Based on learnings, Tailwind classes are used for layout, while styled components handle colors.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js (1)
57-57: LGTM! Button styling refactored to use theme-driven class.Replacing inline color utilities with the
oauth2-copy-buttonclass centralizes styling and aligns with the broader OAuth2 UI theming refactor.packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js (1)
111-112: LGTM! Icon wrappers refactored consistently.All three icon containers (Settings, Key, and AdjustmentsHorizontal) now use the standardized
oauth2-icon-containerandoauth2-iconclasses, replacing inline Tailwind color utilities with theme-driven styling managed by the StyledWrapper.Based on learnings, Tailwind classes handle layout while styled components manage colors.
Also applies to: 179-180, 264-265
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js (1)
170-171: LGTM!The migration from hard-coded indigo classes to theme-driven
oauth2-icon-containerandoauth2-iconclasses aligns with the PR's unified theming approach.packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js (1)
156-157: LGTM!The consistent migration of all four icon blocks (Configuration, Token, Advanced Settings, Settings) to the unified
oauth2-icon-containerandoauth2-iconpattern improves theming consistency across the OAuth2 UI.Also applies to: 261-262, 344-345, 368-369
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js (1)
98-99: LGTM!Consistent refactoring of all icon wrappers to use the theme-driven approach. The changes align with the unified OAuth2 styling pattern established across the PR.
Also applies to: 156-157, 239-240, 263-264
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js (1)
94-95: LGTM!The icon wrapper updates are consistent with the unified theming approach. All four sections properly utilize the new
oauth2-icon-containerandoauth2-iconclasses.Also applies to: 152-153, 235-236, 259-260
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js (2)
19-39: LGTM!The tab styling correctly uses theme-driven colors with appropriate differentiation between hover (0.1 opacity) and active states (0.2 for dark, 0.1 for light mode).
Based on learnings, the theme prop usage is correct.
62-82: LGTM!The additional theming updates for the selector focus state and hover actions properly utilize
theme.primary.solidfor consistent color management.Based on learnings, the theme prop usage is correct.
Description
PR aims setup theme colors within oauth2 components
Screen.Recording.2025-12-30.at.6.54.05.PM.mov
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.