have active state on action buttons depending on comment status

client/coral-admin/src/components/ActionButton.js

@@ -1,17 +1,27 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
 import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
 
-const ActionButton = ({type = '', ...props}) => {
+const ActionButton = ({type = '', status, ...props}) => {
+  const typeName = type.toLowerCase();
+  let active = false;
+  if ((type === 'REJECT' && status === 'REJECTED') || (type === 'APPROVE' && status === 'APPROVED')) {
+    active = true;
+  }
+
   return (
     <Button
-      className={`${type.toLowerCase()} ${styles.actionButton}`}
-      cStyle={type.toLowerCase()}
+      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
     >{menuActionsMap[type].text}</Button>
   );
 };
 
+ActionButton.propTypes = {
+  status: PropTypes.string
+};
+
 export default ActionButton;

client/coral-admin/src/components/ModerationList.css

@@ -188,3 +188,15 @@
   margin: 0;
   width: 140px;
 }
+
+.approve__active {
+  box-shadow: none;
+  color: white;
+  background-color: #519954;
+}
+
+.reject__active, .rejected__active {
+  color: white;
+  background-color: #D03235;
+  box-shadow: none;
+}

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -64,6 +64,7 @@ const Comment = ({actions = [], comment, ...props}) => {
                 <ActionButton key={i}
                               type={action}
                               user={comment.user}
+                              status={comment.status}
                               acceptComment={() => props.acceptComment({commentId: comment.id})}
                               rejectComment={() => props.rejectComment({commentId: comment.id})}
                 />

client/coral-ui/components/Button.css

@@ -149,7 +149,7 @@
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
   width: 128px;
 
-&:hover {
+  &:hover {
    color: white;
    background-color: #D03235;
    box-shadow: none;