mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 10:50:14 +01:00
🖌️ style: Minor UI Updates (#2011)
* UI Design update * Add an error icon next to the avatar. * fix * Change the style of buttons * fix: avatar
This commit is contained in:
parent
2e77813952
commit
f5a754c8be
39 changed files with 147 additions and 121 deletions
|
|
@ -25,6 +25,7 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
button,
|
||||
model = '',
|
||||
endpoint,
|
||||
error,
|
||||
jailbreak,
|
||||
assistantName,
|
||||
} = props;
|
||||
|
|
@ -45,13 +46,18 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
>
|
||||
{!user?.avatar && !user?.username ? (
|
||||
<div
|
||||
style={{ backgroundColor: 'rgb(121, 137, 255)', width: '24px', height: '24px' }}
|
||||
className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
|
||||
style={{
|
||||
backgroundColor: 'rgb(121, 137, 255)',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
|
||||
}}
|
||||
className="relative flex h-9 w-9 items-center justify-center rounded-full p-1 text-white"
|
||||
>
|
||||
<UserIcon />
|
||||
</div>
|
||||
) : (
|
||||
<img className="rounded-sm" src={user?.avatar || avatarSrc} alt="avatar" />
|
||||
<img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -67,7 +73,7 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
}}
|
||||
className={cn('relative flex items-center justify-center', props.className ?? '')}
|
||||
>
|
||||
<img className="rounded-sm" src={props.iconURL} alt={assistantName} />
|
||||
<img className="rounded-full" src={props.iconURL} alt={assistantName} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-6 w-6">
|
||||
|
|
@ -156,21 +162,20 @@ const Icon: React.FC<IconProps> = (props) => {
|
|||
<div
|
||||
title={name}
|
||||
style={{
|
||||
background: bg || 'transparent',
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
className={cn(
|
||||
'relative flex items-center justify-center rounded-sm text-white ',
|
||||
'relative flex items-center justify-center rounded-full text-black dark:text-white',
|
||||
props.className || '',
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{/* {error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
{error && (
|
||||
<span className="absolute right-0 top-[20px] -mr-2 flex h-3 w-3 items-center justify-center rounded-full border border-white bg-red-500 text-[10px] text-white">
|
||||
!
|
||||
</span>
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue