fix oauth checkbox, button styles#6572
Conversation
WalkthroughThis PR applies consistent checkbox styling across OAuth2 authentication components and refactors the Oauth2ActionButtons component to use a shared Button component instead of native HTML buttons. The changes are primarily presentational, standardizing checkbox appearance and button component usage. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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)
45-45: Pre-existing CSS syntax error.Line 45 has a colon after
.tippy-contentwhere there should be a space. This should be.tippy-content {not.tippy-content: {. While not introduced by this PR, it's worth fixing.🔎 Proposed fix
- .tippy-content: { + .tippy-content {packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
45-45: Pre-existing CSS syntax error.Line 45 has a colon after
.tippy-contentwhere there should be a space. This should be.tippy-content {not.tippy-content: {. While not introduced by this PR, it's worth fixing.🔎 Proposed fix
- .tippy-content: { + .tippy-content {
🧹 Nitpick comments (2)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js (1)
171-177: Consider disabling Clear Cache button during token operations.The Clear Cache button currently has no disabled state during
fetchingTokenorrefreshingToken. You may want to adddisabled={fetchingToken || refreshingToken}to prevent users from clearing cache while token operations are in progress, maintaining consistency with the other action buttons' UX.packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js (1)
13-37: Consider reducing !important usage and specificity.The changes add multiple
!importantdeclarations (lines 19, 20, 32, 33, 34) and make the selector more specific (div.tabs div.tab). This suggests potential specificity conflicts or style inheritance issues. While this may work, it could make the styles brittle and harder to maintain.Consider investigating if there's a cleaner way to achieve this without fighting other styles.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CODING_STANDARDS.md)
**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions.() => {}is good
No space between function name and parentheses.func()notfunc ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly
Files:
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/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/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
🧠 Learnings (4)
📚 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/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/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/ClientCredentials/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 Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/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/ClientCredentials/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/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/ClientCredentials/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/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/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/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js (1)
packages/bruno-app/src/ui/Button/index.js (1)
Button(4-79)
🔇 Additional comments (7)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js (1)
1-182: Clean refactoring to shared Button component with proper prop wiring.The migration from HTML buttons to the Button component is consistent across all four action buttons. Import placement is correct, and all Button props (size, color, loading, disabled, icon, iconPosition) are wired appropriately to existing state flags. Loading states are properly displayed for token operations, and the icon prop integration for Cancel Authorization is sound.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js (1)
65-69: LGTM! Consistent checkbox styling.The checkbox styling correctly uses the theme's primary color and improves user experience with the pointer cursor. This aligns with the same pattern applied across other OAuth2 components.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
65-69: LGTM! Consistent checkbox styling.The checkbox styling correctly uses the theme's primary color and improves UX. Implementation is consistent across OAuth2 components.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js (1)
14-18: LGTM! Consistent checkbox styling.The checkbox styling correctly uses the theme's primary color and cursor pointer for better UX. Consistent with the other OAuth2 component wrappers.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js (1)
69-73: LGTM! Consistent checkbox styling.The checkbox styling follows the same pattern as other OAuth2 components, correctly using theme colors and improving UX.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js (1)
65-69: LGTM! Consistent checkbox styling.The checkbox styling correctly uses the theme's primary color and pointer cursor. Consistent with other OAuth2 components.
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js (1)
81-84: LGTM! Consistent checkbox styling.The checkbox styling matches the pattern used across other OAuth2 components, correctly using theme colors and improving UX.
Screen.Recording.2025-12-30.at.11.05.57.PM.mov
Description
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.