From b4c1b86d4d7f4187da7c44be26830a0bdf4d3bd2 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 1 Jul 2020 16:32:29 -0300
Subject: [PATCH] :ok_hand: improve IconButton implementation

---
 client/components/mobile/IconButton.jsx    | 18 ++++++++++++------
 client/modules/IDE/pages/IDEViewMobile.jsx | 16 ++++++++--------
 client/modules/Mobile/MobileSketchView.jsx |  2 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/components/mobile/IconButton.jsx b/client/components/mobile/IconButton.jsx
index 5c0b16a9..248dd014 100644
--- a/client/components/mobile/IconButton.jsx
+++ b/client/components/mobile/IconButton.jsx
@@ -11,14 +11,20 @@ width: 3rem;
 }
 `;
 
-const IconButton = props => (<ButtonWrapper
-  iconBefore={props.element}
-  kind={Button.kinds.inline}
-  {...props}
-/>);
+const IconButton = (props) => {
+  const { icon, ...otherProps } = props;
+  const Icon = icon;
+
+  return (<ButtonWrapper
+    iconBefore={<Icon />}
+    kind={Button.kinds.inline}
+    focusable="false"
+    {...otherProps}
+  />);
+};
 
 IconButton.propTypes = {
-  element: PropTypes.element.isRequired
+  icon: PropTypes.func.isRequired
 };
 
 export default IconButton;
diff --git a/client/modules/IDE/pages/IDEViewMobile.jsx b/client/modules/IDE/pages/IDEViewMobile.jsx
index 4008b817..9a638d60 100644
--- a/client/modules/IDE/pages/IDEViewMobile.jsx
+++ b/client/modules/IDE/pages/IDEViewMobile.jsx
@@ -20,9 +20,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';
@@ -53,17 +51,19 @@ const IDEViewMobile = (props) => {
   return (
     <Screen>
       <Header>
-        <IconButton to="/mobile" aria-label="Return to original editor">
-          <ExitIcon viewBox="0 0 16 16" />
-        </IconButton>
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
         <div style={{ marginLeft: '1rem' }}>
           <h2>{project.name}</h2>
           <h3>{selectedFile.name}</h3>
         </div>
 
         <IconContainer>
-          <IconButton onClick={() => setOverlay('preferences')} element={<PreferencesIcon focusable="false" aria-hidden="true" />} />
-          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} element={<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />} />
+          <IconButton
+            onClick={() => setOverlay('preferences')}
+            icon={PreferencesIcon}
+            aria-label="Open preferences menu"
+          />
+          <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </IconContainer>
       </Header>
 
diff --git a/client/modules/Mobile/MobileSketchView.jsx b/client/modules/Mobile/MobileSketchView.jsx
index cf956ec5..37dc5ba9 100644
--- a/client/modules/Mobile/MobileSketchView.jsx
+++ b/client/modules/Mobile/MobileSketchView.jsx
@@ -50,7 +50,7 @@ const MobileSketchView = (props) => {
   return (
     <Screen>
       <Header>
-        <IconButton to="/mobile" element={<ExitIcon />} width={12} height={12} aria-label="Return to original editor" />
+        <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
         <div style={{ marginLeft: '1rem' }}>
           <h2>{projectName}</h2>
           <h3><br /></h3>