Refactor theme selector dropdown

app/gabsocial/features/forms/index.js

@@ -146,3 +146,41 @@ export class RadioItem extends ImmutablePureComponent {
   }
 
 }
+
+export class SelectDropdown extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    items: PropTypes.object.isRequired,
+    defaultValue: PropTypes.string,
+    onChange: PropTypes.func,
+  }
+
+  render() {
+    const { label, items, defaultValue, onChange } = this.props;
+    const id = uuidv4();
+
+    return (
+      <div className='input with_label select optional'>
+        <div className='label_input'>
+          <label className='select optional' htmlFor={id}>{label}</label>
+          <div className='label_input__wrapper'>
+            <select
+              id={id}
+              className='select optional'
+              onChange={onChange}
+              defaultValue={defaultValue}
+            >
+              {Object.keys(items).map(item => (
+                <option key={item} value={item}>
+                  {items[item]}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

app/gabsocial/features/preferences/index.js

@@ -11,6 +11,7 @@ import {
   FieldsGroup,
   RadioGroup,
   RadioItem,
+  SelectDropdown,
 } from 'gabsocial/features/forms';
 import SettingsCheckbox from './components/settings_checkbox';
 
@@ -20,14 +21,14 @@ const messages = defineMessages({
 
 // TODO: Pull dynamically
 const themes = {
-  cobalt: 'cobalt',
+  cobalt: 'Cobalt',
-  'gabsocial-light': 'Light',
+  'gabsocial-light': 'Purple Light',
-  default: 'Dark',
+  default: 'Purple Dark',
-  contrast: 'High contrast',
+  contrast: 'Purple Contrast',
   halloween: 'Halloween',
-  neenster: 'neenster',
+  neenster: 'Aquatic',
-  glinner: 'glinner',
+  glinner: 'Pale Blue',
-  lime: 'lime',
+  lime: 'Lime Green',
 };
 
 const mapStateToProps = state => ({
@@ -71,28 +72,13 @@ class Preferences extends ImmutablePureComponent {
     return (
       <Column icon='users' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <SimpleForm>
-
           <FieldsGroup>
-            <div className='input with_label select optional user_setting_theme'>
+            <SelectDropdown
-              <div className='label_input'>
+              label='Site theme'
-                <label className='select optional' htmlFor='user_setting_theme'>Site theme</label>
+              items={themes}
-                <div className='label_input__wrapper'>
+              defaultValue={settings.get('theme')}
-                  <select
+              onChange={this.onThemeChange}
-                    className='select optional'
+            />
-                    name='user[setting_theme]'
-                    id='user_setting_theme'
-                    onChange={this.onThemeChange}
-                    defaultValue={settings.get('theme')}
-                  >
-                    {Object.keys(themes).map(theme => (
-                      <option key={theme} value={theme}>
-                        {themes[theme]}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              </div>
-            </div>
           </FieldsGroup>
 
           <FieldsGroup>
@@ -132,7 +118,6 @@ class Preferences extends ImmutablePureComponent {
               path={['deleteModal']}
             />
           </FieldsGroup>
-
         </SimpleForm>
       </Column>
     );