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

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};

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 {

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 {

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};

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;

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

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 {

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>

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>
       )}

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 {

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)};
       }
     }
   }

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}

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'
   },