From 28a6cec77c350a3a7de86c8fc24a2b94c72b482e Mon Sep 17 00:00:00 2001
From: Cole McIntosh <82463175+colesmcintosh@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:14:00 -0600
Subject: [PATCH] feat: improve user dropdown UI with premium badge and cleaner
 layout (#12502)

- Add premium/standard badge with crown icon next to user ID
- Remove colons and improve visual hierarchy with icons
- Add tooltips for user status (Premium User / Upgrade message)
- Enhance spacing and typography for better readability
- Update dropdown styling with proper hover states
---
 ui/litellm-dashboard/src/app/globals.css      | 28 ++++++++
 .../src/components/navbar.tsx                 | 71 +++++++++++++++----
 2 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index 677ff05b86..8b9aa9e670 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -42,3 +42,31 @@ body {
 .custom-border {
   border: 1px solid var(--neutral-border);
 }
+
+/* Custom dropdown styles */
+.ant-dropdown-menu-item {
+  padding: 0 !important;
+}
+
+.ant-dropdown-menu-item > div {
+  transition: all 0.2s ease;
+}
+
+/* Don't apply hover to user info section */
+.ant-dropdown-menu-item[data-menu-id$="user-info"]:hover {
+  background-color: transparent !important;
+  cursor: default;
+}
+
+.ant-dropdown-menu-item[data-menu-id$="user-info"] > div {
+  cursor: default;
+}
+
+.ant-dropdown-menu {
+  padding: 4px !important;
+  min-width: 280px !important;
+}
+
+.ant-dropdown-menu-item-divider {
+  margin: 4px 0;
+}
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 80c48dbdd4..dc7defb8e5 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,12 +1,17 @@
 import Link from "next/link";
 import React, { useState, useEffect } from "react";
 import type { MenuProps } from "antd";
-import { Dropdown } from "antd";
+import { Dropdown, Tooltip } from "antd";
 import { getProxyBaseUrl, Organization } from "@/components/networking";
 import { defaultOrg } from "@/components/common_components/default_org";
 import { 
   UserOutlined,
-  LogoutOutlined
+  LogoutOutlined,
+  LoginOutlined,
+  BgColorsOutlined,
+  CrownOutlined,
+  MailOutlined,
+  SafetyOutlined
 } from '@ant-design/icons';
 import { clearTokenCookies } from "@/utils/cookieUtils";
 import { fetchProxySettings } from "@/utils/proxyUtils";
@@ -59,19 +64,55 @@ const Navbar: React.FC<NavbarProps> = ({
 
   const userItems: MenuProps["items"] = [
     {
-      key: "1",
+      key: "user-info",
       label: (
-        <div className="py-1">
-          <p className="text-sm text-gray-600">Role: {userRole}</p>
-          <p className="text-sm text-gray-600">Email: {userEmail || "Unknown"}</p>
-          <p className="text-sm text-gray-600"><UserOutlined /> {userID}</p>
-          <p className="text-sm text-gray-600">Premium User: {String(premiumUser)}</p>
+        <div className="px-3 py-3 border-b border-gray-100">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center">
+              <UserOutlined className="mr-2 text-gray-700" />
+              <span className="text-sm font-semibold text-gray-900">{userID}</span>
+            </div>
+            {premiumUser ? (
+              <Tooltip title="Premium User" placement="left">
+                <div className="flex items-center bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-2 py-0.5 rounded-full cursor-help">
+                  <CrownOutlined className="mr-1 text-xs" />
+                  <span className="text-xs font-medium">Premium</span>
+                </div>
+              </Tooltip>
+            ) : (
+              <Tooltip title="Upgrade to Premium for advanced features" placement="left">
+                <div className="flex items-center bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full cursor-help">
+                  <CrownOutlined className="mr-1 text-xs" />
+                  <span className="text-xs font-medium">Standard</span>
+                </div>
+              </Tooltip>
+            )}
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center text-sm">
+              <SafetyOutlined className="mr-2 text-gray-400 text-xs" />
+              <span className="text-gray-500 text-xs">Role</span>
+              <span className="ml-auto text-gray-700 font-medium">{userRole}</span>
+            </div>
+            <div className="flex items-center text-sm">
+              <MailOutlined className="mr-2 text-gray-400 text-xs" />
+              <span className="text-gray-500 text-xs">Email</span>
+              <span className="ml-auto text-gray-700 font-medium truncate max-w-[150px]" title={userEmail || "Unknown"}>
+                {userEmail || "Unknown"}
+              </span>
+            </div>
+          </div>
         </div>
       ),
     },
     {
-      key: "2",
-      label: <p className="text-sm hover:text-gray-900" onClick={handleLogout}><LogoutOutlined /> Logout</p>,
+      key: "logout",
+      label: (
+        <div className="flex items-center py-2 px-3 hover:bg-gray-50 rounded-md mx-1 my-1" onClick={handleLogout}>
+          <LogoutOutlined className="mr-3 text-gray-600" />
+          <span className="text-gray-800">Logout</span>
+        </div>
+      ),
     }
   ];
 
@@ -105,11 +146,17 @@ const Navbar: React.FC<NavbarProps> = ({
             <Dropdown 
               menu={{ 
                 items: userItems,
+                className: "min-w-[200px]",
                 style: {
-                  padding: '4px',
-                  marginTop: '4px'
+                  padding: '8px',
+                  marginTop: '8px',
+                  borderRadius: '12px',
+                  boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)'
                 }
               }}
+              overlayStyle={{
+                minWidth: '200px'
+              }}
             >
               <button className="inline-flex items-center text-[13px] text-gray-600 hover:text-gray-900 transition-colors">
                 User