fix: Add icons to popup menu items

client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
 import entryActions from '../../../entry-actions';
@@ -47,6 +47,7 @@ const AddAttachmentStep = React.memo(({ onClose }) => {
         <Menu secondary vertical className={styles.menu}>
           <FilePicker multiple onSelect={handleFilesSelect}>
             <Menu.Item className={styles.menuItem}>
+              <Icon name="computer" className={styles.menuItemIcon} />
               {t('common.fromComputer', {
                 context: 'title',
               })}

client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.module.scss

@@ -21,6 +21,11 @@
     padding-left: 14px;
   }
 
+  .menuItemIcon {
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
+
   .tip {
     opacity: 0.5;
   }

client/src/components/boards/BoardActions/RightSide/ActionsStep.module.scss

@@ -23,6 +23,6 @@
 
   .menuItemIcon {
     float: left;
-    margin-right: 0.5em;
+    margin: 0 0.5em 0 0;
   }
 }

client/src/components/cards/Card/ActionsStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
@@ -290,6 +290,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
         <Menu secondary vertical className={styles.menu}>
           {canEditName && (
             <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              <Icon name="edit outline" className={styles.menuItemIcon} />
               {t('action.editTitle', {
                 context: 'title',
               })}
@@ -297,6 +298,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {!board.limitCardTypesToDefaultOne && canEditType && (
             <Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
+              <Icon name="map outline" className={styles.menuItemIcon} />
               {t('action.editType', {
                 context: 'title',
               })}
@@ -304,6 +306,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {card.type === CardTypes.PROJECT && canUseMembers && (
             <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+              <Icon name="user outline" className={styles.menuItemIcon} />
               {t('common.members', {
                 context: 'title',
               })}
@@ -311,6 +314,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {canUseLabels && (
             <Menu.Item className={styles.menuItem} onClick={handleLabelsClick}>
+              <Icon name="bookmark outline" className={styles.menuItemIcon} />
               {t('common.labels', {
                 context: 'title',
               })}
@@ -318,6 +322,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {card.type === CardTypes.STORY && canUseMembers && (
             <Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
+              <Icon name="user outline" className={styles.menuItemIcon} />
               {t('common.members', {
                 context: 'title',
               })}
@@ -325,6 +330,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {card.type === CardTypes.PROJECT && canEditDueDate && (
             <Menu.Item className={styles.menuItem} onClick={handleEditDueDateClick}>
+              <Icon name="calendar check outline" className={styles.menuItemIcon} />
               {t('action.editDueDate', {
                 context: 'title',
               })}
@@ -332,6 +338,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {card.type === CardTypes.PROJECT && canEditStopwatch && (
             <Menu.Item className={styles.menuItem} onClick={handleEditStopwatchClick}>
+              <Icon name="clock outline" className={styles.menuItemIcon} />
               {t('action.editStopwatch', {
                 context: 'title',
               })}
@@ -339,6 +346,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {canDuplicate && (
             <Menu.Item className={styles.menuItem} onClick={handleDuplicateClick}>
+              <Icon name="copy outline" className={styles.menuItemIcon} />
               {t('action.duplicateCard', {
                 context: 'title',
               })}
@@ -346,6 +354,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {canMove && (
             <Menu.Item className={styles.menuItem} onClick={handleMoveClick}>
+              <Icon name="share square outline" className={styles.menuItemIcon} />
               {t('action.moveCard', {
                 context: 'title',
               })}
@@ -353,6 +362,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {prevList && canRestore && (
             <Menu.Item className={styles.menuItem} onClick={handleRestoreClick}>
+              <Icon name="undo alternate" className={styles.menuItemIcon} />
               {t('action.restoreToList', {
                 context: 'title',
                 list: prevList.name || t(`common.${prevList.type}`),
@@ -361,6 +371,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {list.type !== ListTypes.ARCHIVE && canArchive && (
             <Menu.Item className={styles.menuItem} onClick={handleArchiveClick}>
+              <Icon name="folder open outline" className={styles.menuItemIcon} />
               {t('action.archiveCard', {
                 context: 'title',
               })}
@@ -368,6 +379,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
           )}
           {canDelete && (
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              <Icon name="trash alternate outline" className={styles.menuItemIcon} />
               {isInTrashList
                 ? t('action.deleteForever', {
                     context: 'title',

client/src/components/cards/Card/ActionsStep.module.scss

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

client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../../lib/custom-ui';
 
 import selectors from '../../../../selectors';
@@ -180,12 +180,14 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
           <Menu.Item className={styles.menuItem} onClick={handleEditInformationClick}>
+            <Icon name="info" className={styles.menuItemIcon} />
             {t('action.editInformation', {
               context: 'title',
             })}
           </Menu.Item>
           {!user.lockedFieldNames.includes('username') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
+              <Icon name="at" className={styles.menuItemIcon} />
               {t('action.editUsername', {
                 context: 'title',
               })}
@@ -193,6 +195,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
           )}
           {!user.lockedFieldNames.includes('email') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
+              <Icon name="mail outline" className={styles.menuItemIcon} />
               {t('action.editEmail', {
                 context: 'title',
               })}
@@ -200,6 +203,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
           )}
           {!user.lockedFieldNames.includes('password') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditPasswordClick}>
+              <Icon name="keyboard outline" className={styles.menuItemIcon} />
               {t('action.editPassword', {
                 context: 'title',
               })}
@@ -207,6 +211,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
           )}
           {!user.lockedFieldNames.includes('role') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditRoleClick}>
+              <Icon name="sun outline" className={styles.menuItemIcon} />
               {t('action.editRole', {
                 context: 'title',
               })}
@@ -221,6 +226,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
             className={styles.menuItem}
             onClick={user.isDeactivated ? handleActivateClick : handleDeactivateClick}
           >
+            <Icon name={user.isDeactivated ? 'plus' : 'close'} className={styles.menuItemIcon} />
             {user.isDeactivated
               ? t('action.activateUser', {
                   context: 'title',
@@ -231,6 +237,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
           </Menu.Item>
           {user.isDeactivated && !user.isDefaultAdmin && (
             <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              <Icon name="trash alternate outline" className={styles.menuItemIcon} />
               {t('action.deleteUser', {
                 context: 'title',
               })}

client/src/components/common/AdministrationModal/UsersPane/ActionsStep.module.scss

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

client/src/components/lists/List/ActionsStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../lib/custom-ui';
 
 import selectors from '../../../selectors';
@@ -128,38 +128,45 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
           <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+            <Icon name="edit outline" className={styles.menuItemIcon} />
             {t('action.editTitle', {
               context: 'title',
             })}
           </Menu.Item>
           <Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
+            <Icon name="map outline" className={styles.menuItemIcon} />
             {t('action.editType', {
               context: 'title',
             })}
           </Menu.Item>
           <Menu.Item className={styles.menuItem} onClick={handleEditColorClick}>
+            <Icon name="dot circle outline" className={styles.menuItemIcon} />
             {t('action.editColor', {
               context: 'title',
             })}
           </Menu.Item>
           <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
+            <Icon name="list alternate outline" className={styles.menuItemIcon} />
             {t('action.addCard', {
               context: 'title',
             })}
           </Menu.Item>
           <Menu.Item className={styles.menuItem} onClick={handleSortClick}>
+            <Icon name="sort amount down" className={styles.menuItemIcon} />
             {t('action.sortList', {
               context: 'title',
             })}
           </Menu.Item>
           {list.type === ListTypes.CLOSED && (
             <Menu.Item className={styles.menuItem} onClick={handleArchiveCardsClick}>
+              <Icon name="folder open outline" className={styles.menuItemIcon} />
               {t('action.archiveCards', {
                 context: 'title',
               })}
             </Menu.Item>
           )}
           <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+            <Icon name="trash alternate outline" className={styles.menuItemIcon} />
             {t('action.deleteList', {
               context: 'title',
             })}

client/src/components/lists/List/ActionsStep.module.scss

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

client/src/components/task-lists/TaskList/Task/ActionsStep.jsx

@@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Icon, Menu } from 'semantic-ui-react';
 import { Popup } from '../../../../lib/custom-ui';
 
 import selectors from '../../../../selectors';
@@ -66,12 +66,14 @@ const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
         <Menu secondary vertical className={styles.menu}>
           {!task.linkedCardId && (
             <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
+              <Icon name="align left" className={styles.menuItemIcon} />
               {t('action.editDescription', {
                 context: 'title',
               })}
             </Menu.Item>
           )}
           <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+            <Icon name="trash alternate outline" className={styles.menuItemIcon} />
             {t('action.deleteTask', {
               context: 'title',
             })}

client/src/components/task-lists/TaskList/Task/ActionsStep.module.scss

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

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;
+  }
 }