mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
47f7096d35
* 16083: Fix deposit eth popover layout * adding responsive padding updates * classname fix * Add custom classname option
92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import Button from '../../ui/button';
|
|
import Box from '../../ui/box';
|
|
import Typography from '../../ui/typography';
|
|
import {
|
|
ALIGN_ITEMS,
|
|
DISPLAY,
|
|
FLEX_WRAP,
|
|
BLOCK_SIZES,
|
|
JUSTIFY_CONTENT,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
const OnRampItem = ({
|
|
className,
|
|
logo,
|
|
title,
|
|
text,
|
|
buttonLabel,
|
|
onButtonClick,
|
|
hide = false,
|
|
}) => {
|
|
if (hide) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Box
|
|
className={classnames('deposit-popover__on-ramp-item', className)}
|
|
as="li"
|
|
marginRight={6}
|
|
marginLeft={6}
|
|
>
|
|
<Box
|
|
paddingTop={6}
|
|
paddingBottom={6}
|
|
display={DISPLAY.FLEX}
|
|
alignItems={ALIGN_ITEMS.CENTER}
|
|
flexWrap={FLEX_WRAP.WRAP}
|
|
>
|
|
<Box
|
|
width={[BLOCK_SIZES.HALF, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_FIFTH]}
|
|
display={DISPLAY.FLEX}
|
|
justifyContent={[
|
|
JUSTIFY_CONTENT.FLEX_START,
|
|
JUSTIFY_CONTENT.FLEX_START,
|
|
JUSTIFY_CONTENT.CENTER,
|
|
]}
|
|
paddingLeft={[0, 0, 4]}
|
|
paddingRight={[0, 0, 4]}
|
|
paddingBottom={[2, 0]}
|
|
>
|
|
{logo}
|
|
</Box>
|
|
<Box
|
|
width={[BLOCK_SIZES.FULL, BLOCK_SIZES.FULL, BLOCK_SIZES.TWO_FIFTHS]}
|
|
paddingLeft={[0, 0, 4]}
|
|
paddingRight={[0, 0, 4]}
|
|
paddingBottom={[2, 0]}
|
|
>
|
|
<Typography variant="h6" fontWeight="bold">
|
|
{title}
|
|
</Typography>
|
|
<Typography>{text}</Typography>
|
|
</Box>
|
|
<Box
|
|
paddingLeft={[0, 0, 4]}
|
|
paddingRight={[0, 0, 4]}
|
|
width={[BLOCK_SIZES.FULL, BLOCK_SIZES.FULL, BLOCK_SIZES.TWO_FIFTHS]}
|
|
paddingBottom={[2, 0]}
|
|
>
|
|
<Button type="secondary" onClick={onButtonClick}>
|
|
{buttonLabel}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
OnRampItem.propTypes = {
|
|
className: PropTypes.string,
|
|
logo: PropTypes.node.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
buttonLabel: PropTypes.string.isRequired,
|
|
onButtonClick: PropTypes.func.isRequired,
|
|
hide: PropTypes.bool,
|
|
};
|
|
|
|
export default OnRampItem;
|