From 32ba49822ccc3d4c3d0a6928c7eed35c1da91048 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 5 Aug 2025 23:29:36 +0200
Subject: [PATCH] feat: Enhance styling in SelectedPrincipalsList and
 SearchPicker components for improved UI consistency

---
 .../components/Sharing/GenericGrantAccessDialog.tsx    |  2 +-
 .../components/Sharing/PeoplePicker/SearchPicker.tsx   | 10 +++++-----
 .../Sharing/PeoplePicker/SelectedPrincipalsList.tsx    |  5 ++---
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Sharing/GenericGrantAccessDialog.tsx b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
index 4a4960fac0..cea0b3fe4a 100644
--- a/client/src/components/Sharing/GenericGrantAccessDialog.tsx
+++ b/client/src/components/Sharing/GenericGrantAccessDialog.tsx
@@ -276,7 +276,7 @@ export default function GenericGrantAccessDialog({
             {/* Search Bar with Default Permission Setting */}
             {hasPeoplePickerAccess && (
               <div className="space-y-2">
-                <h4 className="flex items-center gap-2 text-sm font-medium text-text-primary">
+                <h4 className="mb-2 flex items-center gap-2 text-sm font-medium text-text-primary">
                   <UserCheck className="h-4 w-4" />
                   {localize('com_ui_user_group_permissions')} ( {allShares.length} )
                 </h4>
diff --git a/client/src/components/Sharing/PeoplePicker/SearchPicker.tsx b/client/src/components/Sharing/PeoplePicker/SearchPicker.tsx
index 6bbc5613b3..f068f8da94 100644
--- a/client/src/components/Sharing/PeoplePicker/SearchPicker.tsx
+++ b/client/src/components/Sharing/PeoplePicker/SearchPicker.tsx
@@ -72,10 +72,10 @@ export function SearchPicker<TOption extends { key: string; value: string }>({
 
   return (
     <Ariakit.ComboboxProvider store={combobox}>
-      <Ariakit.ComboboxLabel className="text-token-text-primary mb-2 block font-medium">
+      <Ariakit.ComboboxLabel className="mb-2 block font-medium text-text-primary">
         {label}
       </Ariakit.ComboboxLabel>
-      <div className="py-1.5">
+      <>
         <div
           className={cn(
             'group relative flex h-10 cursor-pointer items-center gap-2 rounded-lg border-border-medium text-text-primary transition-colors duration-200 focus-within:bg-surface-hover hover:bg-surface-hover',
@@ -113,10 +113,10 @@ export function SearchPicker<TOption extends { key: string; value: string }>({
             className="h-10 w-full rounded-lg bg-transparent pl-10 text-sm leading-tight text-text-primary placeholder-text-secondary placeholder-opacity-100 focus:outline-none focus-visible:outline-none group-focus-within:placeholder-text-primary group-hover:placeholder-text-primary"
           />
         </div>
-      </div>
+      </>
       <Ariakit.ComboboxPopover
         portal={false} //todo fix focus when set to true
-        gutter={10}
+        gutter={8}
         sameWidth
         open={
           isLoading ||
@@ -128,7 +128,7 @@ export function SearchPicker<TOption extends { key: string; value: string }>({
         autoFocusOnShow={false}
         modal={false}
         className={cn(
-          'animate-popover z-[9999] min-w-64 overflow-hidden rounded-xl border border-border-light bg-surface-secondary shadow-lg',
+          'animate-popover z-[9999] min-w-64 overflow-hidden rounded-2xl border border-border-light bg-surface-secondary shadow-lg',
           '[pointer-events:auto]', // Override body's pointer-events:none when in modal
         )}
       >
diff --git a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
index 495b9132c8..cf93255dcf 100644
--- a/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
+++ b/client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
@@ -53,7 +53,7 @@ export default function SelectedPrincipalsList({
           return (
             <div
               key={share.idOnTheSource + '-principalList'}
-              className="bg-surface flex items-center justify-between rounded-lg border border-border p-3"
+              className="bg-surface flex items-center justify-between rounded-2xl border border-border p-3"
             >
               <div className="flex min-w-0 flex-1 items-center gap-3">
                 <PrincipalAvatar principal={share} size="md" />
@@ -85,9 +85,8 @@ export default function SelectedPrincipalsList({
                 )}
                 <Button
                   variant="outline"
-                  size="sm"
                   onClick={() => onRemoveHandler(share.idOnTheSource!)}
-                  className="h-8 w-8 p-0 hover:border-destructive/10 hover:bg-destructive/10 hover:text-destructive"
+                  className="h-9 w-9 p-0 hover:border-destructive/10 hover:bg-destructive/10 hover:text-destructive"
                   aria-label={localize('com_ui_remove_user', { 0: displayName })}
                 >
                   <X className="h-4 w-4" />