👌 use common/Button component for IconButton
This commit is contained in:
parent
9ca0995461
commit
7d24c07fcc
2 changed files with 14 additions and 7 deletions
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue