From 149389057d522e0c8afa24c84961b393cec76f7f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:34:28 -0300
Subject: [PATCH] Translations and style

---
 .../client/components/InfoIcon.css                       | 4 ++--
 .../client/components/InfoIcon.js                        | 7 ++++---
 .../client/components/Tab.js                             | 4 ++--
 .../client/components/Tooltip.js                         | 9 ++++++---
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
index 37b942964..4fe40905b 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
@@ -5,6 +5,6 @@
   margin-left: 5px;
 }
 
-/* .infoIcon:hover {
+ .infoIcon.on {
   color: #1d5294;
-} */
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
index 4c24992b6..47560fd74 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import styles from './InfoIcon.css';
+import cn from 'classnames';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default () => (
+export default ({tooltip}) => (
   <Icon 
     name="info_outline"
-    className={styles.infoIcon}
+    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
   />
-);
\ No newline at end of file
+);
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 83232149a..6ac5682d0 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -11,8 +11,8 @@ export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) =>
       onMouseLeave={props.hideTooltip} >
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon /> 
+      <InfoIcon tooltip={tooltip} /> 
       {tooltip && <Tooltip />} 
     </span>
   );
-};
\ No newline at end of file
+};
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
index 8863e87ab..c57336d05 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import {Icon} from 'plugin-api/beta/client/components/ui';
 import styles from './Tooltip.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
 
 export default () => (
   <div className={styles.tooltip}>
     <Icon name="info_outline" className={styles.icon} />
-    <h3 className={styles.headline}>Featured Comments:</h3>
+    <h3 className={styles.headline}>
+      {t('talk-plugin-featured-comments.featured_comments')}:
+    </h3>
     <p className={styles.description}>
-      Comments selected by our team as worth reading
+      {t('talk-plugin-featured-comments.tooltip_description')}
     </p>
   </div>
 );