Fix modal upgrade plan

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-07-02 12:26:34 +02:00 committed by Alexandre Bodin
parent 30bf4c2503
commit 4c62a406c7
3 changed files with 17 additions and 8 deletions

View File

@ -16,7 +16,7 @@ const UpgradePlanModal = ({ isOpen, onToggle }) => {
};
return (
<Modal isOpen={isOpen} onToggle={onToggle} shouldDisplayCloseButton={false}>
<Modal isOpen={isOpen} onToggle={onToggle} closeButtonColor="#fff">
<Wrapper>
<Padded>
<Option />
@ -43,7 +43,7 @@ const UpgradePlanModal = ({ isOpen, onToggle }) => {
</Text>
</Padded>
<Padded top size="md">
<Button color="primary" onClick={handleClick}>
<Button color="primary" onClick={handleClick} style={{ paddingRight: 0 }}>
{formatMessage({ id: 'app.components.UpgradePlanModal.button' })}
<Download />
</Button>

View File

@ -32,7 +32,12 @@ const HeaderModal = styled(ModalHeader)`
position: absolute;
top: 24px;
right: 30px;
fill: #c3c5c8;
fill: ${({ closeButtonColor }) => closeButtonColor};
}
`;
HeaderModal.defaultProps = {
closeButtonColor: '#c3c5c8',
};
export default HeaderModal;

View File

@ -12,12 +12,16 @@ import Wrapper from './Wrapper';
import Close from '../../svgs/Close';
function WrapperModal({ children, isOpen, onToggle, shouldDisplayCloseButton, ...rest }) {
function WrapperModal({ children, isOpen, onToggle, closeButtonColor, ...rest }) {
return (
<Wrapper>
<StyledModal isOpen={isOpen} toggle={onToggle} {...rest}>
<HeaderModal toggle={onToggle} style={{ display: 'none' }} />
{shouldDisplayCloseButton && <Close onClick={onToggle} style={{ cursor: 'pointer' }} />}
<HeaderModal
toggle={onToggle}
style={{ display: 'none' }}
closeButtonColor={closeButtonColor}
/>
<Close onClick={onToggle} style={{ cursor: 'pointer' }} />
{children}
</StyledModal>
</Wrapper>
@ -26,14 +30,14 @@ function WrapperModal({ children, isOpen, onToggle, shouldDisplayCloseButton, ..
WrapperModal.defaultProps = {
children: null,
shouldDisplayCloseButton: true,
closeButtonColor: '#c3c5c8',
};
WrapperModal.propTypes = {
children: PropTypes.node,
closeButtonColor: PropTypes.string,
isOpen: PropTypes.bool.isRequired,
onToggle: PropTypes.func.isRequired,
shouldDisplayCloseButton: PropTypes.bool,
};
export default memo(WrapperModal);