From 5266bfa6477c2c7d9caff64a9c64deea917954a3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 1 Aug 2017 12:38:41 -0300
Subject: [PATCH] Components, UI/UX and Styling

---
 .../client/components/ModTag.css              |  8 ++++
 .../client/components/ModTag.js               | 44 ++++++++++++++++---
 .../client/containers/ModTag.js               | 15 +++++++
 .../client/index.js                           |  2 +-
 4 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/ModTag.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.css b/plugins/talk-plugin-featured-comments/client/components/ModTag.css
index 06b2fdaec..c8ba1b6ba 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.css
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.css
@@ -26,6 +26,14 @@
   color: white;
 }
 
+.tag.featured:hover {
+  background-color: white;
+  border-color: #5384B2;
+  color: #5384B2;
+  cursor: pointer;
+}
+
+
 .tagIcon {
   margin-right: 5px;
   font-size: 15px;
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index 6a63cd3a8..3595f23f5 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -2,17 +2,49 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './ModTag.css';
 import {t} from 'plugin-api/beta/client/services';
+import {isTagged} from 'plugin-api/beta/client/utils';
 
 // import {isTagged} from 'plugin-api/beta/client/utils';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default class Tag extends React.Component {
-  render() {
+export default class ModTag extends React.Component {
+  constructor() {
+    super();
 
-    // isTagged(this.props.comment.tags, 'FEATURED')
-    return(
-      <span className={cn(styles.tag)}>
-        <Icon name="star_outline" className={styles.tagIcon} />{t('talk-plugin-featured-comments.feature')}
+    this.state = {
+      on: false
+    };
+
+  }
+
+  handleMouseEnter = (e) => {
+    e.preventDefault();
+    this.setState({
+      on: true
+    });
+  }
+
+  handleMouseLeave = (e) => {
+    e.preventDefault();
+    this.setState({
+      on: false
+    });
+  }
+  
+  render() {
+    const isFeatured = isTagged(this.props.comment.tags, 'FEATURED');
+
+    return isFeatured ? (
+      <span className={cn(styles.tag, styles.featured)}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave }>
+        <Icon name="star_outline" className={cn(styles.tagIcon)} />
+        {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}  
+      </span>
+    ) : (
+      <span className={cn(styles.tag, {[styles.featured]: isFeatured})}>
+        <Icon name="star_outline" className={cn(styles.tagIcon)} />
+        {isFeatured ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')} 
       </span>
     );
   }
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
new file mode 100644
index 000000000..827bc1c9d
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
@@ -0,0 +1,15 @@
+import {gql} from 'react-apollo';
+import ModTag from '../components/ModTag';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkFeaturedComments_ModTab_comment on Comment {
+      tags {
+        tag {
+          name
+        }
+      }
+    }
+  `
+})(ModTag);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index c63647aba..a1a6c35a7 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -5,7 +5,7 @@ import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
 import reducer from './reducer';
-import ModTag from './components/ModTag';
+import ModTag from './containers/ModTag';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {insertCommentsSorted} from 'plugin-api/beta/client/utils';