diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css
deleted file mode 100644
index daaa329c9..000000000
--- a/plugins/talk-plugin-featured-comments/client/components/Button.css
+++ /dev/null
@@ -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;
-}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.js b/plugins/talk-plugin-featured-comments/client/components/Button.js
deleted file mode 100644
index b9d0cc95f..000000000
--- a/plugins/talk-plugin-featured-comments/client/components/Button.js
+++ /dev/null
@@ -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') ? (
-
- ) : null ;
-};
-
-export default withTags('featured')(Button);
-
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.css
new file mode 100644
index 000000000..0c9455e28
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
new file mode 100644
index 000000000..5f7abcf06
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
+
+export default withTags('featured')(Button);
+
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
new file mode 100644
index 000000000..e6ccc0f72
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -0,0 +1,10 @@
+import {compose} from 'react-apollo';
+import {excludeIf} from 'plugin-api/beta/client/hocs';
+import {can} from 'plugin-api/beta/client/services';
+import Button from '../components/Button';
+
+const enhance = compose(
+ excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
+);
+
+export default enhance(Button);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index c9598b1dd..1fa78ba24 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -1,6 +1,6 @@
import Tab from './containers/Tab';
import Tag from './containers/Tag';
-import Button from './components/Button';
+import ModActionButton from './components/ModActionButton';
import TabPane from './containers/TabPane';
import translations from './translations.yml';
import update from 'immutability-helper';
@@ -18,7 +18,7 @@ export default {
streamTabs: [Tab],
streamTabPanes: [TabPane],
commentInfoBar: [Tag],
- commentReactions: [Button],
+ moderationActions: [ModActionButton],
adminModeration: [ModSubscription],
adminCommentInfoBar: [ModTag],
},
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 6309cb14d..3a3b54156 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -6,6 +6,7 @@ import {Icon} from 'plugin-api/beta/client/components/ui';
import ClickOutside from 'coral-framework/components/ClickOutside';
import RejectCommentAction from '../containers/RejectCommentAction';
import ApproveCommentAction from '../containers/ApproveCommentAction';
+import {Slot} from 'plugin-api/beta/client/components';
export default class ModerationActions extends React.Component {
constructor() {
@@ -31,7 +32,7 @@ export default class ModerationActions extends React.Component {
render() {
const {tooltip} = this.state;
- const {comment} = this.props;
+ const {comment, asset, data} = this.props;
return(
@@ -42,6 +43,14 @@ export default class ModerationActions extends React.Component {
{tooltip && (
+
+
+
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
index 648e4a860..84017429c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
@@ -11,10 +11,20 @@ const mapStateToProps = ({auth}) => ({
const enhance = compose(
connect(mapStateToProps),
withFragments({
+ asset: gql`
+ fragment TalkModerationActions_asset on Asset {
+ id
+ }`
+ ,
comment: gql`
fragment TalkModerationActions_comment on Comment {
id
status
+ tags {
+ tag {
+ name
+ }
+ }
}
`}),
excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),