Components, UI/UX and Styling

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;

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>
     );
   }

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);

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';