From 85e33c595ade7c7fe055fc35240af8de97c9c2a6 Mon Sep 17 00:00:00 2001
From: gopu-bruno <gopu@usebruno.com>
Date: Tue, 7 Jul 2026 17:32:58 +0530
Subject: [PATCH] fix(ai): align AI preference tab with theme styling (#8518)

---
 .../src/components/Preferences/AI/StyledWrapper.js | 14 +++++++-------
 .../src/components/Preferences/AI/index.js         |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/bruno-app/src/components/Preferences/AI/StyledWrapper.js b/packages/bruno-app/src/components/Preferences/AI/StyledWrapper.js
index 9ec05123e..12b3c3c5a 100644
--- a/packages/bruno-app/src/components/Preferences/AI/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/AI/StyledWrapper.js
@@ -12,11 +12,10 @@ const StyledWrapper = styled.div`
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 7px 12px;
+    padding: 6px 0px;
+    margin-right: ${(props) => props.theme.tabs.marginRight};
     margin-bottom: -1px;
-    font-size: 12px;
-    font-weight: 500;
-    color: ${(props) => props.theme.colors.text.muted};
+    color: ${(props) => props.theme.colors.text.subtext0};
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
@@ -24,12 +23,13 @@ const StyledWrapper = styled.div`
     transition: color 0.15s ease, border-color 0.15s ease;
 
     &:hover:not(.active) {
-      color: ${(props) => props.theme.text};
+      color: ${(props) => props.theme.tabs.active.color};
     }
 
     &.active {
-      color: ${(props) => props.theme.text};
-      border-bottom-color: ${(props) => props.theme.colors.accent};
+      color: ${(props) => props.theme.tabs.active.color};
+      font-weight: ${(props) => props.theme.tabs.active.fontWeight};
+      border-bottom-color: ${(props) => props.theme.tabs.active.border};
     }
 
     svg {
diff --git a/packages/bruno-app/src/components/Preferences/AI/index.js b/packages/bruno-app/src/components/Preferences/AI/index.js
index 377567261..750a451bd 100644
--- a/packages/bruno-app/src/components/Preferences/AI/index.js
+++ b/packages/bruno-app/src/components/Preferences/AI/index.js
@@ -289,7 +289,7 @@ const AI = () => {
     <StyledWrapper className="w-full flex flex-col text-xs min-h-0 max-h-[calc(100%-30px)]">
       <div className="section-header">AI</div>
 
-      <div className="ai-tabs flex items-center gap-1" role="tablist" aria-label="AI preferences">
+      <div className="ai-tabs flex items-center" role="tablist" aria-label="AI preferences">
         <button
           type="button"
           role="tab"