From 5e4a48f4cc824f9f327efc0c39e9e14b3fcf2aa3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 11 Sep 2017 15:38:42 -0300
Subject: [PATCH] Updates

---
 .../client/components/ApproveCommentAction.js               | 4 ++--
 .../client/components/ModerationActions.js                  | 1 +
 .../client/components/styles.css                            | 6 +++---
 .../client/containers/ApproveCommentAction.js               | 6 +++++-
 .../client/containers/RejectCommentAction.js                | 6 +++++-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index f75a98c27..c31f61023 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/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>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index 565d795c1..5e22aa82d 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/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} />
diff --git a/plugins/talk-plugin-moderation-actions/client/components/styles.css b/plugins/talk-plugin-moderation-actions/client/components/styles.css
index 12ae4bad5..4f5cdcb75 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/styles.css
+++ b/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 {
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 79c41d622..c9255284c 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/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(
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index e6116b525..b95148743 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/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(