Updates

plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js

@@ -7,9 +7,9 @@ import cn from 'classnames';
 const isApproved = (status) => (status === 'ACCEPTED');
 
 export default ({approveComment, comment: {status}}) => (
-  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
+  <button className={cn(styles.button, {[styles.approved]: isApproved(status)}, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
     {isApproved(status) ? (
-      <span className={styles.approved}>
+      <span>
         <Icon name="check_circle" className={styles.icon} />
         {t('talk-plugin-moderation-actions.approved_comment')}
       </span>

plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js

@@ -26,6 +26,7 @@ export default class ModerationActions extends React.Component {
                 fill="moderationActions"
                 queryData={{comment, asset}}
                 data={data}
+                hideMenu={hideMenu}
               />
               <ApproveCommentAction comment={comment} />
               <RejectCommentAction comment={comment} />

plugins/talk-plugin-moderation-actions/client/components/styles.css

@@ -12,10 +12,10 @@
   width: 100%;
   text-align: left;
   letter-spacing: 0.3px;
+}
 
-  &:hover {
-    background-color: #D8D8D8;
-  }
+.button:not(.approved):hover {
+  background-color: #D8D8D8;
 }
 
 .icon {

plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {compose} from 'react-apollo';
+import {closeMenu} from '../actions';
 import {bindActionCreators} from 'redux';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
 import {notify} from 'plugin-api/beta/client/actions/notification';
@@ -9,13 +10,15 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 class ApproveCommentActionContainer extends React.Component {
 
   approveComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, closeMenu, comment} = this.props;
     
     try {
       setCommentStatus({
         commentId: comment.id,
         status: 'ACCEPTED'
       });
+
+      closeMenu();
     } catch (err) {
       notify('error', getErrorMessages(err));
     }
@@ -29,6 +32,7 @@ class ApproveCommentActionContainer extends React.Component {
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    closeMenu
   }, dispatch);
 
 const enhance = compose(

plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {compose} from 'react-apollo';
+import {closeMenu} from '../actions';
 import {bindActionCreators} from 'redux';
 import {getErrorMessages} from 'plugin-api/beta/client/utils';
 import {notify} from 'plugin-api/beta/client/actions/notification';
@@ -9,13 +10,15 @@ import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
 class RejectCommentActionContainer extends React.Component {
 
   rejectComment = () => {
-    const {setCommentStatus, comment} = this.props;
+    const {setCommentStatus, closeMenu, comment} = this.props;
     
     try {
       setCommentStatus({
         commentId: comment.id,
         status: 'REJECTED'
       });
+      
+      closeMenu();
     } catch (err) {
       notify('error', getErrorMessages(err));
     }
@@ -29,6 +32,7 @@ class RejectCommentActionContainer extends React.Component {
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
+    closeMenu
   }, dispatch);
 
 const enhance = compose(