From 902d9ff968f083b678a6599bb785ebfe9affad88 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Fri, 2 Jan 2026 20:57:20 +0530
Subject: [PATCH] refactor: update color references in OAuth2 components to use
 theme.primary.text for improved consistency (#6629)

* refactor: update color references in OAuth2 components to use theme.primary.text for improved consistency

* refactor: update modal size in ImportCollectionLocation component for improved consistency

* refactor: set isActiveTab prop in QueryResponse component and update active color in StyledWrapper for consistency
---
 .../Auth/OAuth2/AdditionalParams/StyledWrapper.js    | 12 ++++++------
 .../Auth/OAuth2/AuthorizationCode/StyledWrapper.js   |  2 +-
 .../Auth/OAuth2/ClientCredentials/StyledWrapper.js   |  2 +-
 .../Auth/OAuth2/GrantTypeSelector/StyledWrapper.js   |  2 +-
 .../Auth/OAuth2/Implicit/StyledWrapper.js            |  4 ++--
 .../Auth/OAuth2/Oauth2ActionButtons/index.js         |  3 ++-
 .../Auth/OAuth2/PasswordCredentials/StyledWrapper.js |  2 +-
 .../GrpcQueryUrl/ProtoFileDropdown/index.js          |  4 ++--
 .../components/ResponsePane/QueryResponse/index.js   |  1 +
 .../QueryResultTypeSelector/StyledWrapper.js         |  2 +-
 .../Timeline/TimelineItem/StyledWrapper.js           |  4 ++--
 .../Sidebar/ImportCollectionLocation/index.js        |  2 +-
 packages/bruno-app/src/themes/dark/vscode.js         |  2 +-
 13 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
index a9173ed0d..6b6ef3620 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
@@ -19,18 +19,18 @@ const StyledWrapper = styled.div`
       border: none !important;
       border-bottom: none !important;
       margin-right: 0;
-      
+
       &:hover {
         background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
       }
-      
+
       &.active {
         background-color: ${(props) => {
           return props.theme.mode === 'dark'
             ? rgba(props.theme.primary.solid, 0.2)
             : rgba(props.theme.primary.solid, 0.1);
         }};
-        color: ${(props) => props.theme.primary.solid} !important;
+        color: ${(props) => props.theme.primary.text} !important;
         border-bottom: none !important;
         font-weight: normal !important;
       }
@@ -57,7 +57,7 @@ const StyledWrapper = styled.div`
       padding: 6px 10px;
     }
   }
-  
+
   .additional-parameter-sends-in-selector {
     select {
       height: 32px;
@@ -65,14 +65,14 @@ const StyledWrapper = styled.div`
       border: 1px solid ${(props) => props.theme.input.border};
       border-radius: 4px;
       padding: 0 8px;
-      
+
       &:focus {
         outline: none;
         border-color: ${(props) => props.theme.primary.solid};
       }
     }
   }
-  
+
   .add-additional-param-actions {
     &:hover {
       color: ${(props) => props.theme.primary.solid};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
index 02560b8d1..b2f9adbb2 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   }
 
   .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
   }
 
   label {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
index fb40602d5..4ed2520f5 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   }
 
   .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
   }
 
   label {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
index dea907702..b53987535 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   }
 
   .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
   }
 
   font-size: ${(props) => props.theme.font.size.base};
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
index be76824c8..851594cac 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   }
 
   .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
   }
 
   label {
@@ -62,7 +62,7 @@ const Wrapper = styled.div`
       padding: 0.2rem 0.6rem !important;
     }
   }
-  
+
   .checkbox-label {
     color: ${(props) => props.theme.colors.text.primary};
     user-select: none;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
index 033c74e8b..1591a5be6 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
@@ -133,7 +133,7 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
   };
 
   return (
-    <div className="flex flex-row gap-4 mt-4">
+    <div className="flex flex-row gap-2 mt-4">
       <Button
         size="sm"
         color="secondary"
@@ -171,6 +171,7 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
       <Button
         size="sm"
         color="secondary"
+        variant="ghost"
         onClick={handleClearCache}
       >
         Clear Cache
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
index 02560b8d1..b2f9adbb2 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
   }
 
   .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
   }
 
   label {
diff --git a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
index d507d238e..f70bc8f02 100644
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
@@ -150,7 +150,7 @@ const ProtoFileDropdown = ({
               <div className="proto-file-dropdown-mode-controls">
                 <span>Mode</span>
                 <div className="proto-file-dropdown-mode-options">
-                  <span className={`proto-file-dropdown-mode-option ${!isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: !isReflectionMode ? theme.primary.solid : undefined }}>
+                  <span className={`proto-file-dropdown-mode-option ${!isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: !isReflectionMode ? theme.primary.text : undefined }}>
                     Proto File
                   </span>
                   <ToggleSwitch
@@ -159,7 +159,7 @@ const ProtoFileDropdown = ({
                     size="2xs"
                     activeColor={theme.primary.solid}
                   />
-                  <span className={`proto-file-dropdown-mode-option ${isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: isReflectionMode ? theme.primary.solid : undefined }}>
+                  <span className={`proto-file-dropdown-mode-option ${isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: isReflectionMode ? theme.primary.text : undefined }}>
                     Reflection
                   </span>
                 </div>
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
index f0e82e507..bb6c2ae39 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
@@ -41,6 +41,7 @@ const QueryResponse = ({
               setSelectedTab((prev) => prev === 'editor' ? 'preview' : 'editor');
             }}
             selectedTab={selectedTab}
+            isActiveTab={true}
           />
         </div>
       )}
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
index 5a3bbe437..cc3d07006 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
   }
 
   .active {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
   }
 
   .icon-muted {
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
index 3bb9ff71e..e570bded2 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
@@ -77,7 +77,7 @@ const StyledWrapper = styled.div`
 
     &--active {
       color: ${(props) => props.theme.tabs.active.color};
-      
+
       &:after {
         content: '';
         position: absolute;
@@ -104,7 +104,7 @@ const StyledWrapper = styled.div`
     .section-header {
       cursor: pointer;
       pre {
-        color: ${(props) => rgba(props.theme.primary.solid, 0.8)};
+        color: ${(props) => rgba(props.theme.primary.text, 0.8)};
       }
     }
   }
diff --git a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
index 0e295e055..77648f6c6 100644
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -163,7 +163,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, rawData, format }) =>
   return (
     <StyledWrapper>
       <Modal
-        size="sm"
+        size="md"
         title="Import Collection"
         confirmText="Import"
         handleConfirm={onSubmit}
diff --git a/packages/bruno-app/src/themes/dark/vscode.js b/packages/bruno-app/src/themes/dark/vscode.js
index 214f4fa6c..254173cec 100644
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -79,7 +79,7 @@ const vscodeDarkTheme = {
 
   primary: {
     solid: colors.BRAND,
-    text: colors.TEXT_LINK,
+    text: colors.BRAND_TEXT,
     strong: '#0098ff',
     subtle: '#005a9e'
   },