From fdba1cfac20d2997c80cbe673fd95674c39b60f2 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:18:03 -0800
Subject: [PATCH] improvement: required permissions, oauth modal badge (#2609)

---
 .../components/oauth-required-modal.tsx       | 14 ++++++++++---
 .../credential-selector.tsx                   | 21 ++++++++++++++-----
 .../components/tool-credential-selector.tsx   | 21 ++++++++++++++-----
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
index c06a12ea2b..37bb13bbe7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -3,7 +3,15 @@
 import { useMemo } from 'react'
 import { createLogger } from '@sim/logger'
 import { Check } from 'lucide-react'
-import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
+import {
+  Badge,
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn'
 import { client } from '@/lib/auth/auth-client'
 import {
   getProviderIdFromServiceId,
@@ -407,9 +415,9 @@ export function OAuthRequiredModal({
                       <div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
                         <span>{getScopeDescription(scope)}</span>
                         {newScopesSet.has(scope) && (
-                          <span className='inline-flex items-center gap-[6px] rounded-[6px] bg-[#fde68a] px-[7px] py-[1px] font-medium text-[#a16207] text-[11px] dark:bg-[rgba(245,158,11,0.2)] dark:text-[#fcd34d]'>
+                          <Badge variant='amber' size='sm'>
                             New
-                          </span>
+                          </Badge>
                         )}
                       </div>
                     </li>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index d24cd4ed8d..d902200dd2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -228,7 +228,7 @@ export function CredentialSelector({
   )
 
   return (
-    <>
+    <div>
       <Combobox
         options={comboboxOptions}
         value={inputValue}
@@ -247,9 +247,20 @@ export function CredentialSelector({
       />
 
       {needsUpdate && (
-        <div className='mt-2 flex items-center justify-between rounded-[6px] border border-amber-300/40 bg-amber-50/60 px-2 py-1 font-medium text-[12px] transition-colors dark:bg-amber-950/10'>
-          <span>Additional permissions required</span>
-          {!isForeign && <Button onClick={() => setShowOAuthModal(true)}>Update access</Button>}
+        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
+          <div className='flex items-center font-medium text-[12px]'>
+            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+            Additional permissions required
+          </div>
+          {!isForeign && (
+            <Button
+              variant='active'
+              onClick={() => setShowOAuthModal(true)}
+              className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            >
+              Update access
+            </Button>
+          )}
         </div>
       )}
 
@@ -264,7 +275,7 @@ export function CredentialSelector({
           serviceId={serviceId}
         />
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
index f7f755ac30..761935d7d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector.tsx
@@ -200,7 +200,7 @@ export function ToolCredentialSelector({
   )
 
   return (
-    <>
+    <div>
       <Combobox
         options={comboboxOptions}
         value={inputValue}
@@ -217,9 +217,20 @@ export function ToolCredentialSelector({
       />
 
       {needsUpdate && (
-        <div className='mt-2 flex items-center justify-between rounded-[6px] border border-amber-300/40 bg-amber-50/60 px-2 py-1 font-medium text-[12px] transition-colors dark:bg-amber-950/10'>
-          <span>Additional permissions required</span>
-          {!isForeign && <Button onClick={() => setShowOAuthModal(true)}>Update access</Button>}
+        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
+          <div className='flex items-center font-medium text-[12px]'>
+            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+            Additional permissions required
+          </div>
+          {!isForeign && (
+            <Button
+              variant='active'
+              onClick={() => setShowOAuthModal(true)}
+              className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            >
+              Update access
+            </Button>
+          )}
         </div>
       )}
 
@@ -234,7 +245,7 @@ export function ToolCredentialSelector({
           serviceId={serviceId}
         />
       )}
-    </>
+    </div>
   )
 }