edited features/configuration

app/soapbox/features/configuration/index.js

@@ -16,7 +16,7 @@ import {
 import StillImage from 'soapbox/components/still_image';
 import {
   Map as ImmutableMap,
-  // List as ImmutableList,
+  List as ImmutableList,
 } from 'immutable';
 import { patchMe } from 'soapbox/actions/me';
 //import { unescape } from 'lodash';
@@ -36,6 +36,7 @@ const mapStateToProps = state => {
   const soapbox = state.get('soapbox');
   return {
     themeCss: generateThemeCss(soapbox.get('brandColor')),
+    brandColor: soapbox.get('brandColor'),
     customCssItems: soapbox.getIn(['customCSS', 'items']),
     logo: soapbox.get('logo'),
     banner: soapbox.get('banner'),
@@ -56,6 +57,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     themeCss: PropTypes.string,
+    brandColor: PropTypes.string,
     customCssItems: ImmutablePropTypes.list,
     logo: PropTypes.string,
     banner: PropTypes.string,
@@ -79,6 +81,36 @@ class ConfigSoapbox extends ImmutablePureComponent {
       homeFooterItems: props.homeFooterItems,
       customCssItems: props.customCssItems,
     };
+    if (!this.state.logo) {
+      this.state.logo = '';
+    }
+    if (!this.state.banner) {
+      this.state.banner = '';
+    }
+    if (!this.state.promoItems) {
+      this.state.promoItems = ImmutableList([
+        ImmutableMap({
+          icon: '',
+          text: '',
+          url: '',
+        }),
+      ]);
+    };
+    if (!this.state.homeFooterItems) {
+      this.state.homeFooterItems = ImmutableList([
+        ImmutableMap({
+          title: '',
+          url: '',
+        }),
+      ]);
+    };
+    if (!this.state.customCssItems) {
+      this.state.customCssItems = ImmutableList([
+        ImmutableMap({
+          css: '',
+        }),
+      ]);
+    };
   }
 
   getPromoItemsParams = () => {
@@ -150,6 +182,10 @@ class ConfigSoapbox extends ImmutablePureComponent {
     this.setState({ [e.target.name]: e.target.checked });
   }
 
+  handleBrandColorChange = e => {
+    this.setState({ brandColor: e.target.value });
+  }
+
   handleTextChange = e => {
     this.setState({ [e.target.name]: e.target.value });
   }
@@ -226,8 +262,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
             </FieldsGroup>
             <FieldsGroup>
               <div>
-                <label for='brand_color'><FormattedMessage id='soapbox_settings.fields.brand_color_label' defaultMessage='Brand color' /></label><br /><br />
-                <input type='color' id='brand_color' name='brand_color' value='#e66465' />
+                <label htmlFor='brand_color'><FormattedMessage id='soapbox_settings.fields.brand_color_label' defaultMessage='Brand color' /></label><br /><br />
+                <input type='color' id='brand_color' name='brand_color' value={this.state.brandColor} onChange={this.handleBrandColorChange} /><br /><br />
+                <label>{ this.state.brandColor }</label>
               </div>
             </FieldsGroup>
             <FieldsGroup>
@@ -313,7 +350,6 @@ class ConfigSoapbox extends ImmutablePureComponent {
                   </div>
                 </div>
               </div>
-              <div className='fields-row__column fields-group'>
               <div className='input with_block_label'>
                 <label><FormattedMessage id='soapbox_settings.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
                 <span className='hint'>
@@ -337,7 +373,6 @@ class ConfigSoapbox extends ImmutablePureComponent {
                   </button>
                 </div>
               </div>
-              </div>
             </FieldsGroup>
           </fieldset>
           <div className='actions'>