👌 use common/Button component for IconButton

Author: ghalestrilo

client/components/mobile/IconButton.jsx

@@ -1,17 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { prop, remSize } from '../../theme';
+import Button from '../../common/Button';
 
-const textColor = prop('primaryTextColor');
-
-const IconButton = styled.button`
+const ButtonWrapper = styled(Button)`
 width: 3rem;
 > svg {
   width: 100%;
   height: auto;
-  fill: ${textColor};
-  stroke: ${textColor};
 }
 `;
 
+const IconButton = ({ children }) => (<ButtonWrapper
+  aria-label="Add to collection"
+  iconBefore={children}
+  kind={Button.kinds.inline}
+/>);
+
+IconButton.propTypes = {
+  children: PropTypes.element.isRequired
+};
+
 export default IconButton;

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -61,7 +61,7 @@ const IDEViewMobile = (props) => {
           <h3>{selectedFile.name}</h3>
         </div>
 
-        <div style={{ marginLeft: '2rem' }}>
+        <div style={{ marginLeft: '2rem', display: 'flex' }}>
           <IconButton onClick={() => setOverlay('preferences')}>
             <PreferencesIcon focusable="false" aria-hidden="true" />
           </IconButton>