♻️ create option creators, improve header transparency

client/components/mobile/Header.jsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = prop('MobilePanel.default.background');
+const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
 
 const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${props => (props.transparent ? 'transparent' : background)};
+  background: ${props => background(props.transparent === true)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};

client/modules/Mobile/MobilePreferences.jsx

@@ -20,11 +20,6 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-
-const SettingsHeader = styled(Header)`
-  background: transparent;
-`;
-
 const SectionHeader = styled.h2`
   color: ${prop('primaryTextColor')};
   padding-top: ${remSize(32)};
@@ -34,6 +29,23 @@ const SectionSubeader = styled.h3`
   color: ${prop('primaryTextColor')};
 `;
 
+const optionsOnOff = (name, onLabel = 'On', offLabel = 'Off') => [
+  {
+    value: true, label: onLabel, ariaLabel: `${name} on`, name: `${name}`, id: `${name}-on`.replace(' ', '-')
+  },
+  {
+    value: false, label: offLabel, ariaLabel: `${name} off`, name: `${name}`, id: `${name}-off`.replace(' ', '-')
+  },
+];
+
+const optionsPickOne = (name, ...options) => options.map(option => ({
+  value: option,
+  label: option,
+  ariaLabel: `${option} ${name} on`,
+  name: `${option} ${name}`,
+  id: `${option}-${name}-on`.replace(' ', '-')
+}));
+
 
 const MobilePreferences = (props) => {
   const {
@@ -47,49 +59,21 @@ const MobilePreferences = (props) => {
     {
       title: 'Theme',
       value: theme,
-      options: [
+      options: optionsPickOne('theme', 'light', 'dark', 'contrast'),
-        {
-          value: 'light', label: 'light', ariaLabel: 'light theme on', name: 'light theme', id: 'light-theme-on'
-        },
-        {
-          value: 'dark', label: 'dark', ariaLabel: 'dark theme on', name: 'dark theme', id: 'dark-theme-on'
-        },
-        {
-          value: 'contrast',
-          label: 'contrast',
-          ariaLabel: 'contrast theme on',
-          name: 'contrast theme',
-          id: 'contrast-theme-on'
-        }
-      ],
       onSelect: x => setTheme(x) // setTheme
     },
 
     {
       title: 'Autosave',
       value: autosave,
-      options: [
+      options: optionsOnOff('autosave'),
-        {
-          value: true, label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off'
-        },
-      ],
       onSelect: x => setAutosave(x) // setAutosave
     },
 
     {
       title: 'Word Wrap',
       value: linewrap,
-      options: [
+      options: optionsOnOff('linewrap'),
-        {
-          value: true, label: 'On', ariaLabel: 'linewrap on', name: 'linewrap', id: 'linewrap-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'linewrap off', name: 'linewrap', id: 'linewrap-off'
-        },
-      ],
       onSelect: x => setLinewrap(x)
     }
   ];
@@ -98,40 +82,19 @@ const MobilePreferences = (props) => {
     {
       title: 'Plain-text',
       value: textOutput,
-      options: [
+      options: optionsOnOff('text output'),
-        {
-          value: true, label: 'On', ariaLabel: 'text output on', name: 'text output', id: 'text-output-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'text output off', name: 'text output', id: 'text-output-off'
-        },
-      ],
       onSelect: x => setTextOutput(x)
     },
     {
       title: 'Table-text',
       value: gridOutput,
-      options: [
+      options: optionsOnOff('table output'),
-        {
-          value: true, label: 'On', ariaLabel: 'table output on', name: 'table output', id: 'table-output-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'table output off', name: 'table output', id: 'table-output-off'
-        },
-      ],
       onSelect: x => setGridOutput(x)
     },
     {
       title: 'Sound',
       value: soundOutput,
-      options: [
+      options: optionsOnOff('sound output'),
-        {
-          value: true, label: 'On', ariaLabel: 'sound output on', name: 'sound output', id: 'sound-output-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'sound output off', name: 'sound output', id: 'sound-output-off'
-        },
-      ],
       onSelect: x => setSoundOutput(x)
     },
   ];
@@ -140,27 +103,13 @@ const MobilePreferences = (props) => {
     {
       title: 'Line Numbers',
       value: lineNumbers,
-      options: [
+      options: optionsOnOff('line numbers'),
-        {
-          value: true, label: 'On', ariaLabel: 'line numbers on', name: 'line numbers', id: 'line-numbers-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'line numbers off', name: 'line numbers', id: 'line-numbers-off'
-        },
-      ],
       onSelect: x => setLineNumbers(x)
     },
     {
       title: 'Lint Warning Sound',
       value: lintWarning,
-      options: [
+      options: optionsOnOff('lint warning'),
-        {
-          value: true, label: 'On', ariaLabel: 'lint warning on', name: 'lint warning', id: 'lint-warning-on'
-        },
-        {
-          value: false, label: 'Off', ariaLabel: 'lint warning off', name: 'lint warning', id: 'lint-warning-off'
-        },
-      ],
       onSelect: x => setLintWarning(x)
     },
   ];
@@ -168,10 +117,9 @@ const MobilePreferences = (props) => {
   return (
     <Screen fullscreen>
       <section>
-        <SettingsHeader transparent title="Preferences">
+        <Header transparent title="Preferences">
-
           <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
-        </SettingsHeader>
+        </Header>
         <section className="preferences">
           <Content>
             <SectionHeader>General Settings</SectionHeader>

client/theme.js

@@ -62,6 +62,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.dark,
+    backgroundColor: grays.lighter,
 
     Button: {
       default: {
@@ -101,6 +102,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.lightest,
+    backgroundColor: grays.darker,
 
     Button: {
       default: {
@@ -140,6 +142,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.lightest,
+    backgroundColor: grays.darker,
 
     Button: {
       default: {