[PR #5330] [CLOSED] feat(response-panel): improve UI distinction (#5307) #5165

New issue

Closed

opened 2026-03-17 02:38:13 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:38:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5330
Author: @yash-gorasia
Created: 8/14/2025
Status: ❌ Closed

Base: main ← Head: feat/ui-response-panel-distinction

📝 Commits (2)

84df035 feat(response-panel): improve UI distinction (#5307)
104193f refactor(response-panel): move container classes to computed property for readability

📊 Changes

1 file changed (+6 additions, -1 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/http/Response.vue (+6 -1)

📄 Description

Closes #5307

What's changed
Improved the visual distinction of the response panel while keeping within Hoppscotch’s theme system

Updated panel container classes:
Changed border-dividerLight → border-accent for better accent visibility
Increased rounding from rounded-md → rounded-lg
Upgraded shadow from shadow-sm → shadow-lg for more depth
Added subtle highlight with ring-1 ring-accent/20
Retained bg-primaryContrast to maintain dark/light mode compatibility

Before
The response panel blended in with the surrounding UI, making it less visually prominent and harder to distinguish from nearby sections.

After
The panel now has a clearer accent border, slightly larger rounding, a deeper shadow, and a soft ring highlight — making it more noticeable while still respecting the overall theme, color palette, and dark/light mode adaptability.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5330 **Author:** [@yash-gorasia](https://github.com/yash-gorasia) **Created:** 8/14/2025 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feat/ui-response-panel-distinction` --- ### 📝 Commits (2) - [`84df035`](https://github.com/hoppscotch/hoppscotch/commit/84df03573c922fdf7ca68ce53d4d520ac954dd1b) feat(response-panel): improve UI distinction (#5307) - [`104193f`](https://github.com/hoppscotch/hoppscotch/commit/104193fc08c860b75ed7c42a0cd630e7ca3b2d56) refactor(response-panel): move container classes to computed property for readability ### 📊 Changes **1 file changed** (+6 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/http/Response.vue` (+6 -1) </details> ### 📄 Description **Closes #5307** **What's changed** Improved the visual distinction of the response panel while keeping within Hoppscotch’s theme system **Updated panel container classes:** Changed border-dividerLight → border-accent for better accent visibility Increased rounding from rounded-md → rounded-lg Upgraded shadow from shadow-sm → shadow-lg for more depth Added subtle highlight with ring-1 ring-accent/20 Retained bg-primaryContrast to maintain dark/light mode compatibility **Before** The response panel blended in with the surrounding UI, making it less visually prominent and harder to distinguish from nearby sections. **After** The panel now has a clearer accent border, slightly larger rounding, a deeper shadow, and a soft ring highlight — making it more noticeable while still respecting the overall theme, color palette, and dark/light mode adaptability. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>