ui updates

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

@@ -19,6 +19,27 @@ const StyledWrapper = styled.div`
       }
     }
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-weight: 600;
+    table-layout: fixed;
+
+    thead,
+    td {
+      border: 1px solid ${(props) => props.theme.table.border};
+    }
+
+    thead {
+      color: ${(props) => props.theme.table.thead.color};
+      font-size: 0.8125rem;
+      user-select: none;
+    }
+    td {
+      padding: 6px 10px;
+    }
+  }
   
   .additional-parameter-sends-in-selector {
     select {

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

@@ -1,14 +1,14 @@
 import { useDispatch } from "react-redux";
-import React, { forwardRef, useState } from 'react';
+import React, { useState } from 'react';
 import get from 'lodash/get';
 import { useTheme } from 'providers/Theme';
-import { IconPlus, IconCaretDown, IconTrash, IconAdjustmentsHorizontal } from '@tabler/icons';
+import { IconPlus, IconTrash, IconAdjustmentsHorizontal } from '@tabler/icons';
 import { cloneDeep } from "lodash";
 import SingleLineEditor from "components/SingleLineEditor/index";
 import StyledWrapper from "./StyledWrapper";
 import Table from "components/Table/index";
 
-const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
+const AdditionalParams  = ({ item = {}, request, updateAuth, collection, handleSave }) => {
   const dispatch = useDispatch();
   const { storedTheme } = useTheme();
 
@@ -201,6 +201,7 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
                     value
                   })}
                   collection={collection}
+                  onSave={handleSave}
                 />
               </td>
               <td>
@@ -214,6 +215,7 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
                     value
                   })}
                   collection={collection}
+                  onSave={handleSave}
                 />
               </td>
               <td>
@@ -284,20 +286,6 @@ const AdditionalParams  = ({ item = {}, request, updateAuth, collection }) => {
 
 export default AdditionalParams;
 
-const Icon = forwardRef((props, ref) => {
-  const { value } = props
-  return (
-    <div ref={ref} className="w-max textbox border p-2 rounded cursor-pointer flex items-center selector-label">
-      <div className="flex-grow font-medium">
-        {value}
-      </div>
-      <div>
-        <IconCaretDown className="caret mx-2" size={14} strokeWidth={2} />
-      </div>
-    </div>
-  );
-});
-
 const sendInOptionsMap = {
   'authorization_code': {
     'authorization': ['headers', 'queryparams'],

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

@@ -336,11 +336,12 @@ const OAuth2AuthorizationCode = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-      <AdditionalParams 
-        item={item} 
-        request={request} 
-        collection={collection} 
-        updateAuth={updateAuth} 
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
       />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>

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

@@ -293,11 +293,12 @@ const OAuth2ClientCredentials = ({ save, item = {}, request, handleRun, updateAu
           </div>
         </div>
       </div>
-      <AdditionalParams 
-        item={item} 
-        request={request} 
-        collection={collection} 
-        updateAuth={updateAuth} 
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
       />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
 

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

@@ -218,11 +218,12 @@ const OAuth2Implicit = ({ save, item = {}, request, handleRun, updateAuth, colle
         </div>
       </div>
 
-      <AdditionalParams 
-        item={item} 
-        request={request} 
-        collection={collection} 
-        updateAuth={updateAuth} 
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
       />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={interpolatedAuthUrl} credentialsId={credentialsId} />
     </Wrapper>

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

@@ -296,11 +296,12 @@ const OAuth2PasswordCredentials = ({ save, item = {}, request, handleRun, update
           </div>
         </div>
       </div>
-      <AdditionalParams 
-        item={item} 
-        request={request} 
-        collection={collection} 
-        updateAuth={updateAuth} 
+      <AdditionalParams
+        item={item}
+        request={request}
+        collection={collection}
+        updateAuth={updateAuth}
+        handleSave={handleSave}
       />
       <Oauth2ActionButtons item={item} request={request} collection={collection} url={accessTokenUrl} credentialsId={credentialsId} />
     </StyledWrapper>