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,120 +105,123 @@ const DepositPopover = ({ onClose, token }) => {
       title={t('depositCrypto', [symbol])}
       subtitle={isTokenDeposit ? '' : t('needCryptoInWallet', [symbol])}
       onClose={onClose}
+      className="deposit-popover"
     >
-      <OnRampItem
+      <ul>
-        logo={<LogoCoinbasePay />}
-        title={t('buyCryptoWithCoinbasePay', [symbol])}
-        text={t('buyCryptoWithCoinbasePayDescription', [symbol])}
-        buttonLabel={t('continueToCoinbasePay')}
-        onButtonClick={() => {
-          trackEvent({
-            category: EVENT.CATEGORIES.ACCOUNTS,
-            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
-            properties: {
-              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.COINBASE,
-            },
-          });
-          toCoinbasePay();
-        }}
-        hide={
-          isTokenDeposit
-            ? !isBuyableCoinbasePayChain || !isTokenBuyableCoinbasePay
-            : !isBuyableCoinbasePayChain
-        }
-      />
-      <OnRampItem
-        logo={<LogoTransak />}
-        title={t('buyCryptoWithTransak', [symbol])}
-        text={t('buyCryptoWithTransakDescription', [symbol])}
-        buttonLabel={t('continueToTransak')}
-        onButtonClick={() => {
-          trackEvent({
-            category: EVENT.CATEGORIES.ACCOUNTS,
-            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
-            properties: {
-              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.TRANSAK,
-            },
-          });
-          toTransak();
-        }}
-        hide={
-          isTokenDeposit
-            ? !isBuyableTransakChain || !isTokenBuyableTransak
-            : !isBuyableTransakChain
-        }
-      />
-      <OnRampItem
-        logo={<LogoMoonPay />}
-        title={t('buyCryptoWithMoonPay', [symbol])}
-        text={t('buyCryptoWithMoonPayDescription', [symbol])}
-        buttonLabel={t('continueToMoonPay')}
-        onButtonClick={() => {
-          trackEvent({
-            category: EVENT.CATEGORIES.ACCOUNTS,
-            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
-            properties: {
-              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.MOONPAY,
-            },
-          });
-          toMoonPay();
-        }}
-        hide={
-          isTokenDeposit
-            ? !isBuyableMoonPayChain || !isTokenBuyableMoonpay
-            : !isBuyableMoonPayChain
-        }
-      />
-      <OnRampItem
-        logo={<LogoWyre />}
-        title={t('buyWithWyre', [symbol])}
-        text={t('buyWithWyreDescription', [symbol])}
-        buttonLabel={t('continueToWyre')}
-        onButtonClick={() => {
-          trackEvent({
-            category: EVENT.CATEGORIES.ACCOUNTS,
-            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
-            properties: {
-              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.WYRE,
-            },
-          });
-          toWyre();
-        }}
-        hide={
-          isTokenDeposit
-            ? !isBuyableWyreChain || !isTokenBuyableWyre
-            : !isBuyableWyreChain
-        }
-      />
-
-      <OnRampItem
-        logo={<LogoDepositEth width="50px" />}
-        title={t('directDepositCrypto', [symbol])}
-        text={t('directDepositCryptoExplainer', [symbol])}
-        buttonLabel={t('viewAccount')}
-        onButtonClick={() => {
-          trackEvent({
-            category: EVENT.CATEGORIES.ACCOUNTS,
-            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
-            properties: {
-              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.SELF_DEPOSIT,
-            },
-          });
-          goToAccountDetailsModal();
-        }}
-        hide={isTokenDeposit || !isBuyableWyreChain}
-      />
-
-      {networkName && (
         <OnRampItem
-          logo={<i className="fa fa-tint fa-2x" />}
+          logo={<LogoCoinbasePay />}
-          title={t('testFaucet')}
+          title={t('buyCryptoWithCoinbasePay', [symbol])}
-          text={t('getEtherFromFaucet', [networkName])}
+          text={t('buyCryptoWithCoinbasePayDescription', [symbol])}
-          buttonLabel={t('getEther')}
+          buttonLabel={t('continueToCoinbasePay')}
-          onButtonClick={() => toFaucet()}
+          onButtonClick={() => {
-          hide={!isTestnet}
+            trackEvent({
+              category: EVENT.CATEGORIES.ACCOUNTS,
+              event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
+              properties: {
+                onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.COINBASE,
+              },
+            });
+            toCoinbasePay();
+          }}
+          hide={
+            isTokenDeposit
+              ? !isBuyableCoinbasePayChain || !isTokenBuyableCoinbasePay
+              : !isBuyableCoinbasePayChain
+          }
         />
-      )}
+        <OnRampItem
+          logo={<LogoTransak />}
+          title={t('buyCryptoWithTransak', [symbol])}
+          text={t('buyCryptoWithTransakDescription', [symbol])}
+          buttonLabel={t('continueToTransak')}
+          onButtonClick={() => {
+            trackEvent({
+              category: EVENT.CATEGORIES.ACCOUNTS,
+              event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
+              properties: {
+                onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.TRANSAK,
+              },
+            });
+            toTransak();
+          }}
+          hide={
+            isTokenDeposit
+              ? !isBuyableTransakChain || !isTokenBuyableTransak
+              : !isBuyableTransakChain
+          }
+        />
+        <OnRampItem
+          logo={<LogoMoonPay />}
+          title={t('buyCryptoWithMoonPay', [symbol])}
+          text={t('buyCryptoWithMoonPayDescription', [symbol])}
+          buttonLabel={t('continueToMoonPay')}
+          onButtonClick={() => {
+            trackEvent({
+              category: EVENT.CATEGORIES.ACCOUNTS,
+              event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
+              properties: {
+                onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.MOONPAY,
+              },
+            });
+            toMoonPay();
+          }}
+          hide={
+            isTokenDeposit
+              ? !isBuyableMoonPayChain || !isTokenBuyableMoonpay
+              : !isBuyableMoonPayChain
+          }
+        />
+        <OnRampItem
+          logo={<LogoWyre />}
+          title={t('buyWithWyre', [symbol])}
+          text={t('buyWithWyreDescription', [symbol])}
+          buttonLabel={t('continueToWyre')}
+          onButtonClick={() => {
+            trackEvent({
+              category: EVENT.CATEGORIES.ACCOUNTS,
+              event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
+              properties: {
+                onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.WYRE,
+              },
+            });
+            toWyre();
+          }}
+          hide={
+            isTokenDeposit
+              ? !isBuyableWyreChain || !isTokenBuyableWyre
+              : !isBuyableWyreChain
+          }
+        />
+
+        <OnRampItem
+          logo={<LogoDepositEth width="50px" />}
+          title={t('directDepositCrypto', [symbol])}
+          text={t('directDepositCryptoExplainer', [symbol])}
+          buttonLabel={t('viewAccount')}
+          onButtonClick={() => {
+            trackEvent({
+              category: EVENT.CATEGORIES.ACCOUNTS,
+              event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
+              properties: {
+                onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.SELF_DEPOSIT,
+              },
+            });
+            goToAccountDetailsModal();
+          }}
+          hide={isTokenDeposit || !isBuyableWyreChain}
+        />
+
+        {networkName && (
+          <OnRampItem
+            logo={<i className="fa fa-tint fa-2x" />}
+            title={t('testFaucet')}
+            text={t('getEtherFromFaucet', [networkName])}
+            buttonLabel={t('getEther')}
+            onButtonClick={() => toFaucet()}
+            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]}
         >
-          {title}
+          {logo}
-        </Typography>
+        </Box>
-        <Typography
+        <Box
-          boxProps={{
+          width={[BLOCK_SIZES.FULL, BLOCK_SIZES.FULL, BLOCK_SIZES.TWO_FIFTHS]}
-            paddingTop: 2,
+          paddingLeft={[0, 0, 4]}
-            paddingBottom: 2,
+          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]}
         >
-          {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

@@ -318,6 +318,7 @@ Box.propTypes = {
   ]),
   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'