Skip to content

fix: use theme styling within timeline#6604

Merged
bijin-bruno merged 9 commits intousebruno:mainfrom
sanish-bruno:fix/theme-timeline
Jan 1, 2026
Merged

fix: use theme styling within timeline#6604
bijin-bruno merged 9 commits intousebruno:mainfrom
sanish-bruno:fix/theme-timeline

Conversation

@sanish-bruno
Copy link
Collaborator

@sanish-bruno sanish-bruno commented Jan 1, 2026

Description

Screen.Recording.2026-01-01.at.12.53.09.PM.mov
Screen.Recording.2026-01-01.at.3.32.59.PM.mov
Screenshot 2026-01-01 at 3 33 53 PM

Contribution Checklist:

  • I've used AI significantly to create this pull request
  • The pull request only addresses one issue or adds one feature.
  • The pull request does not introduce any breaking changes
  • I have added screenshots or gifs to help explain the change if applicable.
  • I have read the contribution guidelines.
  • Create an issue and link to the pull request.

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

  • Style
    • Unified timeline visuals: header, "no content" messages, timestamps and metadata now use timeline-specific classes; removed hard-coded color classes so method and status labels follow theme-driven colors.
  • Refactor
    • Reworked timeline items and network logs into a themed, scrollable panel with consolidated tabbed Request/Response/Network layout, adjusted spacing, and stricter BEM-like class structure for more consistent presentation.

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

@vercel
Copy link

vercel bot commented Jan 1, 2026

@sanish-bruno is attempting to deploy a commit to the Bruno Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 1, 2026

Walkthrough

Replaces Tailwind color classes with theme-driven colors via useTheme, adds StyledWrapper components and new BEM-like class names, restructures TimelineItem and Network DOM and CSS, and applies presentation-only spacing/class renames—no public API or data-flow changes. (≤50 words)

Changes

Cohort / File(s) Summary
Headers & Body styling
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js, packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
Removed Tailwind text color classes from header <pre> and switched "No ... found" message class from text-gray-500 to timeline-item-timestamp. Layout and behavior unchanged.
Method & Status theme-driven colors
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js, packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js
Replaced static color mappings with theme-driven colors via useTheme; rendering now uses inline style color and bold weight; removed prior helper/mapping.
TimelineItem StyledWrapper & structure
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js, packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
Added StyledWrapper, migrated markup to timeline-item-* semantic classes, consolidated header/URL, introduced tab container and tab-content wrappers; presentation-only refactor.
Network StyledWrapper & component refactor
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js, packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js, packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js, packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
Introduced Network StyledWrapper with themed CSS, BEM-like classes (network-logs-entry--*), explicit separators/spacing, and replaced plain wrappers with styled containers; Devtools panel class names updated accordingly.
Response & Timeline spacing tweaks
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js, packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js, packages/bruno-app/src/components/ResponsePane/Timeline/index.js
Presentation-only class renames and spacing adjustments (e.g., timeline-item-metadata, removal of some margin utilities). No logic changes.

Sequence Diagram(s)

(omitted — changes are UI/layout and styling; no new multi-component runtime control flow requiring sequence visualization)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested reviewers

  • helloanoop
  • lohit-bruno
  • naman-bruno
  • bijin-bruno

Poem

✨ Old classes yield to themed parade,
Wrappers stitch the view they made,
Tabs align and logs take shape,
Tiny tweaks—no logic to reshape,
UI hums anew, a polished cascade 🎉

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 clearly and concisely describes the main change: replacing hard-coded color classes with theme-based styling throughout the timeline components.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings

📜 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 e747b66 and 84b698b.

📒 Files selected for processing (1)
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/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() 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/ResponsePane/Timeline/TimelineItem/Network/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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
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
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} : 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/ResponsePane/Timeline/TimelineItem/Network/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/ResponsePane/Timeline/TimelineItem/Network/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/ResponsePane/Timeline/TimelineItem/Network/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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)
packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js (1)
  • StyledWrapper (3-330)
⏰ 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: SSL Tests - macOS
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: Unit Tests
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: SSL Tests - Windows
🔇 Additional comments (3)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (3)

1-53: LGTM! Clean theme migration following styled-components patterns.

The StyledWrapper correctly migrates from Tailwind color classes to theme-driven styling. The BEM-like class naming convention (network-logs-entry--request, --response, etc.) improves maintainability and aligns with the PR objective.

