feat: Display avatar next to user name in top bar

plankanban · Apr 22, 2024 · 7ee2d76 · 7ee2d76
1 parent eb56b21
commit 7ee2d76
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/client/src/components/BoardActions/BoardActions.module.scss b/client/src/components/BoardActions/BoardActions.module.scss
@@ -1,5 +1,7 @@
 :global(#app) {
   .action {
+    align-items: center;
+    display: flex;
     flex: 0 0 auto;
     margin-right: 20px;
   }

diff --git a/client/src/components/Header/Header.jsx b/client/src/components/Header/Header.jsx
@@ -7,6 +7,7 @@ import { usePopup } from '../../lib/popup';
 
 import Paths from '../../constants/Paths';
 import NotificationsStep from './NotificationsStep';
+import User from '../User';
 import UserStep from '../UserStep';
 
 import styles from './Header.module.scss';
@@ -91,7 +92,8 @@ const Header = React.memo(
               onLogout={onLogout}
             >
               <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
-                {user.name}
+                <span className={styles.userName}>{user.name}</span>
+                <User name={user.name} avatarUrl={user.avatarUrl} size="small" />
               </Menu.Item>
             </UserPopup>
           </Menu.Menu>

diff --git a/client/src/components/Header/Header.module.scss b/client/src/components/Header/Header.module.scss
@@ -86,6 +86,10 @@
     font-weight: bold;
   }
 
+  .userName {
+    margin-right: 10px;
+  }
+
   .wrapper {
     background: rgba(0, 0, 0, 0.24);
     display: flex;