feat(tasks): Update task status to not use an icon (#1169)

Author: mattnguyen1

src/elements/content-sidebar/activity-feed/task-new/Task.scss

@@ -76,14 +76,8 @@ $card-left-offset: 40px;
     }
 
     .bcs-task-status {
-        align-items: center;
         color: $bdl-neutral-02;
-        display: flex;
         font-weight: bold;
-
-        .bcs-task-status-item:first-child {
-            margin-left: 5px;
-        }
     }
 
     .bcs-task-status-message {
@@ -97,36 +91,6 @@ $card-left-offset: 40px;
         }
     }
 
-    .bcs-task-status-icon {
-        border: 1px solid $white;
-        border-radius: 100%;
-        bottom: 0;
-        height: 14px;
-        margin-right: 3px;
-        width: 14px;
-
-        &.completed,
-        &.approved,
-        &.rejected {
-            background: $white;
-        }
-
-        &.pending,
-        &.inProgress,
-        &.notStarted {
-            align-items: center;
-            color: white;
-            display: flex;
-            font-size: 80%;
-            font-weight: bold;
-            justify-content: center;
-
-            .fill-color {
-                fill: $bdl-neutral-02;
-            }
-        }
-    }
-
     .bcs-task-pending-assignment {
         margin-top: 5px;
     }

src/elements/content-sidebar/activity-feed/task-new/TaskStatus.js

@@ -2,8 +2,6 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import camelCase from 'lodash/camelCase';
-import IconComplete from '../../../../icons/general/IconVerified';
-import IconReject from '../../../../icons/general/IconRejected';
 import {
     TASK_NEW_APPROVED,
     TASK_NEW_REJECTED,
@@ -17,8 +15,6 @@ type Props = {|
     status: TaskStatus,
 |};
 
-const ICON_SIZE = 14;
-
 const statusMessageKeyMap = {
     [TASK_NEW_APPROVED]: messages.tasksFeedApprovedLabel,
     [TASK_NEW_COMPLETED]: messages.tasksFeedCompletedLabel,
@@ -27,35 +23,14 @@ const statusMessageKeyMap = {
     [TASK_NEW_IN_PROGRESS]: messages.tasksFeedInProgressLabel,
 };
 
-const StatusIcon = ({ status, ...rest }: { status: TaskStatus }) => {
-    switch (status) {
-        case TASK_NEW_APPROVED:
-        case TASK_NEW_COMPLETED:
-            return <IconComplete width={ICON_SIZE} height={ICON_SIZE} {...rest} />;
-        case TASK_NEW_REJECTED:
-            return <IconReject width={ICON_SIZE} height={ICON_SIZE} {...rest} />;
-        case TASK_NEW_NOT_STARTED:
-        case TASK_NEW_IN_PROGRESS:
-        default:
-            return null;
-    }
-};
-
 const Status = React.memo<Props>(({ status }: Props) => (
     <FormattedMessage
         {...messages.tasksFeedStatusLabel}
         values={{
             taskStatus: (
-                <React.Fragment>
-                    <StatusIcon
-                        status={status}
-                        className={`bcs-task-status-item bcs-task-status-icon ${camelCase(status)}`}
-                        aria-hidden
-                    />
-                    <span className={`bcs-task-status-item bcs-task-status-message ${camelCase(status)}`}>
-                        <FormattedMessage {...statusMessageKeyMap[status]} />
-                    </span>
-                </React.Fragment>
+                <span className={`bcs-task-status-message ${camelCase(status)}`}>
+                    <FormattedMessage {...statusMessageKeyMap[status]} />
+                </span>
             ),
         }}
     >