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

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

@@ -48,33 +48,35 @@ 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) => (
-        <option
-          key={opt.value}
-          value={opt.value}
-        >
-          {opt.message}
-        </option>
-      ));
+      const optionElems = options && options.length > 0 && options.map((opt) => {
+        let optionId = `${id}--${opt.value}`;
         return (
-        <label className='glitch local-settings__page__item' htmlFor={id}>
-          <p>{children}</p>
-          <p>
-            <select
-              id={id}
-              disabled={!enabled}
+          <label htmlFor={optionId}>
+            <input type='radio'
+              name={id}
+              id={optionId}
+              value={opt.value}
               onBlur={handleChange}
               onChange={handleChange}
-              value={currentValue}
-            >
-              {optionElems}
-            </select>
-          </p>
+              checked={ currentValue === opt.value }
+              disabled={!enabled}
+            />
+            {opt.message}
           </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'>
+          <label htmlFor={id}>
             <p>{children}</p>
             <p>
               <input
@@ -87,9 +89,11 @@ export default class LocalSettingsPageItem extends React.PureComponent {
               />
             </p>
           </label>
+        </div>
       );
     } else return (
-      <label className='glitch local-settings__page__item' htmlFor={id}>
+      <div className='glitch local-settings__page__item boolean'>
+        <label htmlFor={id}>
           <input
             id={id}
             type='checkbox'
@@ -99,6 +103,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
           />
           {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: 5px;
+  margin-bottom: 2px;
 }
+
+.glitch.local-settings__page__item.string,
+.glitch.local-settings__page__item.radio_buttons {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }