Merge pull request #855 from coralproject/fix-create-username-dialog

Fix FakeComment styles

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

@@ -32,7 +32,7 @@ const CreateUsernameDialog = ({
           className={styles.fakeComment}
           username={formData.username}
           created_at={Date.now()}
-          comment={{body:t('createdisplay.fake_comment_body')}}
+          body={t('createdisplay.fake_comment_body')}
         />
         <p className={styles.ifyoudont}>
           {t('createdisplay.if_you_dont_change_your_name')}

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

@@ -0,0 +1,37 @@
+.root {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 10px;
+  padding: 8px 0px 10px 0px;
+  position: relative;
+}
+
+.body {
+
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+  vertical-align: middle;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+}
+
+.icon {
+  font-size: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}

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>