From 8dde2701f42421fa7f965fd4832f28479cfd826f Mon Sep 17 00:00:00 2001
From: lohit-bruno <lohit@usebruno.com>
Date: Wed, 20 Aug 2025 16:32:52 +0530
Subject: [PATCH] ui updates

---
 .../OAuth2/AdditionalParams/StyledWrapper.js  | 21 ++++++++++++++++++
 .../Auth/OAuth2/AdditionalParams/index.js     | 22 +++++--------------
 .../Auth/OAuth2/AuthorizationCode/index.js    | 11 +++++-----
 .../Auth/OAuth2/ClientCredentials/index.js    | 11 +++++-----
 .../RequestPane/Auth/OAuth2/Implicit/index.js | 11 +++++-----
 .../Auth/OAuth2/PasswordCredentials/index.js  | 11 +++++-----
 6 files changed, 50 insertions(+), 37 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 cc8980abe..712367fd7 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,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 {
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
index 0069c5203..4b56142e3 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/index.js
+++ b/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'],
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
index 207b3510b..7c890513e 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/index.js
+++ b/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>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
index 3ad22ae28..253adeac0 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/index.js
+++ b/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} />
 
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
index 5b0b44ec4..9715aa3ce 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/index.js
+++ b/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>
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
index 43bb35cbd..f048183e6 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/index.js
+++ b/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>