With Featured Comments :)

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

@@ -1,17 +0,0 @@
-.button {
-
-  /* TODO: figure out the best location to include the `reset.css` */
-  composes: buttonReset from "coral-framework/styles/reset.css";
-
-  color: #767676;
-  margin-right: 10px;
-}
-
-.button.featured {
-  color: #10589b;
-}
-
-.icon {
-  font-size: 18px;
-  vertical-align: top;
-}

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

@@ -1,27 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import styles from './Button.css';
-import {pluginName} 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';
-
-const Button = (props) => {
-  const {alreadyTagged, deleteTag, postTag, user} = props;
-
-  return can(user, 'MODERATE_COMMENTS') ? (
-    <button
-      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
-      onClick={alreadyTagged ? deleteTag : postTag} >
-
-      {alreadyTagged ?
-        <Icon name="star" className={styles.icon} /> :
-        <Icon name="star_border" className={styles.icon} />
-      }
-
-    </button>
-  ) : null ;
-};
-
-export default withTags('featured')(Button);
-

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

@@ -0,0 +1,31 @@
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  padding: 6px;
+  font-size: 14px;
+  transition: color 100ms, background-color 100ms;
+  border-radius: 3px;
+  color: #383A43;
+  width: 100%;
+  text-align: left;
+  font-weight: bold;
+  letter-spacing: 0.3px;
+
+  &:hover {
+    background-color: #D8D8D8;
+    color: #383a43;
+  }
+}
+
+.icon {
+  margin-right: 15px;
+  font-size: 16px;
+}
+
+.button.featured {
+  color: #10589b;
+  
+  &:hover {
+    background-color: #D8D8D8;
+    color: #383a43;
+  }
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './ModActionButton.css';
+import {pluginName} from '../../package.json';
+import {t} from 'plugin-api/beta/client/services';
+import {withTags} from 'plugin-api/beta/client/hocs';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export class Button extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      on: false
+    };
+
+  }
+
+  handleMouseEnter = (e) => {
+    e.preventDefault();
+    this.setState({
+      on: true
+    });
+  }
+
+  handleMouseLeave = (e) => {
+    e.preventDefault();
+    this.setState({
+      on: false
+    });
+  }
+
+  render() {
+    const {alreadyTagged, deleteTag, postTag} = this.props;
+
+    return (
+      <button className={cn(`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged})}
+        onClick={alreadyTagged ? deleteTag : postTag}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave} >
+
+        {alreadyTagged ? (
+          <span className={styles.approved}>
+            <Icon name="star" className={styles.icon} />
+            {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+          </span>
+        ) : (
+          <span>
+            <Icon name="star_border" className={styles.icon} />
+            {t('talk-plugin-featured-comments.feature')}
+          </span>
+        )}
+
+      </button>
+    );
+  }
+}
+
+export default withTags('featured')(Button);
+