👌 use common/Button component for IconButton on screens

Author: ghalestrilo

client/components/mobile/Header.jsx

@@ -11,15 +11,20 @@ const Header = styled.div`
   background: ${background};
   color: ${textColor};
   padding: ${remSize(12)};
-  padding-left: ${remSize(32)};
-  padding-right: ${remSize(32)};
+  padding-left: ${remSize(16)};
+  padding-right: ${remSize(16)};
   z-index: 1;
 
   display: flex;
   flex: 1;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+
+  // TODO: 
+  svg {
+    height: 2rem;
+  }
 `;
 
 export default Header;

client/components/mobile/IconButton.jsx

@@ -7,14 +7,14 @@ const ButtonWrapper = styled(Button)`
 width: 3rem;
 > svg {
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 `;
 
-const IconButton = ({ children }) => (<ButtonWrapper
-  aria-label="Add to collection"
-  iconBefore={children}
+const IconButton = props => (<ButtonWrapper
+  iconBefore={props.children}
   kind={Button.kinds.inline}
+  {...{ ...props, children: null }}
 />);
 
 IconButton.propTypes = {

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -30,10 +30,13 @@ import Screen from '../../../components/mobile/MobileScreen';
 import Footer from '../../../components/mobile/Footer';
 import IDEWrapper from '../../../components/mobile/IDEWrapper';
 
-const IconLinkWrapper = styled(Link)`
-  width: 3rem;
-  margin-right: 1.25rem;
-  margin-left: none;
+const IconContainer = styled.div`
+  marginLeft: 2rem;
+  display: flex;
+`;
+
+const TitleContainer = styled.div`
+
 `;
 
 const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
@@ -53,30 +56,22 @@ const IDEViewMobile = (props) => {
   return (
     <Screen>
       <Header>
-        <IconLinkWrapper to="/" aria-label="Return to original editor">
-          <ExitIcon />
-        </IconLinkWrapper>
-        <div>
+        <IconButton to="/mobile" aria-label="Return to original editor">
+          <ExitIcon viewBox="0 0 16 16" />
+        </IconButton>
+        <div style={{ marginLeft: '1rem' }}>
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>
         </div>
 
-        <div style={{ marginLeft: '2rem', display: 'flex' }}>
+        <IconContainer>
           <IconButton onClick={() => setOverlay('preferences')}>
             <PreferencesIcon focusable="false" aria-hidden="true" />
           </IconButton>
-          <Link
-            to="/mobile/preview"
-            onClick={() => {
-              // alert('starting sketch');
-              startSketch();
-            }}
-          >
-            <IconButton>
-              <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
-            </IconButton>
-          </Link>
-        </div>
+          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }}>
+            <PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
+          </IconButton>
+        </IconContainer>
       </Header>
 
       <IDEWrapper>

client/modules/Mobile/MobileSketchView.jsx

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import Header from '../../components/mobile/Header';
+import IconButton from '../../components/mobile/IconButton';
 import PreviewFrame from '../IDE/components/PreviewFrame';
 import Screen from '../../components/mobile/MobileScreen';
 import * as ProjectActions from '../IDE/actions/project';
@@ -25,12 +26,6 @@ const Content = styled.div`
   margin-top: ${remSize(68)};
 `;
 
-const IconLinkWrapper = styled(Link)`
-  width: 2rem;
-  margin-right: 1.25rem;
-  margin-left: none;
-`;
-
 const MobileSketchView = (props) => {
   // TODO: useSelector requires react-redux ^7.1.0
   // const htmlFile = useSelector(state => getHTMLFile(state.files));
@@ -55,9 +50,9 @@ const MobileSketchView = (props) => {
   return (
     <Screen>
       <Header>
-        <IconLinkWrapper to="/mobile" aria-label="Return to original editor">
+        <IconButton to="/mobile" aria-label="Return to original editor">
           <ExitIcon viewBox="0 0 16 16" />
-        </IconLinkWrapper>
+        </IconButton>
         <div>
           <h2>{projectName}</h2>
           <h3><br /></h3>