Functionality and styling

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;

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;

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;
 }

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>
           }
 

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: []})

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",

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"