diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 45a038ce..d1d98a46 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -61,16 +61,13 @@ const MobileIDEView = (props) => {
-
setOverlay('preferences')}>
-
-
-
{
- // alert('starting sketch');
- startSketch();
- }}
- >
+
+
setOverlay('preferences')}>
+
+
+
+
+
startSketch()}>
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx
new file mode 100644
index 00000000..9c44aace
--- /dev/null
+++ b/client/modules/Mobile/MobilePreferences.jsx
@@ -0,0 +1,233 @@
+import React, { useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Screen from '../../components/mobile/MobileScreen';
+import Header from '../../components/mobile/Header';
+import { ExitIcon } from '../../common/icons';
+import { remSize } from '../../theme';
+import * as PreferencesActions from '../IDE/actions/preferences';
+import * as IdeActions from '../IDE/actions/ide';
+
+const IconLinkWrapper = styled(Link)`
+ width: 3rem;
+ margin-right: 1.25rem;
+ margin-left: none;
+`;
+
+const Content = styled.div`
+ z-index: 0;
+ margin-top: ${remSize(68)};
+`;
+
+/*
+
+*/
+
+const Selector = ({
+ title, value, onSelect, ariaLabel, name, id, options,
+}) => (
+
+
{title}
+ {options.map(option => (
+
+ onSelect(option.value)}
+ aria-label={ariaLabel}
+ name={name}
+ id={id}
+ className="preference__radio-button"
+ value={option.value}
+ checked={value === option.value}
+ />
+
+
))}
+
+
+);
+
+Selector.defaultProps = {
+ options: []
+};
+
+Selector.propTypes = {
+ title: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ options: PropTypes.arrayOf(PropTypes.string),
+ ariaLabel: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ onSelect: PropTypes.string.isRequired,
+};
+
+const SettingsHeader = styled(Header)`
+ background: transparent
+`;
+
+
+const MobilePreferences = (props) => {
+ const { setTheme } = props;
+ const preferences = [
+ {
+ title: 'Theme',
+ value: 'light',
+ options: [
+ {
+ 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: setTheme // setTheme
+ },
+
+ {
+ title: 'Autosave',
+ value: true,
+ options: [
+ {
+ value: 'On', label: 'On', ariaLabel: 'autosave on', name: 'autosave', id: 'autosave-on'
+ },
+ {
+ value: 'Off', label: 'Off', ariaLabel: 'autosave off', name: 'autosave', id: 'autosave-off'
+ },
+ ],
+ onSelect: () => {} // setAutosave
+ }
+ ];
+
+ useEffect(() => { });
+
+ return (
+
+
+
+
Settings
+
+
+
+
+
+
+
+
+
+
+
+
+ { preferences.map(option => ) }
+
+
+ );
+};
+
+
+MobilePreferences.propTypes = {
+ fontSize: PropTypes.number.isRequired,
+ lineNumbers: PropTypes.bool.isRequired,
+ autosave: PropTypes.bool.isRequired,
+ linewrap: PropTypes.bool.isRequired,
+ textOutput: PropTypes.bool.isRequired,
+ gridOutput: PropTypes.bool.isRequired,
+ soundOutput: PropTypes.bool.isRequired,
+ lintWarning: PropTypes.bool.isRequired,
+ theme: PropTypes.string.isRequired,
+
+ setLinewrap: PropTypes.func.isRequired,
+ setLintWarning: PropTypes.func.isRequired,
+ setTheme: PropTypes.func.isRequired,
+ setFontSize: PropTypes.func.isRequired,
+ setLineNumbers: PropTypes.func.isRequired,
+ setAutosave: PropTypes.func.isRequired,
+ setTextOutput: PropTypes.func.isRequired,
+ setGridOutput: PropTypes.func.isRequired,
+ setSoundOutput: PropTypes.func.isRequired,
+
+
+ preferences: PropTypes.shape({
+ fontSize: PropTypes.number.isRequired,
+ autosave: PropTypes.bool.isRequired,
+ linewrap: PropTypes.bool.isRequired,
+ lineNumbers: PropTypes.bool.isRequired,
+ lintWarning: PropTypes.bool.isRequired,
+ textOutput: PropTypes.bool.isRequired,
+ gridOutput: PropTypes.bool.isRequired,
+ soundOutput: PropTypes.bool.isRequired,
+ theme: PropTypes.string.isRequired,
+ autorefreshIdeActions: PropTypes.bool.isRequired
+ }).isRequired,
+
+ ide: PropTypes.shape({
+ isPlaying: PropTypes.bool.isRequired,
+ isAccessibleOutputPlaying: PropTypes.bool.isRequired,
+ consoleEvent: PropTypes.array,
+ modalIsVisible: PropTypes.bool.isRequired,
+ sidebarIsExpanded: PropTypes.bool.isRequired,
+ consoleIsExpanded: PropTypes.bool.isRequired,
+ preferencesIsVisible: PropTypes.bool.isRequired,
+ projectOptionsVisible: PropTypes.bool.isRequired,
+ newFolderModalVisible: PropTypes.bool.isRequired,
+ shareModalVisible: PropTypes.bool.isRequired,
+ shareModalProjectId: PropTypes.string.isRequired,
+ shareModalProjectName: PropTypes.string.isRequired,
+ shareModalProjectUsername: PropTypes.string.isRequired,
+ editorOptionsVisible: PropTypes.bool.isRequired,
+ keyboardShortcutVisible: PropTypes.bool.isRequired,
+ unsavedChanges: PropTypes.bool.isRequired,
+ infiniteLoop: PropTypes.bool.isRequired,
+ previewIsRefreshing: PropTypes.bool.isRequired,
+ infiniteLoopMessage: PropTypes.string.isRequired,
+ projectSavedTime: PropTypes.string,
+ previousPath: PropTypes.string.isRequired,
+ justOpenedProject: PropTypes.bool.isRequired,
+ errorType: PropTypes.string,
+ runtimeErrorWarningVisible: PropTypes.bool.isRequired,
+ uploadFileModalVisible: PropTypes.bool.isRequired
+ }).isRequired,
+};
+
+const mapStateToProps = state => ({
+ preferences: state.preferences,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+ ...PreferencesActions,
+ ...IdeActions
+}, dispatch);
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(MobilePreferences);
diff --git a/client/routes.jsx b/client/routes.jsx
index dcd47ff3..92c3f2b3 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -4,6 +4,7 @@ import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView';
import MobileIDEView from './modules/IDE/pages/MobileIDEView';
import MobileSketchView from './modules/Mobile/MobileSketchView';
+import MobilePreferences from './modules/Mobile/MobilePreferences';
import FullView from './modules/IDE/pages/FullView';
import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView';
@@ -58,6 +59,7 @@ const routes = store => (
+
);