Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-28 22:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: Enhance styling in SelectedPrincipalsList and SearchPicker components for improved UI consistency

Browse source
This commit is contained in:
Marco Beretta 2025-08-05 23:29:36 +02:00
parent 2eb94c56a3
commit 32ba49822c
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
3 changed files with 8 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Sharing/GenericGrantAccessDialog.tsx
View file

@ -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>

10
client/src/components/Sharing/PeoplePicker/SearchPicker.tsx
View file

@ -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
)}
>

5
client/src/components/Sharing/PeoplePicker/SelectedPrincipalsList.tsx
View file

@ -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" />