diff --git a/client/components/mobile/ActionStrip.jsx b/client/components/mobile/ActionStrip.jsx
new file mode 100644
index 00000000..27097b64
--- /dev/null
+++ b/client/components/mobile/ActionStrip.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { bindActionCreators } from 'redux';
+import { useDispatch } from 'react-redux';
+import { prop, remSize } from '../../theme';
+import IconButton from './IconButton';
+import { ExitIcon } from '../../common/icons';
+import * as IDEActions from '../../modules/IDE/actions/ide';
+
+const background = prop('MobilePanel.default.background');
+const textColor = prop('primaryTextColor');
+
+const BottomBarContent = styled.h2`
+ padding: ${remSize(12)};
+
+ svg {
+ max-height: ${remSize(32)};
+ padding: ${remSize(4)}
+ }
+`;
+
+export default () => {
+ const { expandConsole } = bindActionCreators(IDEActions, useDispatch());
+
+ const actions = [{ icon: ExitIcon, aria: 'Say Something', action: expandConsole }];
+
+ return (
+
+ {actions.map(({ icon, aria, action }) =>
+ ( action()}
+ />))}
+
+ );
+};
diff --git a/client/components/mobile/Footer.jsx b/client/components/mobile/Footer.jsx
index 25f10c1d..ff19eee1 100644
--- a/client/components/mobile/Footer.jsx
+++ b/client/components/mobile/Footer.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
-import { prop } from '../../theme';
+import { prop, grays } from '../../theme';
const background = prop('MobilePanel.default.background');
@@ -12,4 +12,6 @@ export default styled.div`
bottom: 0;
background: ${background};
color: ${textColor};
+
+ & > * + * { border-top: dashed 1px ${prop('Separator')} }
`;
diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 943c980e..43851092 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -28,12 +28,13 @@ import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper';
import Console from '../components/Console';
import { remSize } from '../../../theme';
+import ActionStrip from '../../../components/mobile/ActionStrip';
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
-const BottomBarContent = styled.h2`
- padding: ${remSize(12)};
- padding-left: ${remSize(32)};
+
+const Expander = styled.div`
+ height: ${props => (props.expanded ? remSize(160) : remSize(27))};
`;
const MobileIDEView = (props) => {
@@ -103,8 +104,8 @@ const MobileIDEView = (props) => {
/>
);
diff --git a/client/theme.js b/client/theme.js
index 4aee2a09..45f2772e 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -96,7 +96,8 @@ export default {
background: grays.light,
border: grays.middleLight,
},
- }
+ },
+ Separator: grays.middleLight,
},
[Theme.dark]: {
colors,
@@ -136,7 +137,8 @@ export default {
background: grays.dark,
border: grays.middleDark,
},
- }
+ },
+ Separator: grays.middleDark,
},
[Theme.contrast]: {
colors,
@@ -176,6 +178,7 @@ export default {
background: grays.dark,
border: grays.middleDark,
},
- }
+ },
+ Separator: grays.middleDark,
},
};