From e69262c665026df947120aaec1519a202c406396 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 13 Jan 2017 17:11:46 -0300
Subject: [PATCH] Community Section Ready

---
 .../coral-admin/src/components/ui/Layout.css  |  1 +
 .../src/containers/Community/Community.css    | 92 +++++++++++++++--
 .../src/containers/Community/Community.js     | 21 ++--
 .../src/containers/Community/Table.js         |  2 +
 .../containers/Configure/CommentSettings.js   | 99 +++++++++----------
 .../src/containers/Configure/Configure.css    | 35 +++++--
 .../src/containers/Configure/EmbedLink.js     | 16 ++-
 .../src/containers/Configure/Wordlist.js      |  8 +-
 .../src/containers/Streams/Streams.css        | 42 ++++++--
 .../src/containers/Streams/Streams.js         | 92 ++++++++---------
 client/coral-ui/components/Card.css           | 35 +++++++
 client/coral-ui/components/Card.js            |  8 ++
 client/coral-ui/components/Pager.css          | 19 +++-
 client/coral-ui/components/Pager.js           |  6 +-
 client/coral-ui/index.js                      |  2 +
 views/admin.ejs                               |  2 +-
 16 files changed, 318 insertions(+), 162 deletions(-)
 create mode 100644 client/coral-ui/components/Card.css
 create mode 100644 client/coral-ui/components/Card.js

diff --git a/client/coral-admin/src/components/ui/Layout.css b/client/coral-admin/src/components/ui/Layout.css
index 71518b82d..792440d97 100644
--- a/client/coral-admin/src/components/ui/Layout.css
+++ b/client/coral-admin/src/components/ui/Layout.css
@@ -2,4 +2,5 @@
     max-width: 1280px;
     margin: 0 auto;
     overflow: hidden;
+    background-color: #FAFAFA;
 }
diff --git a/client/coral-admin/src/containers/Community/Community.css b/client/coral-admin/src/containers/Community/Community.css
index cb6d408ee..7cd88a299 100644
--- a/client/coral-admin/src/containers/Community/Community.css
+++ b/client/coral-admin/src/containers/Community/Community.css
@@ -1,16 +1,49 @@
+.container {
+  padding: 10px;
+  display: flex;
+  padding-bottom: 200px;
+}
+
+.leftColumn {
+  padding: 42px 56px;
+  width: 234px;
+}
+
+.mainContent {
+  width: calc(100% - 300px);
+  padding: 34px 14px;
+  box-sizing: border-box;
+}
+
 .roleButton {
   display: block;
 }
 
-.searchInput {
-  display: block;
-  padding-left: 40px;
-  width: 100%
-}
-
 .searchBox {
+  width: 100%;
+  padding: 9px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   background: white;
-  max-width: 150px;
+  box-sizing: border-box;
+  height: 40px;
+
+  i {
+    color: #A1A1A1
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    font-size: 16px;
+    padding: 0 2px 0 15px;
+    box-sizing: border-box;
+  }
 }
 
 .email {
@@ -18,5 +51,48 @@
 }
 
 .dataTable {
-  white-space: normal;
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  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);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
 }
diff --git a/client/coral-admin/src/containers/Community/Community.js b/client/coral-admin/src/containers/Community/Community.js
index 0c725ed49..d63dd1e96 100644
--- a/client/coral-admin/src/containers/Community/Community.js
+++ b/client/coral-admin/src/containers/Community/Community.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
-import {Grid, Cell} from 'react-mdl';
 
 import styles from './Community.css';
 import Table from './Table';
 import Loading from './Loading';
 import NoResults from './NoResults';
-import Pager from 'coral-ui/components/Pager';
+import {Pager} from 'coral-ui';
 
 const lang = new I18n(translations);
 
@@ -33,17 +32,17 @@ const tableHeaders = [
 const Community = ({isFetching, commenters, ...props}) => {
   const hasResults = !isFetching && !!commenters.length;
   return (
-    <Grid>
-      <Cell col={2}>
+    <div className={styles.container}>
+      <div className={styles.leftColumn}>
         <form action="">
-          <div className={`mdl-textfield ${styles.searchBox}`}>
-            <label className="mdl-button mdl-js-button mdl-button--icon" htmlFor="commenters-search">
+          <div className={`${styles.searchBox}`}>
+            <label htmlFor="commenters-search">
               <i className="material-icons">search</i>
             </label>
             <div className="">
               <input
                 id="commenters-search"
-                className={`mdl-textfield__input ${styles.searchInput}`}
+                className={`${styles.searchInput}`}
                 type="text"
                 value={props.searchValue}
                 onKeyDown={props.onKeyDownHandler}
@@ -52,8 +51,8 @@ const Community = ({isFetching, commenters, ...props}) => {
             </div>
           </div>
         </form>
-      </Cell>
-      <Cell col={10}>
+      </div>
+      <div className={styles.mainContent}>
         { isFetching && <Loading /> }
         { !hasResults && <NoResults /> }
         { hasResults &&
@@ -68,8 +67,8 @@ const Community = ({isFetching, commenters, ...props}) => {
           page={props.page}
           onNewPageHandler={props.onNewPageHandler}
         />
-      </Cell>
-    </Grid>
+      </div>
+    </div>
   );
 };
 
diff --git a/client/coral-admin/src/containers/Community/Table.js b/client/coral-admin/src/containers/Community/Table.js
index 1d81b1b2e..c146e564a 100644
--- a/client/coral-admin/src/containers/Community/Table.js
+++ b/client/coral-admin/src/containers/Community/Table.js
@@ -52,6 +52,7 @@ class Table extends Component {
               </td>
               <td className="mdl-data-table__cell--non-numeric">
                 <SelectField label={'Select me'} value={row.status || ''}
+                  className={styles.selectField}
                   label={lang.t('community.status')}
                   onChange={status => this.onCommenterStatusChange(row.id, status)}>
                   <Option value={'active'}>{lang.t('community.active')}</Option>
@@ -60,6 +61,7 @@ class Table extends Component {
               </td>
               <td className="mdl-data-table__cell--non-numeric">
                 <SelectField label={'Select me'} value={row.roles[0] || ''}
+                  className={styles.selectField}
                   label={lang.t('community.role')}
                   onChange={role => this.onRoleChange(row.id, role)}>
                   <Option value={''}>.</Option>
diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js
index 6000c1d43..a0c1177c2 100644
--- a/client/coral-admin/src/containers/Configure/CommentSettings.js
+++ b/client/coral-admin/src/containers/Configure/CommentSettings.js
@@ -3,15 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {
-  List,
-  ListItem,
-  ListItemContent,
-  ListItemAction,
-  Textfield,
-  Checkbox,
-  Icon
-} from 'react-mdl';
+import {Textfield, Checkbox} from 'react-mdl';
+import {Card, Icon, Spinner} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -71,35 +64,32 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
 
 const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError, settings, errors}) => {
   if (fetchingSettings) {
-
-    /* maybe a spinner here at some point */
-    return <p>Loading settings...</p>;
+    return <Card shadow="4"><Spinner/>Loading settings...</Card>;
   }
 
   return (
-    <div>
+    <div className={styles.commentSettingsSection}>
       <h3>{title}</h3>
-      <List>
-        <ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
-          <ListItemAction>
+        <Card className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
+          <div className={styles.action}>
             <Checkbox
               onChange={updateModeration(updateSettings, settings.moderation)}
               checked={settings.moderation === 'pre'} />
-          </ListItemAction>
-          <ListItemContent>
+          </div>
+          <div className={styles.content}>
           <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
           <p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
             {lang.t('configure.enable-pre-moderation-text')}
           </p>
-        </ListItemContent>
-        </ListItem>
-        <ListItem className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-          <ListItemAction>
+        </div>
+        </Card>
+        <Card className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+          <div className={styles.action}>
             <Checkbox
               onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
               checked={settings.charCountEnable} />
-          </ListItemAction>
-          <ListItemContent>
+          </div>
+          <div className={styles.content}>
             <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
             <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
               <span>{lang.t('configure.comment-count-text-pre')}</span>
@@ -118,32 +108,44 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
                   </span>
                 }
             </p>
-          </ListItemContent>
-        </ListItem>
-        <ListItem threeLine className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-          <ListItemAction>
+          </div>
+        </Card>
+        <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
+          <div className={styles.action}>
             <Checkbox
               onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
               checked={settings.infoBoxEnable} />
-          </ListItemAction>
-          <ListItemContent>
+          </div>
+          <div className={styles.content}>
             {lang.t('configure.include-comment-stream')}
             <p>
               {lang.t('configure.include-comment-stream-desc')}
             </p>
-          </ListItemContent>
-        </ListItem>
-        <ListItem className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-          <ListItemContent>
+            <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+              <div className={styles.content}>
+                <Textfield
+                  onChange={updateInfoBoxContent(updateSettings)}
+                  value={settings.infoBoxContent}
+                  label={lang.t('configure.include-text')}
+                  rows={3}/>
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card className={styles.configSettingInfoBox}>
+          <div className={styles.content}>
+            {lang.t('configure.closed-comments-desc')}
+            <p>
             <Textfield
-              onChange={updateInfoBoxContent(updateSettings)}
-              value={settings.infoBoxContent}
-              label={lang.t('configure.include-text')}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+              label={lang.t('configure.closed-comments-label')}
               rows={3}/>
-          </ListItemContent>
-        </ListItem>
-        <ListItem className={styles.configSettingInfoBox}>
-          <ListItemContent>
+            </p>
+          </div>
+        </Card>
+        <Card className={`${styles.configSettingInfoBox}`}>
+          <div className={styles.content}>
             {lang.t('configure.close-after')}
             <br />
             <Textfield
@@ -163,19 +165,8 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
                 <Option value={'weeks'}>{lang.t('configure.weeks')}</Option>
               </SelectField>
             </div>
-          </ListItemContent>
-        </ListItem>
-        <ListItem className={styles.configSettingInfoBox}>
-          <ListItemContent>
-            {lang.t('configure.closed-comments-desc')}
-            <Textfield
-              onChange={updateClosedMessage(updateSettings)}
-              value={settings.closedMessage}
-              label={lang.t('configure.closed-comments-label')}
-              rows={3}/>
-          </ListItemContent>
-        </ListItem>
-      </List>
+          </div>
+        </Card>
     </div>
   );
 };
diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 9615311f0..1f23af30b 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -21,11 +21,9 @@
 }
 
 .configSetting {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  height: 95px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   align-items: flex-start;
+  min-height: 100px;
 }
 
 .settingsError {
@@ -47,13 +45,13 @@
 }
 
 .configSettingInfoBox {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-bottom: 10px;
+  min-height: 100px;
+  margin-bottom: 20px;
   cursor: pointer;
   width: auto;
   height: auto;
   text-align: left;
+  overflow: visible;
 }
 
 .configSettingInfoBox p {
@@ -82,7 +80,7 @@
 }
 
 .charCountTexfieldEnabled {
-  border-color: #4caf50;
+  border-color: #00796b;
 }
 
 .charCountTexfield:focus {
@@ -95,7 +93,7 @@
 }
 
 .copiedText {
-  color: #008000;
+  color: #00796b;
   float: right;
   padding: 12px;
   font-size: 14px;
@@ -103,6 +101,7 @@
 
 .copyButton {
   float: right;
+  width: 200px;
 }
 
 .embedInput {
@@ -134,7 +133,7 @@
 }
 
 .enabledSetting {
-  border-left-color: #4caf50;
+  border-left-color: #00796b;
   border-left-style: solid;
   border-left-width: 7px;
 }
@@ -150,3 +149,19 @@
 .saveBox {
   margin-top: 38px;
 }
+
+.commentSettingsSection {
+  padding-bottom: 200px;
+  .action {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px;
+  }
+
+  .content {
+    display: inline-block;
+    padding-left: 30px;
+  }
+}
diff --git a/client/coral-admin/src/containers/Configure/EmbedLink.js b/client/coral-admin/src/containers/Configure/EmbedLink.js
index 374d78ea3..105b531c5 100644
--- a/client/coral-admin/src/containers/Configure/EmbedLink.js
+++ b/client/coral-admin/src/containers/Configure/EmbedLink.js
@@ -2,11 +2,7 @@ import React, {Component} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {
-  List,
-  ListItem,
-  Button
-} from 'react-mdl';
+import {Button, Card} from 'coral-ui';
 
 class EmbedLink extends Component {
 
@@ -34,16 +30,16 @@ class EmbedLink extends Component {
     return (
       <div>
         <h3>{this.props.title}</h3>
-        <List>
-          <ListItem className={styles.configSettingEmbed}>
+        <div>
+          <Card shadow="2">
             <p>{lang.t('configure.copy-and-paste')}</p>
             <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-            <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
+            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
               {lang.t('embedlink.copy')}
             </Button>
             <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
-          </ListItem>
-        </List>
+          </Card>
+        </div>
       </div>
     );
   }
diff --git a/client/coral-admin/src/containers/Configure/Wordlist.js b/client/coral-admin/src/containers/Configure/Wordlist.js
index a0920c461..1a808acc6 100644
--- a/client/coral-admin/src/containers/Configure/Wordlist.js
+++ b/client/coral-admin/src/containers/Configure/Wordlist.js
@@ -2,15 +2,13 @@ import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import TagsInput from 'react-tagsinput';
-
 import styles from './Configure.css';
-
-import {Card} from 'react-mdl';
+import {Card} from 'coral-ui';
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <h3>{lang.t('configure.banned-words-title')}</h3>
-    <Card id={styles.bannedWordlist} shadow={2}>
+    <Card id={styles.bannedWordlist}>
       <p className={styles.wordlistHeader}>{lang.t('configure.banned-word-header')}</p>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
       <TagsInput
@@ -22,7 +20,7 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
       />
     </Card>
     <h3>{lang.t('configure.suspect-words-title')}</h3>
-    <Card id={styles.suspectWordlist} shadow={2}>
+    <Card id={styles.suspectWordlist}>
       <p className={styles.wordlistHeader}>{lang.t('configure.suspect-word-header')}</p>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
       <TagsInput
diff --git a/client/coral-admin/src/containers/Streams/Streams.css b/client/coral-admin/src/containers/Streams/Streams.css
index c64de7974..26fb4f74f 100644
--- a/client/coral-admin/src/containers/Streams/Streams.css
+++ b/client/coral-admin/src/containers/Streams/Streams.css
@@ -4,11 +4,14 @@
 }
 
 .leftColumn {
-  width: 200px;
+  padding: 42px 56px;
+  width: 234px;
 }
 
 .mainContent {
-  width: calc(90% - 200px);
+  width: calc(100% - 300px);
+  padding: 34px 14px;
+  box-sizing: border-box;
 }
 
 .searchIcon {
@@ -18,11 +21,12 @@
 }
 
 .searchBox {
-  padding: 3px;
+  width: 100%;
+  padding: 9px;
   border: 1px solid #ccc;
-  border-radius: 3px;
-  width: 90%;
+  border-radius: 2px;
   display: flex;
+  background: white;
 }
 
 .searchBoxInput {
@@ -48,6 +52,16 @@
 
 .streamsTable {
   width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th.status {
+    width: 100px;
+  }
 }
 
 .radio {
@@ -55,18 +69,20 @@
 }
 
 .statusMenu {
-  border-radius: 3px;
+  border-radius: 2px;
   width: 10em;
   text-align: center;
   float: right;
-  border: 1px solid #ccc;
   color: #fff;
   cursor: pointer;
+  letter-spacing: 0.7px;
+  font-weight: 400;
+  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);
 }
 
 .statusMenuOpen {
   padding: 10px;
-  background-color: #4caf50;
+  background-color: #268D81;
 }
 
 .statusMenuIcon {
@@ -75,9 +91,17 @@
 
 .statusMenuClosed {
   padding: 10px;
-  background-color: #000;
+  background-color: #262626;
 }
 
 .hidden {
   display: none;
 }
+
+.radioGroup {
+  margin-top: 5px;
+  span {
+    margin-bottom: 7px;
+    display: inline-block;
+  }
+}
diff --git a/client/coral-admin/src/containers/Streams/Streams.js b/client/coral-admin/src/containers/Streams/Streams.js
index a154516dd..3c4b143b8 100644
--- a/client/coral-admin/src/containers/Streams/Streams.js
+++ b/client/coral-admin/src/containers/Streams/Streams.js
@@ -103,61 +103,63 @@ class Streams extends Component {
   render () {
     const {search, sort, filter} = this.state;
     const {assets} = this.props;
-
-    return <div className={styles.container}>
-      <div className={styles.leftColumn}>
-
-        <div className={styles.searchBox}>
-          <Icon name='search' className={styles.searchIcon}/>
-          <input
-            type='text'
-            value={search}
-            className={styles.searchBoxInput}
-            onChange={this.onSearchChange}
-            placeholder={lang.t('streams.search')}/>
-        </div>
-
-        <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
-        <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
+    return (
+      <div className={styles.container}>
+        <div className={styles.leftColumn}>
+          <div className={styles.searchBox}>
+            <Icon name='search' className={styles.searchIcon}/>
+            <input
+              type='text'
+              value={search}
+              className={styles.searchBoxInput}
+              onChange={this.onSearchChange}
+              placeholder={lang.t('streams.search')}/>
+          </div>
+          <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
+          <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
           <RadioGroup
             name='status filter'
             value={filter}
             childContainer='div'
-            onChange={this.onSettingChange('filter')}>
+            onChange={this.onSettingChange('filter')}
+            className={styles.radioGroup}
+          >
             <Radio value='all'>{lang.t('streams.all')}</Radio>
             <Radio value='open'>{lang.t('streams.open')}</Radio>
             <Radio value='closed'>{lang.t('streams.closed')}</Radio>
           </RadioGroup>
           <div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
-          <RadioGroup
-            name='sort by'
-            value={sort}
-            childContainer='div'
-            onChange={this.onSettingChange('sort')}>
-            <Radio value='desc'>{lang.t('streams.newest')}</Radio>
-            <Radio value='asc'>{lang.t('streams.oldest')}</Radio>
-          </RadioGroup>
+            <RadioGroup
+              name='sort by'
+              value={sort}
+              childContainer='div'
+              onChange={this.onSettingChange('sort')}
+              className={styles.radioGroup}
+            >
+              <Radio value='desc'>{lang.t('streams.newest')}</Radio>
+              <Radio value='asc'>{lang.t('streams.oldest')}</Radio>
+            </RadioGroup>
+          </div>
+        <div className={styles.mainContent}>
+          <DataTable
+          className={styles.streamsTable}
+          rows={assets.ids.map((id) => assets.byId[id])}>
+          <TableHeader name="title">{lang.t('streams.article')}</TableHeader>
+          <TableHeader name="publication_date" cellFormatter={this.renderDate}>
+            {lang.t('streams.pubdate')}
+          </TableHeader>
+          <TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
+            {lang.t('streams.status')}
+          </TableHeader>
+          </DataTable>
+          <Pager
+          totalPages={Math.ceil((assets.count || 0) / limit)}
+          page={this.state.page}
+          onNewPageHandler={this.onPageClick}
+          />
+        </div>
       </div>
-
-      <div className={styles.mainContent}>
-      <DataTable
-        className={styles.streamsTable}
-        rows={assets.ids.map((id) => assets.byId[id])}>
-        <TableHeader name="title">{lang.t('streams.article')}</TableHeader>
-        <TableHeader numeric name="publication_date" cellFormatter={this.renderDate}>
-          {lang.t('streams.pubdate')}
-        </TableHeader>
-        <TableHeader numeric name="closedAt" cellFormatter={this.renderStatus}>
-          {lang.t('streams.status')}
-        </TableHeader>
-      </DataTable>
-      <Pager
-        totalPages={Math.ceil((assets.count || 0) / limit)}
-        page={this.state.page}
-        onNewPageHandler={this.onPageClick}
-      />
-      </div>
-    </div>;
+    );
   }
 }
 
diff --git a/client/coral-ui/components/Card.css b/client/coral-ui/components/Card.css
new file mode 100644
index 000000000..d4b5b1e91
--- /dev/null
+++ b/client/coral-ui/components/Card.css
@@ -0,0 +1,35 @@
+.base {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: 400;
+  min-height: 200px;
+  overflow: hidden;
+  width: 330px;
+  z-index: 1;
+  position: relative;
+  background: #fff;
+  border-radius: 2px;
+  box-sizing: border-box;
+
+  width: 100%;
+  padding: 20px;
+}
+
+.shadow--4 {
+  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
+}
+
+.shadow--2{
+  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);
+}
+
+.shadow--3 {
+  box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
+}
+
+
diff --git a/client/coral-ui/components/Card.js b/client/coral-ui/components/Card.js
new file mode 100644
index 000000000..0bdb490e7
--- /dev/null
+++ b/client/coral-ui/components/Card.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Card.css';
+
+export default ({children, className, shadow = 2, ...props}) => (
+  <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
+    {children}
+  </div>
+);
diff --git a/client/coral-ui/components/Pager.css b/client/coral-ui/components/Pager.css
index 82e96f727..42559d11d 100644
--- a/client/coral-ui/components/Pager.css
+++ b/client/coral-ui/components/Pager.css
@@ -1,10 +1,19 @@
-.li {
+.pager {
+  text-align: center;
+
+  li {
     display: inline-block;
     margin-right: 5px;
-    padding: 0;
-    min-width: 30px;
+    color: white;
+    height: 30px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 30px;
+    width: 30px;
+  }
 }
 
 .current {
-    background: #e3edf3;
-}
\ No newline at end of file
+  background: #696969;
+  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);
+}
diff --git a/client/coral-ui/components/Pager.js b/client/coral-ui/components/Pager.js
index fca20b0db..ffd1b9d0a 100644
--- a/client/coral-ui/components/Pager.js
+++ b/client/coral-ui/components/Pager.js
@@ -2,19 +2,18 @@ import React, {PropTypes} from 'react';
 import styles from './Pager.css';
 
 const Rows = (curr, total, onClickHandler) => Array.from(Array(total)).map((e, i) =>
-  <li className={`mdl-button mdl-js-button ${styles.li} ${curr === i ? styles.current : ''}`}
+  <li className={curr === i ? styles.current : ''}
       key={i} onClick={() => onClickHandler(i + 1)}>
     {i + 1}
   </li>
 );
 
 const Pager = ({totalPages, page, onNewPageHandler}) => (
-  <div className="pager">
+  <div className={styles.pager}>
     <ul>
       {
         (totalPages > page && totalPages > 1) ?
           <li
-            className={`mdl-button mdl-js-button ${styles.li}`}
             onClick={() => onNewPageHandler(page - 1)}>
             Prev
           </li>
@@ -25,7 +24,6 @@ const Pager = ({totalPages, page, onNewPageHandler}) => (
       {
         (page < totalPages && totalPages > 1) ?
         <li
-          className={`mdl-button mdl-js-button ${styles.li}`}
           onClick={() => onNewPageHandler(page + 1)}>
           Next
         </li>
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 9a30c133d..23d5d876a 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -12,3 +12,5 @@ export {default as Checkbox} from './components/Checkbox';
 export {default as Icon} from './components/Icon';
 export {default as List} from './components/List';
 export {default as Item} from './components/Item';
+export {default as Card} from './components/Card';
+export {default as Pager} from './components/Pager';
diff --git a/views/admin.ejs b/views/admin.ejs
index 5f3eba53f..32d38734a 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -13,7 +13,7 @@
         width: 100%;
         height: 100%;
         margin: 0;
-        background: #fff;
+        background-color: #FAFAFA;
         font-family: 'Roboto', sans-serif;
       }
       /* putting this here until I can get webpack to behave */