Updating style of UserActions and moving ActionButton to its own component.

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './ModerationList.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations.json';
+import {FabButton, Button, Icon} from 'coral-ui';
+
+const ActionButton = ({option, type, comment = {}, user, menuOptionsMap, onClickAction, onClickShowBanDialog}) =>
+{
+  const banned = user.status === 'BANNED';
+
+  if (option === 'flag' && (type === 'USERS' || comment.status || comment.flagged === true)) {
+    return null;
+  }
+  if (option === 'ban') {
+    return (
+      <div className={styles.ban}>
+        <Button
+          className={`ban ${styles.banButton}`}
+          cStyle='darkGrey'
+          disabled={banned ? 'disabled' : ''}
+          onClick={() => onClickShowBanDialog(user.id, user.displayName, comment.id)
+          }
+          raised
+        >
+          <Icon name='not_interested' className={styles.banIcon} />
+          {lang.t('comment.ban_user')}
+        </Button>
+      </div>
+    );
+  }
+  const menuOption = menuOptionsMap[option];
+  const action = {
+    item_type: type,
+    item_id: type === 'COMMENTS' ? comment.id : user.id
+  };
+  return (
+    <FabButton
+      className={`${option} ${styles.actionButton}`}
+      cStyle={option}
+      icon={menuOption.icon}
+      onClick={() => onClickAction(menuOption.status, type === 'COMMENTS' ? comment : user, action)}
+    />
+  );
+};
+
+export default ActionButton;
+
+const lang = new I18n(translations);

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

@@ -8,7 +8,8 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 
 import Highlighter from 'react-highlight-words';
-import {FabButton, Button, Icon} from 'coral-ui';
+import {Icon} from 'coral-ui';
+import ActionButton from './ActionButton';
 
 const linkify = new Linkify();
 
@@ -30,7 +31,18 @@ const Comment = props => {
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {props.modActions.map((action, i) => getActionButton(action, i, props))}
+            {props.modActions.map(
+              (action, i) =>
+              <ActionButton
+                option={action}
+                key={i}
+                type='COMMENTS'
+                comment={comment}
+                user={author}
+                menuOptionsMap={props.menuOptionsMap}
+                onClickAction={props.onClickAction}
+                onClickShowBanDialog={props.onClickShowBanDialog}/>
+            )}
           </div>
           {authorStatus === 'banned' ?
           <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
@@ -49,45 +61,6 @@ const Comment = props => {
   );
 };
 
-// Get the button of the action performed over a comment if any
-const getActionButton = (option, i, props) => {
-  const {comment, author, menuOptionsMap} = props;
-  const status = comment.status;
-  const flagged = comment.flagged;
-  const banned = (author.status === 'banned');
-
-  if (option === 'flag' && (status || flagged === true)) {
-    return null;
-  }
-  if (option === 'ban') {
-    return (
-      <div className={styles.ban} key={i}>
-        <Button
-          className={`ban ${styles.banButton}`}
-          cStyle='darkGrey'
-          disabled={banned ? 'disabled' : ''}
-          onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
-          key={i}
-          raised
-        >
-          <Icon name='not_interested' className={styles.banIcon} />
-          {lang.t('comment.ban_user')}
-        </Button>
-      </div>
-    );
-  }
-  const menuOption = menuOptionsMap[option];
-  return (
-    <FabButton
-      className={`${option} ${styles.actionButton}`}
-      cStyle={option}
-      icon={menuOption.icon}
-      key={i}
-      onClick={() => props.onClickAction(menuOption.status, comment, {item_type: 'comments'})}
-    />
-  );
-};
-
 export default Comment;
 
 const linkStyles = {

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

@@ -177,7 +177,7 @@ export default class ModerationList extends React.Component {
 
       // If the item is an action...
       const user = users[item.item_id];
-      modItem = <UserAction
+      modItem = user && <UserAction
         suspectWords={suspectWords}
         action={item}
         user={user}

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

@@ -8,7 +8,7 @@ import translations from '../translations.json';
 
 import {Icon} from 'react-mdl';
 import Highlighter from 'react-highlight-words';
-import {FabButton, Button} from 'coral-ui';
+import ActionButton from './ActionButton';
 
 const linkify = new Linkify();
 
@@ -21,17 +21,27 @@ const UserAction = props => {
   // Do not display unless the user status is 'pending' or 'banned'.
   // This means that they have already been reviewed and approved.
   return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
-    <li tabIndex={props.index} className={`${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
       <div className={styles.itemHeader}>
         <div className={styles.author}>
           <i className={`material-icons ${styles.avatar}`}>person</i>
           <span>{user.displayName}</span>
           </div>
-        <div>
+        <div className={styles.sideActions}>
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {props.modActions.map((action, i) => getActionButton(action, i, props))}
+            {props.modActions.map(
+              (action, i) =>
+              <ActionButton
+                option={action}
+                key={i}
+                type='USERS'
+                user={user}
+                menuOptionsMap={props.menuOptionsMap}
+                onClickAction={props.onClickAction}
+                onClickShowBanDialog={props.onClickShowBanDialog}/>
+            )}
           </div>
         </div>
         <div>
@@ -62,37 +72,6 @@ const UserAction = props => {
 
 export default UserAction;
 
-// Get the button of the action performed over a comment if any
-const getActionButton = (option, i, props) => {
-  const {user, onClickShowBanDialog, onClickAction, menuOptionsMap, action} = props;
-  const status = user.status;
-  const banned = (user.status === 'BANNED');
-
-  if (option === 'flag' && status) {
-    return null;
-  }
-  if (option === 'ban') {
-    return <Button
-        className='ban'
-        cStyle='black'
-        disabled={banned ? 'disabled' : ''}
-        onClick={() => onClickShowBanDialog(user.id, user.displayName)}
-        key={i}>
-        {lang.t('comment.ban_user')}
-      </Button>;
-  }
-  const menuOption = menuOptionsMap[option];
-  return (
-    <FabButton
-      className={`${option} ${styles.actionButton}`}
-      cStyle={option}
-      icon={menuOption.icon}
-      key={i}
-      onClick={() => onClickAction(menuOption.status, user.id, action)}
-    />
-  );
-};
-
 const linkStyles = {
   backgroundColor: 'rgb(255, 219, 135)',
   padding: '1px 2px'