Part of #18714 and #17670:set-approval-for-all-warnings (#19115)

* Changes to set-approval-for-all-warnings * Suggested changes * Updating deprecated components, improving semantic html and fixing text css strong tag styles --------- Co-authored-by: georgewrmarshall <[email protected]> Co-authored-by: Garrett Bear <[email protected]>
MetaMask · May 15, 2023 · 488f212 · 488f212
1 parent 05715dd
commit 488f212
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 33 deletions.
diff --git a/ui/components/app/set-approval-for-all-warning/index.scss b/ui/components/app/set-approval-for-all-warning/index.scss
@@ -13,10 +13,6 @@
     &__account {
       border-bottom: 1px solid var(--color-border-muted);
     }
-
-    &__bold {
-      color: var(--color-text-default);
-    }
   }
 
   &__footer {

diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js
@@ -4,19 +4,22 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 
 import Popover from '../../ui/popover';
 import Box from '../../ui/box';
-import Button from '../../ui/button';
-import Typography from '../../ui/typography';
+
 import {
   DISPLAY,
   FLEX_DIRECTION,
-  FONT_WEIGHT,
   JustifyContent,
-  TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import Identicon from '../../ui/identicon';
 import { shortenAddress } from '../../../helpers/utils/util';
-import { Icon, IconName } from '../../component-library';
+import {
+  Icon,
+  IconName,
+  Text,
+  Button,
+  BUTTON_VARIANT,
+} from '../../component-library';
 
 const SetApproveForAllWarning = ({
   collectionName,
@@ -35,17 +38,19 @@ const SetApproveForAllWarning = ({
       flexDirection={FLEX_DIRECTION.COLUMN}
       justifyContent={JustifyContent.SPACE_BETWEEN}
       className="set-approval-for-all-warning__footer"
+      gap={4}
     >
       <Button
         className="set-approval-for-all-warning__footer__approve-button"
-        type="danger-primary"
+        variant={BUTTON_VARIANT.PRIMARY}
+        danger
         onClick={onSubmit}
       >
         {t('approveButtonText')}
       </Button>
       <Button
         className="set-approval-for-all-warning__footer__cancel-button"
-        type="secondary"
+        variant={BUTTON_VARIANT.SECONDARY}
         onClick={onCancel}
       >
         {t('reject')}
@@ -65,12 +70,9 @@ const SetApproveForAllWarning = ({
           name={IconName.Danger}
           className="set-approval-for-all-warning__content__header__warning-icon"
         />
-        <Typography
-          variant={TypographyVariant.H4}
-          fontWeight={FONT_WEIGHT.BOLD}
-        >
+        <Text variant={TextVariant.headingSm} as="h4">
           {t('yourNFTmayBeAtRisk')}
-        </Typography>
+        </Text>
       </Box>
       <Box
         display={DISPLAY.FLEX}
@@ -80,38 +82,34 @@ const SetApproveForAllWarning = ({
       >
         <Box display={DISPLAY.FLEX}>
           <Identicon address={senderAddress} diameter={32} />
-          <Typography
-            variant={TypographyVariant.H5}
+          <Text
+            variant={TextVariant.bodyMd}
+            as="h5"
             marginLeft={2}
             className="set-approval-for-all-warning__content__account-name"
           >
-            <b>{name}</b> {` (${shortenAddress(senderAddress)})`}
-          </Typography>
+            <strong>{name}</strong> {` (${shortenAddress(senderAddress)})`}
+          </Text>
         </Box>
-        {isERC721 && total && (
-          <Typography>{`${t('total')}: ${total}`}</Typography>
-        )}
+        {isERC721 && total && <Text>{`${t('total')}: ${total}`}</Text>}
       </Box>
 
-      <Typography
-        color={TextColor.textAlternative}
+      <Text
         margin={4}
         marginTop={4}
         marginBottom={4}
-        variant={TypographyVariant.H6}
+        variant={TextVariant.bodySm}
+        as="h6"
       >
         {t('nftWarningContent', [
-          <strong
-            key="non_custodial_bold"
-            className="set-approval-for-all-warning__content__bold"
-          >
+          <strong key="non_custodial_bold">
             {t('nftWarningContentBold', [collectionName || ''])}
           </strong>,
           <strong key="non_custodial_grey">
             {t('nftWarningContentGrey')}
           </strong>,
         ])}
-      </Typography>
+      </Text>
     </Popover>
   );
 };

diff --git a/ui/components/component-library/text/text.scss b/ui/components/component-library/text/text.scss
@@ -33,7 +33,7 @@ $text-variants: (
   color: var(--color-text-default);
   font-family: var(--font-family-sans);
 
-  > strong {
+  strong {
     font-weight: var(--font-weight-bold);
   }