fix: replace hardcoded yellow text color with theme brand color#6538
Conversation
WalkthroughThis PR updates color styling across six authentication component files, replacing explicit yellow text color references with brand-themed values or removing them entirely to allow default styling inheritance. No functional or control flow changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
💤 Files with no reviewable changes (2)
- packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.js
- packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/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/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.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-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/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/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/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/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/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.jspackages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/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/FolderSettings/AuthMode/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
🔇 Additional comments (3)
packages/bruno-app/src/components/FolderSettings/AuthMode/StyledWrapper.js (1)
10-10: Consistent color theming applied.The change to
theme.brandmatches the pattern across other auth components in this PR. Good consistency.packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js (1)
31-31: LGTM - consistent brand color application.The grant type label now uses
theme.brand, aligning with the auth mode label changes across the codebase.packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js (1)
10-10:theme.brandis properly defined and the change is correct. The property exists in all theme configurations (schema defines it as a string type), is consistently implemented across multiple color schemes, and is widely used throughout the codebase in similar styled component contexts. The change maintains consistency with the existing pattern.
|
|
||
| .auth-mode-label { | ||
| color: ${(props) => props.theme.colors.text.yellow}; | ||
| color: ${(props) => props.theme.brand}; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for remaining instances of theme.colors.text.yellow
rg -n "theme\.colors\.text\.yellow" --type=js --type=ts --type=jsx --type=tsxRepository: usebruno/bruno
Length of output: 85
🏁 Script executed:
#!/bin/bash
# Verify the current state of the target file
cat -n packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js | head -20Repository: usebruno/bruno
Length of output: 576
🏁 Script executed:
#!/bin/bash
# Search for remaining instances of theme.colors.text.yellow using valid file types
rg -n "theme\.colors\.text\.yellow" --type=js --type=tsRepository: usebruno/bruno
Length of output: 7199
Refactoring incomplete—40+ instances of theme.colors.text.yellow remain throughout the codebase.
While this file correctly uses props.theme.brand, the refactoring is not comprehensive. Dozens of other styled components still reference theme.colors.text.yellow across ResponsePane, RequestPane, Checkbox, RadioButton, CollectionSettings, and other components. Either this PR should include all refactoring changes, or a follow-up is needed to complete the migration consistently.
🤖 Prompt for AI Agents
In
packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
around line 10, this file correctly uses props.theme.brand but the refactor is
incomplete across the repo—there are 40+ remaining references to
theme.colors.text.yellow; search the codebase for theme.colors.text.yellow (or
equivalent hard-coded yellow color tokens) and replace them with the new theme
property (props.theme.brand or the appropriate semantic token for each usage),
update any affected styled-components imports/props to accept theme where
missing, ensure you preserve intent (hover/active/disabled variants map to the
correct semantic token), run the repo-wide tests/build and a quick visual check
of affected panes (ResponsePane, RequestPane, Checkbox, RadioButton,
CollectionSettings) to confirm no regressions, and either include all
replacements in this PR or create a follow-up with a clear migration checklist.
Description
Replace hardcoded yellow text color with theme brand color
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.