16083: Fix deposit eth popover layout (#16100)

* 16083: Fix deposit eth popover layout

* adding responsive padding updates

* classname fix

* Add custom classname option

ui/components/app/app-components.scss

@@ -24,6 +24,7 @@
 @import 'connected-status-indicator/index';
 @import 'create-new-vault/create-new-vault.scss';
 @import 'custom-spending-cap/index';
+@import 'deposit-popover/index';
 @import 'edit-gas-display/index';
 @import 'edit-gas-display-education/index';
 @import 'edit-gas-fee-button/index';

ui/components/app/deposit-popover/deposit-popover.js

@@ -105,7 +105,9 @@ const DepositPopover = ({ onClose, token }) => {
       title={t('depositCrypto', [symbol])}
       subtitle={isTokenDeposit ? '' : t('needCryptoInWallet', [symbol])}
       onClose={onClose}
+      className="deposit-popover"
     >
+      <ul>
         <OnRampItem
           logo={<LogoCoinbasePay />}
           title={t('buyCryptoWithCoinbasePay', [symbol])}
@@ -219,6 +221,7 @@ const DepositPopover = ({ onClose, token }) => {
             hide={!isTestnet}
           />
         )}
+      </ul>
     </Popover>
   );
 };

ui/components/app/deposit-popover/index.scss

@@ -0,0 +1,16 @@
+.deposit-popover {
+  min-width: 328px;
+  max-width: 850px;
+
+  @include screen-md-min {
+    width: 100% !important;
+  }
+
+  &__on-ramp-item {
+    border-bottom: 1px solid var(--color-border-muted);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

ui/components/app/deposit-popover/on-ramp-item.js

@@ -1,11 +1,19 @@
 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 { COLORS, FRACTIONS } from '../../../helpers/constants/design-system';
+import {
+  ALIGN_ITEMS,
+  DISPLAY,
+  FLEX_WRAP,
+  BLOCK_SIZES,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
 
 const OnRampItem = ({
+  className,
   logo,
   title,
   text,
@@ -17,35 +25,50 @@ const OnRampItem = ({
     return null;
   }
   return (
-    <Box paddingRight={6} paddingLeft={6}>
+    <Box
+      className={classnames('deposit-popover__on-ramp-item', className)}
+      as="li"
+      marginRight={6}
+      marginLeft={6}
+    >
       <Box
         paddingTop={6}
         paddingBottom={6}
-        style={{
+        display={DISPLAY.FLEX}
-          borderBottomSize: '1px',
+        alignItems={ALIGN_ITEMS.CENTER}
-          borderBottomColor: COLORS.BORDER_MUTED,
+        flexWrap={FLEX_WRAP.WRAP}
-        }}
       >
-        <Box width={FRACTIONS.HALF}>{logo}</Box>
+        <Box
-        <Typography
+          width={[BLOCK_SIZES.HALF, BLOCK_SIZES.HALF, BLOCK_SIZES.ONE_FIFTH]}
-          variant="h6"
+          display={DISPLAY.FLEX}
-          fontWeight="bold"
+          justifyContent={[
-          boxProps={{
+            JUSTIFY_CONTENT.FLEX_START,
-            paddingTop: 2,
+            JUSTIFY_CONTENT.FLEX_START,
-            paddingBottom: 2,
+            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
+          <Typography>{text}</Typography>
-          boxProps={{
+        </Box>
-            paddingTop: 2,
+        <Box
-            paddingBottom: 2,
+          paddingLeft={[0, 0, 4]}
-          }}
+          paddingRight={[0, 0, 4]}
+          width={[BLOCK_SIZES.FULL, BLOCK_SIZES.FULL, BLOCK_SIZES.TWO_FIFTHS]}
+          paddingBottom={[2, 0]}
         >
-          {text}
-        </Typography>
-        <Box marginTop={4}>
           <Button type="secondary" onClick={onButtonClick}>
             {buttonLabel}
           </Button>
@@ -56,6 +79,7 @@ const OnRampItem = ({
 };
 
 OnRampItem.propTypes = {
+  className: PropTypes.string,
   logo: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,

ui/components/ui/box/box.js

@@ -330,6 +330,7 @@ Box.propTypes = {
   height: MultipleBlockSizes,
   backgroundColor: MultipleBackgroundColors,
   className: PropTypes.string,
+  style: PropTypes.object,
   /**
    * The polymorphic `as` prop allows you to change the root HTML element of the Box component
    * Defaults to 'div'