Based on learnings, this correctly uses Styled Components for color management and follows the established pattern of wrapper components defining styles for both self and children.


15-15: Verify font-family approach for consistency.

This uses var(--font-family-mono) while other styled components may use hardcoded font stacks. Confirm this approach is intentional and check for consistency with the codebase pattern.


5-6: All theme property paths are correctly defined and exist in the schema. The path inconsistencies (e.g., theme.textLink vs theme.colors.text.green) are intentional—frequently accessed properties like text, textLink, and bg are top-level, while related properties are organized under semantic namespaces like colors.text.*, font.size.*, and codemirror.*. This structure is consistent across the entire codebase.


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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js (1)

1-13: Theme integration looks good.

The dynamic theme-based coloring is correctly implemented using the useTheme hook with a sensible fallback. The inline styling approach aligns with the project's pattern for theme-driven colors.

Optional: Consider using Tailwind for font-weight

You could replace fontWeight: 'bold' inline style with the Tailwind class font-bold for consistency:

-    <span className="timeline-method" style={{ color: methodColor, fontWeight: 'bold' }}>
+    <span className="timeline-method font-bold" style={{ color: methodColor }}>

This keeps layout/typography in Tailwind and only theme colors in inline styles.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (1)

27-50: Optional: className assignment could be simplified.

The switch statement explicitly assigns the full className string for each case. While clear, you could simplify by appending modifiers:

let className = 'network-logs-entry';
if (type && type !== 'separator') {
  className += ` network-logs-entry--${type}`;
}

However, the current explicit approach is perfectly valid and arguably more readable.

📜 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 1ec8f55 and 024b8ed.

📒 Files selected for processing (9)
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
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
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} : 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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/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} : 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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.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/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js
🧬 Code graph analysis (8)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js (1)
  • StyledWrapper (4-96)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)
  • StyledWrapper (3-49)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js (4)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js (1)
  • useTheme (6-6)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js (1)
  • useTheme (4-4)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js (1)
  • useTheme (4-4)
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)
  • useTheme (105-105)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js (2)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js (1)
  • StyledWrapper (4-96)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Time/index.js (2)
  • RelativeTime (24-36)
  • RelativeTime (24-36)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js (5)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js (1)
  • useTheme (7-7)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js (1)
  • useTheme (6-6)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js (1)
  • useTheme (4-4)
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)
  • useTheme (105-105)
packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js (1)
  • statusCode (524-524)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js (1)
packages/bruno-app/src/components/ResponsePane/index.js (1)
  • response (39-39)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)
  • StyledWrapper (3-49)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Method/index.js (4)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js (1)
  • useTheme (7-7)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js (1)
  • useTheme (6-6)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js (1)
  • useTheme (4-4)
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js (1)
  • useTheme (105-105)
⏰ 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: CLI Tests
  • GitHub Check: Unit Tests
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: SSL Tests - Windows
🔇 Additional comments (8)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)

1-51: LGTM!

This StyledWrapper correctly implements theme-based styling with proper separation of concerns: theme tokens handle all colors while CSS manages layout properties. The BEM-like modifier classes provide clear, maintainable styling for different log entry types.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Headers/index.js (1)

2-3: LGTM!

The theme-based styling is correctly implemented using useTheme and rgba for dynamic colors. The migration from hard-coded Tailwind color classes to semantic class names (timeline-item-timestamp) maintains consistency across the timeline components.

Also applies to: 6-6, 12-13, 22-22

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js (1)

3-4: LGTM!

The implementation mirrors the pattern established in Headers/index.js, correctly applying theme-based styling with rgba for color opacity and semantic class names for consistent timeline styling.

Also applies to: 7-7, 12-13, 32-32

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js (1)

1-96: LGTM - Clean theme-driven styling implementation.

The StyledWrapper correctly implements theme-based styling throughout, replacing hard-coded colors with dynamic theme properties. The BEM naming convention is consistent, and the use of rgba for transparency on borders (lines 6, 11) is appropriate. The nested &--active pattern (line 78) correctly creates the .timeline-item-tab--active modifier class.

Based on learnings, this correctly uses styled-components theme props for colors rather than Tailwind classes.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Status/index.js (1)

1-21: LGTM - Correct theme integration and status logic.

The status code range logic (200-299 success, 300-399 warning, 400-599 error) is correct and follows HTTP standards. Using useTheme with inline styles for dynamic colors aligns with the project's theme-driven approach.

