comment history blank state

client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.css

@@ -0,0 +1,20 @@
+.root {
+  text-align: center;
+  padding-top: 24px;
+}
+
+.icon {
+  font-size: 64px;
+  color: #3a4a52;
+}
+
+.title {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.info {
+  margin-top: 0px;
+  font-size: 14px;
+  color: #7d8285;
+}

client/coral-embed-stream/src/tabs/profile/components/BlankCommentHistory.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './BlankCommentHistory.css';
+import { Icon } from 'coral-ui';
+import cn from 'classnames';
+
+import t from 'coral-framework/services/i18n';
+
+export default () => (
+  <section className={cn(styles.root, 'talk-my-profile-comment-history-blank')}>
+    <Icon name="chat" className={styles.icon} />
+    <h1 className={styles.title}>{t('comment_history_blank.title')}</h1>
+    <p className={styles.info}>{t('comment_history_blank.info')}</p>
+  </section>
+);

client/coral-embed-stream/src/tabs/profile/components/CommentHistory.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Comment from '../containers/Comment';
 import LoadMore from './LoadMore';
+import BlankCommentHistory from './BlankCommentHistory';
 
 class CommentHistory extends React.Component {
   state = {
@@ -22,6 +23,9 @@ class CommentHistory extends React.Component {
 
   render() {
     const { navigate, comments, data, root } = this.props;
+    if (!comments.nodes.length) {
+      return <BlankCommentHistory />;
+    }
     return (
       <div className="talk-my-profile-comment-history">
         <div className="commentHistory__list">

locales/en.yml

@@ -358,6 +358,9 @@ en:
   report_notif: "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly."
   report_notif_remove: "Your report has been removed."
   reported: Reported
+  comment_history_blank:
+    title: You have not written any comments
+    info: A history of your comments will appear here
   settings:
     from_settings_page: "From the Profile Page you can see your comment history."
     my_comment_history: "My comment History"
@@ -474,4 +477,4 @@ en:
       close: "Close this Installer"
   admin_sidebar:
     view_options: "View Options"
-    sort_comments: "Sort Comments"
+    sort_comments: "Sort Comments"