From 0ddeb5dfb837eccccf3d97e7ef847c8bc629377b Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Sun, 22 May 2022 14:20:11 +0200
Subject: [PATCH] Added icons to voices in menu

---
 .../common/UserDropdown/UserDropdown.tsx         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index 5c2364234..ca92ebe6a 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -1,5 +1,11 @@
 import { Menu, Dropdown, Button, Space } from 'antd';
-import { CaretDownOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  CaretDownOutlined,
+  EditOutlined,
+  LockOutlined,
+  MessageOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useState } from 'react';
 import Modal from '../../ui/Modal/Modal';
@@ -33,12 +39,14 @@ export default function UserDropdown({ username: defaultUsername, chatState }: P
 
   const menu = (
     <Menu>
-      <Menu.Item key="0" onClick={() => handleChangeName()}>
+      <Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
         Change name
       </Menu.Item>
-      <Menu.Item key="1">Authenticate</Menu.Item>
+      <Menu.Item key="1" icon={<LockOutlined />}>
+        Authenticate
+      </Menu.Item>
       {chatState === ChatState.Available && (
-        <Menu.Item key="3" onClick={() => toggleChatVisibility()}>
+        <Menu.Item key="3" icon={<MessageOutlined />} onClick={() => toggleChatVisibility()}>
           Toggle chat
         </Menu.Item>
       )}