diff --git a/client/components/mobile/Selector.jsx b/client/components/mobile/Selector.jsx
new file mode 100644
index 00000000..e5da2f00
--- /dev/null
+++ b/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,
+}) => (
+
+ {/*
{title}
*/}
+
{title}
+ {options.map(option => (
+
+ onSelect(option.value)}
+ aria-label={option.ariaLabel}
+ name={option.name}
+ id={option.id}
+ className="preference__radio-button"
+ value={option.value}
+ checked={value === option.value}
+ />
+
+
))}
+
+);
+
+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;
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx
index b905e152..a7634701 100644
--- a/client/modules/Mobile/MobilePreferences.jsx
+++ b/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,
-}) => (
-
-
{title}
- {options.map(option => (
-
- onSelect(option.value)}
- aria-label={option.ariaLabel}
- name={option.name}
- id={option.id}
- className="preference__radio-button"
- value={option.value}
- checked={value === option.value}
- />
-
-
))}
-
-);
-
-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 (
-
-
- Settings
+
+
-
-
- { preferences.map(option => ) }
-
+
+
+
+
+
+
+
+
+
+ { preferences.map(option => ) }
+
+
);
};