diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index 2719768595ea..36f4a5daeef8 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -31,7 +31,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
deleted file mode 100644
index c2a561dadac1..000000000000
--- a/ui/components/app/snaps/snap-remove-warning/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.snap-remove-warning {
- color: var(--color-text-default);
-
- &__footer-button {
- height: 40px;
- margin-inline-end: 24px;
-
- &:last-of-type {
- margin-inline-end: 0;
- }
- }
-}
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
index cffa7ca30203..593cf1c3bc6d 100644
--- 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,51 +1,64 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
-import Typography from '../../../ui/typography/typography';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
-import Box from '../../../ui/box/box';
-import Popover from '../../../ui/popover';
-import Button from '../../../ui/button';
+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 (
- <>
-
-
- >
- );
- };
+import {
+ BlockSize,
+ Display,
+ FlexDirection,
+} from '../../../../helpers/constants/design-system';
+export default function SnapRemoveWarning({
+ isOpen,
+ onCancel,
+ onSubmit,
+ snapName,
+}) {
+ const t = useI18nContext();
return (
- }
- onClose={onCancel}
- headerProps={{ padding: [6, 4, 0, 6] }}
- >
-
-
- {t('removeSnapConfirmation', [snapName])}
-
-
-
+
+
+
+ {t('pleaseConfirm')}
+ {t('removeSnapConfirmation', [snapName])}
+
+
+
+
+
+
);
}
@@ -62,4 +75,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
new file mode 100644
index 000000000000..c38ef8113670
--- /dev/null
+++ b/ui/components/app/snaps/snap-remove-warning/snap-remove-warning.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import SnapRemoveWarning from './snap-remove-warning';
+
+export default {
+ title: 'Components/App/Snaps/SnapRemoveWarning',
+ component: SnapRemoveWarning,
+ argTypes: {
+ onCancel: {
+ action: 'onCancel',
+ },
+ onSubmit: {
+ action: 'onSubmit',
+ },
+ snapName: {
+ control: 'text',
+ },
+ isOpen: {
+ control: 'boolean',
+ },
+ },
+ args: {
+ snapName: 'Snap Name',
+ isOpen: true,
+ },
+};
+
+export const DefaultStory = (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
index 9d03f71938c3..10932993a859 100644
--- a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
+++ b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.js
@@ -2,17 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import {
- TypographyVariant,
- OVERFLOW_WRAP,
+ TextVariant,
+ OverflowWrap,
} from '../../../../helpers/constants/design-system';
-import Typography from '../../../ui/typography/typography';
+import { Text } from '../../../component-library';
const Paragraph = (props) => (
-
);
diff --git a/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js
new file mode 100644
index 000000000000..e936fb248975
--- /dev/null
+++ b/ui/components/app/snaps/snap-ui-markdown/snap-ui-markdown.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { SnapUIMarkdown } from './snap-ui-markdown';
+
+export default {
+ title: 'Components/App/Snaps/SnapUIMarkdown',
+ component: SnapUIMarkdown,
+ argTypes: {
+ children: {
+ control: 'text',
+ },
+ },
+ args: {
+ children: 'A Test String',
+ },
+};
+
+export const DefaultStory = (args) => ;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
index 6843799fb371..b21dcf169d58 100644
--- a/ui/pages/settings/snaps/view-snap/view-snap.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -189,15 +189,14 @@ function ViewSnap() {
{`${t('remove')} ${snapName}`}
- {isShowingRemoveWarning && (
- setIsShowingRemoveWarning(false)}
- onSubmit={async () => {
- await dispatch(removeSnap(snap.id));
- }}
- snapName={snapName}
- />
- )}
+ setIsShowingRemoveWarning(false)}
+ onSubmit={async () => {
+ await dispatch(removeSnap(snap.id));
+ }}
+ snapName={snapName}
+ />