Approve actions and styles

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

@@ -0,0 +1,23 @@
+.root {
+  white-space: nowrap;
+} 
+  
+.button {
+  composes: buttonReset from "coral-framework/styles/reset.css";
+  padding: 6px;
+  font-size: 14px;
+  transition: color 100ms, background 100ms;
+  border-radius: 3px;
+
+  &:hover {
+    background-color: #efefef;
+  }
+}
+
+.icon {
+  margin-right: 15px;
+}
+
+.approved {
+  color: #519954;
+}

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

@@ -1,21 +1,21 @@
 import React from 'react';
-import styles from './RejectCommentAction.css';
+import styles from './ApproveCommentAction.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-const isApproved = (status) => status === "APPROVED";
+const isApproved = (status) => (status === "ACCEPTED");
 
-export default ({comment: {status}, approveComment}) => (
+export default ({approveComment, comment: {status}}) => (
   <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={approveComment}>
     {isApproved(status) ? (
-      <span>
-        <Icon name="done" className={cn(styles.icon, styles.approved)} />
+      <span className={styles.approved}>
+        <Icon name="check_circle" className={styles.icon} />
         {t('talk-plugin-moderation-actions.approved_comment')}
       </span>
     ) : (
       <span>
-        <Icon name="done" className={cn(styles.icon)} />
+        <Icon name="done" className={styles.icon} />
         {t('talk-plugin-moderation-actions.approve_comment')}
       </span>
     )}

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

@@ -12,7 +12,7 @@ class ApproveCommentActionContainer extends React.Component {
     try {
       const result = await setCommentStatus({
         commentId: comment.id,
-        status: 'APPROVED'
+        status: 'ACCEPTED'
       });
 
       if (result.data.setCommentStatus.errors) {

plugins/talk-plugin-moderation-actions/client/index.js

@@ -11,8 +11,8 @@ export default {
     SetCommentStatus: ({variables: {status, commentId}}) => ({
       updateQueries: {
         CoralEmbedStream_Embed: (prev) => {
-
-          if (status !== 'REJECTED') {
+          
+          if (status !== 'REJECTED' && status !== "ACCEPTED") {
             return prev;
           }
 
@@ -22,7 +22,7 @@ export default {
                 nodes: {
                   $apply: (nodes) => nodes.map((node) => {
                     if (node.id === commentId) {
-                      node.status = "REJECTED";
+                      node.status = status;
                     }
 
                     return node;