🖌️ 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:
MACHINSOFT 2024-03-11 17:31:32 +03:00 committed by GitHub
parent 2e77813952
commit f5a754c8be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
39 changed files with 147 additions and 121 deletions

View file

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