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.

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs-list {
+    display: inline-flex;
+    height: 2rem;
+    width: fit-content;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .tab-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: transparent;
+    color: ${(props) => props.theme.tabs.secondary.inactive.color};
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.tabs.secondary.inactive.bg};
+    }
+
+    &.active {
+      background: ${(props) => props.theme.tabs.secondary.active.bg};
+      color: ${(props) => props.theme.tabs.secondary.active.color};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Tabs/index.js

@@ -1,42 +1,29 @@
 import React, { createContext, useContext } from 'react';
-import { useTheme } from 'providers/Theme';
+import classnames from 'classnames';
+import StyledWrapper from './StyledWrapper';
 
 const TabsContext = createContext();
 
 export const Tabs = ({ value, onValueChange, children, className = '' }) => {
   return (
     <TabsContext.Provider value={{ value, onValueChange }}>
-      <div className={`flex flex-col h-full flex-1 ${className}`}>{children}</div>
+      <StyledWrapper className={`flex flex-col h-full flex-1 ${className}`}>{children}</StyledWrapper>
     </TabsContext.Provider>
   );
 };
 
 export const TabsList = ({ children, className = '' }) => {
-  const { theme } = useTheme();
-
-  return (
-    <div
-      className={`inline-flex h-8 w-fit justify-center rounded-md p-0.5 gap-[2px] ${className}`}
-      style={{ background: theme.tabs.secondary.inactive.bg }}
-    >
-      {children}
-    </div>
-  );
+  return <div className={`tabs-list ${className}`}>{children}</div>;
 };
 
 export const TabsTrigger = ({ value: triggerValue, children, className = '' }) => {
   const { value, onValueChange } = useContext(TabsContext);
-  const { theme } = useTheme();
   const isActive = value === triggerValue;
 
   return (
     <button
       onClick={() => onValueChange(triggerValue)}
-      className={`inline-flex items-center justify-center rounded-[4px] p-[8px] text-xs whitespace-nowrap transition-all cursor-pointer border border-transparent hover:opacity-90 ${className}`}
-      style={{
-        background: isActive ? theme.tabs.secondary.active.bg : 'transparent',
-        color: isActive ? theme.tabs.secondary.active.color : theme.tabs.secondary.inactive.color
-      }}
+      className={classnames('tab-trigger', className, { active: isActive })}
     >
       {children}
     </button>

packages/bruno-app/src/themes/dark/catppuccin-frappe.js

@@ -370,7 +370,7 @@ const catppuccinFrappeTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }

packages/bruno-app/src/themes/dark/catppuccin-macchiato.js

@@ -370,7 +370,7 @@ const catppuccinMacchiatoTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }

packages/bruno-app/src/themes/dark/catppuccin-mocha.js

@@ -370,7 +370,7 @@ const catppuccinMochaTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
         color: colors.SUBTEXT0
       }
     }

packages/bruno-app/src/themes/dark/dark-monochrome.js

@@ -353,12 +353,12 @@ const darkMonochromeTheme = {
     },
     secondary: {
       active: {
-        bg: '#2D2D2D',
+        bg: '#3F3F3F',
         color: '#CCCCCC'
       },
       inactive: {
         bg: '#3F3F3F',
-        color: '#CCCCCC'
+        color: '#999999'
       }
     }
   },

packages/bruno-app/src/themes/dark/dark-pastel.js

@@ -374,7 +374,7 @@ const darkPastelTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
         color: colors.TEXT_MUTED
       }
     }

packages/bruno-app/src/themes/dark/dark.js

@@ -398,12 +398,12 @@ const darkTheme = {
     },
     secondary: {
       active: {
-        bg: '#2D2D2D',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.BASE
       },
       inactive: {
-        bg: '#3F3F3F',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
       }
     }
   },

packages/bruno-app/src/themes/dark/nord.js

@@ -373,7 +373,7 @@ const nordTheme = {
         color: colors.NORD4
       },
       inactive: {
-        bg: colors.NORD3,
+        bg: colors.NORD2,
         color: colors.NORD4
       }
     }

packages/bruno-app/src/themes/dark/vscode.js

@@ -376,7 +376,7 @@ const vscodeDarkTheme = {
         color: colors.TEXT
       },
       inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
         color: colors.TEXT_MUTED
       }
     }

packages/bruno-app/src/themes/light/catppuccin-latte.js

@@ -363,7 +363,7 @@ const catppuccinLatteTheme = {
     },
     secondary: {
       active: {
-        bg: colors.BASE,
+        bg: colors.SURFACE0,
         color: colors.TEXT
       },
       inactive: {

packages/bruno-app/src/themes/light/light-monochrome.js

@@ -351,7 +351,7 @@ const lightMonochromeTheme = {
     },
     secondary: {
       active: {
-        bg: '#FFFFFF',
+        bg: '#ECECEE',
         color: '#343434'
       },
       inactive: {

packages/bruno-app/src/themes/light/light-pastel.js

@@ -367,7 +367,7 @@ const lightPastelTheme = {
     },
     secondary: {
       active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
         color: colors.TEXT
       },
       inactive: {

packages/bruno-app/src/themes/light/light.js

@@ -387,12 +387,12 @@ const lightTheme = {
     },
     secondary: {
       active: {
-        bg: palette.background.BASE,
+        bg: palette.background.SURFACE1,
         color: palette.text.BASE
       },
       inactive: {
-        bg: palette.background.SURFACE1,
-        color: palette.text.BASE
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
       }
     }
   },

packages/bruno-app/src/themes/light/vscode.js

@@ -371,7 +371,7 @@ const vscodeLightTheme = {
     },
     secondary: {
       active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
         color: colors.TEXT
       },
       inactive: {