From 2a5ec854cc37def7a319ca9b69f8a739b4c4c910 Mon Sep 17 00:00:00 2001
From: Chirag Chandrashekhar <chirag@usebruno.com>
Date: Fri, 2 Jan 2026 21:21:10 +0530
Subject: [PATCH] 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>
---
 .../RunConfigurationPanel/StyledWrapper.jsx   |  2 +-
 .../components/RunnerResults/StyledWrapper.js | 37 +++++++++++++++----
 .../src/components/RunnerResults/index.jsx    | 14 +++----
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
index 04f8b1101..1fded6cb9 100644
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
@@ -87,7 +87,7 @@ const StyledWrapper = styled.div`
       background-color: ${(props) => props.theme.sidebar.bg};
       border: 1px dashed ${(props) => props.theme.sidebar.dragbar};
       transform: scale(0.98);
-      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+      box-shadow: ${(props) => props.theme.shadow.md};
       z-index: 5;
     }
 
diff --git a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
index 5d6829291..b9750b23b 100644
--- a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .textbox {
-    border: 1px solid #ccc;
     padding: 0.2rem 0.5rem;
     box-shadow: none;
     border-radius: 0px;
@@ -49,6 +48,28 @@ const Wrapper = styled.div`
     color: ${(props) => props.theme.colors.text.muted};
   }
 
+  .text-muted {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .text-green {
+    color: ${(props) => props.theme.colors.text.green};
+  }
+
+  .text-subtext0 {
+    color: ${(props) => props.theme.colors.text.subtext0};
+  }
+
+  .text-subtext1 {
+    color: ${(props) => props.theme.colors.text.subtext1};
+  }
+
+  .hover-bg-surface {
+    &:hover {
+      background-color: ${(props) => props.theme.background.surface1};
+    }
+  }
+
   .button-sm {
     font-size: ${(props) => props.theme.font.size.sm};
   }
@@ -60,7 +81,7 @@ const Wrapper = styled.div`
   .filter-bar {
     display: flex;
     align-items: stretch;
-    border-radius: ${(props) => props.theme.border.radius.lg};
+    border-radius: ${(props) => props.theme.border.radius.base};
     border: 1px solid ${(props) => props.theme.border.border0};
     max-height: 35px;
     flex-shrink: 0;
@@ -70,15 +91,15 @@ const Wrapper = styled.div`
       display: flex;
       align-items: center;
       padding: 0.5rem 0.75rem;
-      border-top-left-radius: ${(props) => props.theme.border.radius.lg};
-      border-bottom-left-radius: ${(props) => props.theme.border.radius.lg};
-      background-color: ${(props) => props.theme.background.surface0};
+      border-top-left-radius: ${(props) => props.theme.border.radius.base};
+      border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
+      background-color: ${(props) => props.theme.background.mantle};
 
       span {
         font-family: Inter, sans-serif;
         font-weight: 400;
         font-size: ${(props) => props.theme.font.size.sm};
-        color: ${(props) => props.theme.colors.text.subtext1};
+        color: ${(props) => props.theme.colors.text.text};
       }
     }
 
@@ -87,8 +108,8 @@ const Wrapper = styled.div`
       align-items: center;
       gap: 1.25rem;
       padding: 0.5rem 0.75rem 0 0.75rem;
-      border-top-right-radius: ${(props) => props.theme.border.radius.lg};
-      border-bottom-right-radius: ${(props) => props.theme.border.radius.lg};
+      border-top-right-radius: ${(props) => props.theme.border.radius.base};
+      border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
       background: transparent;
     }
   }
diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx
index bdd64a6c1..622555145 100644
--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -269,7 +269,7 @@ export default function RunnerResults({ collection }) {
             <div className="mt-6">
               You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
               {isCollectionLoading && (
-                <span className="ml-2 text-gray-500">
+                <span className="ml-2 text-muted">
                   (Loading...)
                 </span>
               )}
@@ -403,10 +403,10 @@ export default function RunnerResults({ collection }) {
             <div className="pb-2 text-xs flex flex-row gap-1">
               Tags:
               <div className="flex flex-row items-center gap-x-2">
-                <div className="text-green-500">
+                <div className="text-green">
                   {tags.include.join(', ')}
                 </div>
-                <div className="text-gray-500">
+                <div className="text-muted">
                   {tags.exclude.join(', ')}
                 </div>
               </div>
@@ -458,7 +458,7 @@ export default function RunnerResults({ collection }) {
                       )}
                     </div>
                     {tagsEnabled && areTagsAdded && item?.tags?.length > 0 && (
-                      <div className="pl-7 text-xs text-gray-500">
+                      <div className="pl-7 text-xs text-muted">
                         Tags: {item.tags.filter((t) => tags.include.includes(t)).join(', ')}
                       </div>
                     )}
@@ -571,7 +571,7 @@ export default function RunnerResults({ collection }) {
                 </div>
                 <button
                   onClick={() => setSelectedItem(null)}
-                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer flex items-center justify-center"
+                  className="p-1 rounded hover-bg-surface transition-colors cursor-pointer flex items-center justify-center"
                   title="Close"
                   aria-label="Close response view"
                 >
@@ -584,10 +584,10 @@ export default function RunnerResults({ collection }) {
         ) : (
           <div className="flex flex-1 w-[50%] overflow-y-auto">
             <div className="flex flex-col w-full h-full items-center justify-center text-center">
-              <div className="mb-4 text-gray-400 dark:text-gray-500">
+              <div className="mb-4 text-subtext0">
                 <IconExternalLink size={64} strokeWidth={1.5} />
               </div>
-              <p className="text-gray-600 dark:text-gray-400">
+              <p className="text-subtext1">
                 Click on the status code to view the response
               </p>
             </div>