fix(admin): adjust admin panel style (#11065)

close AF-2353 AF-2354 AF-2355 AF-2356 AF-2358 AF-2360 AF-2362 AF-2363 AF-2364 AF-2389
Fixed some UI issues.

packages/frontend/admin/src/modules/nav/nav.tsx

@@ -60,7 +60,7 @@ const NavItem = ({ icon, label, to, isCollapsed }: NavItemProps) => {
         },
       })}
     >
-      {icon}
+      <span className="flex items-center p-0.5 mr-2">{icon}</span>
       {label}
     </NavLink>
   );
@@ -86,25 +86,19 @@ export function Nav({ isCollapsed = false }: NavProps) {
       >
         <NavItem
           to="/admin/config"
-          icon={
-            <SelfhostIcon className={cn(!isCollapsed && 'mr-2', 'h-5 w-5')} />
-          }
+          icon={<SelfhostIcon fontSize={20} />}
           label="Server"
           isCollapsed={isCollapsed}
         />
         <NavItem
           to="/admin/accounts"
-          icon={
-            <AccountIcon className={cn(!isCollapsed && 'mr-2', 'h-5 w-5')} />
-          }
+          icon={<AccountIcon fontSize={20} />}
           label="Accounts"
           isCollapsed={isCollapsed}
         />
         <NavItem
           to="/admin/ai"
-          icon={
-            <AiOutlineIcon className={cn(!isCollapsed && 'mr-2', 'h-5 w-5')} />
-          }
+          icon={<AiOutlineIcon fontSize={20} />}
           label="AI"
           isCollapsed={isCollapsed}
         />

packages/frontend/admin/src/modules/nav/server-version.tsx

@@ -17,10 +17,15 @@ export const ServerVersion = () => {
     return (
       <Button
         variant="outline"
-        className="flex items-center justify-center gap-1 text-xs p-2 font-medium"
+        className="flex items-center justify-center gap-1 text-xs p-2 font-medium w-full overflow-hidden"
         onClick={handleClick}
+        title={`New Version ${availableUpgrade.version} Available`}
       >
-        New Version <span>{availableUpgrade.version}</span>Available
+        <span className="overflow-hidden text-ellipsis">
+          New Version
+          <span>{availableUpgrade.version}</span>
+          Available
+        </span>
       </Button>
     );
   }

packages/frontend/admin/src/modules/nav/settings-item.tsx

@@ -52,7 +52,7 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
                     : undefined,
                 })}
               >
-                <SettingsIcon className="h-5 w-5" />
+                <SettingsIcon fontSize={20} />
               </NavLink>
             </NavigationMenuPrimitive.Trigger>
             <NavigationMenuPrimitive.Content>
@@ -119,7 +119,9 @@ export const SettingsItem = ({ isCollapsed }: { isCollapsed: boolean }) => {
             }
           >
             <div className="flex items-center">
-              <SettingsIcon className={cn(!isCollapsed && 'mr-2', 'h-5 w-5')} />
+              <span className="flex items-center p-0.5 mr-2">
+                <SettingsIcon fontSize={20} />
+              </span>
               <span>Settings</span>
             </div>
           </AccordionTrigger>

packages/frontend/admin/src/modules/nav/user-dropdown.tsx

@@ -73,15 +73,20 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) {
           </AvatarFallback>
         </Avatar>
         {currentUser?.name ? (
-          <span className="text-sm text-nowrap text-ellipsis break-words overflow-hidden">
+          <span
+            className="text-sm text-nowrap text-ellipsis break-words overflow-hidden"
+            title={currentUser?.name}
+          >
             {currentUser?.name}
           </span>
         ) : (
           // Fallback to email prefix if name is not available
-          <span className="text-sm">{currentUser?.email.split('@')[0]}</span>
+          <span className="text-sm" title={currentUser?.email.split('@')[0]}>
+            {currentUser?.email.split('@')[0]}
+          </span>
         )}
         <span
-          className="ml-2 rounded px-2 py-0.5 text-xs h-5 border"
+          className="ml-2 rounded px-2 py-0.5 text-xs h-5 border text-center inline-flex items-center font-normal"
           style={{
             borderRadius: '4px',
             backgroundColor: cssVarV2('chip/label/blue'),
@@ -98,7 +103,27 @@ export function UserDropdown({ isCollapsed }: UserDropdownProps) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" side="right">
-          <DropdownMenuLabel>{currentUser?.name}</DropdownMenuLabel>
+          <DropdownMenuLabel className="flex items-center gap-2">
+            <Avatar className="w-8 h-8">
+              <AvatarImage src={currentUser?.avatarUrl ?? undefined} />
+              <AvatarFallback>
+                <CircleUser size={32} />
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col font-medium gap-1">
+              {currentUser?.name ?? currentUser?.email.split('@')[0]}
+              <span
+                className="w-fit rounded px-2 py-0.5 text-xs h-5 border text-center inline-flex items-center font-normal"
+                style={{
+                  borderRadius: '4px',
+                  backgroundColor: cssVarV2('chip/label/blue'),
+                  borderColor: cssVarV2('layer/insideBorder/border'),
+                }}
+              >
+                Admin
+              </span>
+            </div>
+          </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={handleLogout}>Logout</DropdownMenuItem>
         </DropdownMenuContent>