Switch from selects to radio buttons for local settings, improve styling

app/javascript/flavours/glitch/features/local_settings/page/item/index.js

@@ -48,57 +48,62 @@ export default class LocalSettingsPageItem extends React.PureComponent {
 
     if (options && options.length > 0) {
       const currentValue = settings.getIn(item);
-      const optionElems = options && options.length > 0 && options.map((opt) => (
+      const optionElems = options && options.length > 0 && options.map((opt) => {
-        <option
+        let optionId = `${id}--${opt.value}`;
-          key={opt.value}
+        return (
-          value={opt.value}
+          <label htmlFor={optionId}>
-        >
+            <input type='radio'
-          {opt.message}
+              name={id}
-        </option>
+              id={optionId}
-      ));
+              value={opt.value}
-      return (
-        <label className='glitch local-settings__page__item' htmlFor={id}>
-          <p>{children}</p>
-          <p>
-            <select
-              id={id}
-              disabled={!enabled}
               onBlur={handleChange}
               onChange={handleChange}
-              value={currentValue}
+              checked={ currentValue === opt.value }
-            >
+              disabled={!enabled}
-              {optionElems}
+            />
-            </select>
+            {opt.message}
-          </p>
+          </label>
-        </label>
+        );
+      });
+      return (
+        <div class='glitch local-settings__page__item radio_buttons'>
+          <fieldset>
+            <legend>{children}</legend>
+            {optionElems}
+          </fieldset>
+        </div>
       );
     } else if (placeholder) {
       return (
-        <label className='glitch local-settings__page__item' htmlFor={id}>
+        <div className='glitch local-settings__page__item string'>
-          <p>{children}</p>
+          <label htmlFor={id}>
-          <p>
+            <p>{children}</p>
-            <input
+            <p>
-              id={id}
+              <input
-              type='text'
+                id={id}
-              value={settings.getIn(item)}
+                type='text'
-              placeholder={placeholder}
+                value={settings.getIn(item)}
-              onChange={handleChange}
+                placeholder={placeholder}
-              disabled={!enabled}
+                onChange={handleChange}
-            />
+                disabled={!enabled}
-          </p>
+              />
-        </label>
+            </p>
+          </label>
+        </div>
       );
     } else return (
-      <label className='glitch local-settings__page__item' htmlFor={id}>
+      <div className='glitch local-settings__page__item boolean'>
-        <input
+        <label htmlFor={id}>
-          id={id}
+          <input
-          type='checkbox'
+            id={id}
-          checked={settings.getIn(item)}
+            type='checkbox'
-          onChange={handleChange}
+            checked={settings.getIn(item)}
-          disabled={!enabled}
+            onChange={handleChange}
-        />
+            disabled={!enabled}
-        {children}
+          />
-      </label>
+          {children}
+        </label>
+      </div>
     );
   }
 

app/javascript/flavours/glitch/styles/components/local_settings.scss

@@ -11,8 +11,21 @@
   max-height: 450px;
   overflow: hidden;
 
-  label {
+  label, legend {
     display: block;
+    font-size: 14px;
+  }
+
+  .boolean label, .radio_buttons label {
+    position: relative;
+    padding-left: 28px;
+    padding-top: 3px;
+
+    input {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
   }
 
   h1 {
@@ -74,7 +87,11 @@
 }
 
 .glitch.local-settings__page__item {
-  select {
+  margin-bottom: 2px;
-    margin-bottom: 5px;
+}
-  }
+
+.glitch.local-settings__page__item.string,
+.glitch.local-settings__page__item.radio_buttons {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }