From cee1c5bc1c9d8f38bc08be3b74e3e3223c870e29 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 25 Apr 2017 11:21:28 -0600
Subject: [PATCH] have active state on action buttons depending on comment
 status

---
 .../coral-admin/src/components/ActionButton.js | 18 ++++++++++++++----
 .../src/components/ModerationList.css          | 12 ++++++++++++
 .../ModerationQueue/components/Comment.js      |  1 +
 client/coral-ui/components/Button.css          |  2 +-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js
index 3bd96abad..f962e768e 100644
--- a/client/coral-admin/src/components/ActionButton.js
+++ b/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;
diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css
index fc2ba9931..1e871f97c 100644
--- a/client/coral-admin/src/components/ModerationList.css
+++ b/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;
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index b18f239e4..6a06a6ca0 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/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})}
                 />
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index 14ed64aa2..219b70a65 100644
--- a/client/coral-ui/components/Button.css
+++ b/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;