Component and story updates

MetaMask · Jun 14, 2023 · ef03487 · ef03487
1 parent 2bdc355
commit ef03487
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 67 deletions.
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -32,7 +32,6 @@
 @import 'flask/experimental-area/index';
 @import 'snaps/snap-content-footer/index';
 @import 'snaps/snap-install-warning/index';
-@import 'snaps/snap-remove-warning/index';
 @import 'snaps/snap-ui-renderer/index';
 @import 'snaps/snap-ui-markdown/index';
 @import 'snaps/snap-delineator/index';

diff --git a/ui/components/app/snaps/snap-remove-warning/index.scss b/ui/components/app/snaps/snap-remove-warning/index.scss
diff --git a/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.js b/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.js
@@ -1,49 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { Text, Box, Button } from '../../../component-library';
-import { TextVariant } from '../../../../helpers/constants/design-system';
-import Popover from '../../../ui/popover';
+import {
+  Text,
+  Box,
+  Button,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
+} from '../../../component-library';
 
-export default function SnapRemoveWarning({ onCancel, onSubmit, snapName }) {
-  const t = useI18nContext();
-
-  const SnapRemoveWarningFooter = () => {
-    return (
-      <>
-        <Button
-          className="snap-remove-warning__footer-button"
-          type="default"
-          onClick={onCancel}
-        >
-          {t('nevermind')}
-        </Button>
-        <Button
-          id="popoverRemoveSnapButton"
-          className="snap-remove-warning__footer-button"
-          type="danger-primary"
-          onClick={onSubmit}
-        >
-          {t('removeSnap')}
-        </Button>
-      </>
-    );
-  };
+import {
+  BlockSize,
+  Display,
+  FlexDirection,
+  TextVariant,
+} from '../../../../helpers/constants/design-system';
 
+export default function SnapRemoveWarning({
+  isOpen,
+  onCancel,
+  onSubmit,
+  snapName,
+}) {
+  const t = useI18nContext();
   return (
-    <Popover
-      className="snap-remove-warning"
-      title={t('pleaseConfirm')}
-      footer={<SnapRemoveWarningFooter />}
-      onClose={onCancel}
-      headerProps={{ padding: [6, 4, 0, 6] }}
-    >
-      <Box paddingRight={4} paddingBottom={4} paddingLeft={6}>
-        <Text variant={TextVariant.headingSm} as="h4">
+    <Modal isOpen={isOpen} onClose={onCancel}>
+      <ModalOverlay />
+      <ModalContent
+        modalDialogProps={{
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+          gap: 4,
+        }}
+      >
+        <ModalHeader onClose={onCancel}>{t('pleaseConfirm')}</ModalHeader>
+        <Text variant={TextVariant.bodyLgMedium}>
           {t('removeSnapConfirmation', [snapName])}
         </Text>
-      </Box>
-    </Popover>
+        <Box width={BlockSize.Full} display={Display.Flex} gap={4}>
+          <Button
+            block
+            variant={BUTTON_VARIANT.SECONDARY}
+            size={BUTTON_SIZES.LG}
+            onClick={onCancel}
+          >
+            {t('nevermind')}
+          </Button>
+          <Button
+            block
+            size={BUTTON_SIZES.LG}
+            id="popoverRemoveSnapButton"
+            danger
+            onClick={onSubmit}
+          >
+            {t('removeSnap')}
+          </Button>
+        </Box>
+      </ModalContent>
+    </Modal>
   );
 }
 
@@ -60,4 +78,8 @@ SnapRemoveWarning.propTypes = {
    * Name of snap
    */
   snapName: PropTypes.string,
+  /**
+   * Whether the modal is open
+   */
+  isOpen: PropTypes.bool,
 };
diff --git a/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js b/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js
@@ -1,25 +1,29 @@
 import React from 'react';
-import SnapRemoveWarningFooter from './snap-remove-warning';
+import SnapRemoveWarning from './snap-remove-warning';
 
 export default {
-  title: 'Components/App/Snaps/SnapRemoveWarningFooter',
-  component: SnapRemoveWarningFooter,
+  title: 'Components/App/Snaps/SnapRemoveWarning',
+  component: SnapRemoveWarning,
   argTypes: {
     onCancel: {
-      control: 'onCancel',
+      action: 'onCancel',
     },
     onSubmit: {
-      control: 'onSubmit',
+      action: 'onSubmit',
     },
     snapName: {
       control: 'text',
     },
+    isOpen: {
+      control: 'boolean',
+    },
   },
   args: {
     snapName: 'Snap Name',
+    isOpen: true,
   },
 };
 
-export const DefaultStory = (args) => <SnapRemoveWarningFooter {...args} />;
+export const DefaultStory = (args) => <SnapRemoveWarning {...args} />;
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
@@ -11,7 +11,6 @@ const Paragraph = (props) => (
   <Text
     {...props}
     variant={TextVariant.bodySm}
-    as="h6"
     className="snap-ui-markdown__text"
     overflowWrap={OverflowWrap.BreakWord}
   />

diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -187,15 +187,14 @@ function ViewSnap() {
               {`${t('remove')} ${snapName}`}
             </Text>
           </Button>
-          {isShowingRemoveWarning && (
-            <SnapRemoveWarning
-              onCancel={() => setIsShowingRemoveWarning(false)}
-              onSubmit={async () => {
-                await dispatch(removeSnap(snap.id));
-              }}
-              snapName={snapName}
-            />
-          )}
+          <SnapRemoveWarning
+            isOpen={isShowingRemoveWarning}
+            onCancel={() => setIsShowingRemoveWarning(false)}
+            onSubmit={async () => {
+              await dispatch(removeSnap(snap.id));
+            }}
+            snapName={snapName}
+          />
         </Box>
       </Box>
     </Box>