From 3ca62cab65a95a2a589135ec3b305c3f2c3e7277 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 5 Jul 2017 11:36:03 -0300
Subject: [PATCH] wip

---
 .../client/components/FeaturedButton.js       |  4 ++--
 .../client/components/FeaturedComment.js      | 19 +++++++++++--------
 .../client/components/styles.css              |  4 ++++
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
index 635eef40c..5475ea107 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
+++ b/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';
 
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
index 07a26f9c6..89ab67df1 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js
+++ b/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>
diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css
index 266f7d2da..4c3db162c 100644
--- a/plugins/talk-plugin-featured-comments/client/components/styles.css
+++ b/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;
 }
\ No newline at end of file