fix: Add icons to popup menu items

client/src/components/users/UserStep/UserStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button, Menu } from 'semantic-ui-react';
+import { Button, Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
@@ -31,15 +31,15 @@ const UserStep = React.memo(({ onClose }) => {
     onClose();
   }, [onClose, dispatch]);
 
-  const handleLogoutClick = useCallback(() => {
-    dispatch(entryActions.logout());
-  }, [dispatch]);
-
   const handleAdministrationClick = useCallback(() => {
     dispatch(entryActions.openAdministrationModal());
     onClose();
   }, [onClose, dispatch]);
 
+  const handleLogoutClick = useCallback(() => {
+    dispatch(entryActions.logout());
+  }, [dispatch]);
+
   let logoutMenuItemProps;
   if (isLogouting) {
     logoutMenuItemProps = {
@@ -61,29 +61,30 @@ const UserStep = React.memo(({ onClose }) => {
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
           <Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
+            <Icon name="user" className={styles.menuItemIcon} />
             {t('common.settings', {
               context: 'title',
             })}
           </Menu.Item>
+          {withAdministration && (
+            <Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
+              <Icon name="setting" className={styles.menuItemIcon} />
+              {t('common.administration', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          )}
+          <hr className={styles.divider} />
           <Menu.Item
             {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
             className={styles.menuItem}
             onClick={handleLogoutClick}
           >
+            <Icon name="log out" className={styles.menuItemIcon} />
             {t('action.logOut', {
               context: 'title',
             })}
           </Menu.Item>
-          {withAdministration && (
-            <>
-              <hr className={styles.divider} />
-              <Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
-                {t('common.administration', {
-                  context: 'title',
-                })}
-              </Menu.Item>
-            </>
-          )}
         </Menu>
       </Popup.Content>
     </>

client/src/components/users/UserStep/UserStep.module.scss

@@ -20,4 +20,9 @@
     margin: 0;
     padding-left: 14px;
   }
+
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
 }