16083: Fix deposit eth popover layout (#16100)

* 16083: Fix deposit eth popover layout * adding responsive padding updates * classname fix * Add custom classname option
2024-12-23 09:52:26 +01:00 · 2022-10-12 16:07:28 -07:00 · 2022-10-12 16:07:28 -07:00 · e7749470ae
commit e7749470ae
parent dd1b5cdf2a
5 changed files with 180 additions and 135 deletions
--- a/ui/components/app/app-components.scss
+++ b/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';
--- a/ui/components/app/deposit-popover/deposit-popover.js
+++ b/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
-        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 && (
+      <ul>
        <OnRampItem
-          logo={<i className="fa fa-tint fa-2x" />}
-          title={t('testFaucet')}
-          text={t('getEtherFromFaucet', [networkName])}
-          buttonLabel={t('getEther')}
-          onButtonClick={() => toFaucet()}
-          hide={!isTestnet}
+          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" />}
+            title={t('testFaucet')}
+            text={t('getEtherFromFaucet', [networkName])}
+            buttonLabel={t('getEther')}
+            onButtonClick={() => toFaucet()}
+            hide={!isTestnet}
+          />
+        )}
+      </ul>
    </Popover>
  );
 };
--- a/ui/components/app/deposit-popover/index.scss
+++ b/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;
+    }
+  }
+}
--- a/ui/components/app/deposit-popover/on-ramp-item.js
+++ b/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={{
-          borderBottomSize: '1px',
-          borderBottomColor: COLORS.BORDER_MUTED,
-        }}
+        display={DISPLAY.FLEX}
+        alignItems={ALIGN_ITEMS.CENTER}
+        flexWrap={FLEX_WRAP.WRAP}
      >
-        <Box width={FRACTIONS.HALF}>{logo}</Box>
-        <Typography
-          variant="h6"
-          fontWeight="bold"
-          boxProps={{
-            paddingTop: 2,
-            paddingBottom: 2,
-          }}
+        <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]}
        >
-          {title}
-        </Typography>
-        <Typography
-          boxProps={{
-            paddingTop: 2,
-            paddingBottom: 2,
-          }}
+          {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]}
        >
-          {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,
--- a/ui/components/ui/box/box.js
+++ b/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'