Adding delete/duplicate icons to the boardCard menu

webapp/src/components/boardCard.tsx

@@ -11,6 +11,8 @@ import mutator from '../mutator'
 import MenuWrapper from '../widgets/menuWrapper'
 import Menu from '../widgets/menu'
 import OptionsIcon from '../widgets/icons/options'
+import DeleteIcon from '../widgets/icons/delete'
+import DuplicateIcon from '../widgets/icons/duplicate'
 
 import PropertyValueElement from './propertyValueElement'
 
@@ -89,11 +91,13 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
                     <div className='octo-hoverbutton square'><OptionsIcon/></div>
                     <Menu>
                         <Menu.Text
+                            icon={<DeleteIcon/>}
                             id='delete'
                             name={intl.formatMessage({id: 'BoardCard.delete', defaultMessage: 'Delete'})}
                             onClick={() => mutator.deleteBlock(card, 'delete card')}
                         />
                         <Menu.Text
+                            icon={<DuplicateIcon/>}
                             id='duplicate'
                             name={intl.formatMessage({id: 'BoardCard.duplicate', defaultMessage: 'Duplicate'})}
                             onClick={() => mutator.insertBlock(MutableBlock.duplicate(card), 'duplicate card')}

webapp/src/widgets/icons/delete.scss

@@ -0,0 +1,6 @@
+.DeleteIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/delete.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './delete.scss'
+
+export default function DeleteIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='DeleteIcon Icon'
+            viewBox='0 0 448 512'
+        >
+            <path
+                d='M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z'
+            />
+        </svg>
+    )
+}

webapp/src/widgets/icons/duplicate.scss

@@ -0,0 +1,6 @@
+.DuplicateIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/duplicate.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './duplicate.scss'
+
+export default function DuplicateIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='DuplicateIcon Icon'
+            viewBox='0 0 512 512'
+        >
+            <path
+                d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'
+            />
+        </svg>
+    )
+}

webapp/src/widgets/menu/menu.scss

@@ -47,5 +47,10 @@
         .SubmenuTriangleIcon {
             fill: rgba(var(--main-fg), 0.7);
         }
+        .Icon {
+            width: 16px;
+            height: 16px;
+            margin-right: 3px;
+        }
     }
 }

webapp/src/widgets/menu/textOption.tsx

@@ -20,8 +20,8 @@ export default class TextOption extends React.PureComponent<TextOptionProps> {
                 className='MenuOption TextOption menu-option'
                 onClick={this.handleOnClick}
             >
-                <div className='menu-name'>{name}</div>
                 {icon}
+                <div className='menu-name'>{name}</div>
             </div>
         )
     }