From 0483aae3692ee7501fde32902e9ae9c76018fe6f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 14:54:28 -0300
Subject: [PATCH 1/9] Moving ActionsMenu

---
 .../coral-admin/src/actions/banUserDialog.js  |  1 -
 .../coral-admin/src/components/UserDetail.js  | 77 +++++++++++++------
 .../coral-admin/src/containers/UserDetail.js  |  4 +
 .../Community/components/FlaggedAccounts.js   |  6 --
 .../Community/components/FlaggedUser.js       | 31 +-------
 .../Community/containers/FlaggedAccounts.js   |  8 --
 .../routes/Moderation/components/Comment.js   | 38 ---------
 .../Moderation/components/Moderation.js       |  4 -
 .../Moderation/components/ModerationQueue.js  |  6 --
 .../Moderation/containers/Moderation.js       |  5 --
 10 files changed, 60 insertions(+), 120 deletions(-)

diff --git a/client/coral-admin/src/actions/banUserDialog.js b/client/coral-admin/src/actions/banUserDialog.js
index 8b068051c..8134318cb 100644
--- a/client/coral-admin/src/actions/banUserDialog.js
+++ b/client/coral-admin/src/actions/banUserDialog.js
@@ -4,4 +4,3 @@ export const showBanUserDialog = ({userId, username, commentId, commentStatus})
   ({type: SHOW_BAN_USER_DIALOG, userId, username, commentId, commentStatus});
 
 export const hideBanUserDialog = () => ({type: HIDE_BAN_USER_DIALOG});
-
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 140774eae..c43d39ac7 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -13,30 +13,10 @@ import {getReliability} from 'coral-framework/utils/user';
 import ApproveButton from './ApproveButton';
 import RejectButton from './RejectButton';
 import {getErrorMessages} from 'coral-framework/utils';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
