👌 use common/Button component for IconButton

This commit is contained in:
ghalestrilo 2020-06-29 18:35:00 -03:00
parent 9ca0995461
commit 7d24c07fcc
2 changed files with 14 additions and 7 deletions

View file

@ -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;

View file

@ -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>