Updated nav.

src/components/icons.ts

@@ -44,6 +44,7 @@ export {
   Trash,
   Upload,
   User,
+  CircleUserRound as UserCircle,
   Users,
   UserPlus,
   X as Close,

src/components/input/ProfileButton.tsx

@@ -11,8 +11,8 @@ import {
   Text,
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
-import { User, LogOut, CircleUserRound } from 'lucide-react';
 import { useMessages, useLoginQuery } from '@/components/hooks';
+import { LogOut, Settings, UserCircle, LockKeyhole } from '@/components/icons';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
@@ -21,31 +21,34 @@ export function ProfileButton() {
   const cloudMode = !!process.env.cloudMode;
 
   const handleSelect = (key: Key) => {
-    if (key === 'profile') {
-      router.push('/settings/profile');
-    }
-    if (key === 'logout') {
-      router.push('/logout');
-    }
+    router.push(`/${key}`);
   };
 
   return (
     <MenuTrigger>
       <Button data-test="button-profile" variant="quiet">
         <Icon>
-          <CircleUserRound />
+          <UserCircle />
         </Icon>
       </Button>
       <Popover placement="bottom end">
         <Menu autoFocus="last" onAction={handleSelect}>
           <MenuSection title={user.username}>
             <MenuSeparator />
-            <MenuItem id="profile">
+            <MenuItem id="settings">
               <Icon>
-                <User />
+                <Settings />
               </Icon>
-              <Text>{formatMessage(labels.profile)}</Text>
+              <Text>{formatMessage(labels.settings)}</Text>
             </MenuItem>
+            {user.isAdmin && (
+              <MenuItem id="admin">
+                <Icon>
+                  <LockKeyhole />
+                </Icon>
+                <Text>{formatMessage(labels.admin)}</Text>
+              </MenuItem>
+            )}
             {!cloudMode && (
               <MenuItem data-test="item-logout" id="logout">
                 <Icon>

src/components/input/TeamsButton.tsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/navigation';
 import {
   Text,
   Icon,
-  Button,
   Menu,
   MenuItem,
   MenuTrigger,
@@ -12,6 +11,8 @@ import {
   Popover,
   Row,
   Box,
+  SidebarItem,
+  Pressable,
 } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
 import { Chevron, User, Users } from '@/components/icons';
@@ -35,19 +36,20 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
 
   return (
     <MenuTrigger>
-      <Button variant="quiet">
-        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
-          <Row alignItems="center" gap>
-            <Icon>{teamId ? <Users /> : <User />}</Icon>
-            {showText && <Text truncate>{teamId ? team?.name : user.username}</Text>}
+      <Pressable>
+        <SidebarItem
+          label={teamId ? team?.name : user.username}
+          icon={teamId ? <Users /> : <User />}
+        >
+          <Row alignItems="center" justifyContent="space-between" width="100%" gap>
+            {showText && (
+              <Icon rotate={90} size="sm">
+                <Chevron />
+              </Icon>
+            )}
           </Row>
-          {showText && (
-            <Icon rotate={90} size="sm">
-              <Chevron />
-            </Icon>
-          )}
-        </Row>
-      </Button>
+        </SidebarItem>
+      </Pressable>
       <Popover placement="bottom start">
         <Box minWidth="300px">
           <Menu

src/components/metrics/Legend.tsx

@@ -22,7 +22,7 @@ export function Legend({
         return (
           <Row key={text} onClick={() => onClick(item)}>
             <StatusLight color={color.alpha(color.alpha() + 0.2).toHex()}>
-              <Text size="1" color={hidden ? 'disabled' : undefined} wrap="nowrap">
+              <Text size="2" color={hidden ? 'disabled' : undefined} wrap="nowrap">
                 {text}
               </Text>
             </StatusLight>