[CORL-456] add empty state for comment history (#2432)

* add empty state for comment history

* localize strings

* fix string casing

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.css

@@ -0,0 +1,7 @@
+.emptyHistoryIcon {
+  margin: 0 0 var(--spacing-3) 0;
+}
+
+.emptyHistory {
+  padding: var(--spacing-2) 0 0 0 !important;
+}

src/core/client/stream/tabs/Profile/CommentHistory/CommentHistory.tsx

@@ -2,10 +2,18 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Button, HorizontalGutter, Typography } from "coral-ui/components";
+import {
+  Button,
+  Flex,
+  HorizontalGutter,
+  Icon,
+  Typography,
+} from "coral-ui/components";
 
 import HistoryCommentContainer from "./HistoryCommentContainer";
 
+import styles from "./CommentHistory.css";
+
 interface CommentHistoryProps {
   story: PropTypesOf<typeof HistoryCommentContainer>["story"];
   comments: Array<
@@ -19,9 +27,30 @@ interface CommentHistoryProps {
 const CommentHistory: FunctionComponent<CommentHistoryProps> = props => {
   return (
     <HorizontalGutter size="double" data-testid="profile-commentHistory">
-      <Localized id="profile-historyComment-commentHistory">
-        <Typography variant="heading3">Comment History</Typography>
-      </Localized>
+      {props.comments.length > 0 && (
+        <Localized id="profile-historyComment-commentHistory">
+          <Typography variant="heading3">Comment History</Typography>
+        </Localized>
+      )}
+      {props.comments.length < 1 && (
+        <Flex
+          direction="column"
+          alignItems="center"
+          className={styles.emptyHistory}
+        >
+          <div className={styles.emptyHistoryIcon}>
+            <Icon size="xl">chat_bubble_outline</Icon>
+          </div>
+          <Localized id="profile-commentHistory-empty">
+            <Typography gutterBottom variant="heading2">
+              You have not written any comments
+            </Typography>
+          </Localized>
+          <Localized id="profile-commentHistory-empty-subheading">
+            <Typography>A history of your comments will appear here</Typography>
+          </Localized>
+        </Flex>
+      )}
       {props.comments.map(comment => (
         <HistoryCommentContainer
           key={comment.id}

src/locales/en-US/stream.ftl

@@ -154,6 +154,8 @@ profile-historyComment-story = Story: {$title}
 profile-profileQuery-errorLoadingProfile = Error loading profile
 profile-profileQuery-storyNotFound = Story not found
 profile-commentHistory-loadMore = Load More
+profile-commentHistory-empty = You have not written any comments
+profile-commentHistory-empty-subheading = A history of your comments will appear here
 
 ### Settings
 profile-settings-ignoredCommenters = Ignored Commenters