diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 1f23af30b..058ff7a64 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/client/coral-admin/src/containers/Configure/Configure.css @@ -3,7 +3,7 @@ h3 { color: black; - font-size: 1.76em; + font-size: 1.26em; font-weight: 500; } } @@ -24,6 +24,10 @@ margin-bottom: 20px; align-items: flex-start; min-height: 100px; + + h3 { + margin: 0; + } } .settingsError { @@ -118,18 +122,19 @@ } #bannedWordlist, #suspectWordlist { - width: 100%; - padding: 10px; - + display: block; input { width: 100%; } } -.wordlistHeader { - font-weight: bold; - font-size:18px; - margin-bottom:3px; +.customCSSInput { + width: 100%; + font-size: 14px; + padding: 14px; + letter-spacing: 0.03em; + color: #555; + box-sizing: border-box; } .enabledSetting { @@ -150,7 +155,7 @@ margin-top: 38px; } -.commentSettingsSection { +.settingsSection { padding-bottom: 200px; .action { display: inline-block; diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js index 1ec78dcd2..140f5786a 100644 --- a/client/coral-admin/src/containers/Configure/Configure.js +++ b/client/coral-admin/src/containers/Configure/Configure.js @@ -8,22 +8,20 @@ import { updateDomainlist } from '../../actions/settings'; -import {Button, List, Item} from 'coral-ui'; +import {Button, List, Item, Card, Spinner} from 'coral-ui'; import styles from './Configure.css'; import I18n from 'coral-framework/modules/i18n/i18n'; -import translations from '../../translations.json'; -import EmbedLink from './EmbedLink'; -import CommentSettings from './CommentSettings'; -import Wordlist from './Wordlist'; -import Domainlist from './Domainlist'; -import has from 'lodash/has'; +import translations from 'coral-admin/src/translations.json'; +import StreamSettings from './StreamSettings'; +import ModerationSettings from './ModerationSettings'; +import TechSettings from './TechSettings'; class Configure extends Component { constructor (props) { super(props); this.state = { - activeSection: 'comments', + activeSection: 'stream', changed: false, errors: {} }; @@ -70,40 +68,52 @@ class Configure extends Component { getSection (section) { const pageTitle = this.getPageTitle(section); + let sectionComponent; switch(section){ - case 'comments': - return ; - case 'embed': - return has(this, 'props.settings.domains.whitelist') - ?
- - -
- : ; - case 'wordlist': - return has(this, 'props.settings.wordlist') - ? - :

loading wordlists

; + break; + case 'moderation': + sectionComponent = ; + break; + case 'tech': + sectionComponent = ; } + + if (this.props.settings.fetchingSettings) { + return Loading settings...; + } + + return ( +
+

{pageTitle}

+ {sectionComponent} +
+ ); } getPageTitle (section) { switch(section) { - case 'comments': - return lang.t('configure.comment-settings'); - case 'embed': - return lang.t('configure.embed-comment-stream'); + case 'stream': + return lang.t('configure.stream-settings'); + case 'moderation': + return lang.t('configure.moderation-settings'); + case 'tech': + return lang.t('configure.tech-settings'); default: return ''; } @@ -120,14 +130,14 @@ class Configure extends Component {
- - {lang.t('configure.comment-settings')} + + {lang.t('configure.stream-settings')} - - {lang.t('configure.embed-comment-stream')} + + {lang.t('configure.moderation-settings')} - - {lang.t('configure.wordlist')} + + {lang.t('configure.tech-settings')}
diff --git a/client/coral-admin/src/containers/Configure/Domainlist.js b/client/coral-admin/src/containers/Configure/Domainlist.js index 6918c0471..c8c7cbd6c 100644 --- a/client/coral-admin/src/containers/Configure/Domainlist.js +++ b/client/coral-admin/src/containers/Configure/Domainlist.js @@ -9,19 +9,17 @@ const lang = new I18n(translations); const Domainlist = ({domains, onChangeDomainlist}) => { return ( -
+

{lang.t('configure.domain-list-title')}

- -

{lang.t('configure.domain-list-text')}

- data.split(',').map(d => d.trim())} - onChange={tags => onChangeDomainlist('whitelist', tags)} - /> -
-
+

{lang.t('configure.domain-list-text')}

+ data.split(',').map(d => d.trim())} + onChange={tags => onChangeDomainlist('whitelist', tags)} + /> + ); }; diff --git a/client/coral-admin/src/containers/Configure/EmbedLink.js b/client/coral-admin/src/containers/Configure/EmbedLink.js index 413f421d7..674bafa6e 100644 --- a/client/coral-admin/src/containers/Configure/EmbedLink.js +++ b/client/coral-admin/src/containers/Configure/EmbedLink.js @@ -44,19 +44,15 @@ class EmbedLink extends Component { "> `.trim(); return ( -
-

{this.props.title}

-
- -

{lang.t('configure.copy-and-paste')}

-