Merged
Conversation
Contributor
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR tightens form spacing, introduces a compact rendering flag for SingleLineEditor, and migrates many modal-specific theme tokens to generic input tokens while updating dark-theme input appearances and several label typography tokens. Changes
Sequence Diagram(s)(Skipped — changes are presentational and styling-focused; no new multi-component control-flow introduced that meets the diagram criteria.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
⏰ 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)
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 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR revamps the dark mode input styling to achieve a more compact, modern appearance. The changes unify the theme structure by migrating from theme.modal.input to theme.input across the codebase, make input backgrounds transparent for better visual consistency, and introduce a new isCompact prop to the SingleLineEditor component for reduced height in auth forms.
Key changes:
- Input backgrounds changed to
transparentand placeholder opacity reduced from 0.75 to 0.6 across all dark themes - SingleLineEditor component enhanced with
isCompactmode for reduced vertical spacing - Dropdown font size reduced from
basetosmfor a more compact UI
Reviewed changes
Copilot reviewed 64 out of 64 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bruno-app/src/themes/dark/*.js | Updated all dark theme input configurations to use transparent backgrounds, adjusted borders, and reduced placeholder opacity to 0.6 |
| packages/bruno-app/src/components/SingleLineEditor/index.js | Added isCompact prop support to enable compact mode |
| packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js | Implemented dynamic sizing based on isCompact prop with reduced heights and adjusted cursor positioning |
| packages/bruno-app/src/components/RequestPane/Auth/*/index.js | Applied isCompact prop to all auth form inputs and adjusted label styling (removed font-medium, changed margins) |
| packages/bruno-app/src/components/RequestPane/Auth/*/StyledWrapper.js | Updated label styles to use smaller font size (sm) and muted color (subtext1) |
| packages/bruno-app/src/components/CollectionSettings/Auth/*/index.js | Applied same compact styling and isCompact prop as request pane auth components |
| packages/bruno-app/src/components/CollectionSettings/Auth/*/StyledWrapper.js | Updated label styles to match request pane conventions |
| packages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.js | Migrated from theme.modal.input to theme.input for consistent theming |
| packages/bruno-app/src/components/Modal/StyledWrapper.js | Migrated input styling to use theme.input instead of theme.modal.input |
| packages/bruno-app/src/components/*/StyledWrapper.js (multiple) | Migrated all input styling references from theme.modal.input to theme.input |
| packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js | Updated to use unified theme properties, improved styling with theme-based rgba colors, and better visual consistency |
| packages/bruno-app/src/components/Dropdown/StyledWrapper.js | Reduced font size from base to sm for more compact dropdown appearance |
| packages/bruno-app/src/components/Environments/EnvironmentSelector/*.js | Adjusted tab header padding and font size to match compact design |
Comments suppressed due to low confidence (3)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js:131
- The placeholder opacity is set to 0.75 here, but other dark themes in this PR use 0.6 for consistency (see dark.js, dark-pastel.js, nord.js, vscode.js, dark-monochrome.js lines 138-140). Consider updating this to 0.6 to maintain consistency across all dark themes.
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js:131 - The placeholder opacity is set to 0.75 here, but other dark themes in this PR use 0.6 for consistency (see dark.js, dark-pastel.js, nord.js, vscode.js, dark-monochrome.js lines 138-140). Consider updating this to 0.6 to maintain consistency across all dark themes.
packages/bruno-app/src/themes/dark/catppuccin-mocha.js:131 - The placeholder opacity is set to 0.75 here, but other dark themes in this PR use 0.6 for consistency (see dark.js, dark-pastel.js, nord.js, vscode.js, dark-monochrome.js lines 138-140). Consider updating this to 0.6 to maintain consistency across all dark themes.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
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/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.js (1)
63-63: Inconsistency with PR objectives: Dropdown font size not updated.The PR objectives state "Dropdown font size reduced to
sm", but this suggestion item (which appears in the dropdown) still usestheme.font.size.base. Should this be changed totheme.font.size.smto align with the PR objectives?🔎 Proposed fix
- font-size: ${(props) => props.theme.font.size.base}; + font-size: ${(props) => props.theme.font.size.sm};packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js (1)
36-40: CSS syntax error: trailing colon after selector.
.tippy-content:has an invalid trailing colon that will cause the nested styles to be ignored. This appears to be a pre-existing issue but worth fixing while you're in this file.🔎 Proposed fix
- .tippy-content: { + .tippy-content { width: fit-content; max-width: none !important; min-width: 100px; }
🧹 Nitpick comments (10)
packages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.js (1)
11-18: Clean up redundant CSS properties.The
.textboxstyles contain duplicates and conflicts that should be cleaned:
box-shadow: none;appears twice (lines 13 & 16)border-radiusconflicts (0px on line 14, 3px on line 18)- Line 11's hardcoded border is immediately overridden by line 20's themed border
🔎 Proposed cleanup
.textbox { - border: 1px solid #ccc; padding: 0.15rem 0.45rem; box-shadow: none; - border-radius: 0px; outline: none; - box-shadow: none; transition: border-color ease-in-out 0.1s; border-radius: 3px; background-color: ${(props) => props.theme.input.bg}; border: 1px solid ${(props) => props.theme.input.border}; &:focus { border: solid 1px ${(props) => props.theme.input.focusBorder} !important; outline: none !important; } }packages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.js (1)
197-261: Consider reducing duplication in method badge styles.The 11 method badge variants follow an identical pattern (color, rgba background at 0.1/0.12 opacity, rgba border at 0.2 opacity). While the current explicit approach is clear and maintainable, you could optionally reduce ~55 lines to a helper or CSS custom properties if this pattern expands further.
Given the straightforward nature and good readability of the current implementation, this is a minor optimization that can be deferred.
packages/bruno-app/src/components/Dropdown/StyledWrapper.js (1)
56-56: Good refactor: hardcoded value replaced with theme token.Replacing the hardcoded
0.8125remwiththeme.font.size.smimproves maintainability and ensures consistency across the theme.packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js (1)
9-16: Consider removing duplicate border declaration.The
.textboxhas a hardcodedborder: 1px solid #cccon Line 9 that's immediately overridden by the themed border on Line 16. While harmless, it adds unnecessary noise.🔎 Proposed cleanup
.textbox { - border: 1px solid #ccc; padding: 0.15rem 0.45rem; box-shadow: none; outline: none; transition: border-color ease-in-out 0.1s; border-radius: 3px; background-color: ${(props) => props.theme.input.bg}; border: 1px solid ${(props) => props.theme.input.border};packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js (1)
25-34: Consider cleaning up redundant CSS declarations.The
.textboxhas several redundant declarations:
border: 1px solid #ccc(Line 25) overridden by themed border (Line 34)border-radius: 0px(Line 28) overridden byborder-radius: 3px(Line 32)box-shadow: noneappears twice (Lines 27, 30)While not causing issues, these add noise to the stylesheet.
🔎 Proposed cleanup
.textbox { - border: 1px solid #ccc; padding: 0.15rem 0.45rem; box-shadow: none; - border-radius: 0px; outline: none; - box-shadow: none; transition: border-color ease-in-out 0.1s; border-radius: 3px; background-color: ${(props) => props.theme.input.bg}; border: 1px solid ${(props) => props.theme.input.border};packages/bruno-app/src/components/Cookies/StyledWrapper.js (1)
23-32: Consider removing redundant CSS declarations.Similar to other files in this PR, the
.textboxcontains redundant declarations:
border: 1px solid #ccc(Line 23) overridden by themed border (Line 32)border-radius: 0px(Line 26) overridden byborder-radius: 3px(Line 30)box-shadow: noneduplicated (Lines 25, 28)🔎 Proposed cleanup
.textbox { line-height: 1.42857143; - border: 1px solid #ccc; padding: 0.45rem; box-shadow: none; - border-radius: 0px; outline: none; - box-shadow: none; transition: border-color ease-in-out 0.1s; border-radius: 3px; background-color: ${(props) => props.theme.input.bg}; border: 1px solid ${(props) => props.theme.input.border};packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js (1)
9-18: Consider cleaning up redundant CSS declarations.The
.textboxfollows the same pattern of redundancy seen in other files:
border: 1px solid #ccc(Line 9) overridden by themed border (Line 18)border-radius: 0px(Line 12) overridden byborder-radius: 3px(Line 16)box-shadow: noneduplicated (Lines 11, 14)🔎 Proposed cleanup
.textbox { - border: 1px solid #ccc; padding: 0.15rem 0.45rem; box-shadow: none; - border-radius: 0px; outline: none; - box-shadow: none; transition: border-color ease-in-out 0.1s; border-radius: 3px; background-color: ${(props) => props.theme.input.bg}; border: 1px solid ${(props) => props.theme.input.border};packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js (1)
1-1: Unusedcssimport.The
csshelper is imported but not used in this file. Consider removing it.🔎 Proposed fix
-import styled, { css } from 'styled-components'; +import styled from 'styled-components';packages/bruno-app/src/themes/dark/dark.js (1)
132-142: Remove commented-out code.Lines 135-136 contain commented-out alternatives that should be cleaned up.
🔎 Proposed fix
input: { bg: 'transparent', border: palette.border.BORDER2, - // bg: palette.background.SURFACE1, - // border: palette.background.SURFACE1, focusBorder: rgba(palette.accents.PRIMARY, 0.8), placeholder: { color: palette.text.SUBTEXT1, opacity: 0.6 } },packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js (1)
31-31: Minor formatting: Empty line in content object.There's an empty line after
domain: ntlmAuth.domain || ''at Line 31. Consider removing for consistency with other handler functions in this file.🔎 Suggested cleanup
content: { username: username || '', password: ntlmAuth.password || '', domain: ntlmAuth.domain || '' - }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (64)
packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.jspackages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/index.jspackages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.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/Implicit/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/SettingsInput/index.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/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.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/CollectionSettings/ClientCertSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/SettingsInput/index.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.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/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/index.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.jspackages/bruno-app/src/themes/dark/dark.js
🧠 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} : 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/CollectionSettings/ClientCertSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/SettingsInput/index.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark.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/CollectionSettings/ClientCertSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/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/CollectionSettings/ClientCertSettings/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/SettingsInput/index.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-macchiato.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/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.jspackages/bruno-app/src/themes/dark/vscode.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.jspackages/bruno-app/src/themes/dark/catppuccin-frappe.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.jspackages/bruno-app/src/themes/dark/catppuccin-mocha.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-pastel.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/index.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark-monochrome.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/themes/dark/nord.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.jspackages/bruno-app/src/themes/dark/dark.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/ResponsePane/Timeline/StyledWrapper.jspackages/bruno-app/src/components/Sidebar/NewRequest/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/DigestAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponseExample/ResponseExampleResponsePane/ResponseExampleStatusInput/StyledWrapper.jspackages/bruno-app/src/components/SettingsInput/index.jspackages/bruno-app/src/components/InheritableSettingsInput/index.jspackages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/Dropdown/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.jspackages/bruno-app/src/components/GlobalSearchModal/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/ResponsePane/RunnerTimeline/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.jspackages/bruno-app/src/components/Cookies/StyledWrapper.jspackages/bruno-app/src/components/RunnerResults/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.jspackages/bruno-app/src/components/SingleLineEditor/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.jspackages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Presets/StyledWrapper.jspackages/bruno-app/src/components/Modal/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/StyledWrapper.jspackages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/StyledWrapper.jspackages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.jspackages/bruno-app/src/themes/dark/dark.js
📚 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/BearerAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.jspackages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.jspackages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.jspackages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
🧬 Code graph analysis (13)
packages/bruno-app/src/themes/dark/catppuccin-macchiato.js (1)
packages/bruno-app/src/themes/dark/catppuccin-frappe.js (1)
colors(4-48)
packages/bruno-app/src/components/CollectionSettings/Auth/DigestAuth/index.js (1)
packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js (3)
digestAuth(15-15)handleSave(21-23)handleUsernameChange(25-37)
packages/bruno-app/src/themes/dark/vscode.js (2)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-35)packages/bruno-app/src/themes/dark/dark.js (1)
colors(50-55)
packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js (1)
packages/bruno-app/src/components/SensitiveFieldWarning/index.js (1)
SensitiveFieldWarning(6-27)
packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js (7)
packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js (3)
apikeyAuth(19-19)handleSave(21-21)handleAuthChange(32-43)packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js (1)
handleSave(22-24)packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js (1)
handleSave(22-24)packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js (1)
handleSave(23-25)packages/bruno-app/src/components/RequestPane/Auth/DigestAuth/index.js (1)
handleSave(21-23)packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js (1)
handleSave(22-24)packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js (1)
handleSave(22-24)
packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js (2)
packages/bruno-app/src/components/RequestPane/Auth/ApiKeyAuth/index.js (3)
apikeyAuth(18-18)handleSave(22-24)handleAuthChange(35-47)packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js (1)
handleSave(20-20)
packages/bruno-app/src/themes/dark/dark-pastel.js (2)
packages/bruno-app/src/themes/dark/dark-monochrome.js (1)
colors(1-35)packages/bruno-app/src/themes/dark/dark.js (1)
colors(50-55)
packages/bruno-app/src/components/CollectionSettings/Auth/NTLMAuth/index.js (4)
packages/bruno-app/src/components/RequestPane/Auth/NTLMAuth/index.js (4)
ntlmAuth(16-16)handleSave(22-24)handleUsernameChange(26-39)handlePasswordChange(41-54)packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/index.js (1)
handleSave(21-21)packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js (1)
handleSave(20-20)packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js (1)
handleSave(20-20)
packages/bruno-app/src/themes/dark/dark-monochrome.js (2)
packages/bruno-app/src/themes/dark/dark.js (1)
colors(50-55)packages/bruno-app/src/themes/dark/vscode.js (1)
colors(4-57)
packages/bruno-app/src/components/CollectionSettings/Auth/WsseAuth/index.js (1)
packages/bruno-app/src/components/RequestPane/Auth/WsseAuth/index.js (3)
wsseAuth(16-16)handleSave(22-24)handleUserChange(26-38)
packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js (1)
packages/bruno-app/src/utils/collections/index.js (3)
label(841-841)label(877-877)label(921-921)
packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js (2)
packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js (1)
awsv4Auth(16-16)packages/bruno-app/src/components/SensitiveFieldWarning/index.js (1)
SensitiveFieldWarning(6-27)
packages/bruno-app/src/themes/dark/dark.js (1)
packages/bruno-app/src/themes/light/light.js (2)
palette(1-50)palette(1-50)
⏰ 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). (8)
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Playwright E2E Tests
- GitHub Check: SSL Tests - Linux
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Windows
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
packages/bruno-app/src/components/InheritableSettingsInput/index.js
Outdated
Show resolved
Hide resolved
This was referenced Dec 30, 2025
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes & Improvements
Style
✏️ Tip: You can customize this high-level summary in your review settings.