Refactor usage of design system components

MetaMask · Mar 21, 2023 · 8596057 · 8596057
1 parent 7d0344c
commit 8596057
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/ui/pages/settings/flask/snaps-list-tab/index.scss b/ui/pages/settings/flask/snaps-list-tab/index.scss
@@ -23,7 +23,7 @@
     max-width: 164px;
   }
 
-  .snap-list-tab__container--no-snaps_icon {
+  .snap-list-tab__no-snaps_icon {
     font-size: 48px;
   }
 }
diff --git a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
@@ -3,9 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import SnapSettingsCard from '../../../../components/app/flask/snap-settings-card';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import Typography from '../../../../components/ui/typography/typography';
 import {
-  TypographyVariant,
   JustifyContent,
   AlignItems,
   Color,
@@ -92,23 +90,19 @@ const SnapListTab = () => {
             justifyContent={JustifyContent.center}
             alignItems={AlignItems.center}
           >
-            <Typography
+            <Icon
+              name={ICON_NAMES.SNAPS}
+              color={Color.iconMuted}
+              className="snap-list-tab__no-snaps_icon"
+              size={ICON_SIZES.AUTO}
+            />
+            <Text
+              color={Color.textMuted}
               align={TEXT_ALIGN.CENTER}
-              className="snap-list-tab__container--no-snaps_icon"
+              marginTop={4}
             >
-              <Icon
-                name={ICON_NAMES.SNAPS}
-                color={Color.iconMuted}
-                className="no-snaps__icon"
-                size={ICON_SIZES.AUTO}
-              />
-            </Typography>
-            <Typography
-              variant={TypographyVariant.H4}
-              align={TEXT_ALIGN.CENTER}
-            >
-              <Text color={Color.textMuted}>{t('noSnaps')}</Text>
-            </Typography>
+              {t('noSnaps')}
+            </Text>
           </Box>
           <Box
             className="snap-list-tab__container--no-snaps_banner-tip"