Updated teams button.

src/components/input/TeamsButton.module.css

@@ -1,10 +1,5 @@
-.button {
-  margin-right: 10px;
-}
-
 .menu {
   background: var(--base50);
-  right: -10px;
 }
 
 .heading {
@@ -15,3 +10,7 @@
   text-transform: uppercase;
   border-bottom: 1px solid var(--base300);
 }
+
+.selected {
+  font-weight: bold;
+}

src/components/input/TeamsButton.tsx

@@ -2,13 +2,14 @@ import { Key } from 'react';
 import { Text, Icon, Button, Popup, Menu, Item, PopupTrigger, Flexbox } from 'react-basics';
 import Icons from 'components/icons';
 import { useLogin, useMessages, useNavigation } from 'components/hooks';
-import Avatar from 'components/common/Avatar';
 import styles from './TeamsButton.module.css';
+import classNames from 'classnames';
 
 export function TeamsButton({ teamId }: { teamId: string }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
   const { router } = useNavigation();
+  const team = user?.teams?.find(({ id }) => id === teamId);
 
   const handleSelect = (close: () => void, id: Key) => {
     if (id !== user.id) {
@@ -21,21 +22,28 @@ export function TeamsButton({ teamId }: { teamId: string }) {
 
   return (
     <PopupTrigger>
-      <Button className={styles.button}>
+      <Button className={styles.button} variant="quiet">
         <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
-        <Text>{teamId ? user.teams.find(({ id }) => id === teamId)?.name : user.username}</Text>
+        <Text>{teamId ? team?.name : user.username}</Text>
       </Button>
       <Popup alignment="end">
-        {close => (
+        {(close: () => void) => (
           <Menu variant="popup" onSelect={handleSelect.bind(null, close)}>
             <div className={styles.heading}>{formatMessage(labels.myAccount)}</div>
-            <Item key={user.id}>{user.username}</Item>
+            <Item key={user.id} className={classNames({ [styles.selected]: !teamId })}>
+              <Flexbox gap={10} alignItems="center">
+                <Icon>
+                  <Icons.User />
+                </Icon>
+                <Text>{user.username}</Text>
+              </Flexbox>
+            </Item>
             <div className={styles.heading}>{formatMessage(labels.team)}</div>
-            {user.teams.map(({ id, name }) => (
-              <Item key={id}>
+            {user?.teams?.map(({ id, name }) => (
+              <Item key={id} className={classNames({ [styles.selected]: id === teamId })}>
                 <Flexbox gap={10} alignItems="center">
-                  <Icon size="md">
-                    <Avatar value={id} />
+                  <Icon>
+                    <Icons.Users />
                   </Icon>
                   <Text>{name}</Text>
                 </Flexbox>