Add comment icon to comment count

Author: ceolson01

src/img/icons.json

@@ -23,6 +23,7 @@
     "circle-person",
     "circle-plus",
     "close",
+    "comment",
     "cup",
     "drag-handle",
     "empty-task",

src/img/icons/comment.svg

@@ -33,6 +33,11 @@
  * Next set of classes will define the icons's size
  */
 
+.extraTiny {
+  height: 12px;
+  width: 12px;
+}
+
 .sizeTiny {
   height: 14px;
   width: 14px;

src/modules/core/components/Icon/Icon.css

@@ -1,4 +1,5 @@
 export const main: string;
+export const extraTiny: string;
 export const sizeTiny: string;
 export const sizeSmall: string;
 export const sizeNormal: string;

src/modules/core/components/Icon/Icon.css.d.ts

@@ -14,7 +14,14 @@ const displayName = 'Icon';
 
 type Appearance = {
   theme?: 'primary' | 'invert';
-  size?: 'tiny' | 'small' | 'normal' | 'medium' | 'large' | 'huge';
+  size?:
+    | 'extraTiny'
+    | 'tiny'
+    | 'small'
+    | 'normal'
+    | 'medium'
+    | 'large'
+    | 'huge';
 };
 
 interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {

src/modules/core/components/Icon/Icon.tsx

@@ -47,6 +47,26 @@ td.taskDetails > div {
   margin-left: 20px;
 }
 
+.commentCountItem {
+  composes: extraInfoItem;
+  display: flex;
+  align-items: center;
+}
+
+.commentCountIcon {
+  margin-right: 5px;
+  margin-bottom: 2px;
+  height: 12px;
+  width: 12px;
+  stroke: none;
+}
+
+.commentCountIcon svg {
+  display: block;
+  height: 12px;
+  width: 12px;
+}
+
 td.taskPayouts {
   flex-basis: 15%;
   justify-content: flex-end;

src/modules/dashboard/components/TaskList/TaskListItem.css

@@ -7,5 +7,7 @@ export const taskDetailsTitle: string;
 export const taskDetailsReputation: string;
 export const extraInfo: string;
 export const extraInfoItem: string;
+export const commentCountItem: string;
+export const commentCountIcon: string;
 export const taskPayouts: string;
 export const userAvatar: string;

src/modules/dashboard/components/TaskList/TaskListItem.css.d.ts

@@ -3,10 +3,11 @@ import React, { useCallback, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import BigNumber from 'bn.js';
 
-import { AnyTask, Payouts, EventType } from '~data/index';
+import Icon from '~core/Icon';
 import { AbbreviatedNumeral } from '~core/Numeral';
 import PayoutsList from '~core/PayoutsList';
 import { TableRow, TableCell } from '~core/Table';
+import { AnyTask, Payouts, EventType } from '~data/index';
 import HookedUserAvatar from '~users/HookedUserAvatar';
 
 import styles from './TaskListItem.css';
@@ -80,7 +81,16 @@ const TaskListItem = ({ task }: Props) => {
               </div>
             )}
             {commentCount && (
-              <div className={styles.extraInfoItem}>
+              <div className={styles.commentCountItem}>
+                <Icon
+                  appearance={{ size: 'extraTiny' }}
+                  className={styles.commentCountIcon}
+                  name="comment"
+                  title={formatMessage(MSG.titleCommentCount, {
+                    commentCount,
+                    formattedCommentCount: formatNumber(commentCount),
+                  })}
+                />
                 <AbbreviatedNumeral
                   formatOptions={{
                     notation: 'compact',