+class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
     try {
@@ -90,6 +70,16 @@ export default class UserDetail extends React.Component {
     this.props.changeStatus('rejected');
   }
 
+  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
+    userId: this.props.user.id,
+    username: this.props.user.username,
+  });
+
+  showBanUserDialog = () => this.props.showBanUserDialog({
+    userId: this.props.user.id,
+    username: this.props.user.username,
+  });
+
   renderLoading() {
     return (
       <ClickOutside onClickOutside={this.props.hideUserDetail}>
@@ -131,6 +121,21 @@ export default class UserDetail extends React.Component {
         <Drawer onClose={hideUserDetail}>
           <h3>{user.username}</h3>
 
+          {user.id !== user.id &&
+            <ActionsMenu icon="not_interested">
+              <ActionsMenuItem
+                disabled={user.status === 'BANNED'}
+                onClick={this.showSuspenUserDialog}>
+                Suspend User
+              </ActionsMenuItem>
+              <ActionsMenuItem
+                disabled={user.status === 'BANNED'}
+                onClick={this.showBanUserDialog}>
+                Ban User
+              </ActionsMenuItem>
+            </ActionsMenu>
+          }
+
           <div>
             <ul className={styles.userDetailList}>
               <li>
@@ -244,3 +249,29 @@ export default class UserDetail extends React.Component {
     return this.renderLoaded();
   }
 }
+
+UserDetail.propTypes = {
+  user: PropTypes.object.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeStatus: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+};
+
+export default UserDetail;
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 3a458ff83..5fc84708f 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -17,6 +17,8 @@ import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import {notify} from 'coral-framework/actions/notification';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
@@ -181,6 +183,8 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
+    showBanUserDialog,
+    showSuspendUserDialog,
     changeUserDetailStatuses,
     clearUserDetailSelections,
     toggleSelectCommentInUserDetail,
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index cbfd903c6..1d01e1714 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -13,8 +13,6 @@ class FlaggedAccounts extends React.Component {
     const {
       users,
       loadMore,
-      showBanUserDialog,
-      showSuspendUserDialog,
       showRejectUsernameDialog,
       approveUser,
       me,
@@ -48,8 +46,6 @@ class FlaggedAccounts extends React.Component {
                       <FlaggedUser
                         user={user}
                         key={user.id}
-                        showBanUserDialog={showBanUserDialog}
-                        showSuspendUserDialog={showSuspendUserDialog}
                         showRejectUsernameDialog={showRejectUsernameDialog}
                         approveUser={approveUser}
                         me={me}
@@ -74,8 +70,6 @@ class FlaggedAccounts extends React.Component {
 FlaggedAccounts.propTypes = {
   users: PropTypes.object,
   loadMore: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
   me: PropTypes.object,
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index b2156f479..2b752aeeb 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -4,8 +4,6 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
@@ -19,18 +17,10 @@ const shortReasons = {
 
 class User extends React.Component {
 
-  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
-  showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
   viewAuthorDetail = () => this.props.viewUserDetail(this.props.user.id);
+
   showRejectUsernameDialog = () => this.props.showRejectUsernameDialog({id: this.props.user.id});
+
   approveUser = () => this.props.approveUser({
     userId: this.props.user.id,
   });
@@ -40,7 +30,6 @@ class User extends React.Component {
       user,
       viewUserDetail,
       selected,
-      me,
       className,
     } = this.props;
 
@@ -55,20 +44,6 @@ class User extends React.Component {
                 className={styles.button}>
                 {user.username}
               </button>
-              {me.id !== user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showSuspenUserDialog}>
-                    Suspend User
-                  </ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
             </div>
           </div>
           <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
@@ -136,8 +111,6 @@ class User extends React.Component {
 }
 
 User.propTypes = {
-  showSuspendUserDialog: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
index b7f918d8c..cfd2ea8e9 100644
--- a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
@@ -7,8 +7,6 @@ import {Spinner} from 'coral-ui';
 import PropTypes from 'prop-types';
 
 import {withSetUserStatus} from 'coral-framework/graphql/mutations';
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {showRejectUsernameDialog} from '../../../actions/community';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {getDefinitionName} from 'coral-framework/utils';
@@ -63,8 +61,6 @@ class FlaggedAccountsContainer extends Component {
     }
     return (
       <FlaggedAccounts
-        showBanUserDialog={this.props.showBanUserDialog}
-        showSuspendUserDialog={this.props.showSuspendUserDialog}
         showRejectUsernameDialog={this.props.showRejectUsernameDialog}
         viewUserDetail={this.props.viewUserDetail}
         approveUser={this.approveUser}
@@ -79,8 +75,6 @@ class FlaggedAccountsContainer extends Component {
 }
 
 FlaggedAccountsContainer.propTypes = {
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   setUserStatus: PropTypes.func,
@@ -104,8 +98,6 @@ const LOAD_MORE_QUERY = gql`
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    showBanUserDialog,
-    showSuspendUserDialog,
     showRejectUsernameDialog,
     viewUserDetail,
   }, dispatch);
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index cea49720b..362e7189d 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -8,8 +8,6 @@ import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
@@ -20,26 +18,6 @@ import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
-  showSuspendUserDialog = () => {
-    const {comment, showSuspendUserDialog} = this.props;
-    return showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
-  showBanUserDialog = () => {
-    const {comment, showBanUserDialog} = this.props;
-    return showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
   viewUserDetail = () => {
     const {viewUserDetail, comment} = this.props;
     return viewUserDetail(comment.user.id);
@@ -63,7 +41,6 @@ class Comment extends React.Component {
       data,
       root,
       root: {settings},
-      currentUserId,
       currentAsset,
     } = this.props;
 
@@ -94,19 +71,6 @@ class Comment extends React.Component {
                   ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                   : null
               }
-              {currentUserId !== comment.user.id &&
-                <ActionsMenu icon="not_interested" className="talk-admin-moderate-comment-actions-menu">
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showSuspendUserDialog}>
-                    Suspend User</ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
               <div className={styles.adminCommentInfoBar}>
                 <CommentLabels
                   comment={comment}
@@ -188,8 +152,6 @@ Comment.propTypes = {
   rejectComment: PropTypes.func.isRequired,
   className: PropTypes.string,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
   comment: PropTypes.shape({
     id: PropTypes.string.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 392db36e3..a2ffe3614 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -269,8 +269,6 @@ class Moderation extends Component {
             activeTab={activeTab}
             singleView={moderation.singleView}
             selectedCommentId={this.state.selectedCommentId}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
@@ -315,8 +313,6 @@ Moderation.propTypes = {
   queueConfig: PropTypes.object.isRequired,
   handleCommentChange: PropTypes.func.isRequired,
   setSortOrder: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   loadMore: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index dc4a8c74c..ddbfeb898 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -148,8 +148,6 @@ class ModerationQueue extends React.Component {
             comment={comment}
             selected={true}
             viewUserDetail={viewUserDetail}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
@@ -192,8 +190,6 @@ class ModerationQueue extends React.Component {
                   comment={comment}
                   selected={comment.id === selectedCommentId}
                   viewUserDetail={viewUserDetail}
-                  showBanUserDialog={props.showBanUserDialog}
-                  showSuspendUserDialog={props.showSuspendUserDialog}
                   acceptComment={props.acceptComment}
                   rejectComment={props.rejectComment}
                   currentAsset={props.currentAsset}
@@ -215,8 +211,6 @@ class ModerationQueue extends React.Component {
 ModerationQueue.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   comments: PropTypes.array.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 1b75d23cc..38a6c4c6d 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -12,9 +12,6 @@ import {isPremod, getModPath} from '../../../utils';
 
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {handleCommentChange} from '../graphql';
-
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
 import {
   toggleModal,
@@ -414,10 +411,8 @@ const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     toggleModal,
     singleView,
-    showBanUserDialog,
     hideShortcutsNote,
     toggleStorySearch,
-    showSuspendUserDialog,
     viewUserDetail,
     setSortOrder,
     storySearchChange,

From a3d83efd7de3fd30911c139ba3038883d6b6b50c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 15:01:06 -0300
Subject: [PATCH 2/9] Styling and functionality

---
 .../coral-admin/src/components/UserDetail.css   |  8 ++++++++
 client/coral-admin/src/components/UserDetail.js | 17 +++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 8b86a133c..e62f584c4 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -163,4 +163,12 @@
   &.selected {
     background-color: #efefef;
   }
+}
+
+.username {
+  display: inline-block;
+}
+
+.actionsMenu {
+  display: inline-block;
 }
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index c43d39ac7..49543a534 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -71,13 +71,13 @@ class UserDetail extends React.Component {
   }
 
   showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
   });
 
   showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
+    userId: this.props.root.user.id,
+    username: this.props.root.user.username,
   });
 
   renderLoading() {
@@ -119,10 +119,12 @@ class UserDetail extends React.Component {
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
         <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
+          <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
+            {user.username}
+          </h3>
 
-          {user.id !== user.id &&
-            <ActionsMenu icon="not_interested">
+          {user.id &&
+            <ActionsMenu icon="not_interested" className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}>
               <ActionsMenuItem
                 disabled={user.status === 'BANNED'}
                 onClick={this.showSuspenUserDialog}>
@@ -251,7 +253,6 @@ class UserDetail extends React.Component {
 }
 
 UserDetail.propTypes = {
-  user: PropTypes.object.isRequired,
   hideUserDetail: PropTypes.func.isRequired,
   root: PropTypes.object.isRequired,
   acceptComment: PropTypes.func.isRequired,

From 6557c6036f958835579f98fed994d77b61ccd747 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 15:48:37 -0300
Subject: [PATCH 3/9] Functionality and styling

---
 .../src/components/ActionsMenu.css            | 13 ++++----
 .../coral-admin/src/components/ActionsMenu.js |  8 +++--
 .../coral-admin/src/components/UserDetail.css | 12 +++++++
 .../coral-admin/src/components/UserDetail.js  | 32 +++++++++++++++----
 .../coral-admin/src/containers/UserDetail.js  |  1 +
 package.json                                  |  2 +-
 yarn.lock                                     | 12 +++----
 7 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/client/coral-admin/src/components/ActionsMenu.css b/client/coral-admin/src/components/ActionsMenu.css
index 1d2f91f74..cd127790f 100644
--- a/client/coral-admin/src/components/ActionsMenu.css
+++ b/client/coral-admin/src/components/ActionsMenu.css
@@ -6,11 +6,9 @@
 
 .root {
   color: black;
+  vertical-align: super;
   > :global(.mdl-menu__container) {
     margin-left: 10px;
-    > :global(.mdl-menu__outline) {
-      box-shadow: none;
-    }
   }
 }
 
@@ -18,6 +16,7 @@
   box-shadow: none;
   color: white;
   background-color: #616161;
+  border-color: #616161;
 }
 
 .arrowIcon {
@@ -33,8 +32,10 @@
 }
 
 .menuItem {
-  background-color: #2a2a2a;
-  color: white;
+  color: #2a2a2a;
+  background-color: white;
+  font-size: 0.95em;
+
   &:first-child {
     margin-bottom: 1px;
     border-radius: 2px 2px 0px 0px;
@@ -43,7 +44,7 @@
     border-radius: 0px 0px 2px 2px;
   }
   &:hover, &:active, &:focus {
-    background-color: #767676;
+    background-color: #e2e2e2;
   }
   &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
     background-color: #262626;
diff --git a/client/coral-admin/src/components/ActionsMenu.js b/client/coral-admin/src/components/ActionsMenu.js
index 6351afda7..ef4e46573 100644
--- a/client/coral-admin/src/components/ActionsMenu.js
+++ b/client/coral-admin/src/components/ActionsMenu.js
@@ -32,18 +32,18 @@ class ActionsMenu extends React.Component {
   };
 
   render() {
-    const {className = ''} = this.props;
+    const {className = '', buttonClassNames = '', label = ''} = this.props;
     return (
       <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
         <Button
           cStyle='actions'
-          className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
+          className={cn(styles.button, {[styles.buttonOpen]: this.state.open}, buttonClassNames)}
           disabled={false}
           id={this.id}
           onClick={this.syncOpenState}
           icon={this.props.icon}
           raised>
-          {t('modqueue.actions')}
+          {label ? label : t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}
@@ -61,6 +61,8 @@ ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
+  label: PropTypes.string,
+  buttonClassNames: PropTypes.string,
 };
 
 export default ActionsMenu;
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index e62f584c4..01252b60c 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -171,4 +171,16 @@
 
 .actionsMenu {
   display: inline-block;
+}
+
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
+}
+
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
 }
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 49543a534..3344d6720 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -124,17 +124,35 @@ class UserDetail extends React.Component {
           </h3>
 
           {user.id &&
-            <ActionsMenu icon="not_interested" className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}>
-              <ActionsMenuItem
-                disabled={user.status === 'BANNED'}
+            <ActionsMenu
+              icon="person"
+              className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
+              buttonClassNames={cn({
+                [styles.actionsMenuSuspended]: user.status === 'SUSPENDED',
+                [styles.actionsMenuBanned]: user.status === 'BANNED',
+              }, 'talk-admin-user-detail-actions-button')}
+              label={user.status !== 'ACTIVE' ? capitalize(user.status) : ''}>
+
+              {user.status === 'SUSPENDED' && <ActionsMenuItem
+                onClick={this.showSuspenUserDialog}>
+                Remove Suspension
+              </ActionsMenuItem>}
+
+              {user.status === 'BANNED' && <ActionsMenuItem
+                onClick={this.showSuspenUserDialog}>
+                Remove Ban
+              </ActionsMenuItem>}
+
+              {user.status !== 'SUSPENDED' && <ActionsMenuItem
                 onClick={this.showSuspenUserDialog}>
                 Suspend User
-              </ActionsMenuItem>
-              <ActionsMenuItem
-                disabled={user.status === 'BANNED'}
+              </ActionsMenuItem>}
+
+              {user.status !== 'BANNED' && <ActionsMenuItem
                 onClick={this.showBanUserDialog}>
                 Ban User
-              </ActionsMenuItem>
+              </ActionsMenuItem>}
+
             </ActionsMenu>
           }
 
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 5fc84708f..ca907d098 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -149,6 +149,7 @@ export const withUserDetailQuery = withQuery(gql`
       reliable {
         flagger
       }
+      status
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id, statuses: []})
diff --git a/package.json b/package.json
index 63a1b7119..f83a6bcab 100644
--- a/package.json
+++ b/package.json
@@ -156,7 +156,7 @@
     "react-apollo": "^1.4.12",
     "react-dom": "^15.4.2",
     "react-input-autosize": "^1.1.4",
-    "react-mdl": "^1.7.2",
+    "react-mdl": "^1.11.0",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
     "react-recaptcha": "^2.2.6",
diff --git a/yarn.lock b/yarn.lock
index 882cf3e29..78578939c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7360,18 +7360,18 @@ react-mdl-selectfield@^0.2.0:
     react-dom "^15.3.1"
     react-mdl "^1.7.1"
 
-react-mdl@^1.7.1:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
+react-mdl@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
   dependencies:
     clamp "^1.0.1"
     classnames "^2.2.3"
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
-react-mdl@^1.7.2:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
+react-mdl@^1.7.1:
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
   dependencies:
     clamp "^1.0.1"
     classnames "^2.2.3"

From ca6e839ca465bb90bdf51f8097eb5b76a4d54a46 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 16:19:59 -0300
Subject: [PATCH 4/9] UserInfoTooltip, styling and func

---
 .../src/components/ActionsMenu.css            |  3 +-
 .../coral-admin/src/components/UserDetail.css |  1 +
 .../coral-admin/src/components/UserDetail.js  |  5 +-
 .../src/components/UserInfoTooltip.css        | 65 ++++++++++++++
 .../src/components/UserInfoTooltip.js         | 88 +++++++++++++++++++
 5 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 client/coral-admin/src/components/UserInfoTooltip.css
 create mode 100644 client/coral-admin/src/components/UserInfoTooltip.js

diff --git a/client/coral-admin/src/components/ActionsMenu.css b/client/coral-admin/src/components/ActionsMenu.css
index cd127790f..5d263ca21 100644
--- a/client/coral-admin/src/components/ActionsMenu.css
+++ b/client/coral-admin/src/components/ActionsMenu.css
@@ -6,7 +6,6 @@
 
 .root {
   color: black;
-  vertical-align: super;
   > :global(.mdl-menu__container) {
     margin-left: 10px;
   }
@@ -22,7 +21,7 @@
 .arrowIcon {
   margin-left: 6px;
   margin-right: 0;
-  vertical-align: middle;
+  vertical-align: middle; 
   margin-right: 0;
   font-size: 14px;
 }
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 01252b60c..d7bf541da 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -167,6 +167,7 @@
 
 .username {
   display: inline-block;
+  vertical-align: middle;
 }
 
 .actionsMenu {
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 3344d6720..5bf47c760 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -15,7 +15,8 @@ import RejectButton from './RejectButton';
 import {getErrorMessages} from 'coral-framework/utils';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
-
+import UserInfoTooltip from './UserInfoTooltip';
+ 
 class UserDetail extends React.Component {
 
   rejectThenReload = async (info) => {
@@ -156,6 +157,8 @@ class UserDetail extends React.Component {
             </ActionsMenu>
           }
 
+          {user.status !== 'ACTIVE' && <UserInfoTooltip user={user} />}
+
           <div>
             <ul className={styles.userDetailList}>
               <li>
diff --git a/client/coral-admin/src/components/UserInfoTooltip.css b/client/coral-admin/src/components/UserInfoTooltip.css
new file mode 100644
index 000000000..5814d2f82
--- /dev/null
+++ b/client/coral-admin/src/components/UserInfoTooltip.css
@@ -0,0 +1,65 @@
+.userInfo {
+  position: relative;
+  display: inline-block;
+}
+
+.icon {
+  font-size: 16px;
+  color: #616161;
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  right: 0px;
+  width: 140px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  right: 0px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 0px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserInfoTooltip.js b/client/coral-admin/src/components/UserInfoTooltip.js
new file mode 100644
index 000000000..a750f2c8e
--- /dev/null
+++ b/client/coral-admin/src/components/UserInfoTooltip.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import {Icon} from 'coral-ui';
+import styles from './UserInfoTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+
+const initialState = {menuVisible: false};
+
+class UserInfoTooltip extends React.Component {
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({menuVisible: !this.state.menuVisible});
+  }
+
+  hideMenu = () => {
+    this.setState({menuVisible: false});
+  }
+
+  render() {
+    const {menuVisible} = this.state;
+    const {user} = this.props;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.userInfo, 'talk-admin-user-info-tooltip')}>
+          <span onClick={this.toogleMenu} className={cn(styles.icon, 'talk-admin-user-info-tooltip-icon')}>
+            <Icon name="info_outline" />
+          </span>
+
+          {menuVisible && (
+            <div className={cn(styles.menu, 'talk-admin-user-info-tooltip-menu')}>
+              {
+                user.status === 'BANNED' && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-banned')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Banned On</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>By</strong>
+                        <span></span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+
+              {
+                user.status === 'SUSPENDED' && (
+                  <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-suspended')}>
+                    <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Suspension</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>By</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>Start</strong>
+                        <span></span>
+                      </li>
+                      <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
+                        <strong>End</strong>
+                        <span></span>
+                      </li>
+                    </ul>
+                  </div>
+                )
+              }
+
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+UserInfoTooltip.propTypes = {
+  user: PropTypes.object,
+};
+
+export default UserInfoTooltip;
\ No newline at end of file

From 05965472231beec074c1b77aebe21d699b9d0c56 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 16:29:12 -0300
Subject: [PATCH 5/9] Adding old user status

---
 .../coral-admin/src/components/UserDetail.css | 12 ++++-----
 .../coral-admin/src/components/UserDetail.js  | 25 ++++++++++++++++---
 .../coral-admin/src/containers/UserDetail.js  |  3 +++
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index d7bf541da..d4c29559c 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -174,14 +174,14 @@
   display: inline-block;
 }
 
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
+}
+
 .actionsMenuBanned {
   background-color: #E45241;
   border-color: #E45241;
   color: white;
 }
-
-.actionsMenuSuspended {
-  background-color: #F29336;
-  border-color: #F29336;
-  color: white;
-}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 5bf47c760..4a1814000 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -91,6 +91,18 @@ class UserDetail extends React.Component {
     );
   }
 
+  getActionMenuLabel() {
+    const {root: {user}} = this.props;
+    
+    if (user.status === 'BANNED') {
+      return 'Banned';
+    } else if (user.suspension.until && new Date(user.suspension.until) > new Date()) {
+      return 'Suspended';
+    } else {
+      return '';
+    }
+  }
+
   renderLoaded() {
     const {
       data,
@@ -117,6 +129,11 @@ class UserDetail extends React.Component {
       rejectedPercent = 0;
     }
 
+    const suspended =
+      user &&
+      user.suspension.until &&
+      new Date(user.suspension.until) > new Date();
+
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
         <Drawer onClose={hideUserDetail}>
@@ -129,12 +146,12 @@ class UserDetail extends React.Component {
               icon="person"
               className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
               buttonClassNames={cn({
-                [styles.actionsMenuSuspended]: user.status === 'SUSPENDED',
+                [styles.actionsMenuSuspended]: suspended,
                 [styles.actionsMenuBanned]: user.status === 'BANNED',
               }, 'talk-admin-user-detail-actions-button')}
-              label={user.status !== 'ACTIVE' ? capitalize(user.status) : ''}>
+              label={this.getActionMenuLabel()}>
 
-              {user.status === 'SUSPENDED' && <ActionsMenuItem
+              {suspended && <ActionsMenuItem
                 onClick={this.showSuspenUserDialog}>
                 Remove Suspension
               </ActionsMenuItem>}
@@ -144,7 +161,7 @@ class UserDetail extends React.Component {
                 Remove Ban
               </ActionsMenuItem>}
 
-              {user.status !== 'SUSPENDED' && <ActionsMenuItem
+              {!suspended && <ActionsMenuItem
                 onClick={this.showSuspenUserDialog}>
                 Suspend User
               </ActionsMenuItem>}
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index ca907d098..75d2bd354 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -150,6 +150,9 @@ export const withUserDetailQuery = withQuery(gql`
         flagger
       }
       status
+      suspension {
+        until
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id, statuses: []})

From 56beac9a1fa4add5b119e69173dac587a887e098 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 16:31:08 -0300
Subject: [PATCH 6/9] Adding old user status

---
 client/coral-admin/src/components/UserDetail.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 4a1814000..3058c0d00 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -134,6 +134,8 @@ class UserDetail extends React.Component {
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
+    const banned = user.status === 'BANNED';
+
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
         <Drawer onClose={hideUserDetail}>
@@ -147,7 +149,7 @@ class UserDetail extends React.Component {
               className={cn(styles.actionsMenu, 'talk-admin-user-detail-actions-menu')}
               buttonClassNames={cn({
                 [styles.actionsMenuSuspended]: suspended,
-                [styles.actionsMenuBanned]: user.status === 'BANNED',
+                [styles.actionsMenuBanned]: banned,
               }, 'talk-admin-user-detail-actions-button')}
               label={this.getActionMenuLabel()}>
 
@@ -156,7 +158,7 @@ class UserDetail extends React.Component {
                 Remove Suspension
               </ActionsMenuItem>}
 
-              {user.status === 'BANNED' && <ActionsMenuItem
+              {banned && <ActionsMenuItem
                 onClick={this.showSuspenUserDialog}>
                 Remove Ban
               </ActionsMenuItem>}
@@ -166,7 +168,7 @@ class UserDetail extends React.Component {
                 Suspend User
               </ActionsMenuItem>}
 
-              {user.status !== 'BANNED' && <ActionsMenuItem
+              {!banned && <ActionsMenuItem
                 onClick={this.showBanUserDialog}>
                 Ban User
               </ActionsMenuItem>}
@@ -174,7 +176,7 @@ class UserDetail extends React.Component {
             </ActionsMenu>
           }
 
-          {user.status !== 'ACTIVE' && <UserInfoTooltip user={user} />}
+          {banned || suspended && <UserInfoTooltip user={user} />}
 
           <div>
             <ul className={styles.userDetailList}>

From e44b37538e555905000653cf87d712d948684679 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 16:39:48 -0300
Subject: [PATCH 7/9] wip

---
 client/coral-admin/src/components/UserDetail.js      | 2 +-
 client/coral-admin/src/components/UserInfoTooltip.js | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 3058c0d00..6ce94a60f 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -176,7 +176,7 @@ class UserDetail extends React.Component {
             </ActionsMenu>
           }
 
-          {banned || suspended && <UserInfoTooltip user={user} />}
+          {banned || suspended && <UserInfoTooltip user={user} banned={banned} suspended={suspended} />}
 
           <div>
             <ul className={styles.userDetailList}>
diff --git a/client/coral-admin/src/components/UserInfoTooltip.js b/client/coral-admin/src/components/UserInfoTooltip.js
index a750f2c8e..1c68c057c 100644
--- a/client/coral-admin/src/components/UserInfoTooltip.js
+++ b/client/coral-admin/src/components/UserInfoTooltip.js
@@ -20,7 +20,7 @@ class UserInfoTooltip extends React.Component {
 
   render() {
     const {menuVisible} = this.state;
-    const {user} = this.props;
+    const {banned, suspended} = this.props;
 
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
@@ -32,7 +32,7 @@ class UserInfoTooltip extends React.Component {
           {menuVisible && (
             <div className={cn(styles.menu, 'talk-admin-user-info-tooltip-menu')}>
               {
-                user.status === 'BANNED' && (
+                banned && (
                   <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-banned')}>
                     <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
@@ -49,7 +49,7 @@ class UserInfoTooltip extends React.Component {
               }
 
               {
-                user.status === 'SUSPENDED' && (
+                suspended && (
                   <div className={cn(styles.description, 'talk-admin-user-info-tooltip-description-suspended')}>
                     <ul className={cn(styles.descriptionList, 'talk-admin-user-info-tooltip-description-list')}>
                       <li className={cn(styles.descriptionItem, 'talk-admin-user-info-tooltip-description-item')}>
@@ -72,7 +72,6 @@ class UserInfoTooltip extends React.Component {
                   </div>
                 )
               }
-
             </div>
           )}
         </div>
@@ -83,6 +82,8 @@ class UserInfoTooltip extends React.Component {
 
 UserInfoTooltip.propTypes = {
   user: PropTypes.object,
+  banned: PropTypes.bool,
+  suspended: PropTypes.bool,
 };
 
 export default UserInfoTooltip;
\ No newline at end of file

From 67c81c0168e9e20a8a405b06b2dc70cf4da4c190 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 3 Dec 2017 23:16:54 -0300
Subject: [PATCH 8/9] Adding react-mdl

---
 yarn.lock | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 78578939c..9ce027f9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7360,7 +7360,7 @@ react-mdl-selectfield@^0.2.0:
     react-dom "^15.3.1"
     react-mdl "^1.7.1"
 
-react-mdl@^1.11.0:
+react-mdl@^1.11.0, react-mdl@^1.7.1:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
   dependencies:
@@ -7369,15 +7369,6 @@ react-mdl@^1.11.0:
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
-react-mdl@^1.7.1:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
-  dependencies:
-    clamp "^1.0.1"
-    classnames "^2.2.3"
-    lodash.isequal "^4.4.0"
-    prop-types "^15.5.0"
-
 react-paginate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-5.0.0.tgz#b5c12191ea81adc6d4d1b339b805e81841eaa8ea"

From c53fe4b1976db5b4644e2a48d03c85c3fdf56733 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 4 Dec 2017 00:37:41 -0300
Subject: [PATCH 9/9] Updated tests and Drawer component

---
 client/coral-admin/src/components/UserDetail.js    |  2 +-
 .../src/routes/Moderation/components/Comment.js    | 14 +++++++-------
 client/coral-ui/components/Drawer.js               |  9 ++++++---
 test/e2e/page_objects/admin.js                     | 12 +++++++++---
 test/e2e/specs/06_suspendUser.js                   |  9 ++++++---
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 6ce94a60f..d8dbb03c1 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -138,7 +138,7 @@ class UserDetail extends React.Component {
 
     return (
       <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
+        <Drawer className="talk-admin-user-detail-drawer" onClose={hideUserDetail}>
           <h3 className={cn(styles.username, 'talk-admin-user-detail-username')}>
             {user.username}
           </h3>
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 362e7189d..faeb694f6 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -56,13 +56,13 @@ class Comment extends React.Component {
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
-              {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
-                    {comment.user.username}
-                  </span>
-                )
-              }
+
+              <span
+                className={cn(styles.username, 'talk-admin-moderate-comment-username')}
+                onClick={this.viewUserDetail}>
+                {comment.user.username}
+              </span>
+
               <span className={styles.created}>
                 {timeago(comment.created_at)}
               </span>
diff --git a/client/coral-ui/components/Drawer.js b/client/coral-ui/components/Drawer.js
index d50237bfb..bada98a1f 100644
--- a/client/coral-ui/components/Drawer.js
+++ b/client/coral-ui/components/Drawer.js
@@ -1,10 +1,11 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Drawer.css';
 
-const Drawer = ({children, onClose}) => {
+const Drawer = ({children, onClose, className = ''}) => {
   return (
-    <div className={styles.drawer}>
+    <div className={cn(styles.drawer, className)}>
       <div className={styles.closeButton} onClick={onClose}>×</div>
       <div className={styles.content}>
         {children}
@@ -15,7 +16,9 @@ const Drawer = ({children, onClose}) => {
 
 Drawer.propTypes = {
   active: PropTypes.bool,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export default Drawer;
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index aa3b58ab5..173fff747 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -65,9 +65,7 @@ module.exports = {
       selector: '.talk-admin-moderation-container',
       elements: {
         comment: '.talk-admin-moderate-comment',
-        commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
-        actionItemSuspendUser: '.action-menu-item#suspendUser',
-        actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
+        commentUsername: '.talk-admin-moderate-comment-username',
       }
     },
     stories: {
@@ -116,6 +114,14 @@ module.exports = {
         }
       }
     },
+    userDetailDrawer: {
+      selector: '.talk-admin-user-detail-drawer',
+      elements: {
+        'actionsMenu': '.talk-admin-user-detail-actions-button',
+        'actionItemSuspendUser': '.action-menu-item#suspendUser',
+        'actionMenuButton': '.talk-admin-user-detail-actions-menu #actions-dropdown-0',
+      }
+    },
     drawer: {
       selector: '.talk-admin-drawer-nav',
       commands: [{
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index 20f38c2c2..a3da3c8ef 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -82,7 +82,7 @@ module.exports = {
   },
   'admin suspends user': (client) => {
     const adminPage = client.page.admin();
-    const moderate = adminPage.section.moderate;
+    const {moderate, userDetailDrawer} = adminPage.section;
     
     adminPage
       .navigate()
@@ -91,8 +91,11 @@ module.exports = {
 
     moderate
       .waitForElementVisible('@comment')
-      .waitForElementVisible('@commentActionMenu')
-      .waitForElementVisible('@actionMenuButton')
+      .waitForElementVisible('@commentUsername')
+      .click('@commentUsername');
+
+    userDetailDrawer
+      .waitForElementVisible('@actionsMenu')
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
       .click('@actionItemSuspendUser');