Fix auth panel UI updates (#6590)

* style: update padding and font size in OAuth2 and Table components for improved consistency

* style: update font styles in OAuth2 components for improved readability

* fix: add missing semicolon in StyledWrapper.js for consistent styling

packages/bruno-app/src/components/CollectionSettings/Auth/ApiKeyAuth/StyledWrapper.js

@@ -14,7 +14,8 @@ const Wrapper = styled.div`
   }
 
   .auth-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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

@@ -15,7 +15,8 @@ const Wrapper = styled.div`
   }
 
   .auth-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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

@@ -10,7 +10,7 @@ const StyledWrapper = styled.div`
     color: ${(props) => props.theme.primary.solid};
   }
 
-  div.tabs {
+  &.oauth2-additional-params-wrapper div.tabs {
     div.tab {
       cursor: pointer;
       padding: 4px 8px !important;
@@ -18,6 +18,7 @@ const StyledWrapper = styled.div`
       border-radius: 4px;
       border: none !important;
       border-bottom: none !important;
+      margin-right: 0;
       
       &:hover {
         background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};

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

@@ -165,12 +165,12 @@ const AdditionalParams = ({ item = {}, request, updateAuth, collection, handleSa
   );
 
   return (
-    <StyledWrapper className="mt-4">
+    <StyledWrapper className="mt-4 oauth2-additional-params-wrapper">
       <div className="flex items-center gap-2.5 mb-3">
         <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">
+        <span className="text-gray-800 dark:text-gray-200">
           Additional Parameters
         </span>
       </div>

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

@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   }
 
   .token-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           Advanced Settings
         </span>
       </div>

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

@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   }
 
   .token-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium">Settings</span>
+        <span className="text-gray-800 dark:text-gray-200">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}

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

@@ -13,7 +13,8 @@ const Wrapper = styled.div`
   font-size: ${(props) => props.theme.font.size.base};
 
   .grant-type-mode-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           Grant Type
         </span>
       </div>

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

@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   }
 
   .token-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           Advanced Options
         </span>
       </div>

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

@@ -23,7 +23,8 @@ const Wrapper = styled.div`
   }
 
   .token-placement-selector {
-    padding: 0.5rem 0px;
+    font-size: ${(props) => props.theme.font.size.sm};
+    padding: 0.2rem 0px;
     border-radius: 3px;
     border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};

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="font-medium">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium text-gray-800 dark:text-gray-200">
+        <span className="text-gray-800 dark:text-gray-200">
           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="font-medium">Settings</span>
+        <span className="text-gray-800 dark:text-gray-200">Settings</span>
       </div>
 
       {/* Automatically Fetch Token */}

packages/bruno-app/src/components/Table/StyledWrapper.js

@@ -22,17 +22,18 @@ const StyledWrapper = styled.div`
   table tr {
     display: contents;
   }
-
+ 
   table th {
     position: relative;
-    border-bottom: 1px solid ${(props) => props.theme.border.BORDER0};
+    font-weight: 400;
+    border-bottom: 1px solid ${(props) => props.theme.table.border};
   }
 
   table tr td {
     padding: 0.5rem;
     text-align: left;
-    border-top: 1px solid ${(props) => props.theme.border.BORDER0};
-    border-right: 1px solid ${(props) => props.theme.border.BORDER0};
+    border-top: 1px solid ${(props) => props.theme.table.border};
+    border-right: 1px solid ${(props) => props.theme.table.border};
   }
 
   tr {
@@ -50,11 +51,11 @@ const StyledWrapper = styled.div`
   table tr th {
     padding: 0.5rem;
     text-align: left;
-    border-top: 1px solid ${(props) => props.theme.border.BORDER0};
-    border-right: 1px solid ${(props) => props.theme.border.BORDER0};
+    border-top: 1px solid ${(props) => props.theme.table.border};
+    border-right: 1px solid ${(props) => props.theme.table.border};
 
     &:nth-child(1) {
-      border-left: 1px solid ${(props) => props.theme.border.BORDER0};
+      border-left: 1px solid ${(props) => props.theme.table.border};
     }
   }
 `;