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

packages/bruno-app/src/components/RunnerResults/StyledWrapper.js

@@ -56,6 +56,95 @@ const Wrapper = styled.div`
   .run-config-panel, .run-config-option {
     border-color: ${(props) => props.theme.background.surface1};
   }
+
+  .filter-bar {
+    display: flex;
+    align-items: stretch;
+    border-radius: ${(props) => props.theme.border.radius.lg};
+    border: 1px solid ${(props) => props.theme.border.border0};
+    max-height: 35px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    .filter-label {
+      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};
+
+      span {
+        font-family: Inter, sans-serif;
+        font-weight: 400;
+        font-size: ${(props) => props.theme.font.size.sm};
+        color: ${(props) => props.theme.colors.text.subtext1};
+      }
+    }
+
+    .filter-buttons {
+      display: flex;
+      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};
+      background: transparent;
+    }
+  }
+
+  .filter-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0;
+    padding-bottom: 0.4rem;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    font-family: Inter, sans-serif;
+    line-height: 100%;
+    letter-spacing: 0%;
+    cursor: pointer;
+    transition: color 0.15s ease, border-bottom-color 0.15s ease;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid ${(props) => props.theme.tabs.active.border};
+      outline-offset: 2px;
+    }
+
+    .filter-count {
+      padding: 2px 4.5px;
+      border-radius: 2px;
+      border: 1px solid ${(props) => props.theme.border.border0};
+      background-color: ${(props) => props.theme.background.surface0};
+      font-family: Inter, sans-serif;
+      font-size: ${(props) => props.theme.font.size.xs};
+      font-weight: 500;
+      line-height: 100%;
+      letter-spacing: 0%;
+    }
+
+    &.active {
+      font-weight: ${(props) => props.theme.tabs.active.fontWeight};
+      color: ${(props) => props.theme.tabs.active.color};
+      border-bottom-color: ${(props) => props.theme.tabs.active.border};
+
+      .filter-count {
+        color: ${(props) => props.theme.tabs.active.color};
+      }
+    }
+
+    &:not(.active) {
+      font-weight: 500;
+      color: ${(props) => props.theme.colors.text.subtext0};
+
+      .filter-count {
+        color: ${(props) => props.theme.colors.text.subtext0};
+      }
+    }
+  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/components/RunnerResults/index.jsx

@@ -68,20 +68,10 @@ const FILTERS = {
 const FilterButton = ({ label, count, active, onClick }) => (
   <button
     onClick={onClick}
-    className={`font-medium transition-colors cursor-pointer flex items-center gap-1.5 border-b-2 pb-2 ${
-      active
-        ? 'text-[#343434] dark:text-[#CCCCCC] border-[#F59E0B]'
-        : 'text-[#989898] dark:text-[#CCCCCC80] border-transparent'
-    }`}
-    style={{ fontFamily: 'Inter', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }}
+    className={`filter-button ${active ? 'active' : ''}`}
   >
     {label}
-    <span
-      className="px-[4.5px] py-[2px] rounded-[2px] bg-[#F7F7F7] dark:bg-[#242424] border border-[#EFEFEF] dark:border-[#92929233] text-[#989898] dark:text-inherit"
-      style={{ borderWidth: '1px', fontFamily: 'Inter', fontSize: '10px', fontWeight: 500, lineHeight: '100%', letterSpacing: '0%' }}
-    >
-      {count}
-    </span>
+    <span className="filter-count">{count}</span>
   </button>
 );
 
@@ -352,13 +342,11 @@ export default function RunnerResults({ collection }) {
     <StyledWrapper className="px-4 pb-4 flex flex-grow flex-col relative overflow-auto">
       {/* Filter Bar and Actions */}
       <div className="flex items-center justify-between mb-4 pt-[14px] gap-4">
-        <div className="flex items-stretch rounded-lg border border-[#EFEFEF] dark:border-[#92929233] max-h-[35px] flex-shrink-0" style={{ borderWidth: '1px' }}>
-          <div className="flex items-center px-3 py-2 rounded-l-lg bg-[#F3F3F3] dark:bg-[#2B2D2F]">
-            <span className="text-gray-600 dark:text-gray-400" style={{ fontFamily: 'Inter', fontWeight: 400 }}>
-              Filter by:
-            </span>
+        <div className="filter-bar">
+          <div className="filter-label">
+            <span>Filter by:</span>
           </div>
-          <div className="flex items-center gap-5 px-3 pt-2 pb-0 rounded-r-lg bg-transparent dark:bg-transparent">
+          <div className="filter-buttons">
             {Object.entries(FILTERS).map(([key, { label }]) => (
               <FilterButton
                 key={key}