🖌️ 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

@ -66,19 +66,20 @@ function NavLinks() {
)}
<Menu.Button
className={cn(
'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex w-full items-center gap-3 text-sm rounded-md px-3 py-3 transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
open ? 'bg-gray-100 dark:bg-gray-700' : '',
)}
data-testid="nav-user"
>
<div className="-ml-0.9 -mt-0.8 h-8 w-7 flex-shrink-0">
<div className="-ml-0.9 -mt-0.8 h-5 w-5 flex-shrink-0">
<div className="relative flex">
{!user?.avatar && !user?.username ? (
<div
style={{
backgroundColor: 'rgb(121, 137, 255)',
width: '28px',
height: '28px',
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"
>
@ -90,8 +91,8 @@ function NavLinks() {
</div>
</div>
<div
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
style={{ marginTop: '-4px', marginLeft: '2px' }}
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-black dark:text-white"
style={{ marginTop: '0', marginLeft: '0' }}
>
{user?.name || localize('com_nav_user')}
</div>
@ -125,7 +126,7 @@ function NavLinks() {
<NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
svg={() => <FileText className="icon-md" />}
text="My Files"
text={localize('com_nav_my_files')}
clickHandler={() => setShowFiles(true)}
/>
</Menu.Item>