diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index 45a3d87d..5d82d3c7 100644
--- a/client/components/mobile/Footer.jsx
+++ b/client/components/mobile/Footer.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import { prop, remSize } from '../../theme';
-const background = prop('Panel.default.background');
+const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
const Footer = styled.div`
diff --git a/client/components/mobile/Header.jsx b/client/components/mobile/Header.jsx
index 04b336a2..445ef93e 100644
--- a/client/components/mobile/Header.jsx
+++ b/client/components/mobile/Header.jsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop, remSize } from '../../theme';
-const background = prop('Panel.default.background');
+const background = prop('MobilePanel.default.background');
const textColor = prop('primaryTextColor');
diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx
index 544612b4..08f05311 100644
--- a/client/components/mobile/IconButton.jsx
+++ b/client/components/mobile/IconButton.jsx
@@ -12,14 +12,20 @@ width: ${remSize(48)};
}
`;
-const IconButton = props => ();
+const IconButton = (props) => {
+ const { icon, ...otherProps } = props;
+ const Icon = icon;
+
+ return (}
+ kind={Button.kinds.inline}
+ focusable="false"
+ {...otherProps}
+ />);
+};
IconButton.propTypes = {
- children: PropTypes.element.isRequired
+ icon: PropTypes.func.isRequired
};
export default IconButton;
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
index 5046a4fe..9f429546 100644
--- a/client/modules/IDE/components/PreviewFrame.jsx
+++ b/client/modules/IDE/components/PreviewFrame.jsx
@@ -200,7 +200,6 @@ class PreviewFrame extends React.Component {
this.addLoopProtect(sketchDoc);
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
-
return `\n${sketchDoc.documentElement.outerHTML}`;
}
@@ -384,7 +383,7 @@ PreviewFrame.propTypes = {
clearConsole: PropTypes.func.isRequired,
cmController: PropTypes.shape({
getContent: PropTypes.func
- })
+ }),
};
PreviewFrame.defaultProps = {
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 016dc1b7..417a1f4a 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -18,9 +18,7 @@ import { getHTMLFile } from '../reducers/files';
// Local Imports
import Editor from '../components/Editor';
-import { ExitIcon } from '../../../common/icons';
-
-import { PreferencesIcon, PlayIcon } from '../../../common/icons';
+import { PreferencesIcon, PlayIcon, ExitIcon } from '../../../common/icons';
import IconButton from '../../../components/mobile/IconButton';
import Header from '../../../components/mobile/Header';
@@ -48,17 +46,16 @@ const MobileIDEView = (props) => {
title={project.name}
subtitle={selectedFile.name}
leftButton={
-
-
-
+
}
>
- setOverlay('preferences')}>
-
-
- { startSketch(); }}>
-
-
+ setOverlay('preferences')}
+ icon={PreferencesIcon}
+ aria-label="Open preferences menu"
+ />
+ { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx
index b7e530fe..ce91833b 100644
--- a/client/modules/Mobile/MobilePreferences.jsx
+++ b/client/modules/Mobile/MobilePreferences.jsx
@@ -22,12 +22,12 @@ const Content = styled.div`
const SettingsHeader = styled(Header)`
- background: transparent
+ background: transparent;
`;
const SectionHeader = styled.h2`
color: ${prop('primaryTextColor')};
- padding-top: ${remSize(32)}
+ padding-top: ${remSize(32)};
`;
const SectionSubeader = styled.h3`
@@ -161,16 +161,12 @@ const MobilePreferences = (props) => {
},
];
- // useEffect(() => { });
-
return (
-
-
-
+
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index f42a2382..4f20d6a3 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -51,9 +51,8 @@ const MobileSketchView = (props) => {
}
+
+ }
title={projectName}
/>
diff --git a/client/theme.js b/client/theme.js
index cc9cb48f..5dba9b88 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -89,7 +89,7 @@ export default {
default: grays.middleGray,
hover: grays.darker
},
- Panel: {
+ MobilePanel: {
default: {
foreground: colors.black,
background: grays.light,
@@ -128,7 +128,7 @@ export default {
default: grays.middleLight,
hover: grays.lightest
},
- Panel: {
+ MobilePanel: {
default: {
foreground: grays.light,
background: grays.dark,
@@ -167,7 +167,7 @@ export default {
default: grays.mediumLight,
hover: colors.yellow
},
- Panel: {
+ MobilePanel: {
default: {
foreground: grays.light,
background: grays.dark,