From 83b799a3a17631ae54a47a2375ebcdf1106986b7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 23 Aug 2020 15:04:32 -0500
Subject: [PATCH] ConfigSoapbox: Update phrasing, add `+` icons to form

---
 app/soapbox/features/configuration/index.js | 8 ++++++--
 app/soapbox/locales/en.json                 | 2 --
 app/soapbox/reducers/soapbox.js             | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/configuration/index.js b/app/soapbox/features/configuration/index.js
index 739210de8..6d477798b 100644
--- a/app/soapbox/features/configuration/index.js
+++ b/app/soapbox/features/configuration/index.js
@@ -21,6 +21,7 @@ import {
   getIn,
 } from 'immutable';
 import { updateAdminConfig } from 'soapbox/actions/admin';
+import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_settings', defaultMessage: 'Soapbox settings' },
@@ -354,6 +355,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
                   }
                   <div className='actions'>
                     <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddPromoPanelItem}>
+                      <Icon id='plus-circle' />
                       <FormattedMessage id='soapbox_settings.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
                     </div>
                   </div>
@@ -383,6 +385,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
                   }
                   <div className='actions'>
                     <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddHomeFooterItem}>
+                      <Icon id='plus-circle' />
                       <FormattedMessage id='soapbox_settings.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
                     </div>
                   </div>
@@ -391,7 +394,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
               <div className='input with_block_label'>
                 <label><FormattedMessage id='soapbox_settings.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
                 <span className='hint'>
-                  <FormattedMessage id='soapbox_settings.hints.custom_css_fields' defaultMessage='You can have custom CSS definitions' />
+                  <FormattedMessage id='soapbox_settings.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
                 </span>
                 {
                   customCssItems.valueSeq().map((field, i) => (
@@ -407,7 +410,8 @@ class ConfigSoapbox extends ImmutablePureComponent {
                 }
                 <div className='actions'>
                   <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddCssItem}>
-                    <FormattedMessage id='soapbox_settings.fields.custom_css.add' defaultMessage='Add new Custom CSS item' />
+                    <Icon id='plus-circle' />
+                    <FormattedMessage id='soapbox_settings.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
                   </div>
                 </div>
               </div>
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 7649f1cf8..ab6039def 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -477,7 +477,6 @@
   "soapbox_settings.fields.auto_play_gif_label": "Auto-play GIFs",
   "soapbox_settings.fields.banner_label": "Banner",
   "soapbox_settings.fields.brand_color_label": "Brand color",
-  "soapbox_settings.fields.custom_css.add": "Add new Custom CSS item",
   "soapbox_settings.fields.custom_css_fields_label": "Custom CSS",
   "soapbox_settings.fields.home_footer.add": "Add new Home Footer Item",
   "soapbox_settings.fields.home_footer_fields_label": "Home footer items",
@@ -487,7 +486,6 @@
   "soapbox_settings.fields.promo_panel_fields_label": "Promo panel items",
   "soapbox_settings.hints.auto_play_gif": "Enable auto-playing of GIF files in timeline",
   "soapbox_settings.hints.banner": "PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px",
-  "soapbox_settings.hints.custom_css_fields": "You can have custom CSS definitions",
   "soapbox_settings.hints.home_footer_fields": "You can have custom defined links displayed on the footer of your static pages",
   "soapbox_settings.hints.logo": "SVG. At most 2 MB. Will be downscaled to 50px height, maintaining aspect ratio",
   "soapbox_settings.hints.patron_enabled": "Enables display of Patron module.  Requires installation of Patron module.",
diff --git a/app/soapbox/reducers/soapbox.js b/app/soapbox/reducers/soapbox.js
index db369aeef..6497231f9 100644
--- a/app/soapbox/reducers/soapbox.js
+++ b/app/soapbox/reducers/soapbox.js
@@ -5,6 +5,7 @@ import {
 } from '../actions/soapbox';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
+// TODO: Handle this more like getSettings()
 const initialState = ImmutableMap({
   logo: '',
   banner: '',