Clean up CSS and move IconPicker to the Soapbox Config js

app/soapbox/features/forms/index.js

@@ -3,8 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
-import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
-import forkAwesomeIcons from './forkawesome.json';
 
 export const FormPropTypes = {
   label: PropTypes.oneOfType([
@@ -188,38 +186,6 @@ export class RadioGroup extends ImmutablePureComponent {
 
 }
 
-export class IconPicker extends ImmutablePureComponent {
-
-  static propTypes = {
-    icons: PropTypes.object,
-    label: FormPropTypes.label,
-    placeholder: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    icons: forkAwesomeIcons,
-    placeholder: 'Select icon',
-  };
-
-  render() {
-    const { icons, onChange, value, label, placeholder } = this.props;
-
-    return (
-      <div className='input with_label popup'>
-        <div className='label_input__icon_picker'>
-          {label && (<label>{label}</label>)}
-          <div className='label_input__wrapper'>
-            <FontIconPicker icons={icons} onChange={onChange} value={value !== '' ? 'fa fa-' + value : value} noSelectedPlaceholder={placeholder} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
 export class RadioItem extends ImmutablePureComponent {
 
   static propTypes = {

app/soapbox/features/soapbox_config/index.js

@@ -11,7 +11,6 @@ import {
   TextInput,
   SimpleTextarea,
   FileChooserLogo,
-  IconPicker,
   FormPropTypes,
 } from 'soapbox/features/forms';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
@@ -27,6 +26,8 @@ import Accordion from '../ui/components/accordion';
 import SitePreview from './components/site_preview';
 import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
 import { defaultSettings } from 'soapbox/actions/settings';
+import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
+import forkAwesomeIcons from './forkawesome.json';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -141,13 +142,13 @@ class SoapboxConfig extends ImmutablePureComponent {
       path, (e) =>
         template
           .merge(field)
-          .set(key, getValue(e))
+          .set(key, getValue(e)),
     );
   };
 
   handlePromoItemChange = (index, key, field, getValue) => {
     return this.handleItemChange(
-      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue
+      ['promoPanel', 'items', index], key, field, templates.promoPanelItem, getValue,
     );
   };
 
@@ -235,7 +236,7 @@ class SoapboxConfig extends ImmutablePureComponent {
               />
             </FieldsGroup>
             <FieldsGroup>
-              <div className='input with_block_label'>
+              <div className='input with_block_label popup'>
                 <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
                 <span className='hint'>
                   <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
@@ -428,3 +429,35 @@ class ColorWithPicker extends ImmutablePureComponent {
   }
 
 }
+
+export class IconPicker extends ImmutablePureComponent {
+
+  static propTypes = {
+    icons: PropTypes.object,
+    label: FormPropTypes.label,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    icons: forkAwesomeIcons,
+    placeholder: 'Select icon',
+  };
+
+  render() {
+    const { icons, onChange, value, label, placeholder } = this.props;
+
+    return (
+      <div className='input with_label popup'>
+        <div className='label_input__icon_picker'>
+          {label && (<label>{label}</label>)}
+          <div className='label_input__wrapper'>
+            <FontIconPicker icons={icons} onChange={onChange} value={value !== '' ? 'fa fa-' + value : value} noSelectedPlaceholder={placeholder} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/styles/forms.scss

@@ -514,11 +514,6 @@ code {
     &__icon_picker {
       font-size: 14px;
 
-      label {
-        display: block;
-        margin-bottom: 8px;
-      }
-
       .rfipbtn {
         display: inline-flex;
         line-height: 19px;
@@ -560,7 +555,8 @@ code {
           flex: 0;
         }
 
-        &--default:active, &--default:focus {
+        &--default:active,
+        &--default:focus {
           box-shadow: none;
         }