🔀 merge from develop

Author: ghalestrilo

client/common/icons.jsx

@@ -13,6 +13,9 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Code from '../images/code.svg';
+import Terminal from '../images/terminal.svg';
+
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -76,3 +79,4 @@ export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
+export const TerminalIcon = withLabel(Terminal);

client/components/OverlayManager.jsx

@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom';
 
 import Dropdown from './Dropdown';
 
-
 import { PreferencesIcon } from '../common/icons';
 
 const OverlayManager = ({ overlay, hideOverlay }) => {
@@ -47,13 +46,8 @@ const OverlayManager = ({ overlay, hideOverlay }) => {
   return jsx && createPortal(jsx, document.body);
 };
 
-// const refPropType = PropTypes.oneOfType([
-//   PropTypes.func,
-//   PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-// ]);
 
 OverlayManager.propTypes = {
-  // ref: refPropType.isRequired,
   overlay: PropTypes.string,
   hideOverlay: PropTypes.func.isRequired,
 };

client/components/mobile/ActionStrip.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { bindActionCreators } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { remSize } from '../../theme';
+import IconButton from './IconButton';
+import { TerminalIcon } from '../../common/icons';
+import * as IDEActions from '../../modules/IDE/actions/ide';
+
+const BottomBarContent = styled.h2`
+  padding: ${remSize(8)};
+  
+  svg {
+    max-height: ${remSize(32)};
+  }
+`;
+
+export default () => {
+  const { expandConsole, collapseConsole } = bindActionCreators(IDEActions, useDispatch());
+  const { consoleIsExpanded } = useSelector(state => state.ide);
+
+  const actions = [{ icon: TerminalIcon, aria: 'Say Something', action: consoleIsExpanded ? collapseConsole : expandConsole }];
+
+  return (
+    <BottomBarContent>
+      {actions.map(({ icon, aria, action }) =>
+        (<IconButton
+          icon={icon}
+          aria-label={aria}
+          key={`bottom-bar-${aria}`}
+          onClick={() => action()}
+        />))}
+    </BottomBarContent>
+  );
+};

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')} }
 `;

client/components/mobile/Header.jsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { prop, remSize } from '../../theme';
 
-const background = prop('MobilePanel.default.background');
+const background = transparent => prop(transparent ? 'backgroundColor' : 'MobilePanel.default.background');
 const textColor = prop('primaryTextColor');
 
 
 const HeaderDiv = styled.div`
   position: fixed;
   width: 100%;
-  background: ${props => (props.transparent ? 'transparent' : background)};
+  background: ${props => background(props.transparent === true)};
   color: ${textColor};
   padding: ${remSize(12)};
   padding-left: ${remSize(16)};
@@ -23,7 +23,6 @@ const HeaderDiv = styled.div`
   justify-content: flex-start;
   align-items: center;
 
-  // TODO: 
   svg {
     max-height: ${remSize(32)};
     padding: ${remSize(4)}