design progress

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

@@ -7,9 +7,8 @@ import styles from './CommentList.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 
-import {Icon} from 'react-mdl';
 import Highlighter from 'react-highlight-words';
-import {FabButton, Button} from 'coral-ui';
+import {FabButton, Button, Icon} from 'coral-ui';
 
 const linkify = new Linkify();
 
@@ -20,22 +19,19 @@ export default props => {
   const links = linkify.getMatches(comment.body);
 
   return (
-    <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>{author.displayName || lang.t('comment.anon')}</span>
           <span className={styles.created}>{timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}</span>
           {comment.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
         </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))}
           </div>
-        </div>
-        <div>
           {authorStatus === 'banned' ?
           <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
         </div>
@@ -65,15 +61,18 @@ const getActionButton = (action, i, props) => {
   }
   if (action === 'ban') {
     return (
-      <Button
-        className='ban'
-        cStyle='black'
-        disabled={banned ? 'disabled' : ''}
-        onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
-        key={i}
-      >
-        {lang.t('comment.ban_user')}
-      </Button>
+      <div className={styles.ban}>
+        <Button
+          className={`ban ${styles.banButton}`}
+          cStyle='black'
+          disabled={banned ? 'disabled' : ''}
+          onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
+          key={i}
+        >
+          <Icon name='not_interested' className={styles.banIcon} />
+          {lang.t('comment.ban_user')}
+        </Button>
+      </div>
     );
   }
   return (

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

@@ -38,11 +38,23 @@
   border-bottom: 1px solid #e0e0e0;
   padding: 16px;
   font-size: 16px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
 
   &:last-child {
     border-bottom: none;
   }
 
+   .sideActions {
+     position: absolute;
+     right: 0;
+     height: 100%;
+     top: 0;
+     padding: 30px 22px;
+   }
+
   .itemHeader {
     display: flex;
     align-items: center;
@@ -76,7 +88,7 @@
   }
 
   .actionButton {
-    transform: scale(.7);
+    transform: scale(.8);
     margin: 0;
   }
 
@@ -87,11 +99,6 @@
     color: rgba(0,0,0,.54);
   }
 
-  .actions {
-    margin-left: 10px;
-    display: flex;
-  }
-
   .flagged {
     color: rgba(255, 0, 0, .5);
     padding-top: 15px;
@@ -143,3 +150,19 @@
     margin-right: 5px;
   }
 }
+
+.ban {
+  display: block;
+  text-align: center;
+}
+
+.banButton {
+  width: 114px;
+  letter-spacing: 1px;
+
+  i {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+}

client/coral-admin/src/components/ui/Header.css

@@ -8,7 +8,7 @@
   background-color: #696969;
   position: relative;
   padding: 0;
-  width: 1170px;
+  min-width: 1280px;
   margin: 0 auto;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
   height: 58px;

client/coral-admin/src/components/ui/Layout.css

@@ -1,4 +1,4 @@
 .layout {
-    max-width: 1170px;
+    max-width: 1280px;
     margin: 0 auto;
-}
+}

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

@@ -14,13 +14,22 @@ export default ({onTabClick, ...props}) => (
   <div>
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <a href='#pending' onClick={() => onTabClick('pending')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}>
+        <a href='#pending'
+           onClick={() => onTabClick('pending')}
+           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}
+        >
           {lang.t('modqueue.pending')}
         </a>
-        <a href='#rejected' onClick={() => onTabClick('rejected')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}>
+        <a href='#rejected'
+           onClick={() => onTabClick('rejected')}
+           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
+        >
           {lang.t('modqueue.rejected')}
         </a>
-        <a href='#flagged' onClick={() => onTabClick('flagged')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}>
+        <a href='#flagged'
+           onClick={() => onTabClick('flagged')}
+           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
+        >
           {lang.t('modqueue.flagged')}
         </a>
       </div>

client/coral-ui/components/Icon.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Icon as IconMDL}  from 'react-mdl';
+
+const Icon = ({className, name}) => (
+  <IconMDL classname={className} name={name} />
+);
+
+export default Icon;

client/coral-ui/index.js

@@ -9,3 +9,4 @@ export {default as Spinner} from './components/Spinner';
 export {default as Tooltip} from './components/Tooltip';
 export {default as PopupMenu} from './components/PopupMenu';
 export {default as Checkbox} from './components/Checkbox';
+export {default as Icon} from './components/Icon';