fix: oauth setup component colors (#6565)

* fix: oauth colors

* rm: redundant conditionals

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const StyledWrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   .tabs {
     .tab {
       cursor: pointer;
@@ -9,12 +18,16 @@ const StyledWrapper = styled.div`
       border-radius: 4px;
       
       &:hover {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.1)' : 'rgba(99, 102, 241, 0.1)'};
+        background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
       }
       
       &.active {
-        background-color: ${(props) => props.theme.mode === 'dark' ? 'rgba(99, 102, 241, 0.2)' : 'rgba(99, 102, 241, 0.1)'};
-        color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        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};
       }
     }
   }
@@ -50,14 +63,14 @@ const StyledWrapper = styled.div`
       
       &:focus {
         outline: none;
-        border-color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+        border-color: ${(props) => props.theme.primary.solid};
       }
     }
   }
   
   .add-additional-param-actions {
     &:hover {
-      color: ${(props) => props.theme.mode === 'dark' ? '#6366f1' : '#4f46e5'};
+      color: ${(props) => props.theme.primary.solid};
     }
   }
 `;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js

@@ -167,8 +167,8 @@ const AdditionalParams = ({ item = {}, request, updateAuth, collection, handleSa
   return (
     <StyledWrapper className="mt-4">
       <div className="flex items-center gap-2.5 mb-3">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Additional Parameters

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js

@@ -153,8 +153,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Configuration
@@ -258,8 +258,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
         />
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -341,8 +341,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -365,8 +365,8 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">Settings</span>
       </div>

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};
@@ -33,7 +42,7 @@ const Wrapper = styled.div`
         max-width: none !important;
         min-width: 100px;
 
-        .tippy-content: {
+        .tippy-content {
           width: fit-content;
           max-width: none !important;
           min-width: 100px;

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js

@@ -91,8 +91,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Configuration
@@ -149,8 +149,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
         </div>
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -232,8 +232,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -256,8 +256,8 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">Settings</span>
       </div>

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   font-size: ${(props) => props.theme.font.size.base};
 
   .grant-type-mode-selector {

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/index.js

@@ -74,8 +74,8 @@ const GrantTypeSelector = ({ item = {}, request, updateAuth, collection }) => {
   return (
     <StyledWrapper>
       <div className="flex items-center gap-2.5 my-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Grant Type

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js

@@ -108,8 +108,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
     <Wrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={authorizationUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Configuration
@@ -176,8 +176,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
       })}
 
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -261,8 +261,8 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
       )}
 
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Advanced Options

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-copy-button {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+    
+    &:hover {
+      background-color: ${(props) => rgba(props.theme.primary.solid, 0.2)};
+    }
+  }
+
   ol[role="tree"] {
     overflow: hidden;
   }

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2TokenViewer/index.js

@@ -54,7 +54,7 @@ const TokenSection = ({ title, token }) => {
             <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
               <button
                 onClick={() => handleCopy(token)}
-                className="p-1 bg-indigo-100 dark:hover:bg-indigo-200 rounded"
+                className="p-1 oauth2-copy-button rounded"
                 title="Copy token"
               >
                 {copied

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 const Wrapper = styled.div`
+  .oauth2-icon-container {
+    background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
+  }
+
+  .oauth2-icon {
+    color: ${(props) => props.theme.primary.solid};
+  }
+
   label {
     font-size: ${(props) => props.theme.font.size.sm};
     color: ${(props) => props.theme.colors.text.subtext1};

packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js

@@ -95,8 +95,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
     <StyledWrapper className="mt-2 flex w-full gap-4 flex-col">
       <Oauth2TokenViewer handleRun={handleRun} collection={collection} item={item} url={accessTokenUrl} credentialsId={credentialsId} />
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">
           Configuration
@@ -153,8 +153,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
         </div>
       </div>
       <div className="flex items-center gap-2.5 mt-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconKey size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Token
@@ -236,8 +236,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
             )
       }
       <div className="flex items-center gap-2.5 mt-4 mb-2">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconAdjustmentsHorizontal size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium text-gray-800 dark:text-gray-200">
           Advanced Settings
@@ -260,8 +260,8 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
       </div>
 
       <div className="flex items-center gap-2.5 mt-4">
-        <div className="flex items-center px-2.5 py-1.5 bg-indigo-50/50 dark:bg-indigo-500/10 rounded-md">
-          <IconSettings size={14} className="text-indigo-500 dark:text-indigo-400" />
+        <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="font-medium">Settings</span>
       </div>