From b2f8b3bb5b2bb07cfeb64fdeafe9c59956f0f316 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Thu, 5 Mar 2026 19:16:13 +0530
Subject: [PATCH] Feat/opeanpi sync updates (#7374)

* fix: update button colors and streamline props in OpenAPISyncTab and CollectionHeader

- Changed button color from 'warning' to 'primary' in OpenAPISyncTab for better visual consistency.
- Simplified prop usage for OpenAPISyncIcon in CollectionHeader by removing unnecessary function wrapper.

* fix: update StatusBadge variant in OpenAPISyncHeader for improved styling

- Changed StatusBadge in OpenAPISyncHeader to use 'outline' variant for better visual distinction of version information.
---
 .../components/OpenAPISyncTab/OpenAPISyncHeader/index.js    | 2 +-
 .../src/components/OpenAPISyncTab/OverviewSection/index.js  | 6 +++---
 .../src/components/RequestTabs/CollectionHeader/index.js    | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/bruno-app/src/components/OpenAPISyncTab/OpenAPISyncHeader/index.js b/packages/bruno-app/src/components/OpenAPISyncTab/OpenAPISyncHeader/index.js
index fc2158570..2bfe9f310 100644
--- a/packages/bruno-app/src/components/OpenAPISyncTab/OpenAPISyncHeader/index.js
+++ b/packages/bruno-app/src/components/OpenAPISyncTab/OpenAPISyncHeader/index.js
@@ -74,7 +74,7 @@ const OpenAPISyncHeader = ({
         <div className="spec-title-section">
           <div className="spec-title-row">
             <span className="spec-title">{title}</span>
-            <StatusBadge status="muted" className="spec-version">{version}</StatusBadge>
+            <StatusBadge status="muted" variant="outline" className="spec-version">{version}</StatusBadge>
           </div>
         </div>
         <div className="spec-header-actions">
diff --git a/packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js b/packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js
index f2adf2960..f8ed73c2b 100644
--- a/packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js
+++ b/packages/bruno-app/src/components/OpenAPISyncTab/OverviewSection/index.js
@@ -204,19 +204,19 @@ const OverviewSection = ({ collection, storedSpec, collectionDrift, specDrift, r
                 <Button
                   size="sm"
                   variant={bannerState.buttons.includes('sync') ? 'outline' : 'filled'}
-                  color={bannerState.buttons.includes('sync') ? 'secondary' : 'warning'}
+                  color={bannerState.buttons.includes('sync') ? 'secondary' : 'primary'}
                   onClick={() => onTabSelect('collection-changes')}
                 >
                   View Collection Changes
                 </Button>
               )}
               {(bannerState.buttons.includes('sync') || bannerState.buttons.includes('review')) && (
-                <Button size="sm" color="warning" onClick={() => onTabSelect('spec-updates')}>
+                <Button size="sm" onClick={() => onTabSelect('spec-updates')}>
                   Review and Sync Collection
                 </Button>
               )}
               {bannerState.buttons.includes('restore') && (
-                <Button size="sm" color="warning" onClick={() => onTabSelect('spec-updates')}>
+                <Button size="sm" onClick={() => onTabSelect('spec-updates')}>
                   Restore Spec File
                 </Button>
               )}
diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js
index 6a7f88af8..6ee77b57b 100644
--- a/packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/CollectionHeader/index.js
@@ -203,7 +203,7 @@ const CollectionHeader = ({ collection, isScratchCollection }) => {
     { id: 'variables', label: 'Variables', leftSection: IconEye, onClick: viewVariables },
     { id: 'collection-settings', label: 'Collection Settings', leftSection: IconSettings, onClick: viewCollectionSettings },
     ...(!hasOpenApiSyncConfigured
-      ? [{ id: 'openapi-sync', label: 'OpenAPI Sync', leftSection: () => <OpenAPISyncIcon size={16} />, onClick: viewOpenApiSync }]
+      ? [{ id: 'openapi-sync', label: 'OpenAPI Sync', leftSection: OpenAPISyncIcon, onClick: viewOpenApiSync }]
       : [])
   ];