From 14519c206e5876a5328ab80249efe981df7a97f7 Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Mon, 22 Apr 2024 23:23:36 +0200
Subject: [PATCH] feat: Display avatar next to user name in top bar

---
 client/src/components/BoardActions/BoardActions.module.scss | 2 ++
 client/src/components/Header/Header.jsx                     | 4 +++-
 client/src/components/Header/Header.module.scss             | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/BoardActions/BoardActions.module.scss b/client/src/components/BoardActions/BoardActions.module.scss
index 4725873b..34c5f3d8 100644
--- 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
index 443d3a88..8519572b 100755
--- 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
index 6d2d876d..8c90d94c 100644
--- 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;