Updating deprecated code and using design system components (#19562)

ui/components/app/snaps/install-error/install-error.js

@@ -1,27 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '../../../ui/box/box';
+
 import {
   AlignItems,
   BackgroundColor,
-  BLOCK_SIZES,
-  FLEX_DIRECTION,
-  FONT_WEIGHT,
+  BlockSize,
   IconColor,
   JustifyContent,
   TextAlign,
   TextVariant,
+  FlexDirection,
+  Display,
+  Severity,
 } from '../../../../helpers/constants/design-system';
-import ActionableMessage from '../../../ui/actionable-message/actionable-message';
-import { AvatarIcon, IconSize, Text } from '../../../component-library';
+
+import {
+  AvatarIcon,
+  IconSize,
+  Text,
+  Box,
+  BannerAlert,
+} from '../../../component-library';
 
 const InstallError = ({ title, error, description, iconName }) => {
   return (
     <Box
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.center}
-      height={BLOCK_SIZES.FULL}
+      height={BlockSize.Full}
       padding={2}
     >
       {iconName && (
@@ -36,14 +44,16 @@ const InstallError = ({ title, error, description, iconName }) => {
           marginBottom={4}
         />
       )}
-      <Text fontWeight={FONT_WEIGHT.BOLD} variant={TextVariant.headingLg}>
-        {title}
-      </Text>
+      <Text variant={TextVariant.headingLg}>{title}</Text>
       {description && <Text textAlign={TextAlign.Center}>{description}</Text>}
       {error && (
-        <Box padding={2}>
-          <ActionableMessage type="danger" message={error} />
-        </Box>
+        <BannerAlert
+          marginTop={4}
+          startAccessory={null}
+          severity={Severity.Danger}
+        >
+          <Text variant={TextVariant.bodySm}>{error}</Text>
+        </BannerAlert>
       )}
     </Box>
   );

ui/components/app/snaps/install-error/install-error.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconName } from '../../../component-library';
+import InstallError from './install-error';
+
+export default {
+  title: 'Components/App/Snaps/InstallError',
+  component: InstallError,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    error: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    iconName: {
+      control: 'text',
+    },
+  },
+  args: {
+    title: 'Connection failed',
+    error:
+      'Failed to fetch Snap "npm:metamask/test-snap-error: Failed to fetch',
+    description:
+      'Fecthing of Error Test Snap failed, check you network and try again.',
+    iconName: IconName.Warning,
+  },
+};
+
+export const DefaultStory = (args) => <InstallError {...args} />;
+DefaultStory.storyName = 'Default';

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js

@@ -3,15 +3,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getSnapPrefix } from '@metamask/snaps-utils';
 import { useSelector } from 'react-redux';
-import Box from '../../../ui/box';
 import {
   BackgroundColor,
   TextColor,
-  FLEX_DIRECTION,
+  FlexDirection,
   TextVariant,
   AlignItems,
-  DISPLAY,
-  BLOCK_SIZES,
+  Display,
+  BlockSize,
   FontWeight,
 } from '../../../../helpers/constants/design-system';
 import {
@@ -19,7 +18,7 @@ import {
   removeSnapIdPrefix,
 } from '../../../../helpers/utils/util';
 
-import { Text } from '../../../component-library';
+import { Text, Box } from '../../../component-library';
 import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 import SnapVersion from '../snap-version/snap-version';
@@ -50,9 +49,9 @@ const SnapAuthorshipHeader = ({
     <Box
       className={classnames('snaps-authorship-header', className)}
       backgroundColor={BackgroundColor.backgroundDefault}
-      width={BLOCK_SIZES.FULL}
+      width={BlockSize.Full}
       alignItems={AlignItems.center}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       padding={4}
       style={{
         boxShadow,
@@ -64,8 +63,8 @@ const SnapAuthorshipHeader = ({
       <Box
         marginLeft={4}
         marginRight={4}
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         style={{ overflow: 'hidden' }}
       >
         <Text ellipsis fontWeight={FontWeight.Medium}>

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.stories.js

@@ -3,7 +3,6 @@ import SnapAuthorshipHeader from './snap-authorship-header';
 
 export default {
   title: 'Components/App/Snaps/SnapAuthorshipHeader',
-
   component: SnapAuthorshipHeader,
   argTypes: {
     snapId: {

ui/components/app/snaps/snap-avatar/snap-avatar.js

@@ -6,7 +6,7 @@ import {
   TextColor,
   IconColor,
   AlignItems,
-  DISPLAY,
+  Display,
   JustifyContent,
   BackgroundColor,
 } from '../../../../helpers/constants/design-system';
@@ -62,7 +62,7 @@ const SnapAvatar = ({
       ) : (
         <AvatarBase
           size={avatarSize}
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
           color={TextColor.textAlternative}