Based on learnings, this correctly uses styled-components theme prop for color management via inline styles.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (1)

1-57: LGTM - StyledWrapper integration is correct.

The Network component correctly integrates with its StyledWrapper, and all class names align with the theme-driven style definitions. The separator logic (line 9) and conditional spacing based on log type changes (lines 12-17) provide good UX.

Based on learnings, this correctly uses StyledWrapper for theme-driven styling instead of Tailwind color classes.

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js (2)

19-86: LGTM - StyledWrapper integration and structure are correct.

The TimelineItem refactor successfully integrates the new StyledWrapper with semantic class names throughout. All class names align with the StyledWrapper definitions, and the conditional rendering logic (collapsed state, active tabs, network logs) is sound.

Based on learnings, this correctly uses StyledWrapper for theme-driven styling instead of Tailwind color classes.


24-26: Both response and request status codes are displayed.

Lines 24 and 26 render status codes for both the response and the original request. This appears intentional for showing the complete request/response flow in the timeline, but verify this matches the desired UX behavior.

@sanish-bruno sanish-bruno marked this pull request as draft January 1, 2026 08:29
@sanish-bruno sanish-bruno marked this pull request as ready for review January 1, 2026 10:10
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js (1)

308-329: Consider reducing !important declarations to resolve specificity conflicts.

The eight !important declarations indicate specificity conflicts between this wrapper and the Network component's StyledWrapper. This creates tight coupling and makes future styling changes harder to predict.

Consider either:

  1. Adjusting CSS specificity naturally (e.g., more specific selectors without !important)
  2. Passing additional props to the Network component to control styling at the source
  3. Refactoring the StyledWrapper hierarchy to reduce overlap

Based on learnings, Styled Components should handle theming cleanly without requiring override flags.

📜 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 91fedc6 and 3313a01.

📒 Files selected for processing (7)
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/index.js
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/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() 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/ResponsePane/Timeline/GrpcTimelineItem/index.js
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/index.js
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js
🧠 Learnings (4)
📓 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} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
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
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-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/ResponsePane/Timeline/GrpcTimelineItem/index.js
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/index.js
  • packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/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 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/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
  • packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/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/Devtools/Console/RequestDetailsPanel/StyledWrapper.js
🧬 Code graph analysis (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (1)
packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/StyledWrapper.js (1)
  • StyledWrapper (3-52)
⏰ 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: SSL Tests - Windows
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: Unit Tests
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: CLI Tests
🔇 Additional comments (5)
packages/bruno-app/src/components/Devtools/Console/RequestDetailsPanel/index.js (1)

144-146: LGTM! Props align with theme-driven styling.

The updated class name and new props (fontVariant, padding, height) integrate correctly with the Network component's StyledWrapper refactor.

packages/bruno-app/src/components/ResponsePane/Timeline/GrpcTimelineItem/index.js (1)

248-248: LGTM! Margin refactor aligns with StyledWrapper pattern.

Removing mb-3 is consistent with the theme-driven styling approach. Based on learnings, spacing control should be in StyledWrapper rather than Tailwind classes.

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

81-81: LGTM! Timeline spacing refactor is consistent.

Removing mb-2 from both timeline event containers aligns with the StyledWrapper-driven spacing approach used throughout this refactor.

Also applies to: 97-97

packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Network/index.js (2)

1-25: LGTM! StyledWrapper integration is well-structured.

The refactor correctly introduces theme-driven styling with flexible props. The DOM structure with network-logs-container and network-logs-pre classes aligns with the StyledWrapper CSS definitions.

Based on learnings, this properly uses StyledWrapper for colors and theme-driven styles while maintaining layout control.


27-57: LGTM! BEM-like class naming improves maintainability.

The updated NetworkLogsEntry with modifier classes (network-logs-entry--request, etc.) creates a clear, maintainable styling pattern that aligns with the StyledWrapper CSS definitions.

@bijin-bruno bijin-bruno merged commit 3ccaf29 into usebruno:main Jan 1, 2026
8 of 9 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Jan 1, 2026
6 tasks
bijin-bruno added a commit that referenced this pull request Feb 13, 2026
* 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)

---------

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>
bijin-bruno added a commit that referenced this pull request Feb 13, 2026
* 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>
bijin-bruno added a commit that referenced this pull request Feb 13, 2026
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants