Merge branch 'dropdown' of github.com:coralproject/talk into dropdown

2026-09-09 11:38:08 +08:00 · 2017-10-12 10:08:43 -03:00
parent c4e3904a95 0d9d2d4871
commit 612adb2990
100 changed files with 2798 additions and 1321 deletions
@@ -0,0 +1,13 @@
+import * as actions from 'constants/configure';
+
+export const updatePending = ({updater, errorUpdater}) => {
+  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
+};
+
+export const clearPending = () => {
+  return {type: actions.CLEAR_PENDING};
+};
+
+export const setActiveSection = (section) => {
+  return {type: actions.SET_ACTIVE_SECTION, section};
+};
@@ -1,58 +0,0 @@
-import t from 'coral-framework/services/i18n';
-
-export const SETTINGS_LOADING = 'SETTINGS_LOADING';
-export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
-export const SETTINGS_FETCH_ERROR = 'SETTINGS_FETCH_ERROR';
-
-export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
-
-export const SAVE_SETTINGS_LOADING = 'SAVE_SETTINGS_LOADING';
-export const SAVE_SETTINGS_SUCCESS = 'SAVE_SETTINGS_SUCCESS';
-export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
-
-export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
-export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
-
-export const fetchSettings = () => (dispatch, _, {rest}) => {
-  dispatch({type: SETTINGS_LOADING});
-  rest('/settings')
-    .then((settings) => {
-      dispatch({type: SETTINGS_RECEIVED, settings});
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: SETTINGS_FETCH_ERROR, error: errorMessage});
-    });
-};
-
-// for updating top-level settings
-export const updateSettings = (settings) => {
-  return {type: SETTINGS_UPDATED, settings};
-};
-
-// this is a nested property, so it needs a special action.
-export const updateWordlist = (listName, list) => {
-  return {type: WORDLIST_UPDATED, listName, list};
-};
-
-export const updateDomainlist = (listName, list) => {
-  return {type: DOMAINLIST_UPDATED, listName, list};
-};
-
-export const saveSettingsToServer = () => (dispatch, getState, {rest}) => {
-  let settings = getState().settings;
-  if (settings.charCount) {
-    settings.charCount = parseInt(settings.charCount);
-  }
-  dispatch({type: SAVE_SETTINGS_LOADING});
-  rest('/settings', {method: 'PUT', body: settings})
-    .then(() => {
-      dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: SAVE_SETTINGS_FAILED, error: errorMessage});
-    });
-};
@@ -0,0 +1,13 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+:global {
+  .mdl-layout__drawer-button {
+    visibility: hidden;
+  }
+
+  @media (--table-viewport) {
+    .mdl-layout__drawer-button {
+      visibility: visible;
+    }
+  }
+}
@@ -6,8 +6,8 @@ import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';

-const CoralDrawer = ({handleLogout, auth}) => (
-  <Drawer className={styles.header}>
+const CoralDrawer = ({handleLogout, auth = {}}) => (
+  <Drawer className={styles.drawer}>
    { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
      <div>
        <Navigation className={styles.nav}>
@@ -57,7 +57,8 @@ const CoralDrawer = ({handleLogout, auth}) => (

 CoralDrawer.propTypes = {
  handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool // hide app elements from a logged out user
+  restricted: PropTypes.bool, // hide app elements from a logged out user
+  auth: PropTypes.object
 };

 export default CoralDrawer;
@@ -21,7 +21,6 @@

 .callToAction {
  position: fixed;
-  left: 10px;
  bottom: 10px;
  width: 280px;
  height: 200px;
@@ -29,6 +28,7 @@
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  z-index: 10;

  .ctaHeader {
    font-size: 16px;
@@ -17,8 +17,6 @@ export default class UserDetail extends React.Component {
    userId: PropTypes.string.isRequired,
    hideUserDetail: PropTypes.func.isRequired,
    root: PropTypes.object.isRequired,
-    bannedWords: PropTypes.array.isRequired,
-    suspectWords: PropTypes.array.isRequired,
    acceptComment: PropTypes.func.isRequired,
    rejectComment: PropTypes.func.isRequired,
    changeStatus: PropTypes.func.isRequired,
@@ -79,8 +77,6 @@ export default class UserDetail extends React.Component {
      },
      activeTab,
      selectedCommentIds,
-      bannedWords,
-      suspectWords,
      toggleSelect,
      bulkAccept,
      bulkReject,
@@ -184,8 +180,6 @@ export default class UserDetail extends React.Component {
                  root={root}
                  data={data}
                  comment={comment}
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
                  acceptComment={this.acceptThenReload}
                  rejectComment={this.rejectThenReload}
                  selected={selected}
@@ -30,12 +30,11 @@ class UserDetailComment extends React.Component {
  render() {
    const {
      comment,
-      suspectWords,
-      bannedWords,
      selected,
      toggleSelect,
      className,
      data,
+      root: {settings: {wordlist: {banned, suspect}}},
    } = this.props;

    return (
@@ -72,8 +71,8 @@ class UserDetailComment extends React.Component {
            <div className={styles.bodyContainer}>
              <div className={styles.body}>
                <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
+                  suspectWords={suspect}
+                  bannedWords={banned}
                  body={comment.body}
                />
                {' '}
@@ -123,9 +122,15 @@ UserDetailComment.propTypes = {
  acceptComment: PropTypes.func.isRequired,
  rejectComment: PropTypes.func.isRequired,
  className: PropTypes.string,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  toggleSelect: PropTypes.func,
+  root: PropTypes.shape({
+    settings: PropTypes.shape({
+      wordlist: PropTypes.shape({
+        suspect: PropTypes.arrayOf(PropTypes.string).isRequired,
+        banned: PropTypes.arrayOf(PropTypes.string).isRequired,
+      }),
+    }),
+  }),
  comment: PropTypes.shape({
    id: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired,
@@ -136,8 +141,8 @@ UserDetailComment.propTypes = {
      title: PropTypes.string,
      url: PropTypes.string,
      id: PropTypes.string
-    })
-  })
+    }),
+  }),
 };

 export default UserDetailComment;
@@ -15,10 +15,16 @@
  }
 }

+.headerWrapper {
+  background-color: #696969;
+}
+
 .header {
  box-shadow: none;
  min-height: 58px;
  display: block;
+  max-width: 1280px;
+  margin: 0 auto;
  background-color: #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);
 }
@@ -15,93 +15,95 @@ const CoralHeader = ({
  root
 }) => {
  return (
-    <Header className={styles.header}>
-      <Logo className={styles.logo} />
-      <div> 
-        {
-          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-            <Navigation className={styles.nav}>
-              <IndexLink
-                id='dashboardNav'
-                className={styles.navLink}
-                to="/admin/dashboard"
-                activeClassName={styles.active}>
-                {t('configure.dashboard')}
-              </IndexLink>
-              {
-                can(auth.user, 'MODERATE_COMMENTS') && (
-                  <Link
-                    id='moderateNav'
-                    className={styles.navLink}
-                    to="/admin/moderate"
-                    activeClassName={styles.active}>
-                    {t('configure.moderate')}
-                    {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                  </Link>
-                )
-              }
-              <Link
-                id='streamsNav'
-                className={styles.navLink}
-                to="/admin/stories"
-                activeClassName={styles.active}>
-                {t('configure.stories')}
-              </Link>
+    <div className={styles.headerWrapper}>
+      <Header className={styles.header}>
+        <Logo className={styles.logo} />
+        <div> 
+          {
+            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+              <Navigation className={styles.nav}>
+                <IndexLink
+                  id='dashboardNav'
+                  className={styles.navLink}
+                  to="/admin/dashboard"
+                  activeClassName={styles.active}>
+                  {t('configure.dashboard')}
+                </IndexLink>
+                {
+                  can(auth.user, 'MODERATE_COMMENTS') && (
+                    <Link
+                      id='moderateNav'
+                      className={styles.navLink}
+                      to="/admin/moderate"
+                      activeClassName={styles.active}>
+                      {t('configure.moderate')}
+                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
+                    </Link>
+                  )
+                }
+                <Link
+                  id='streamsNav'
+                  className={styles.navLink}
+                  to="/admin/stories"
+                  activeClassName={styles.active}>
+                  {t('configure.stories')}
+                </Link>

-              <Link
-                id='communityNav'
-                className={styles.navLink}
-                to="/admin/community"
-                activeClassName={styles.active}>
-                {t('configure.community')}
-                {root.flaggedUsernamesCount !== 0 && <Indicator />}
-              </Link>
+                <Link
+                  id='communityNav'
+                  className={styles.navLink}
+                  to="/admin/community"
+                  activeClassName={styles.active}>
+                  {t('configure.community')}
+                  {root.flaggedUsernamesCount !== 0 && <Indicator />}
+                </Link>

-              {
-                can(auth.user, 'UPDATE_CONFIG') && (
-                  <Link
-                    id='configureNav'
-                    className={styles.navLink}
-                    to="/admin/configure"
-                    activeClassName={styles.active}>
-                    {t('configure.configure')}
-                  </Link>
-                )
-              }
-            </Navigation>
-            :
-            null
-        }
-        <div className={styles.rightPanel}>
-          <ul>
-            <li className={styles.settings}>
-              <div>
-                <IconButton name="settings" id="menu-settings"/>
-                <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem>
-                    <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                        View latest version
-                    </a>
-                  </MenuItem>
-                  <MenuItem>
-                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
-                        Report a bug or give feedback
-                    </a>
-                  </MenuItem>
-                  <MenuItem onClick={handleLogout}>
-                    {t('configure.sign_out')}
-                  </MenuItem>
-                </Menu>
-              </div>
-            </li>
-            <li>
-              {`v${process.env.VERSION}`}
-            </li>
-          </ul>
+                {
+                  can(auth.user, 'UPDATE_CONFIG') && (
+                    <Link
+                      id='configureNav'
+                      className={styles.navLink}
+                      to="/admin/configure"
+                      activeClassName={styles.active}>
+                      {t('configure.configure')}
+                    </Link>
+                  )
+                }
+              </Navigation>
+              :
+              null
+          }
+          <div className={styles.rightPanel}>
+            <ul>
+              <li className={styles.settings}>
+                <div>
+                  <IconButton name="settings" id="menu-settings"/>
+                  <Menu target="menu-settings" align="right">
+                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                    <MenuItem>
+                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
+                          View latest version
+                      </a>
+                    </MenuItem>
+                    <MenuItem>
+                      <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank" rel="noopener noreferrer">
+                          Report a bug or give feedback
+                      </a>
+                    </MenuItem>
+                    <MenuItem onClick={handleLogout}>
+                      {t('configure.sign_out')}
+                    </MenuItem>
+                  </Menu>
+                </div>
+              </li>
+              <li>
+                {`v${process.env.VERSION}`}
+              </li>
+            </ul>
+          </div>
        </div>
-      </div>
-    </Header>
+      </Header>
+    </div>
  );
 };

@@ -1,4 +1,4 @@
 .layout {
-    margin: 0 auto;
-    background-color: #FAFAFA;
+  margin: 0 auto;
+  background-color: #FAFAFA;
 }
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from '../../containers/Header';
-import Drawer from './Drawer';
+import Drawer from '../Drawer';
 import styles from './Layout.css';

 const Layout = ({
@@ -21,6 +21,7 @@ const Layout = ({
    <Drawer 
      handleLogout={handleLogout}
      restricted={restricted}
+      auth={auth}
    />
    <div className={styles.layout}>
      {children}
@@ -20,7 +20,6 @@
  background: #696969;
  height: 100%;
  width: 128px;
-  z-index: 10;
  border-right: 1px #757575 solid;
 }

@@ -0,0 +1,5 @@
+const prefix = 'TALK_ADMIN_CONFIGURE';
+
+export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
+export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
+export const SET_ACTIVE_SECTION = `${prefix}_SET_ACTIVE_SECTION`;
@@ -179,8 +179,6 @@ const mapStateToProps = (state) => ({
  selectedCommentIds: state.userDetail.selectedCommentIds,
  statuses: state.userDetail.statuses,
  activeTab: state.userDetail.activeTab,
-  bannedWords: state.settings.wordlist.banned,
-  suspectWords: state.settings.wordlist.suspect,
 });

 const mapDispatchToProps = (dispatch) => ({
@@ -8,7 +8,12 @@ import CommentDetails from './CommentDetails';
 export default withFragments({
  root: gql`
    fragment CoralAdmin_UserDetailComment_root on RootQuery {
-      __typename
+      settings {
+        wordlist {
+          banned
+          suspect
+        }
+      }
      ...${getDefinitionName(CommentLabels.fragments.root)}
      ...${getDefinitionName(CommentDetails.fragments.root)}
    }
@@ -1,4 +1,15 @@
 import update from 'immutability-helper';
+import mapValues from 'lodash/mapValues';
+
+// Map nested object leaves. Array objects are considered leaves.
+function mapLeaves(o, mapper) {
+  return mapValues(o, (val) => {
+    if (typeof val === 'object' && !Array.isArray(val)) {
+      return mapLeaves(val, mapper);
+    }
+    return mapper(val);
+  });
+}

 export default {
  mutations: {
@@ -29,6 +40,16 @@ export default {
        }
      }
    }),
+    UpdateSettings: ({variables: {input}})  => ({
+      updateQueries: {
+        TalkAdmin_Configure: (prev) => {
+          const updated = update(prev, {
+            settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+          });
+          return updated;
+        }
+      }
+    }),
  },
 };

@@ -0,0 +1,47 @@
+import * as actions from '../constants/configure';
+import isEmpty from 'lodash/isEmpty';
+import update from 'immutability-helper';
+
+const initialState = {
+  canSave: false,
+  pending: {},
+  errors: {},
+  activeSection: 'stream',
+};
+
+export default function configure(state = initialState, action) {
+  switch (action.type) {
+  case actions.UPDATE_PENDING: {
+    let next = state;
+    if (action.updater) {
+      next = update(next, {
+        pending: action.updater,
+      });
+    }
+    if (action.errorUpdater) {
+      next = update(next, {
+        errors: action.errorUpdater,
+      });
+    }
+    const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
+    const canSave = !isEmpty(next.pending) && noErrors;
+    next = update(next, {
+      canSave: {$set: canSave},
+    });
+
+    return next;
+  }
+  case actions.CLEAR_PENDING:
+    return {
+      ...state,
+      pending: {},
+      canSave: false,
+    };
+  case actions.SET_ACTIVE_SECTION:
+    return {
+      ...state,
+      activeSection: action.section,
+    };
+  }
+  return state;
+}
@@ -0,0 +1,15 @@
+// this is initialized here because
+// currently you have to reload the dashboard to get new stats
+// cleaner updates are planned in the future.
+const DASHBOARD_WINDOW_MINUTES = 5;
+let then = new Date();
+then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
+
+const initialState = {
+  windowStart: then.toISOString(),
+  windowEnd: new Date().toISOString(),
+};
+
+export default function dashboard (state = initialState, _action) {
+  return state;
+}
@@ -1,6 +1,7 @@
 import auth from './auth';
 import assets from './assets';
-import settings from './settings';
+import dashboard from './dashboard';
+import configure from './configure';
 import community from './community';
 import moderation from './moderation';
 import install from './install';
@@ -12,10 +13,11 @@ import userDetail from './userDetail';
 export default {
  auth,
  banUserDialog,
+  dashboard,
+  configure,
  suspendUserDialog,
  userDetail,
  assets,
-  settings,
  community,
  moderation,
  install,
@@ -1,92 +0,0 @@
-import * as actions from '../actions/settings';
-import update from 'immutability-helper';
-
-// this is initialized here because
-// currently you have to reload the dashboard to get new stats
-// cleaner updates are planned in the future.
-// TODO: if there are more than two fields for the dashboard being created here,
-// please create a new reducer specifically for the Dashboard.
-const DASHBOARD_WINDOW_MINUTES = 5;
-let then = new Date();
-then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
-
-const initialState = {
-  wordlist: {
-    banned: [],
-    suspect: []
-  },
-  dashboardWindowStart: then.toISOString(),
-  dashboardWindowEnd: new Date().toISOString(),
-  domains: {
-    whitelist: []
-  },
-  saveSettingsError: null,
-  fetchSettingsError: null,
-  fetchingSettings: false
-};
-
-export default function settings (state = initialState, action) {
-  switch (action.type) {
-  case actions.SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      fetchSettingsError: null,
-    };
-  case actions.SETTINGS_RECEIVED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SETTINGS_FETCH_ERROR:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
-  case actions.SETTINGS_UPDATED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SAVE_SETTINGS_LOADING:
-    return {
-      ...state,
-      fetchingSettings: true,
-      saveSettingsError: null,
-    };
-  case actions.SAVE_SETTINGS_SUCCESS:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: null,
-      ...action.settings
-    };
-  case actions.SAVE_SETTINGS_FAILED:
-    return {
-      ...state,
-      fetchingSettings: false,
-      fetchSettingsError: action.error,
-    };
-  case actions.WORDLIST_UPDATED:
-    return update(state, {
-      wordlist: {
-        [action.listName]: {
-          $set: action.list
-        }
-      }
-    });
-  case actions.DOMAINLIST_UPDATED:
-    return update(state, {
-      domains: {
-        [action.listName]: {$set: action.list},
-      }
-    });
-  default:
-    return state;
-  }
-}
@@ -1,17 +1,7 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
 .container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
-
-  h3 {
-    color: black;
-    font-size: 1.26em;
-    font-weight: 500;
-  }
 }

 .leftColumn {
@@ -19,6 +9,15 @@
  width: 234px;
 }

+.saveBox {
+  margin-top: 38px;
+}
+
+.changedSave {
+  background-color: #00796B;
+  color: white;
+}
+
 .mainContent {
  width: calc(100% - 300px);
  padding: 10px 14px;
@@ -26,183 +25,3 @@
  max-width: 718px;
 }

-.configSetting {
-  margin-bottom: 20px;
-  align-items: flex-start;
-  min-height: 100px;
-  max-width: 600px;
-
-  h3 {
-    margin: 0;
-  }
-
-  .actions {
-    display: inline-block;
-    width: 100%;
-
-    .copiedText {
-      display: inline-block;
-      color: #00796b;
-      padding: 12px;
-      font-size: 14px;
-      float: right;
-    }
-
-    .copyButton {
-      display: inline-block;
-      width: 200px;
-      float: right;
-    }
-  }
-}
-
-.settingsError {
-  color: #d50000;
-}
-
-.settingsError i {
-  font-size: 14px;
-  margin-right: 3px;
-}
-
-.settingsHeader {
-  margin-top: 3px;
-  margin-bottom: 7px;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.disabledSettingText {
-  color: #ccc;
-}
-
-.configSettingInfoBox {
-  min-height: 100px;
-  margin-bottom: 20px;
-  width: auto;
-  height: auto;
-  text-align: left;
-  overflow: visible;
-}
-
-.configSettingEmbed {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  display: block;
-}
-
-.configTimeoutSelect {
-  display: inline-block;
-  margin-left: 20px;
-
-  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
-    padding: 20px 0;
-    vertical-align: top;
-  }
-}
-
-.inlineTextfield {
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
-  text-align: center;
-  font-size: inherit;
-}
-
-.inlineTextfield:focus {
-  outline: none;
-}
-
-.charCountTexfield, .editCommentTimeframeTextfield {
-  width: 4em;
-  padding: 0px;
-}
-
-.charCountTexfieldEnabled {
-  border-color: #00796b;
-}
-
-.changedSave {
-  background-color: #00796B;
-  color: white;
-}
-
-.embedInput {
-  width: 100%;
-  display: block;
-  outline: none;
-  border: 1px solid rgba(0,0,0,.12);
-  padding: 6px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  margin: 5px auto;
-  min-height: 175px;
-  font-size: 14px;
-  resize: none;
-}
-
-.customCSSInput {
-  width: 100%;
-  font-size: 14px;
-  padding: 14px;
-  letter-spacing: 0.03em;
-  color: #555;
-  box-sizing: border-box;
-}
-
-.enabledSetting {
-  border-left-color: #00796b;
-  border-left-style: solid;
-  border-left-width: 7px;
-}
-
-.disabledSetting {
-  padding-left: 22px;
-}
-
-.hidden {
-  display: none;
-}
-
-.saveBox {
-  margin-top: 38px;
-}
-
-.settingsSection {
-  padding-bottom: 200px;
-  .action {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    padding: 20px;
-  }
-
-  .content {
-    display: inline-block;
-    padding: 0px 30px;
-    box-sizing: border-box;
-    width: 100%;
-  }
-}
-
-.Configure {
-
-  p {
-    line-height: 1.2;
-    max-width: 550px;
-  }
-
-  .wrapper {
-    width: 100%;
-  }
-
-  .descriptionBox {
-    margin-top: 15px;
-
-    input {
-      height: 150px;
-    }
-  }
-}
@@ -1,119 +1,40 @@
 import React, {Component} from 'react';

-import {Button, List, Item, Card, Spinner} from 'coral-ui';
+import {Button, List, Item} from 'coral-ui';
 import styles from './Configure.css';
-import StreamSettings from './StreamSettings';
-import ModerationSettings from './ModerationSettings';
-import TechSettings from './TechSettings';
+import StreamSettings from '../containers/StreamSettings';
+import ModerationSettings from '../containers/ModerationSettings';
+import TechSettings from '../containers/TechSettings';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
+import PropTypes from 'prop-types';

 export default class Configure extends Component {

-  state = {
-    activeSection: 'stream',
-    changed: false,
-    errors: {}
-  };
-
-  saveSettings = () => {
-    this.props.saveSettingsToServer();
-    this.setState({changed: false});
-  }
-
-  changeSection = (activeSection) => {
-    this.setState({activeSection});
-  }
-
-  onChangeWordlist = (listName, list) => {
-    this.setState({changed: true});
-    this.props.updateWordlist(listName, list);
-  }
-
-  onChangeDomainlist = (listName, list) => {
-    this.setState({changed: true});
-    this.props.updateDomainlist(listName, list);
-  }
-
-  onSettingUpdate = (setting) => {
-    this.setState({changed: true});
-    this.props.updateSettings(setting);
-  }
-
-  // Sets an arbitrary error string and a boolean state.
-  // This allows the system to track multiple errors.
-  onSettingError = (error, state) => {
-    this.setState((prevState) => {
-      prevState.errors[error] = state;
-      return prevState;
-    });
-  }
-
-  getSection (section) {
-    const pageTitle = this.getPageTitle(section);
-    let sectionComponent;
+  getSectionComponent(section) {
    switch(section){
    case 'stream':
-      sectionComponent = <StreamSettings
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate}
-        errors={this.state.errors}
-        settingsError={this.onSettingError}/>;
-      break;
+      return StreamSettings;
    case 'moderation':
-      sectionComponent = <ModerationSettings
-        onChangeWordlist={this.onChangeWordlist}
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate} />;
-      break;
+      return ModerationSettings;
    case 'tech':
-      sectionComponent = <TechSettings
-        onChangeDomainlist={this.onChangeDomainlist}
-        settings={this.props.settings}
-        updateSettings={this.onSettingUpdate} />;
-    }
-
-    if (this.props.settings.fetchingSettings) {
-      return <Card shadow="4"><Spinner/>Loading settings...</Card>;
-    }
-
-    return (
-      <div className={styles.settingsSection}>
-        <h3>{pageTitle}</h3>
-        {sectionComponent}
-      </div>
-    );
-  }
-
-  getPageTitle (section) {
-    switch(section) {
-    case 'stream':
-      return t('configure.stream_settings');
-    case 'moderation':
-      return t('configure.moderation_settings');
-    case 'tech':
-      return t('configure.tech_settings');
-    default:
-      return '';
+      return TechSettings;
    }
+    throw new Error(`Unknown section ${section}`);
  }

  render () {
-    const {activeSection} = this.state;
-    const section = this.getSection(activeSection);
-    const {auth: {user}} = this.props;
+    const {auth: {user}, canSave, savePending, setActiveSection, activeSection} = this.props;
+    const SectionComponent = this.getSectionComponent(activeSection);

    if (!can(user, 'UPDATE_CONFIG')) {
      return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
    }

-    const showSave = Object.keys(this.state.errors).reduce(
-      (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
-
    return (
      <div className={styles.container}>
        <div className={styles.leftColumn}>
-          <List onChange={this.changeSection} activeItem={activeSection}>
+          <List onChange={setActiveSection} activeItem={activeSection}>
            <Item itemId='stream' icon='speaker_notes'>
              {t('configure.stream_settings')}
            </Item>
@@ -126,10 +47,10 @@ export default class Configure extends Component {
          </List>
          <div className={styles.saveBox}>
            {
-              showSave ?
+              canSave ?
                <Button
                  raised
-                  onClick={this.saveSettings}
+                  onClick={savePending}
                  className={styles.changedSave}
                  icon='check'
                  full
@@ -150,11 +71,25 @@ export default class Configure extends Component {

        </div>
        <div className={styles.mainContent}>
-          { this.props.saveFetchingError }
-          { this.props.fetchSettingsError }
-          { section }
+          <SectionComponent
+            data={this.props.data}
+            root={this.props.root}
+            settings={this.props.settings}
+          />
        </div>
      </div>
    );
  }
 }
+
+Configure.propTypes = {
+  notify: PropTypes.func.isRequired,
+  savePending: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
+  activeSection: PropTypes.string.isRequired,
+};
@@ -0,0 +1,5 @@
+.title {
+  color: black;
+  font-size: 1.26em;
+  font-weight: 500;
+}
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ConfigurePage.css';
+
+const ConfigurePage = ({title, children, ...rest}) => (
+  <div {...rest}>
+    <h3 className={styles.title}>{title}</h3>
+    {children}
+  </div>
+);
+
+ConfigurePage.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+export default ConfigurePage;
@@ -1,25 +1,25 @@
 import React from 'react';
-import {Card} from 'coral-ui';
-import styles from './Configure.css';
+import PropTypes from 'prop-types';
 import TagsInput from 'coral-admin/src/components/TagsInput';
 import t from 'coral-framework/services/i18n';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

 const Domainlist = ({domains, onChangeDomainlist}) => {
  return (
-    <Card id={styles.domainlist} className={styles.configSetting}>
-      <div className={styles.wrapper}>
-        <div className={styles.settingsHeader}>{t('configure.domain_list_title')}</div>
-        <p className={styles.domainlistDesc}>{t('configure.domain_list_text')}</p>
-        <div className={styles.wrapper}>
-          <TagsInput
-            value={domains}
-            inputProps={{placeholder: 'URL'}}
-            onChange={(tags) => onChangeDomainlist('whitelist', tags)}
-          />
-        </div>
-      </div>
-    </Card>
+    <ConfigureCard title={t('configure.domain_list_title')}>
+      <p>{t('configure.domain_list_text')}</p>
+      <TagsInput
+        value={domains}
+        inputProps={{placeholder: 'URL'}}
+        onChange={(tags) => onChangeDomainlist('whitelist', tags)}
+      />
+    </ConfigureCard>
  );
 };

+Domainlist.propTypes = {
+  domains: PropTypes.array.isRequired,
+  onChangeDomainlist: PropTypes.func.isRequired,
+};
+
 export default Domainlist;
@@ -0,0 +1,32 @@
+.embedInput {
+  width: 100%;
+  display: block;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
+  font-size: 14px;
+  resize: none;
+}
+
+.copiedText {
+  display: inline-block;
+  color: #00796b;
+  padding: 12px;
+  font-size: 14px;
+  float: right;
+}
+
+.copyButton {
+  display: inline-block;
+  width: 200px;
+  float: right;
+}
+
+.actions {
+  display: inline-block;
+  width: 100%;
+}
@@ -1,17 +1,14 @@
 import React, {Component} from 'react';
 import t from 'coral-framework/services/i18n';
 import join from 'url-join';
-import styles from './Configure.css';
-import {Button, Card} from 'coral-ui';
+import styles from './EmbedLink.css';
+import {Button} from 'coral-ui';
 import {BASE_URL} from 'coral-framework/constants/url';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

 class EmbedLink extends Component {

-  constructor (props) {
-    super(props);
-
-    this.state = {copied: false};
-  }
+  state = {copied: false};

  copyToClipBoard = () => {
    const copyTextarea = document.querySelector(`.${styles.embedInput}`);
@@ -38,21 +35,18 @@ class EmbedLink extends Component {
 "></script>
    `.trim();
    return (
-      <Card shadow="2" className={styles.configSetting}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>Embed Comment Stream</div>
-          <p>{t('configure.copy_and_paste')}</p>
-          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-          <div className={styles.actions}>
-            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {t('embedlink.copy')}
-            </Button>
-            <div className={styles.copiedText}>
-              {this.state.copied && 'Copied!'}
-            </div>
+      <ConfigureCard title={'Embed Comment Stream'}>
+        <p>{t('configure.copy_and_paste')}</p>
+        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <div className={styles.actions}>
+          <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+            {t('embedlink.copy')}
+          </Button>
+          <div className={styles.copiedText}>
+            {this.state.copied && 'Copied!'}
          </div>
        </div>
-      </Card>
+      </ConfigureCard>
    );
  }
 }
@@ -1,90 +1,90 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Configure.css';
-import {Card} from 'coral-ui';
-import {Checkbox} from 'react-mdl';
 import Wordlist from './Wordlist';
+import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'PRE' ? 'POST' : 'PRE';
-  updateSettings({moderation});
-};
+class ModerationSettings extends React.Component {

-const updateEmailConfirmation = (updateSettings, verify) => () => {
-  updateSettings({requireEmailConfirmation: !verify});
-};
+  updateModeration = () => {
+    const updater = {moderation: {$set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE'}};
+    this.props.updatePending({updater});
+  };

-const updatePremodLinksEnable = (updateSettings, premodLinks) => () => {
-  const premodLinksEnable = !premodLinks;
-  updateSettings({premodLinksEnable});
-};
+  updateEmailConfirmation = () => {
+    const updater = {requireEmailConfirmation: {$set: !this.props.settings.requireEmailConfirmation}};
+    this.props.updatePending({updater});
+  };

-const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
+  updatePremodLinksEnable = () => {
+    const updater = {premodLinksEnable: {$set: !this.props.settings.premodLinksEnable}};
+    this.props.updatePending({updater});
+  };

-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
+  updateWordlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      wordlist: {$apply: (wordlist) => {
+        const changeSet = {[listName]: list};
+        if (!wordlist) {
+          return changeSet;
+        }
+        return {
+          ...wordlist,
+          ...changeSet,
+        };
+      }},
+    }});
+  };

-  return (
-    <div className={styles.Configure}>
-      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
-            checked={settings.requireEmailConfirmation} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
-          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {t('configure.require_email_verification_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateModeration(updateSettings, settings.moderation)}
-            checked={settings.moderation === 'PRE'} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
-          <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {t('configure.enable_pre_moderation_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updatePremodLinksEnable(updateSettings, settings.premodLinksEnable)}
-            checked={settings.premodLinksEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
-          <p>
-            {t('configure.enable_premod_links_text')}
-          </p>
-        </div>
-      </Card>
-      <Wordlist
-        bannedWords={settings.wordlist.banned}
-        suspectWords={settings.wordlist.suspect}
-        onChangeWordlist={onChangeWordlist} />
-    </div>
-  );
-};
+  render() {
+    const {settings, data, root} = this.props;
+
+    return (
+      <ConfigurePage
+        title={t('configure.moderation_settings')}
+      >
+        <ConfigureCard
+          checked={settings.requireEmailConfirmation}
+          onCheckbox={this.updateEmailConfirmation}
+          title={t('configure.require_email_verification')}
+        >
+          {t('configure.require_email_verification_text')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.moderation === 'PRE'}
+          onCheckbox={this.updateModeration}
+          title={t('configure.enable_pre_moderation')}
+        >
+          {t('configure.enable_pre_moderation_text')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.premodLinksEnable}
+          onCheckbox={this.updatePremodLinksEnable}
+          title={t('configure.enable_premod_links')}
+        >
+          {t('configure.enable_premod_links_text')}
+        </ConfigureCard>
+        <Wordlist
+          bannedWords={settings.wordlist.banned}
+          suspectWords={settings.wordlist.suspect}
+          onChangeWordlist={this.updateWordlist} />
+        <Slot
+          fill="adminModerationSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}

 ModerationSettings.propTypes = {
-  onChangeWordlist: PropTypes.func.isRequired,
-  settings: PropTypes.shape({
-    moderation: PropTypes.string.isRequired,
-    wordlist: PropTypes.shape({
-      banned: PropTypes.array.isRequired,
-      suspect: PropTypes.array.isRequired
-    })
-  }).isRequired,
-  updateSettings: PropTypes.func.isRequired
+  updatePending: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
 };

 export default ModerationSettings;
@@ -0,0 +1,55 @@
+.configSettingInfoBox {
+  min-height: 100px;
+  margin-bottom: 20px;
+  width: auto;
+  height: auto;
+  text-align: left;
+  overflow: visible;
+}
+
+.descriptionBox {
+  margin-top: 15px;
+
+  input {
+    height: 150px;
+  }
+}
+
+.configTimeoutSelect {
+  display: inline-block;
+  margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.inlineTextfield {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+  text-align: center;
+  font-size: inherit;
+}
+
+.inlineTextfield:focus {
+  outline: none;
+}
+
+.charCountTexfield, .editCommentTimeframeTextfield {
+  width: 4em;
+  padding: 0px;
+}
+
+.charCountTexfieldEnabled {
+  border-color: #00796b;
+}
+
+
+
+
@@ -1,10 +1,15 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
-import styles from './Configure.css';
-import {Checkbox, Textfield} from 'react-mdl';
-import {Card, Icon, TextArea} from 'coral-ui';
+import styles from './StreamSettings.css';
+import {Textfield} from 'react-mdl';
+import {Icon, TextArea} from 'coral-ui';
+import PropTypes from 'prop-types';
+import Slot from 'coral-framework/components/Slot';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+import cn from 'classnames';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

 const TIMESTAMPS = {
  weeks: 60 * 60 * 24 * 7,
@@ -12,187 +17,6 @@ const TIMESTAMPS = {
  hours: 60 * 60
 };

-const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-  const charCountEnable = !charCountChecked;
-  updateSettings({charCountEnable});
-};
-
-const updateCharCount = (updateSettings, settingsError) => (event) => {
-  const charCount = event.target.value;
-  if (charCount.match(/[^0-9]/) || charCount.length === 0) {
-    settingsError('charCount', true);
-  } else {
-    settingsError('charCount', false);
-  }
-  updateSettings({charCount: charCount});
-};
-
-const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
-  const infoBoxEnable = !infoBox;
-  updateSettings({infoBoxEnable});
-};
-
-const updateInfoBoxContent = (updateSettings) => (value) => {
-  const infoBoxContent = value;
-  updateSettings({infoBoxContent});
-};
-
-const updateAutoClose = (updateSettings, autoCloseStream) => () => {
-  updateSettings({autoCloseStream});
-};
-
-const updateClosedMessage = (updateSettings) => (event) => {
-  const closedMessage = event.target.value;
-  updateSettings({closedMessage});
-};
-
-// If we are changing the measure we need to recalculate using the old amount
-// Same thing if we are just changing the amount
-const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
-  if (isMeasure) {
-    const amount = getTimeoutAmount(ts);
-    const closedTimeout = amount * TIMESTAMPS[event];
-    updateSettings({closedTimeout});
-  } else {
-    const val = event.target.value;
-    const measure = getTimeoutMeasure(ts);
-    const closedTimeout = val * TIMESTAMPS[measure];
-    updateSettings({closedTimeout});
-  }
-};
-
-const updateEditCommentWindowLength = (updateSettings) => (e) => {
-  const value = e.target.value;
-  const valueAsNumber = parseFloat(value);
-  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
-  updateSettings({editCommentWindowLength: milliseconds || value});
-};
-
-const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
-
-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
-
-  return (
-    <div className={styles.Configure}>
-      <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
-            checked={settings.charCountEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
-          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{t('configure.comment_count_text_pre')}</span>
-            <input type='text'
-              className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
-              htmlFor='charCount'
-              onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}
-              disabled={settings.charCountEnable ? '' : 'disabled'}
-            />
-            <span>{t('configure.comment_count_text_post')}</span>
-            {
-              errors.charCount &&
-                <span className={styles.settingsError}>
-                  <br/>
-                  <Icon name="error_outline"/>
-                  {t('configure.comment_count_error')}
-                </span>
-            }
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
-            checked={settings.infoBoxEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>
-            {t('configure.include_comment_stream')}
-          </div>
-          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
-            {t('configure.include_comment_stream_desc')}
-          </p>
-          <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <MarkdownEditor
-              className={styles.descriptionBox}
-              onChange={updateInfoBoxContent(updateSettings)}
-              value={settings.infoBoxContent}
-            />
-          </div>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
-          <p>{t('configure.closed_comments_desc')}</p>
-          <div>
-            <TextArea className={styles.descriptionBox}
-              onChange={updateClosedMessage(updateSettings)}
-              value={settings.closedMessage}
-            />
-          </div>
-        </div>
-      </Card>
-      {/* Edit Comment Timeframe */}
-      <Card className={styles.configSetting}>
-        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
-        <p>
-          {t('configure.edit_comment_timeframe_text_pre')}
-          &nbsp;
-          <input
-            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
-            type="number"
-            min="0"
-            onChange={updateEditCommentWindowLength(updateSettings)}
-            placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
-          />
-          &nbsp;
-          {t('configure.edit_comment_timeframe_text_post')}
-        </p>
-      </Card>
-      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateAutoClose(updateSettings, !settings.autoCloseStream)}
-            checked={settings.autoCloseStream} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.close_after')}</div>
-          <br />
-          <Textfield
-            type='number'
-            pattern='[0-9]+'
-            style={{width: 50}}
-            onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
-            value={getTimeoutAmount(settings.closedTimeout)}
-            label={t('configure.closed_comments_label')} />
-          <div className={styles.configTimeoutSelect}>
-            <SelectField
-              label="comments closed time window"
-              value={getTimeoutMeasure(settings.closedTimeout)}
-              onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
-              <Option value={'hours'}>{t('configure.hours')}</Option>
-              <Option value={'days'}>{t('configure.days')}</Option>
-              <Option value={'weeks'}>{t('configure.weeks')}</Option>
-            </SelectField>
-          </div>
-        </div>
-      </Card>
-      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
-    </div>
-  );
-};
-
-export default StreamSettings;
-
 // To see if we are talking about weeks, days or hours
 // We talk the remainder of the division and see if it's 0
 const getTimeoutMeasure = (ts) => {
@@ -208,3 +32,190 @@ const getTimeoutMeasure = (ts) => {
 // Dividing the amount by it's measure (hours, days, weeks) we
 // obtain the amount of time
 const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+
+class StreamSettings extends React.Component {
+
+  updateCharCountEnable = () => {
+    const updater = {charCountEnable: {$set: !this.props.settings.charCountEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateCharCount = (event) => {
+    let error = null;
+    const charCount = event.target.value;
+    if (charCount.match(/[^0-9]/) || charCount.length === 0) {
+      error = true;
+    }
+
+    const updater = {charCount: {$set: charCount}};
+    const errorUpdater = {charCount: {$set: error}};
+
+    this.props.updatePending({updater, errorUpdater});
+  };
+
+  updateInfoBoxEnable = () => {
+    const updater = {infoBoxEnable: {$set: !this.props.settings.infoBoxEnable}};
+    this.props.updatePending({updater});
+  };
+
+  updateInfoBoxContent = (value) => {
+    const updater = {infoBoxContent: {$set: value}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedMessage = (event) => {
+    const updater = {closedMessage: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateEditCommentWindowLength = (e) => {
+    const value = e.target.value;
+    const valueAsNumber = parseFloat(value);
+    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+
+    const updater = {editCommentWindowLength: {$set: milliseconds || value}};
+    this.props.updatePending({updater});
+  };
+
+  updateAutoClose = () => {
+    const updater = {autoCloseStream: {$set: !this.props.settings.autoCloseStream}};
+    this.props.updatePending({updater});
+  };
+
+  updateClosedTimeout = (event) => {
+    const val = event.target.value;
+    const measure = getTimeoutMeasure(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: val * TIMESTAMPS[measure]}};
+    this.props.updatePending({updater});
+  };
+
+  // If we are changing the measure we need to recalculate using the old amount
+  // Same thing if we are just changing the amount
+  updateClosedTimeoutMeasure = (event) => {
+    const amount = getTimeoutAmount(this.props.settings.closedTimeout);
+
+    const updater = {closedTimeout: {$set: amount * TIMESTAMPS[event]}};
+    this.props.updatePending({updater});
+  };
+
+  render() {
+    const {settings, data, root, errors} = this.props;
+
+    return (
+      <ConfigurePage
+        title={t('configure.stream_settings')}
+      >
+        <ConfigureCard
+          checked={settings.charCountEnable}
+          onCheckbox={this.updateCharCountEnable}
+          title={t('configure.comment_count_header')}
+        >
+          <span>{t('configure.comment_count_text_pre')}</span>
+          <input type='text'
+            className={cn(styles.inlineTextfield, styles.charCountTexfield, settings.charCountEnable && styles.charCountTexfieldEnable)}
+            htmlFor='charCount'
+            onChange={this.updateCharCount}
+            value={settings.charCount}
+            disabled={settings.charCountEnable ? '' : 'disabled'}
+          />
+          <span>{t('configure.comment_count_text_post')}</span>
+          {
+            errors.charCount &&
+              <span className={styles.settingsError}>
+                <br/>
+                <Icon name="error_outline"/>
+                {t('configure.comment_count_error')}
+              </span>
+          }
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.infoBoxEnable}
+          onCheckbox={this.updateInfoBoxEnable}
+          title={t('configure.include_comment_stream')}
+        >
+          <p>
+            {t('configure.include_comment_stream_desc')}
+          </p>
+          <div className={cn(styles.configSettingInfoBox, settings.infoBoxEnable ? null : styles.hidden)} >
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={this.updateInfoBoxContent}
+              value={settings.infoBoxContent}
+            />
+          </div>
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.configSettingInfoBox}
+          onCheckbox={this.updateClosedMessage}
+          title={t('configure.closed_stream_settings')}
+        >
+          <p>{t('configure.closed_comments_desc')}</p>
+          <div>
+            <TextArea className={styles.descriptionBox}
+              onChange={this.updateClosedMessage}
+              value={settings.closedMessage}
+            />
+          </div>
+        </ConfigureCard>
+        <ConfigureCard
+          title={t('configure.edit_comment_timeframe_heading')}
+        >
+          {t('configure.edit_comment_timeframe_text_pre')}
+          &nbsp;
+          <input
+            className={cn(styles.inlineTextfield, styles.editCommentTimeframeTextfield)}
+            type="number"
+            min="0"
+            onChange={this.updateEditCommentWindowLength}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {t('configure.edit_comment_timeframe_text_post')}
+        </ConfigureCard>
+        <ConfigureCard
+          checked={settings.autoCloseStream}
+          onCheckbox={this.updateAutoClose}
+          title={t('configure.close_after')}
+        >
+          <Textfield
+            type='number'
+            pattern='[0-9]+'
+            style={{width: 50}}
+            onChange={this.updateClosedTimeout}
+            value={getTimeoutAmount(settings.closedTimeout)}
+            label={t('configure.closed_comments_label')} />
+          <div className={styles.configTimeoutSelect}>
+            <SelectField
+              label="comments closed time window"
+              value={getTimeoutMeasure(settings.closedTimeout)}
+              onChange={this.updateClosedTimeoutMeasure}>
+              <Option value={'hours'}>{t('configure.hours')}</Option>
+              <Option value={'days'}>{t('configure.days')}</Option>
+              <Option value={'weeks'}>{t('configure.weeks')}</Option>
+            </SelectField>
+          </div>
+        </ConfigureCard>
+        {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
+        <Slot
+          fill="adminStreamSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}
+
+StreamSettings.propTypes = {
+  updatePending: PropTypes.func.isRequired,
+  errors: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
+};
+
+export default StreamSettings;
+
@@ -0,0 +1,10 @@
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
+}
+
+
@@ -1,44 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Card} from 'coral-ui';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';
-import styles from './Configure.css';
+import styles from './TechSettings.css';
+import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
+import ConfigurePage from './ConfigurePage';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

-const updateCustomCssUrl = (updateSettings) => (event) => {
-  const customCssUrl = event.target.value;
-  updateSettings({customCssUrl});
-};
+class TechSettings extends React.Component {

-const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
-  return (
-    <div className={styles.Configure}>
-      <Domainlist
-        domains={settings.domains.whitelist}
-        onChangeDomainlist={onChangeDomainlist} />
-      <EmbedLink />
-      <Card className={styles.configSetting}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
+  updateCustomCssUrl = (event) => {
+    const updater = {customCssUrl: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateDomainlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      domains: {$apply: (domains) => {
+        const changeSet = {[listName]: list};
+        if (!domains) {
+          return changeSet;
+        }
+        return {
+          ...domains,
+          ...changeSet,
+        };
+      }},
+    }});
+  };
+
+  render() {
+    const {settings, data, root} = this.props;
+    return (
+      <ConfigurePage
+        title={t('configure.tech_settings')}
+      >
+        <Domainlist
+          domains={settings.domains.whitelist}
+          onChangeDomainlist={this.updateDomainlist} />
+        <EmbedLink />
+        <ConfigureCard title={t('configure.custom_css_url')}>
          <p>{t('configure.custom_css_url_desc')}</p>
          <input
            className={styles.customCSSInput}
            value={settings.customCssUrl}
-            onChange={updateCustomCssUrl(updateSettings)} />
-        </div>
-      </Card>
-    </div>
-  );
-};
+            onChange={this.updateCustomCssUrl} />
+        </ConfigureCard>
+        <Slot
+          fill="adminTechSettings"
+          data={data}
+          queryData={{root, settings}}
+        />
+      </ConfigurePage>
+    );
+  }
+}

 TechSettings.propTypes = {
-  settings: PropTypes.shape({
-    domains: PropTypes.shape({
-      whitelist: PropTypes.array.isRequired
-    })
-  }).isRequired,
-  updateSettings: PropTypes.func.isRequired
+  updatePending: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
 };

 export default TechSettings;
@@ -1,33 +1,33 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
 import TagsInput from 'coral-admin/src/components/TagsInput';
-import styles from './Configure.css';
-import {Card} from 'coral-ui';
+import PropTypes from 'prop-types';
+import ConfigureCard from 'coral-framework/components/ConfigureCard';

 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
  <div>
-    <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.banned_words_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.banned_word_text')}</p>
-      <div className={styles.wrapper}>
-        <TagsInput
-          value={bannedWords}
-          inputProps={{placeholder: 'word or phrase'}}
-          onChange={(tags) => onChangeWordlist('banned', tags)}
-        />
-      </div>
-    </Card>
-    <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.suspect_word_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.suspect_word_text')}</p>
-      <div className={styles.wrapper}>
-        <TagsInput
-          value={suspectWords}
-          inputProps={{placeholder: 'word or phrase'}}
-          onChange={(tags) => onChangeWordlist('suspect', tags)} />
-      </div>
-    </Card>
+    <ConfigureCard title={t('configure.banned_words_title')}>
+      <p>{t('configure.banned_word_text')}</p>
+      <TagsInput
+        value={bannedWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={(tags) => onChangeWordlist('banned', tags)}
+      />
+    </ConfigureCard>
+    <ConfigureCard title={t('configure.suspect_word_title')}>
+      <p>{t('configure.suspect_word_text')}</p>
+      <TagsInput
+        value={suspectWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={(tags) => onChangeWordlist('suspect', tags)} />
+    </ConfigureCard>
  </div>
 );

+Wordlist.propTypes = {
+  suspectWords: PropTypes.array.isRequired,
+  bannedWords: PropTypes.array.isRequired,
+  onChangeWordlist: PropTypes.func.isRequired,
+};
+
 export default Wordlist;
@@ -1,42 +1,128 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
-import {
-  fetchSettings,
-  updateSettings,
-  saveSettingsToServer,
-  updateWordlist,
-  updateDomainlist
-} from '../../../actions/settings';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {Spinner} from 'coral-ui';
+import {notify} from 'coral-framework/actions/notification';
+import PropTypes from 'prop-types';
+import assignWith from 'lodash/assignWith';
+import {withUpdateSettings} from 'coral-framework/graphql/mutations';
+import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
+import StreamSettings from './StreamSettings';
+import TechSettings from './TechSettings';
+import ModerationSettings from './ModerationSettings';
+import {clearPending, setActiveSection} from '../../../actions/configure';

 import Configure from '../components/Configure';

+// Like lodash merge but does not recurse into arrays.
+const mergeExcludingArrays = (objValue, srcValue) => {
+  if (typeof srcValue === 'object' && !Array.isArray(srcValue)) {
+    return assignWith({}, objValue, srcValue, mergeExcludingArrays);
+  }
+  return srcValue;
+};
+
 class ConfigureContainer extends Component {
-  componentWillMount = () => {
-    this.props.fetchSettings();
+
+  // Merge current settings with pending settings.
+  getMergedSettings = (props = this.props) => {
+    return assignWith({}, props.root.settings, props.pending, mergeExcludingArrays);
+  }
+
+  // Cached merged settings.
+  mergedSettings = this.getMergedSettings();
+
+  savePending = async () => {
+    try {
+      await this.props.updateSettings(this.props.pending);
+      this.props.clearPending();
+    }
+    catch(err) {
+      this.props.notify('error', getErrorMessages(err));
+    }
+  };
+
+  componentWillReceiveProps(nextProps) {
+
+    // Recalculate merged settings when necessary.
+    if (this.props.root.settings !== nextProps.root.settings || this.props.pending !== nextProps.pending) {
+      this.mergedSettings = this.getMergedSettings(nextProps);
+    }
  }

  render () {
-    return <Configure {...this.props} />;
+    if(this.props.data.loading) {
+      return <Spinner/>;
+    }
+
+    return <Configure
+      notify={this.props.notify}
+      auth={this.props.auth}
+      data={this.props.data}
+      root={this.props.root}
+      settings={this.mergedSettings}
+      canSave={this.props.canSave}
+      savePending={this.savePending}
+      setActiveSection={this.props.setActiveSection}
+      activeSection={this.props.activeSection}
+    />;
  }
 }

+const withConfigureQuery = withQuery(gql`
+  query TalkAdmin_Configure {
+    settings {
+      ...${getDefinitionName(StreamSettings.fragments.settings)}
+      ...${getDefinitionName(TechSettings.fragments.settings)}
+      ...${getDefinitionName(ModerationSettings.fragments.settings)}
+    }
+    ...${getDefinitionName(StreamSettings.fragments.root)}
+    ...${getDefinitionName(TechSettings.fragments.root)}
+    ...${getDefinitionName(ModerationSettings.fragments.root)}
+  }
+  ${StreamSettings.fragments.root}
+  ${StreamSettings.fragments.settings}
+  ${TechSettings.fragments.root}
+  ${TechSettings.fragments.settings}
+  ${ModerationSettings.fragments.root}
+  ${ModerationSettings.fragments.settings}
+  `, {
+  options: () => ({
+    variables: {},
+  }),
+});
+
 const mapStateToProps = (state) => ({
  auth: state.auth,
-  settings: state.settings
+  pending: state.configure.pending,
+  canSave: state.configure.canSave,
+  activeSection: state.configure.activeSection,
 });

 const mapDispatchToProps = (dispatch) =>
  bindActionCreators({
-    fetchSettings,
-    updateSettings,
-    saveSettingsToServer,
-    updateWordlist,
-    updateDomainlist
+    notify,
+    clearPending,
+    setActiveSection,
  }, dispatch);

 export default compose(
+  withUpdateSettings,
+  withConfigureQuery,
  connect(mapStateToProps, mapDispatchToProps),
 )(ConfigureContainer);

+ConfigureContainer.propTypes = {
+  updateSettings: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
+  notify: PropTypes.func.isRequired,
+  auth: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
+  pending: PropTypes.object.isRequired,
+  activeSection: PropTypes.string.isRequired,
+};
@@ -0,0 +1,40 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import ModerationSettings from '../components/ModerationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminModerationSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_ModerationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_ModerationSettings_settings on Settings {
+        requireEmailConfirmation
+        moderation
+        premodLinksEnable
+        wordlist {
+          suspect
+          banned
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(ModerationSettings);
@@ -0,0 +1,45 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import StreamSettings from '../components/StreamSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminStreamSettings',
+];
+
+const mapStateToProps = (state) => ({
+  errors: state.configure.errors,
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_StreamSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_StreamSettings_settings on Settings {
+        infoBoxEnable
+        charCount
+        charCountEnable
+        infoBoxContent
+        editCommentWindowLength
+        autoCloseStream
+        closedTimeout
+        closedMessage
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(mapStateToProps, mapDispatchToProps),
+)(StreamSettings);
@@ -0,0 +1,37 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import TechSettings from '../components/TechSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminTechSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_TechSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_TechSettings_settings on Settings {
+        customCssUrl
+        domains {
+          whitelist
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(TechSettings);
@@ -42,11 +42,11 @@ export const witDashboardQuery = withQuery(gql`
    }
  }
 `, {
-    options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
+    options: ({windowStart, windowEnd}) => {
      return {
        variables: {
-          from: dashboardWindowStart,
-          to: dashboardWindowEnd
+          from: windowStart,
+          to: windowEnd,
        }
      };
    }
@@ -54,8 +54,8 @@ export const witDashboardQuery = withQuery(gql`

 const mapStateToProps = (state) => {
  return {
-    settings: state.settings,
-    moderation: state.moderation
+    windowStart: state.dashboard.windowStart,
+    windowEnd: state.dashboard.windowEnd,
  };
 };

@@ -58,12 +58,11 @@ class Comment extends React.Component {
  render() {
    const {
      comment,
-      suspectWords,
-      bannedWords,
      selected,
      className,
      data,
      root,
+      root: {settings},
      currentUserId,
      currentAsset,
    } = this.props;
@@ -130,8 +129,8 @@ class Comment extends React.Component {
            <div className={styles.itemBody}>
              <div className={styles.body}>
                <CommentBodyHighlighter
-                  suspectWords={suspectWords}
-                  bannedWords={bannedWords}
+                  suspectWords={settings.wordlist.suspect}
+                  bannedWords={settings.wordlist.banned}
                  body={comment.body}
                />
                {' '}
@@ -188,8 +187,6 @@ Comment.propTypes = {
  acceptComment: PropTypes.func.isRequired,
  rejectComment: PropTypes.func.isRequired,
  className: PropTypes.string,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  currentAsset: PropTypes.object,
  showBanUserDialog: PropTypes.func.isRequired,
  showSuspendUserDialog: PropTypes.func.isRequired,
@@ -0,0 +1,13 @@
+@custom-media --desktop (max-width: 1280px);
+
+.container {
+  max-width: 1280px;
+  position: relative;
+  margin: 0 auto;
+
+  @media (--desktop) {
+    padding-right: 20px;
+    padding-left: 20px;
+  }
+}
+
@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import key from 'keymaster';
-
+import cn from 'classnames';
+import styles from './Moderation.css';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import StorySearch from '../containers/StorySearch';
 import Slot from 'coral-framework/components/Slot';
+import ViewOptions from './ViewOptions';

 class Moderation extends Component {
  constructor(props) {
@@ -75,7 +77,7 @@ class Moderation extends Component {
      const comments = this.getComments();
      const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
      const comment = comments[commentIdx];
-      
+
      if (accept) {
        comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
      } else {
@@ -218,7 +220,7 @@ class Moderation extends Component {
  }

  render () {
-    const {root, data, moderation, settings, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
+    const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
    const {asset} = root;
    const assetId = asset && asset.id;

@@ -244,45 +246,44 @@ class Moderation extends Component {
          asset={asset}
          getModPath={getModPath}
          items={menuItems}
-          selectSort={this.props.setSortOrder}
-          sort={this.props.moderation.sortOrder}
          activeTab={activeTab}
        />
-        <ModerationQueue
-          key={`${activeTab}_${this.props.moderation.sortOrder}`}
-          data={this.props.data}
-          root={this.props.root}
-          currentAsset={asset}
-          comments={comments.nodes}
-          activeTab={activeTab}
-          singleView={moderation.singleView}
-          selectedCommentId={this.state.selectedCommentId}
-          bannedWords={settings.wordlist.banned}
-          suspectWords={settings.wordlist.suspect}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          acceptComment={props.acceptComment}
-          rejectComment={props.rejectComment}
-          loadMore={this.loadMore}
-          assetId={assetId}
-          sort={this.props.moderation.sortOrder}
-          commentCount={activeTabCount}
-          currentUserId={this.props.auth.user.id}
-          viewUserDetail={viewUserDetail}
-        />
-        <ModerationKeysModal
-          hideShortcutsNote={props.hideShortcutsNote}
-          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
-          open={moderation.modalOpen}
-          onClose={this.onClose}/>
-
+        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+          <ViewOptions
+            selectSort={this.props.setSortOrder}
+            sort={this.props.moderation.sortOrder}
+          />
+          <ModerationQueue
+            key={`${activeTab}_${this.props.moderation.sortOrder}`}
+            data={this.props.data}
+            root={this.props.root}
+            currentAsset={asset}
+            comments={comments.nodes}
+            activeTab={activeTab}
+            singleView={moderation.singleView}
+            selectedCommentId={this.state.selectedCommentId}
+            showBanUserDialog={props.showBanUserDialog}
+            showSuspendUserDialog={props.showSuspendUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            loadMore={this.loadMore}
+            commentCount={activeTabCount}
+            currentUserId={this.props.auth.user.id}
+            viewUserDetail={viewUserDetail}
+          />
+          <ModerationKeysModal
+            hideShortcutsNote={props.hideShortcutsNote}
+            shortcutsNoteVisible={moderation.shortcutsNoteVisible}
+            open={moderation.modalOpen}
+            onClose={this.onClose}
+          />
+        </div>
        <StorySearch
          assetId={assetId}
          moderation={this.props.moderation}
          closeSearch={this.closeSearch}
          storySearchChange={this.props.storySearchChange}
        />
-
        <Slot
          data={data}
          queryData={{root, asset}}
@@ -303,7 +304,6 @@ Moderation.propTypes = {
  storySearchChange: PropTypes.func.isRequired,
  moderation: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired,
-  settings: PropTypes.object.isRequired,
  queueConfig: PropTypes.object.isRequired,
  handleCommentChange: PropTypes.func.isRequired,
  setSortOrder: PropTypes.func.isRequired,
@@ -316,6 +316,7 @@ Moderation.propTypes = {
  activeTab: PropTypes.string.isRequired,
  data: PropTypes.object.isRequired,
  root: PropTypes.object.isRequired,
+  router: PropTypes.object.isRequired,
 };

 export default Moderation;
@@ -7,12 +7,7 @@
  justify-content: space-between;
 }

-.tabBarPadding {
-  width: 150px;
-}
-
 .tab {
-  flex: 1;
  color: #BDBDBD;
  text-transform: capitalize;
  font-weight: 100;
@@ -22,9 +17,9 @@
  transition: color 200ms;
  padding: 0px 10px;
  margin-right: 20px;
+
  &:hover {
    color: white;
-    /*border-bottom: solid 2px #F36451;*/
    box-sizing: border-box;
  }
 }
@@ -48,55 +43,12 @@
  background: transparent !important;
 }

-.selectField {
-  position: relative;
-  width: 140px;
-  height: 36px;
-  top: 5px;
-  margin-right: 10px;
-  background: #FFF;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  bor
-  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;
-    border-bottom: 0px;
-  }
-
-  label {
-    top: -4px;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .tabIcon {
  position: relative;
  top: 3px;
  font-size: 16px;
 }

-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}
+.tabBarContainer {
+  margin: 0 auto;
+}
@@ -2,26 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 import styles from './ModerationMenu.css';
-import {SelectField, Option} from 'react-mdl-selectfield';
 import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 import cn from 'classnames';

-import t from 'coral-framework/services/i18n';
-
 const ModerationMenu = ({
  asset = {},
  items,
-  selectSort,
-  sort,
  getModPath,
  activeTab
 }) => {
  return (
    <div className="mdl-tabs">
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div className={styles.tabBarPadding} />
-        <div>
+      <div className={cn('mdl-tabs__tab-bar', styles.tabBar, 'talk-admin-moderation-menu-tabbar')}>
+        <div className={cn(styles.tabBarContainer, 'talk-admin-moderation-menu-tabbar-container')}>
          {items.map((queue) =>
            <Link
              key={queue.key}
@@ -32,14 +26,6 @@ const ModerationMenu = ({
            </Link>
          )}
        </div>
-        <SelectField
-          className={styles.selectField}
-          label="Sort"
-          value={sort}
-          onChange={(sort) => selectSort(sort)}>
-          <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
-          <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
-        </SelectField>
      </div>
    </div>
  );
@@ -50,8 +36,6 @@ ModerationMenu.propTypes = {
  asset: PropTypes.shape({
    id: PropTypes.string
  }),
-  selectSort: PropTypes.func.isRequired,
-  sort: PropTypes.string.isRequired,
  getModPath: PropTypes.func.isRequired,
  activeTab: PropTypes.string.isRequired,
 };
@@ -147,8 +147,6 @@ class ModerationQueue extends React.Component {
            key={comment.id}
            comment={comment}
            selected={true}
-            suspectWords={props.suspectWords}
-            bannedWords={props.bannedWords}
            viewUserDetail={viewUserDetail}
            showBanUserDialog={props.showBanUserDialog}
            showSuspendUserDialog={props.showSuspendUserDialog}
@@ -193,8 +191,6 @@ class ModerationQueue extends React.Component {
                  key={comment.id}
                  comment={comment}
                  selected={comment.id === selectedCommentId}
-                  suspectWords={props.suspectWords}
-                  bannedWords={props.bannedWords}
                  viewUserDetail={viewUserDetail}
                  showBanUserDialog={props.showBanUserDialog}
                  showSuspendUserDialog={props.showSuspendUserDialog}
@@ -218,8 +214,6 @@ class ModerationQueue extends React.Component {

 ModerationQueue.propTypes = {
  viewUserDetail: PropTypes.func.isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  currentAsset: PropTypes.object,
  showBanUserDialog: PropTypes.func.isRequired,
  showSuspendUserDialog: PropTypes.func.isRequired,
@@ -0,0 +1,97 @@
+@custom-media --tablet (max-width: 1180px);
+
+.viewOptions {
+  display: inline-block;
+  width: 220px;
+  position: absolute;
+  padding: 0;
+  overflow: visible;
+  height: 144px;
+  min-height: auto;
+  z-index: 10;
+
+  @media (--tablet) {
+    width: 650px;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin-top: 10px;
+    height: 60px;
+  }
+}
+
+.headline {
+  margin: 0;
+  font-size: 1.1rem;
+  border-bottom: 1px solid rgba(0,0,0,.1);
+  padding: 0 20px;
+
+  @media (--tablet) {
+    flex: 1;
+    display: inline-block;
+    border-bottom: none;
+    line-height: 60px;
+  }
+}
+
+.viewOptionsContent {
+  padding: 10px 20px;
+
+  @media (--tablet) {
+    display: inline-block;
+  }
+}
+
+.viewOptionsList {
+  padding: 0;
+  margin: 0;
+  color: rgba(0,0,0,.54);
+}
+
+.viewOptionsItem {
+  list-style: none;
+}
+
+.selectField {
+  position: relative;
+  width: 140px;
+  height: 36px;
+  top: 5px;
+  margin-right: 10px;
+  background: #7B7B7B;
+  color: white;
+  padding: 6px 15px;
+  box-sizing: border-box;
+  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);
+
+  @media (--tablet) {
+    display: inline-block;
+    margin-left: 10px;
+  }
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    font-size: 1rem;
+    border-bottom: 0px;
+    font-family: inherit;
+  }
+
+  label {
+    top: -4px;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ViewOptions.css';
+import {Card} from 'coral-ui';
+import cn from 'classnames';
+import {SelectField, Option} from 'react-mdl-selectfield';
+import t from 'coral-framework/services/i18n';
+
+class ViewOptions extends React.Component {
+  render() {
+
+    const {
+      selectSort,
+      sort
+    } = this.props;
+
+    return (
+      <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
+        <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
+          View Options
+        </h2>
+        <div className={styles.viewOptionsContent}> 
+          <ul className={styles.viewOptionsList}>
+            <li className={styles.viewOptionsItem}>
+              Sort Comments
+              <SelectField
+                className={styles.selectField}
+                label="Sort"
+                value={sort}
+                onChange={(sort) => selectSort(sort)}>
+                <Option value={'DESC'}>{t('modqueue.newest_first')}</Option>
+                <Option value={'ASC'}>{t('modqueue.oldest_first')}</Option>
+              </SelectField>
+            </li>
+          </ul>
+        </div>
+      </Card>
+    );
+  }
+}
+
+ViewOptions.propTypes = {
+  selectSort: PropTypes.func.isRequired,
+  sort: PropTypes.string.isRequired
+};
+
+export default ViewOptions;
@@ -15,7 +15,12 @@ const slots = [
 export default withFragments({
  root: gql`
    fragment CoralAdmin_ModerationComment_root on RootQuery {
-      __typename
+      settings {
+        wordlist {
+          banned
+          suspect
+        }
+      }
      ${getSlotFragmentSpreads(slots, 'root')}
      ...${getDefinitionName(CommentLabels.fragments.root)}
      ...${getDefinitionName(CommentDetails.fragments.root)}
@@ -13,7 +13,6 @@ import {isPremod, getModPath} from '../../../utils';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {handleCommentChange} from '../graphql';

-import {fetchSettings} from 'actions/settings';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
@@ -146,7 +145,6 @@ class ModerationContainer extends Component {

  componentWillMount() {
    this.props.clearState();
-    this.props.fetchSettings();
    this.subscribeToUpdates();
  }

@@ -384,7 +382,6 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`

 const mapStateToProps = (state) => ({
  moderation: state.moderation,
-  settings: state.settings,
  auth: state.auth,
 });

@@ -392,7 +389,6 @@ const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators({
    toggleModal,
    singleView,
-    fetchSettings,
    showBanUserDialog,
    hideShortcutsNote,
    toggleStorySearch,
@@ -76,6 +76,7 @@
  display: flex;
  justify-content: center;
  flex-direction: column;
+  width: 100%;
 }

 .editCommentForm .buttonContainerLeft .editWindowRemaining {
@@ -0,0 +1,49 @@
+.card {
+  margin-bottom: 20px;
+  align-items: flex-start;
+  min-height: 100px;
+  max-width: 600px;
+}
+
+.header {
+  margin-top: 3px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.wrapper {
+  width: 100%;
+  font-size: 14px;
+  letter-spacing: 0;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+}
+
+.content {
+  display: inline-block;
+  padding: 0px 30px;
+  box-sizing: border-box;
+}
+
+.enabledSetting {
+  border-left-color: #00796b;
+  border-left-style: solid;
+  border-left-width: 7px;
+}
+
+.disabledSetting {
+  padding-left: 22px;
+}
+
+.disabledSettingText {
+  color: #ccc;
+  pointer-events: none;
+}
+
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ConfigureCard.css';
+import {Card} from 'coral-ui';
+import {Checkbox} from 'react-mdl';
+import cn from 'classnames';
+
+const ConfigureCard = ({title, children, className, onCheckbox, checked, ...rest}) => (
+  <Card {...rest} className={cn(
+    styles.card,
+    className,
+    {
+      [styles.enabledSetting]: checked === true,
+      [styles.disabledSetting]: checked === false,
+    },
+  )}>
+    {checked !== undefined &&
+      <div className={styles.action}>
+        <Checkbox
+          onChange={onCheckbox}
+          checked={checked} />
+      </div>
+    }
+    <div className={cn(styles.wrapper, {
+      [styles.content]: checked !== undefined,
+    })}>
+      <div className={styles.header}>{title}</div>
+      <div className={cn({
+        [styles.disabledSettingText]: checked === false,
+      })}>
+        {children}
+      </div>
+    </div>
+  </Card>
+);
+
+ConfigureCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  onCheckbox: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default ConfigureCard;
@@ -16,6 +16,7 @@ export default {
    'ModifyTagResponse',
    'IgnoreUserResponse',
    'StopIgnoringUserResponse',
+    'UpdateSettingsResponse',
  )
 };

@@ -340,3 +340,21 @@ export const withStopIgnoringUser = withMutation(
        });
      }}),
  });
+
+export const withUpdateSettings = withMutation(
+  gql`
+    mutation UpdateSettings($input: UpdateSettingsInput!) {
+      updateSettings(input: $input) {
+        ...UpdateSettingsResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      updateSettings: (input) => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      }}),
+  });
@@ -3,10 +3,13 @@ import has from 'lodash/has';
 import get from 'lodash/get';
 import merge from 'lodash/merge';

-import esTA from '../../../node_modules/timeago.js/locales/es';
-import frTA from '../../../node_modules/timeago.js/locales/fr';
-import pt_BRTA from '../../../node_modules/timeago.js/locales/pt_BR';
+import daTA from 'timeago.js/locales/da';
+import esTA from 'timeago.js/locales/es';
+import frTA from 'timeago.js/locales/fr';
+import pt_BRTA from 'timeago.js/locales/pt_BR';
+
 import en from '../../../locales/en.yml';
+import da from '../../../locales/da.yml';
 import es from '../../../locales/es.yml';
 import fr from '../../../locales/fr.yml';
 import pt_BR from '../../../locales/pt_BR.yml';
@@ -14,7 +17,7 @@ import pt_BR from '../../../locales/pt_BR.yml';
 // Translations are happening at https://translate.lingohub.com/the-coral-project/dashboard

 const defaultLanguage = process.env.TALK_DEFAULT_LANG;
-const translations = {...en, ...es, ...fr, ...pt_BR};
+const translations = {...en, ...da, ...es, ...fr, ...pt_BR};

 let lang;
 let timeagoInstance;
@@ -44,6 +47,7 @@ function init() {
  }

  ta.register('es', esTA);
+  ta.register('da', daTA);
  ta.register('fr', frTA);
  ta.register('pt_BR', pt_BRTA);
  timeagoInstance = ta();
@@ -30,5 +30,3 @@
 .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);
 }
-
-
@@ -1,8 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './Card.css';

-export default ({children, className, shadow = 2, ...props}) => (
+const Card = ({children, className, shadow = 2, ...props}) => (
  <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
    {children}
  </div>
 );
+
+Card.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  shadow: PropTypes.number,
+};
+
+export default Card;
@@ -85,9 +85,14 @@ export class CommentForm extends React.Component {
  render() {
    const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;

-    const length = body.trim().length;
-    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount; 
-    const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
+    const length = body.length;
+    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount;
+    const disableSubmitButton =
+      !length ||
+      body.trim().length === 0 ||
+      isRespectingMaxCount(length) ||
+      !submitEnabled({body}) ||
+      loadingState === 'loading';
    const disableCancelButton = loadingState === 'loading';
    const disableTextArea = loadingState === 'loading';

@@ -8,6 +8,8 @@ import ClickOutside from 'coral-framework/components/ClickOutside';
 import cn from 'classnames';
 import styles from './styles.css';

+import {getErrorMessages} from 'coral-framework/utils';
+
 const name = 'talk-plugin-flags';

 export default class FlagButton extends Component {
@@ -99,6 +101,7 @@ export default class FlagButton extends Component {
            }
          })
          .catch((err) => {
+            this.props.notify('error', getErrorMessages(err));
            console.error(err);
          });
      } else {
@@ -109,6 +112,7 @@ export default class FlagButton extends Component {
            }
          })
          .catch((err) => {
+            this.props.notify('error', getErrorMessages(err));
            console.error(err);
          });
      }