From 488f212d289467673b9859d25521f023ce7b312b Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Tue, 16 May 2023 04:10:00 +0530
Subject: [PATCH] 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 <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>
---
 .../set-approval-for-all-warning/index.scss   |  4 --
 .../set-approval-for-all-warning.js           | 54 +++++++++----------
 .../component-library/text/text.scss          |  2 +-
 3 files changed, 27 insertions(+), 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
index 4ff02eb4a..2fb96ffb7 100644
--- 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
index f5dfe26ee..c311eaeb2 100644
--- 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
index b6331d7e3..9726f7f2b 100644
--- 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);
   }