wip

plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import styles from './styles.css';
 import cn from 'classnames';
-import {can} from 'plugin-api/beta/client/services';
+import styles from './styles.css';
 import {name} from '../../package.json';
+import {can} from 'plugin-api/beta/client/services';
 import {withTags} from 'plugin-api/beta/client/hocs';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 

plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js

@@ -1,24 +1,27 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './styles.css';
+import {name} from '../../package.json';
 import {timeago} from 'coral-framework/services/i18n';
+import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const FeaturedComment = ({comment}) => {
   return (
-    <div className={styles.featuredComment}>
-      <p>
-        {comment.body}
+    <div className={cn(`${name}__featured-comment`, styles.featuredComment)}>
+      <p className={cn(`${name}__featured-comment__comment-body`)}>
+        "{comment.body}"
       </p>
       <footer>
         <div>
-          <strong>
+          <strong className={cn(`${name}__featured-comment__username`, styles.username)}>
             {comment.user.username}
           </strong>
-          <span>
-            ,{timeago(comment.created_at)}
+          <span className={cn(`${name}__featured-comment__timeago`, styles.timeago)}>
+            ,{' '}{timeago(comment.created_at)}
           </span>
         </div>
-        <a>
-          Go to Coneversation >
+        <a className={cn(`${name}__featured-comment__go-to`, styles.goTo)}>
+          Go to conversation<Icon name="keyboard_arrow_right" />
         </a>
       </footer>
     </div>

plugins/talk-plugin-featured-comments/client/components/styles.css

@@ -36,4 +36,8 @@
   padding: 20px;
   background-color: #f9f9f9;
   margin: 10px 0;
+}
+
+.featuredComments .goTo {
+  color: #2d3fb9;
 }