fix: replace icons used for list item delete items (#1909)

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2021-08-12T08:03:01.719Z\n"
-"PO-Revision-Date: 2021-08-12T08:03:01.719Z\n"
+"POT-Creation-Date: 2021-08-20T08:15:38.467Z\n"
+"PO-Revision-Date: 2021-08-20T08:15:38.467Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -17,6 +17,9 @@ msgstr "Remove this item"
 msgid "This item has been shortened to fit on one page"
 msgstr "This item has been shortened to fit on one page"
 
+msgid "Remove"
+msgstr "Remove"
+
 msgid "Messages"
 msgstr "Messages"
 
@@ -191,6 +194,9 @@ msgstr "Yes, discard changes"
 msgid "No access"
 msgstr "No access"
 
+msgid "Not supported"
+msgstr "Not supported"
+
 msgid ""
 "Editing dashboards on small screens is not supported. Resize your screen to "
 "return to edit mode."
@@ -259,9 +265,6 @@ msgstr ""
 "Creating dashboards on small screens is not supported. Resize your screen "
 "to return to create mode."
 
-msgid "Not supported"
-msgstr "Not supported"
-
 msgid "Dashboard title"
 msgstr "Dashboard title"
 
@@ -322,9 +325,6 @@ msgid_plural "{{count}} selected"
 msgstr[0] "{{count}} selected"
 msgstr[1] "{{count}} selected"
 
-msgid "Remove"
-msgstr "Remove"
-
 msgid "Failed to hide description"
 msgstr "Failed to hide description"
 

src/components/Item/ListItem/Item.js

@@ -1,5 +1,6 @@
 import { useConfig } from '@dhis2/app-runtime'
-import { Divider, colors, spacers } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import { Divider, IconFileDocument16, colors, spacers } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -11,8 +12,6 @@ import { isEditMode } from '../../../modules/dashboardModes'
 import { itemTypeMap, getItemUrl } from '../../../modules/itemTypes'
 import { orArray } from '../../../modules/util'
 import ItemHeader from '../ItemHeader/ItemHeader'
-import DeleteIcon from './assets/Delete'
-import DescriptionIcon from './assets/Description'
 import classes from './Item.module.css'
 
 const getItemTitle = item => itemTypeMap[item.type].pluralTitle
@@ -43,12 +42,12 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
     }
 
     const getLink = contentItem => {
-        const deleteButton = (
+        const removeButton = (
             <button
-                className={classes.deletebutton}
+                className={classes.removeButton}
                 onClick={() => updateDashboardItem(contentItem)}
             >
-                <DeleteIcon className={classes.deleteicon} />
+                {i18n.t('Remove')}
             </button>
         )
 
@@ -61,7 +60,7 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
                 >
                     {contentItem.name}
                 </a>
-                {isEditMode(dashboardMode) ? deleteButton : null}
+                {isEditMode(dashboardMode) ? removeButton : null}
             </>
         )
     }
@@ -79,8 +78,10 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
                 <ul className={classes.list}>
                     {contentItems.map(contentItem => (
                         <li className={classes.item} key={contentItem.id}>
-                            <DescriptionIcon className={classes.itemicon} />
-                            {getLink(contentItem)}
+                            <span className={classes.itemContent}>
+                                <IconFileDocument16 color={colors.grey600} />
+                                {getLink(contentItem)}
+                            </span>
                         </li>
                     ))}
                 </ul>

src/components/Item/ListItem/Item.module.css

@@ -5,34 +5,32 @@
 }
 
 .item {
-    margin-bottom: 8px;
+    margin-bottom: var(--spacers-dp8);
 }
 
-.itemicon {
-    vertical-align: text-bottom;
-    width: 18px;
-    height: 18px;
+.itemContent {
+    display: inline-flex;
 }
 
 .link {
     font-size: 14px;
-    margin-left: 5px;
+    margin-left: var(--spacers-dp4);
     text-decoration: underline;
 }
 
-.deleteicon {
-    vertical-align: text-bottom;
-}
-
-.deletebutton {
+.removeButton {
     border: none;
-    border-radius: 50%;
     cursor: pointer;
-    margin-left: 5px;
-    padding: 0px 5px;
+    margin-left: var(--spacers-dp8);
+    color: var(--colors-red600);
+    font-size: 12px;
+    text-decoration: underline;
+    background-color: transparent;
     vertical-align: text-bottom;
 }
 
-.deletebutton:focus {
+.removeButton:hover,
+.removeButton:focus {
     outline: none;
+    color: var(--colors-red800);
 }