🐛 fix settings text color

client/components/mobile/Selector.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { prop } from '../../theme';
+
+
+const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'preference__title' }))`
+  color: ${prop('primaryTextColor')} !important;
+`;
+
+const Selector = ({
+  title, value, onSelect, options,
+}) => (
+  <div className="preference">
+    {/* <h4 className="preference__title">{title}</h4> */}
+    <PreferenceTitle>{title}</PreferenceTitle>
+    {options.map(option => (
+      <div className="preference__options" key={option.id}>
+        <input
+          type="radio"
+          onChange={() => onSelect(option.value)}
+          aria-label={option.ariaLabel}
+          name={option.name}
+          id={option.id}
+          className="preference__radio-button"
+          value={option.value}
+          checked={value === option.value}
+        />
+        <label htmlFor={option.id} className="preference__option">{option.label}</label>
+      </div>))}
+  </div>
+);
+
+Selector.defaultProps = {
+  options: []
+};
+
+Selector.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    ariaLabel: PropTypes.string,
+  })),
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default Selector;

client/modules/Mobile/MobilePreferences.jsx

@@ -10,6 +10,7 @@ import * as IdeActions from '../IDE/actions/ide';
 
 import Screen from '../../components/mobile/MobileScreen';
 import Header from '../../components/mobile/Header';
+import Selector from '../../components/mobile/Selector';
 import { ExitIcon } from '../../common/icons';
 import { remSize } from '../../theme';
 
@@ -24,43 +25,6 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-const Selector = ({
-  title, value, onSelect, options,
-}) => (
-  <div className="preference">
-    <h4 className="preference__title">{title}</h4>
-    {options.map(option => (
-      <div className="preference__options" key={option.id}>
-        <input
-          type="radio"
-          onChange={() => onSelect(option.value)}
-          aria-label={option.ariaLabel}
-          name={option.name}
-          id={option.id}
-          className="preference__radio-button"
-          value={option.value}
-          checked={value === option.value}
-        />
-        <label htmlFor={option.id} className="preference__option">{option.label}</label>
-      </div>))}
-  </div>
-);
-
-Selector.defaultProps = {
-  options: []
-};
-
-Selector.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    label: PropTypes.string,
-    ariaLabel: PropTypes.string,
-  })),
-  onSelect: PropTypes.func.isRequired,
-};
 
 const SettingsHeader = styled(Header)`
   background: transparent
@@ -121,21 +85,24 @@ const MobilePreferences = (props) => {
   // useEffect(() => { });
 
   return (
-    <Screen>
+    <Screen fullscreen>
-      <SettingsHeader>
+      <section>
-        <h1>Settings</h1>
 
-        <div style={{ marginLeft: '2rem' }}>
+        <SettingsHeader>
-          <IconLinkWrapper to="/mobile" aria-label="Return to ide view">
+          <h1>Settings</h1>
-            <ExitIcon />
-          </IconLinkWrapper>
 
-        </div>
+          <div style={{ marginLeft: '2rem' }}>
-      </SettingsHeader>
+            <IconLinkWrapper to="/mobile" aria-label="Return to ide view">
-      <section className="preferences">
+              <ExitIcon />
-        <Content>
+            </IconLinkWrapper>
-          { preferences.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
+
-        </Content>
+          </div>
+        </SettingsHeader>
+        <section className="preferences">
+          <Content>
+            { preferences.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
+          </Content>
+        </section>
       </section>
     </Screen>);
 };