1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/deposit-popover/on-ramp-item.js
Garrett Bear 47f7096d35
16083: Fix deposit eth popover layout (#16100)
* 16083: Fix deposit eth popover layout

* adding responsive padding updates

* classname fix

* Add custom classname option
2022-10-12 16:07:28 -07:00

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;