Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-13 11:26:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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 */} {/* Search Bar with Default Permission Setting */}
{hasPeoplePickerAccess && ( {hasPeoplePickerAccess && (
<div className="space-y-2"> <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" /> <UserCheck className="h-4 w-4" />
{localize('com_ui_user_group_permissions')} ( {allShares.length} ) {localize('com_ui_user_group_permissions')} ( {allShares.length} )
</h4> </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 ( return (
<Ariakit.ComboboxProvider store={combobox}> <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} {label}
</Ariakit.ComboboxLabel> </Ariakit.ComboboxLabel>
<div className="py-1.5"> <>
<div <div
className={cn( 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', '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" 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>
</div> </>
<Ariakit.ComboboxPopover <Ariakit.ComboboxPopover
portal={false} //todo fix focus when set to true portal={false} //todo fix focus when set to true
gutter={10} gutter={8}
sameWidth sameWidth
open={ open={
isLoading || isLoading ||
@ -128,7 +128,7 @@ export function SearchPicker<TOption extends { key: string; value: string }>({
autoFocusOnShow={false} autoFocusOnShow={false}
modal={false} modal={false}
className={cn( 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 '[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 ( return (
<div <div
key={share.idOnTheSource + '-principalList'} 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"> <div className="flex min-w-0 flex-1 items-center gap-3">
<PrincipalAvatar principal={share} size="md" /> <PrincipalAvatar principal={share} size="md" />
@ -85,9 +85,8 @@ export default function SelectedPrincipalsList({
)} )}
<Button <Button
variant="outline" variant="outline"
size="sm"
onClick={() => onRemoveHandler(share.idOnTheSource!)} 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 })} aria-label={localize('com_ui_remove_user', { 0: displayName })}
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />