Fix FakeComment styles

plugins/talk-plugin-auth/client/components/FakeComment.js

@@ -2,65 +2,43 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 import {ReplyButton} from 'talk-plugin-replies';
 import PubDate from 'talk-plugin-pubdate/PubDate';
-import Slot from 'coral-framework/components/Slot';
 import AuthorName from 'talk-plugin-author-name/AuthorName';
-import styles from 'coral-embed-stream/src/components/Comment.css';
+import styles from './FakeComment.css';
+import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export const FakeComment = ({username, created_at, comment}) => (
-  <div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
-    <hr aria-hidden={true} />
-    <AuthorName author={{name: username}} />
+export const FakeComment = ({username, created_at, body}) => (
+  <div className={styles.root}>
+    <AuthorName author={{username}} />
     <PubDate created_at={created_at} />
-    <Slot comment={comment} />
-    <div className="commentActionsLeft comment__action-container">
-      <div className={`${'talk-plugin-likes'}-container`}>
-        <button className={'talk-plugin-likes-button'}>
-          <span className={'talk-plugin-likes-button-text'}>
+    <div className={styles.body}>
+      {body}
+    </div>
+    <div className={styles.footer}>
+      <div>
+        <button className={styles.button}>
+          <span className={styles.label}>
             {t('like')}
           </span>
-          <i
-            className={`${'talk-plugin-likes'}-icon material-icons`}
-            aria-hidden={true}
-          >
-            thumb_up
-          </i>
+          <Icon name="thumb_up" className={styles.icon} />
         </button>
+        <ReplyButton
+          onClick={() => {}}
+          parentCommentId={'commentID'}
+          currentUserId={{}}
+        />
       </div>
-      <ReplyButton
-        onClick={() => {}}
-        parentCommentId={'commentID'}
-        currentUserId={{}}
-      />
-    </div>
-    <div className="commentActionsRight comment__action-container">
-      <div className="talk-plugin-permalinks-container">
-        <button className="talk-plugin-permalinks-button">
-          <span
-            className={`comment__action-button comment__action-button--nowrap ${'talk-plugin-flags'}-button-text`}
-          >
+      <div>
+        <button className={styles.button}>
+          <span className={styles.label}>
             {t('permalink')}
           </span>
-          <i
-            className="talk-plugin-permalinks-icon material-icons"
-            aria-hidden={true}
-          >
-            link
-          </i>
+          <Icon name="link" className={styles.icon} />
         </button>
-      </div>
-      <div className={`${'talk-plugin-flags'}-container`}>
-        <button className={`${'talk-plugin-flags'}-button`}>
-          <span
-            className={`comment__action-button comment__action-button--nowrap ${'talk-plugin-flags'}-button-text`}
-          >
+        <button className={styles.button}>
+          <span className={styles.label}>
             {t('report')}
           </span>
-          <i
-            className={`${'talk-plugin-flags'}-icon material-icons`}
-            aria-hidden={true}
-          >
-            flag
-          </i>
+          <Icon name="flag" className={styles.icon} />
         </button>
       </div>
     </div>