From 72f186b38a575694b404c98681bfc42f5fe54285 Mon Sep 17 00:00:00 2001
From: gopu-bruno <gopu@usebruno.com>
Date: Wed, 31 Dec 2025 21:50:22 +0530
Subject: [PATCH] style: update OAuth2 section labels for improved consistency
 and readability (#6598)

---
 .../RequestPane/Auth/OAuth2/AdditionalParams/index.js     | 2 +-
 .../RequestPane/Auth/OAuth2/AuthorizationCode/index.js    | 6 +++---
 .../RequestPane/Auth/OAuth2/ClientCredentials/index.js    | 8 ++++----
 .../RequestPane/Auth/OAuth2/GrantTypeSelector/index.js    | 2 +-
 .../components/RequestPane/Auth/OAuth2/Implicit/index.js  | 6 +++---
 .../RequestPane/Auth/OAuth2/PasswordCredentials/index.js  | 8 ++++----
 .../components/RequestPane/Auth/OAuth2/StyledWrapper.js   | 4 ++++
 7 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
index 3ec412fb8..08a0dbb0c 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
@@ -170,7 +170,7 @@ const AdditionalParams = ({ item = {}, request, updateAuth, collection, handleSa
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Additional Parameters
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
index 8ad4af344..57e9710bf 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
@@ -156,7 +156,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Configuration
         </span>
       </div>
@@ -261,7 +261,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Token
         </span>
       </div>
@@ -344,7 +344,7 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Advanced Settings
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
index 6a8cb86bf..b1d96bab1 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
@@ -94,7 +94,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Configuration
         </span>
       </div>
@@ -152,7 +152,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Token
         </span>
       </div>
@@ -235,7 +235,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Advanced Settings
         </span>
       </div>
@@ -259,7 +259,7 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">Settings</span>
+        <span className="oauth2-section-label">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
index a3fb77fba..6e66cde56 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js
@@ -77,7 +77,7 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Grant Type
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
index c8298c6ad..13cd28f24 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
@@ -111,7 +111,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Configuration
         </span>
       </div>
@@ -179,7 +179,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Token
         </span>
       </div>
@@ -264,7 +264,7 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Advanced Options
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
index c6004b26a..b3caf51b3 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
@@ -98,7 +98,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Configuration
         </span>
       </div>
@@ -156,7 +156,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconKey size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Token
         </span>
       </div>
@@ -239,7 +239,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconAdjustmentsHorizontal size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">
+        <span className="oauth2-section-label">
           Advanced Settings
         </span>
       </div>
@@ -263,7 +263,7 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         <div className="flex items-center px-2.5 py-1.5 oauth2-icon-container rounded-md">
           <IconSettings size={14} className="oauth2-icon" />
         </div>
-        <span className="text-gray-800 dark:text-gray-200">Settings</span>
+        <span className="oauth2-section-label">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
index 1efe1bcbc..10d75aa2a 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/StyledWrapper.js
@@ -16,6 +16,10 @@ const Wrapper = styled.div`
     cursor: pointer;
     accent-color: ${(props) => props.theme.primary.solid};
   }
+
+  .oauth2-section-label {
+    color: ${(props) => props.theme.text};
+  }
 `;
 
 export default Wrapper;