From 898adb35c6c1c90948e562dff8f7cee1f4e1ab6b Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Fri, 23 Aug 2024 16:27:56 +0200
Subject: [PATCH 1/6] Add updates to Snaps custom UI

Update unit test snapshots

Fix lint issue

Update background and border

Update unit test snapshot

Update file upload UI

Update and fix few more Snap custom UI things

Update unit test snapshots after snap header fix

Add background color handling adjustments

Fix and resolve conflicts after rebase

Refactor confirmation.js changes

Remove empty box

Update unit test snapshots

Fix background issue on Snap custom UI page

Update unit test snapshots after new changes
---
 .../connected-sites-list/connected-snaps.js   |  8 +--
 ui/components/app/snaps/copyable/copyable.js  |  3 +
 .../snap-authorship-header.js                 | 36 ++--------
 ui/components/app/snaps/snap-avatar/index.js  |  1 -
 .../app/snaps/snap-avatar/snap-avatar.js      | 67 -------------------
 .../snaps/snap-avatar/snap-avatar.stories.js  | 21 ------
 .../snap-connect-cell/snap-connect-cell.js    |  4 +-
 .../snap-home-page/snap-home-renderer.js      | 11 ++-
 .../snap-legacy-authorship-header.js          |  4 +-
 .../snaps/snap-list-item/snap-list-item.js    |  4 +-
 .../snap-metadata-modal.js                    |  4 +-
 .../snap-ui-checkbox/snap-ui-checkbox.tsx     |  4 ++
 .../snap-ui-dropdown/snap-ui-dropdown.tsx     |  3 +
 .../snap-ui-file-input/snap-ui-file-input.tsx |  4 +-
 .../snap-ui-renderer/components/container.ts  |  3 +
 .../snap-ui-renderer/components/footer.ts     |  2 +-
 .../app/snaps/snap-ui-renderer/index.scss     |  4 ++
 .../snap-ui-renderer/snap-ui-renderer.js      |  8 ++-
 .../notification-list-item-snap.tsx           |  8 +--
 .../permissions-page/connection-list-item.js  |  6 +-
 .../__snapshots__/snaps-section.test.tsx.snap |  2 +
 .../confirmation/confirmation.js              | 14 +++-
 .../create-snap-account.test.js.snap          | 37 ++--------
 .../remove-snap-account.test.js.snap          | 37 ++--------
 .../snap-account-redirect.test.js.snap        | 35 ++--------
 .../snaps/snaps-connect/snaps-connect.js      |  9 +--
 .../create-snap-redirect.test.tsx.snap        | 37 ++--------
 ui/pages/snaps/snap-view/snap-home.js         |  4 +-
 ui/pages/snaps/snap-view/snap-view.js         |  7 +-
 29 files changed, 105 insertions(+), 282 deletions(-)
 delete mode 100644 ui/components/app/snaps/snap-avatar/index.js
 delete mode 100644 ui/components/app/snaps/snap-avatar/snap-avatar.js
 delete mode 100644 ui/components/app/snaps/snap-avatar/snap-avatar.stories.js

diff --git a/ui/components/app/connected-sites-list/connected-snaps.js b/ui/components/app/connected-sites-list/connected-snaps.js
index 9d723cf1a43e..83de2cc2fc96 100644
--- a/ui/components/app/connected-sites-list/connected-snaps.js
+++ b/ui/components/app/connected-sites-list/connected-snaps.js
@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MenuItem } from '../../ui/menu';
-import SnapAvatar from '../snaps/snap-avatar';
 import {
   AlignItems,
   BlockSize,
@@ -18,6 +17,7 @@ import ConnectedAccountsListOptions from '../connected-accounts-list/connected-a
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { disconnectOriginFromSnap } from '../../../store/actions';
 import { getSnapRoute } from '../../../helpers/utils/util';
+import { SnapIcon } from '../snaps/snap-icon';
 
 export default function ConnectedSnaps({ connectedSubjects }) {
   const [showOptions, setShowOptions] = useState();
@@ -74,11 +74,7 @@ export default function ConnectedSnaps({ connectedSubjects }) {
             display={Display.Flex}
             alignItems={AlignItems.center}
           >
-            <SnapAvatar
-              snapId={subject.origin}
-              badgeSize={IconSize.Xs}
-              avatarSize={IconSize.Md}
-            />
+            <SnapIcon snapId={subject.origin} avatarSize={IconSize.Md} />
             <Text
               variant={TextVariant.bodyLgMedium}
               className="connected-accounts-list__account-name"
diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
index d4f74def3ffe..69187ee7171e 100644
--- a/ui/components/app/snaps/copyable/copyable.js
+++ b/ui/components/app/snaps/copyable/copyable.js
@@ -9,6 +9,7 @@ import {
   Display,
   OverflowWrap,
   IconColor,
+  BorderColor,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { Icon, IconName, Box, Text } from '../../../component-library';
@@ -60,6 +61,8 @@ export const Copyable = ({
           : BackgroundColor.backgroundAlternative
       }
       borderRadius={BorderRadius.LG}
+      borderColor={BorderColor.borderMuted}
+      borderWidth={1}
       padding={2}
       marginTop={marginTop}
       marginBottom={marginBottom}
diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
index 05984c564e4e..a2561d92e48d 100644
--- a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
+++ b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { useSelector } from 'react-redux';
 import {
   BackgroundColor,
   TextColor,
-  FlexDirection,
   TextVariant,
   AlignItems,
   Display,
@@ -25,9 +23,9 @@ import {
   ButtonIconSize,
   ButtonIcon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
 import { SnapMetadataModal } from '../snap-metadata-modal';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SnapIcon } from '../snap-icon';
 
 const SnapAuthorshipHeader = ({
   snapId,
@@ -40,11 +38,6 @@ const SnapAuthorshipHeader = ({
 }) => {
   const t = useI18nContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  // We're using optional chaining with snapId, because with the current implementation
-  // of snap update in the snap controller, we do not have reference to snapId when an
-  // update request is rejected because the reference comes from the request itself and not subject metadata
-  // like it is done with snap install
-  const packageName = snapId && stripSnapPrefix(snapId);
 
   const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
@@ -57,13 +50,15 @@ const SnapAuthorshipHeader = ({
   return (
     <Box
       className={classnames('snaps-authorship-header', className)}
-      backgroundColor={BackgroundColor.backgroundAlternative}
+      backgroundColor={BackgroundColor.backgroundDefault}
       width={BlockSize.Full}
       alignItems={AlignItems.center}
       display={Display.Flex}
       padding={4}
       style={{
         boxShadow,
+        minHeight: '64px',
+        zIndex: 1,
       }}
     >
       {snapId && (
@@ -87,7 +82,8 @@ const SnapAuthorshipHeader = ({
         marginLeft={4}
         marginRight={4}
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
         style={{ overflow: 'hidden' }}
         width={BlockSize.Full}
       >
@@ -96,11 +92,7 @@ const SnapAuthorshipHeader = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
         >
-          <SnapAvatar
-            snapId={snapId}
-            avatarSize={IconSize.Sm}
-            badgeSize={IconSize.Xs}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Sm} />
           <Text
             color={TextColor.textDefault}
             variant={TextVariant.bodyMdMedium}
@@ -110,20 +102,6 @@ const SnapAuthorshipHeader = ({
             {snapName}
           </Text>
         </Box>
-        <Box
-          display={Display.Flex}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
-          paddingTop={1}
-        >
-          <Text
-            ellipsis
-            variant={TextVariant.bodySm}
-            color={TextColor.textAlternative}
-          >
-            {packageName}
-          </Text>
-        </Box>
       </Box>
       {showInfo && (
         <Box marginLeft="auto">
diff --git a/ui/components/app/snaps/snap-avatar/index.js b/ui/components/app/snaps/snap-avatar/index.js
deleted file mode 100644
index 2c17e12d55b7..000000000000
--- a/ui/components/app/snaps/snap-avatar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './snap-avatar';
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.js b/ui/components/app/snaps/snap-avatar/snap-avatar.js
deleted file mode 100644
index 97b6fa90de5b..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import {
-  IconColor,
-  BackgroundColor,
-} from '../../../../helpers/constants/design-system';
-import {
-  BadgeWrapper,
-  BadgeWrapperPosition,
-  AvatarIcon,
-  IconName,
-  IconSize,
-} from '../../../component-library';
-
-import { SnapIcon } from '../snap-icon';
-
-const SnapAvatar = ({
-  snapId,
-  badgeSize = IconSize.Sm,
-  avatarSize = IconSize.Lg,
-  borderWidth = 2,
-  className,
-  badgeBackgroundColor = BackgroundColor.backgroundAlternative,
-}) => {
-  return (
-    <BadgeWrapper
-      className={classnames('snap-avatar', className)}
-      badge={
-        <AvatarIcon
-          iconName={IconName.Snaps}
-          size={badgeSize}
-          backgroundColor={IconColor.infoDefault}
-          borderColor={badgeBackgroundColor}
-          borderWidth={borderWidth}
-          iconProps={{
-            color: IconColor.infoInverse,
-          }}
-        />
-      }
-      position={BadgeWrapperPosition.bottomRight}
-    >
-      <SnapIcon snapId={snapId} avatarSize={avatarSize} />
-    </BadgeWrapper>
-  );
-};
-
-SnapAvatar.propTypes = {
-  /**
-   * The id of the snap
-   */
-  snapId: PropTypes.string,
-  badgeSize: PropTypes.string,
-  avatarSize: PropTypes.string,
-  borderWidth: PropTypes.number,
-  /**
-   * The color of the badge background
-   */
-  badgeBackgroundColor: PropTypes.string,
-  /**
-   * The className of the SnapAvatar
-   */
-  className: PropTypes.string,
-};
-
-export default SnapAvatar;
diff --git a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js b/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
deleted file mode 100644
index 4f1e88b99640..000000000000
--- a/ui/components/app/snaps/snap-avatar/snap-avatar.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import SnapAvatar from '.';
-
-export default {
-  title: 'Components/App/Snaps/SnapAvatar',
-
-  component: SnapAvatar,
-  argTypes: {
-    snapId: {
-      control: 'text',
-    },
-  },
-};
-
-export const DefaultStory = (args) => <SnapAvatar {...args} />;
-
-DefaultStory.storyName = 'Default';
-
-DefaultStory.args = {
-  snapId: 'npm:@metamask/test-snap-bip44',
-};
diff --git a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
index ede8bc796a46..a587e422719c 100644
--- a/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
+++ b/ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js
@@ -17,8 +17,8 @@ import {
 } from '../../../component-library';
 import Tooltip from '../../../ui/tooltip/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import SnapAvatar from '../snap-avatar/snap-avatar';
 import { getSnapMetadata } from '../../../../selectors';
+import { SnapIcon } from '../snap-icon';
 
 export default function SnapConnectCell({ origin, snapId }) {
   const t = useI18nContext();
@@ -33,7 +33,7 @@ export default function SnapConnectCell({ origin, snapId }) {
       paddingTop={2}
       paddingBottom={2}
     >
-      <SnapAvatar snapId={snapId} />
+      <SnapIcon snapId={snapId} />
       <Box width="full" paddingLeft={4} paddingRight={4}>
         <Text>
           {t('connectSnap', [
diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
index 305dd28ae2ff..919778aeeb89 100644
--- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
+++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -12,6 +12,7 @@ import {
 import { SnapDelineator } from '../snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 import {
+  BackgroundColor,
   BlockSize,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
@@ -64,7 +65,14 @@ export const SnapHomeRenderer = ({ snapId }) => {
   }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, history]);
 
   return (
-    <Box height={BlockSize.Full}>
+    <Box
+      height={BlockSize.Full}
+      width={BlockSize.Full}
+      backgroundColor={BackgroundColor.backgroundAlternative}
+      style={{
+        overflow: 'auto',
+      }}
+    >
       {error && (
         <Box height={BlockSize.Full} padding={4}>
           <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
@@ -82,6 +90,7 @@ export const SnapHomeRenderer = ({ snapId }) => {
           isLoading={loading}
           useDelineator={false}
           useFooter
+          contentBackgroundColor={BackgroundColor.backgroundAlternative}
         />
       )}
     </Box>
diff --git a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
index 346bcd3dcf2b..3b514e2c19ea 100644
--- a/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
+++ b/ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js
@@ -18,7 +18,7 @@ import {
 
 import { Box, Text } from '../../../component-library';
 import { getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapLegacyAuthorshipHeader = ({
   snapId,
@@ -45,7 +45,7 @@ const SnapLegacyAuthorshipHeader = ({
       marginRight={marginRight}
     >
       <Box>
-        <SnapAvatar snapId={snapId} />
+        <SnapIcon snapId={snapId} />
       </Box>
       <Box
         marginLeft={4}
diff --git a/ui/components/app/snaps/snap-list-item/snap-list-item.js b/ui/components/app/snaps/snap-list-item/snap-list-item.js
index e8fa6af5db1e..437a6e485d78 100644
--- a/ui/components/app/snaps/snap-list-item/snap-list-item.js
+++ b/ui/components/app/snaps/snap-list-item/snap-list-item.js
@@ -17,7 +17,7 @@ import {
   IconSize,
   Icon,
 } from '../../../component-library';
-import SnapAvatar from '../snap-avatar';
+import { SnapIcon } from '../snap-icon';
 
 const SnapListItem = ({
   name,
@@ -45,7 +45,7 @@ const SnapListItem = ({
         width={BlockSize.Full}
       >
         <Box>
-          <SnapAvatar snapId={snapId} />
+          <SnapIcon snapId={snapId} />
         </Box>
         <Box
           paddingLeft={4}
diff --git a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
index 61d398916326..93a57309e89a 100644
--- a/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
+++ b/ui/components/app/snaps/snap-metadata-modal/snap-metadata-modal.js
@@ -32,7 +32,6 @@ import {
   TextAlign,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import SnapAvatar from '../snap-avatar';
 import { formatDate } from '../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
@@ -41,6 +40,7 @@ import SnapExternalPill from '../snap-version/snap-external-pill';
 import { useSafeWebsite } from '../../../../hooks/snaps/useSafeWebsite';
 import Tooltip from '../../../ui/tooltip';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../snap-icon';
 
 export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
   const t = useI18nContext();
@@ -101,7 +101,7 @@ export const SnapMetadataModal = ({ snapId, isOpen, onClose }) => {
           }}
         >
           <Box>
-            <SnapAvatar snapId={snapId} />
+            <SnapIcon snapId={snapId} />
           </Box>
           <Text variant={TextVariant.bodyMdMedium} textAlign={TextAlign.Center}>
             {snapName}
diff --git a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
index a5f769bbef80..0d85f8ef60dc 100644
--- a/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
+++ b/ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
+  BorderColor,
   Display,
   FlexDirection,
 } from '../../../../helpers/constants/design-system';
@@ -68,6 +69,9 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
           onChange={handleChange}
           isChecked={value}
           label={label}
+          inputProps={{
+            borderColor: BorderColor.borderMuted,
+          }}
           {...props}
         />
       )}
diff --git a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
index 46a5d6e35ef6..c9000c13839b 100644
--- a/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
+++ b/ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx
@@ -55,6 +55,9 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
         data-testid="snaps-dropdown"
         selectedOption={value}
         onChange={handleChange}
+        style={{
+          border: '1px solid var(--color-border-muted)',
+        }}
         {...props}
       />
       {error && (
diff --git a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
index 9508dae3e0d3..1d254ccaa2e3 100644
--- a/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
+++ b/ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx
@@ -187,8 +187,8 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
         style={{
           cursor: 'pointer',
           backgroundColor: active
-            ? 'var(--color-background-alternative-hover)'
-            : undefined,
+            ? 'var(--color-background-default-hover)'
+            : 'var(--color-background-default)',
         }}
         onClick={handleClick}
         onDragOver={handleDragOver}
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index 152a01eb652d..c831f6ae5956 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -80,6 +80,9 @@ export const container: UIComponentFactory<BoxElement> = ({
       flexDirection: FlexDirection.Column,
       height: BlockSize.Full,
       className: 'snap-ui-renderer__container',
+      style: {
+        overflow: 'auto',
+      },
     },
   };
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index 3d400c4fa918..9f88b87f27ab 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -21,7 +21,7 @@ export const DEFAULT_FOOTER = {
     className: 'snap-ui-renderer__footer',
     backgroundColor: BackgroundColor.backgroundDefault,
     style: {
-      boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+      boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
     },
   },
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index 9df749ce1019..63109f4f7ba9 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -22,6 +22,10 @@
     height: 1px;
   }
 
+  &__input > .mm-text-field {
+    border-color: var(--color-border-muted);
+  }
+
   &__panel {
     gap: 8px;
   }
diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
index 5bde7fba7aa8..332fab99308d 100644
--- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -39,6 +39,7 @@ const SnapUIRendererComponent = ({
   useDelineator = true,
   useFooter = false,
   onCancel,
+  contentBackgroundColor,
 }) => {
   const t = useI18nContext();
 
@@ -126,7 +127,11 @@ const SnapUIRendererComponent = ({
       initialState={initialState}
       context={context}
     >
-      <Box className="snap-ui-renderer__content" height={BlockSize.Full}>
+      <Box
+        className="snap-ui-renderer__content"
+        height={BlockSize.Full}
+        backgroundColor={contentBackgroundColor}
+      >
         <MetaMaskTemplateRenderer sections={sections} />
       </Box>
     </SnapInterfaceContextProvider>
@@ -155,4 +160,5 @@ SnapUIRendererComponent.propTypes = {
   useDelineator: PropTypes.bool,
   useFooter: PropTypes.bool,
   onCancel: PropTypes.func,
+  contentBackgroundColor: PropTypes.string,
 };
diff --git a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
index fbe021861b91..ea290e8478d4 100644
--- a/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
+++ b/ui/components/multichain/notification-list-item-snap/notification-list-item-snap.tsx
@@ -18,7 +18,7 @@ import type { NotificationListItemTextProps } from '../notification-list-item-te
 import { NotificationListItemText } from '../notification-list-item-text';
 import { formatMenuItemDate } from '../../../helpers/utils/notification.util';
 import { SnapUIMarkdown } from '../../app/snaps/snap-ui-markdown';
-import SnapAvatar from '../../app/snaps/snap-avatar';
+import { SnapIcon } from '../../app/snaps/snap-icon';
 
 export type NotificationListItemSnapProps = {
   id: string;
@@ -107,11 +107,7 @@ export const NotificationListItemSnap = ({
         )}
 
         <Box height={BlockSize.Full} className="notification-list-item__icon">
-          <SnapAvatar
-            snapId={snapId}
-            badgeBackgroundColor={BackgroundColor.backgroundDefault}
-            avatarSize={IconSize.Md}
-          />
+          <SnapIcon snapId={snapId} avatarSize={IconSize.Md} />
         </Box>
 
         <Box
diff --git a/ui/components/multichain/pages/permissions-page/connection-list-item.js b/ui/components/multichain/pages/permissions-page/connection-list-item.js
index 8d06e7b2b59c..bf720da5b3bb 100644
--- a/ui/components/multichain/pages/permissions-page/connection-list-item.js
+++ b/ui/components/multichain/pages/permissions-page/connection-list-item.js
@@ -26,8 +26,8 @@ import {
   Text,
 } from '../../../component-library';
 import { getURLHost } from '../../../../helpers/utils/util';
-import SnapAvatar from '../../../app/snaps/snap-avatar/snap-avatar';
 import { getAvatarNetworkColor } from '../../../../helpers/utils/accounts';
+import { SnapIcon } from '../../../app/snaps/snap-icon';
 import { ConnectionListTooltip } from './connection-list-tooltip/connection-list-tooltip';
 
 export const ConnectionListItem = ({ connection, onClick }) => {
@@ -54,12 +54,10 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         style={{ alignSelf: 'center' }}
       >
         {isSnap ? (
-          <SnapAvatar
+          <SnapIcon
             className="connection-list-item__snap-avatar"
             snapId={connection.id}
-            badgeSize={IconSize.Xs}
             avatarSize={IconSize.Md}
-            borderWidth={0}
           />
         ) : (
           <BadgeWrapper
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index 609ee9224182..b0e19a7ba8e1 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
@@ -100,6 +101,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
+            style="overflow: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index 627b20ad720a..e5fc49588dad 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -42,7 +42,11 @@ import { SnapUIRenderer } from '../../../components/app/snaps/snap-ui-renderer';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 ///: END:ONLY_INCLUDE_IF
 import { DAY } from '../../../../shared/constants/time';
-import { BlockSize, Display } from '../../../helpers/constants/design-system';
+import {
+  BlockSize,
+  Display,
+  BackgroundColor,
+} from '../../../helpers/constants/design-system';
 import ConfirmationFooter from './components/confirmation-footer';
 import {
   getTemplateValues,
@@ -466,12 +470,15 @@ export default function ConfirmationPage({
       ? handleSubmit
       : null);
 
+  const NAVIGATION_CONTROLS_HEIGHT = 32;
+  const SNAP_DIALOG_HEADER_HEIGHT = 64;
+
   let contentMargin = 0;
   if (pendingConfirmations.length > 1) {
-    contentMargin += 32;
+    contentMargin += NAVIGATION_CONTROLS_HEIGHT;
   }
   if (isSnapCustomUIDialog) {
-    contentMargin += 80;
+    contentMargin += SNAP_DIALOG_HEADER_HEIGHT;
   }
 
   return (
@@ -552,6 +559,7 @@ export default function ConfirmationPage({
             useDelineator={false}
             onCancel={handleSnapDialogCancel}
             useFooter={isSnapDefaultDialog}
+            contentBackgroundColor={BackgroundColor.backgroundAlternative}
           />
         ) : (
           <MetaMaskTemplateRenderer sections={templatedValues.content} />
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
index f87429326b6e..d85bbe7bb4ed 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
index c3ae01786635..7b1a8e3d2a0e 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -13,8 +13,8 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
         class="mm-box remove-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <button
             aria-label="Close"
@@ -26,33 +26,17 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
             />
           </button>
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  T
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                T
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -60,15 +44,6 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
                 Test Snap
               </p>
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              >
-                @metamask/snap-test
-              </p>
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
index afdb66d573ca..11ac26234265 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -13,49 +13,26 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
         class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
       >
         <div
-          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+          class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+          style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
         >
           <div
-            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+            class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
             style="overflow: hidden;"
           >
             <div
               class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
             >
               <div
-                class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+                style="border-width: 0px;"
               >
-                <div
-                  class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-                  style="border-width: 0px;"
-                >
-                  ?
-                </div>
-                <div
-                  class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-                >
-                  <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-                  >
-                    <span
-                      class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                      style="mask-image: url('./images/icons/snaps.svg');"
-                    />
-                  </div>
-                </div>
+                ?
               </div>
               <p
                 class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
               />
             </div>
-            <div
-              class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-              />
-            </div>
           </div>
           <div
             class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
index d18c4f25d08e..aef63dee4b02 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
@@ -21,9 +21,9 @@ import { getDedupedSnaps } from '../../../../helpers/utils/util';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
 import SnapPrivacyWarning from '../../../../components/app/snaps/snap-privacy-warning/snap-privacy-warning';
 import { getPermissions, getSnapMetadata } from '../../../../selectors';
-import SnapAvatar from '../../../../components/app/snaps/snap-avatar/snap-avatar';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { isSnapId } from '../../../../helpers/utils/snaps';
+import { SnapIcon } from '../../../../components/app/snaps/snap-icon';
 
 export default function SnapsConnect({
   request,
@@ -158,12 +158,7 @@ export default function SnapsConnect({
           backgroundColor={BackgroundColor.backgroundAlternative}
         >
           <Box paddingBottom={2}>
-            <SnapAvatar
-              snapId={snaps[0]}
-              badgeSize={IconSize.Md}
-              avatarSize={IconSize.Xl}
-              borderWidth={3}
-            />
+            <SnapIcon snapId={snaps[0]} avatarSize={IconSize.Xl} />
           </Box>
           <Text paddingBottom={2} variant={TextVariant.headingMd}>
             {t('connectionRequest')}
diff --git a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
index 440f05d43033..a971dd30faba 100644
--- a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
+++ b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
@@ -6,37 +6,21 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
     class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"
   >
     <div
-      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
-      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default);"
+      class="mm-box snaps-authorship-header mm-box--padding-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+      style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); min-height: 64px; z-index: 1;"
     >
       <div
-        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        class="mm-box mm-box--margin-right-4 mm-box--margin-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
         style="overflow: hidden;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-badge-wrapper snap-avatar mm-box--display-inline-block"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+            style="border-width: 0px;"
           >
-            <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
-              style="border-width: 0px;"
-            >
-              m
-            </div>
-            <div
-              class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-bottom-right"
-            >
-              <div
-                class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-icon mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-info-default mm-box--rounded-full mm-box--border-color-background-alternative mm-box--border-width-2 box--border-style-solid"
-              >
-                <span
-                  class="mm-box mm-icon mm-icon--size-xs mm-box--display-inline-block mm-box--color-info-inverse"
-                  style="mask-image: url('./images/icons/snaps.svg');"
-                />
-              </div>
-            </div>
+            m
           </div>
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default"
@@ -44,15 +28,6 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
             @metamask/snap-simple-keyring
           </p>
         </div>
-        <div
-          class="mm-box mm-box--padding-top-1 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center"
-        >
-          <p
-            class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-text-alternative"
-          >
-            @metamask/snap-simple-keyring
-          </p>
-        </div>
       </div>
       <div
         class="mm-box mm-box--margin-left-auto"
diff --git a/ui/pages/snaps/snap-view/snap-home.js b/ui/pages/snaps/snap-view/snap-home.js
index dd464f878733..08b327b036d2 100644
--- a/ui/pages/snaps/snap-view/snap-home.js
+++ b/ui/pages/snaps/snap-view/snap-home.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 
 import { SnapHomeRenderer } from '../../../components/app/snaps/snap-home-page/snap-home-renderer';
 import { Box } from '../../../components/component-library';
-import { BlockSize } from '../../../helpers/constants/design-system';
+import { BlockSize, Display } from '../../../helpers/constants/design-system';
 
 function SnapHome({ snapId }) {
   return (
-    <Box height={BlockSize.Full}>
+    <Box display={Display.Flex} height={BlockSize.Full}>
       <SnapHomeRenderer snapId={snapId} />
     </Box>
   );
diff --git a/ui/pages/snaps/snap-view/snap-view.js b/ui/pages/snaps/snap-view/snap-view.js
index a913a1387527..5ef406fe9123 100644
--- a/ui/pages/snaps/snap-view/snap-view.js
+++ b/ui/pages/snaps/snap-view/snap-view.js
@@ -92,7 +92,12 @@ function SnapView() {
   };
 
   return (
-    <div className="snap-view">
+    <div
+      className="snap-view"
+      style={{
+        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      }}
+    >
       <Page backgroundColor={BackgroundColor.backgroundDefault}>
         <SnapAuthorshipHeader
           snapId={snapId}

From 414297943eb2e756b2c24eb81ffa1ac8063f4188 Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Thu, 5 Sep 2024 16:41:50 +0200
Subject: [PATCH 2/6] Make Snap custom footer sticky at the bottom

---
 ui/components/app/snaps/snap-home-page/snap-home-renderer.js  | 2 +-
 .../app/snaps/snap-ui-renderer/components/container.ts        | 3 ++-
 ui/components/app/snaps/snap-ui-renderer/components/footer.ts | 3 +++
 .../snaps-section/__snapshots__/snaps-section.test.tsx.snap   | 4 ++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
index 919778aeeb89..d0acd2060f9b 100644
--- a/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
+++ b/ui/components/app/snaps/snap-home-page/snap-home-renderer.js
@@ -70,7 +70,7 @@ export const SnapHomeRenderer = ({ snapId }) => {
       width={BlockSize.Full}
       backgroundColor={BackgroundColor.backgroundAlternative}
       style={{
-        overflow: 'auto',
+        overflowY: 'auto',
       }}
     >
       {error && (
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
index c831f6ae5956..07557c6d7a01 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/container.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -81,7 +81,8 @@ export const container: UIComponentFactory<BoxElement> = ({
       height: BlockSize.Full,
       className: 'snap-ui-renderer__container',
       style: {
-        overflow: 'auto',
+        overflowY: 'auto',
+        paddingBottom: useFooter ? '74px' : 'initial',
       },
     },
   };
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index 9f88b87f27ab..4fc3b2108f2b 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -22,6 +22,9 @@ export const DEFAULT_FOOTER = {
     backgroundColor: BackgroundColor.backgroundDefault,
     style: {
       boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      height: '74px',
+      position: 'fixed',
+      bottom: 0,
     },
   },
 };
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index b0e19a7ba8e1..12e984bc207a 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
-            style="overflow: auto;"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"
@@ -101,7 +101,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column box--height-full"
-            style="overflow: auto;"
+            style="overflow-y: auto;"
           >
             <p
               class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--overflow-wrap-anywhere mm-box--color-inherit"

From ddcd1226e723a00af12d18a4b7302e839e044e29 Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Thu, 5 Sep 2024 17:11:28 +0200
Subject: [PATCH 3/6] Update copyable background

---
 ui/components/app/snaps/copyable/copyable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
index 69187ee7171e..ea3d99c42ee2 100644
--- a/ui/components/app/snaps/copyable/copyable.js
+++ b/ui/components/app/snaps/copyable/copyable.js
@@ -58,7 +58,7 @@ export const Copyable = ({
       backgroundColor={
         isVisible && sensitive
           ? BackgroundColor.errorMuted
-          : BackgroundColor.backgroundAlternative
+          : BackgroundColor.primaryMuted
       }
       borderRadius={BorderRadius.LG}
       borderColor={BorderColor.borderMuted}

From 7dd0a21826362fcfdfb0e248be706badb33ebaf4 Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Mon, 9 Sep 2024 18:16:26 +0200
Subject: [PATCH 4/6] Update copyable colors

---
 ui/components/app/snaps/copyable/index.scss | 37 +++++++++++++++++----
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/ui/components/app/snaps/copyable/index.scss b/ui/components/app/snaps/copyable/index.scss
index 663b36482816..90d0327d5a63 100644
--- a/ui/components/app/snaps/copyable/index.scss
+++ b/ui/components/app/snaps/copyable/index.scss
@@ -3,29 +3,41 @@
   transition: background-color background 0.2s;
 
   & .show-more__button {
-    background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative) 33%);
+    background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
   }
 
   &:hover {
-    background-color: var(--color-background-alternative-hover);
+    background-color: var(--color-primary-muted);
+    color: var(--color-primary-default) !important;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-hover) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
+    }
+
+    p, .copyable__icon {
+      color: var(--color-primary-default);
+    }
+
+    .copyable__tooltip {
+      .mm-icon {
+        color: var(--color-primary-default);
+      }
     }
   }
 
   &.clicked {
-    background-color: var(--color-background-alternative-pressed);
+    background-color: var(--color-primary-muted);
+    opacity: 0.75;
 
     & .show-more__button {
-      background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+      background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
     }
 
     &:hover {
-      background-color: var(--color-background-alternative-pressed);
+      background-color: var(--color-primary-muted);
 
       & .show-more__button {
-        background: linear-gradient(90deg, transparent 0%, var(--color-background-alternative-pressed) 33%);
+        background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
       }
     }
   }
@@ -45,9 +57,20 @@
         & .show-more__button {
           background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
         }
+
+        p, .copyable__icon {
+          color: var(--color-error-default);
+        }
+
+        .copyable__tooltip {
+          .mm-icon {
+            color: var(--color-error-default);
+          }
+        }
       }
 
       &.clicked {
+        opacity: 0.75;
         background-color: var(--color-error-muted-pressed);
 
         & .show-more__button {

From 9b604291cd93694a68d525dd65c4e9bb33c6fa2e Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Mon, 9 Sep 2024 18:26:45 +0200
Subject: [PATCH 5/6] Remove border around Copyable

---
 ui/components/app/snaps/copyable/copyable.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/components/app/snaps/copyable/copyable.js b/ui/components/app/snaps/copyable/copyable.js
index ea3d99c42ee2..398ea3057fe3 100644
--- a/ui/components/app/snaps/copyable/copyable.js
+++ b/ui/components/app/snaps/copyable/copyable.js
@@ -9,7 +9,6 @@ import {
   Display,
   OverflowWrap,
   IconColor,
-  BorderColor,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { Icon, IconName, Box, Text } from '../../../component-library';
@@ -61,8 +60,6 @@ export const Copyable = ({
           : BackgroundColor.primaryMuted
       }
       borderRadius={BorderRadius.LG}
-      borderColor={BorderColor.borderMuted}
-      borderWidth={1}
       padding={2}
       marginTop={marginTop}
       marginBottom={marginBottom}

From 864aa8dec35aa24d3f5b9531475c257e6eadacb6 Mon Sep 17 00:00:00 2001
From: david0xd <david@timechaser.org>
Date: Tue, 10 Sep 2024 10:04:13 +0200
Subject: [PATCH 6/6] Fix lint in scss

---
 ui/components/app/snaps/copyable/index.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/components/app/snaps/copyable/index.scss b/ui/components/app/snaps/copyable/index.scss
index 90d0327d5a63..7cfed455aade 100644
--- a/ui/components/app/snaps/copyable/index.scss
+++ b/ui/components/app/snaps/copyable/index.scss
@@ -14,7 +14,8 @@
       background: linear-gradient(90deg, transparent 0%, var(--color-background-primary-muted) 33%);
     }
 
-    p, .copyable__icon {
+    p,
+    .copyable__icon {
       color: var(--color-primary-default);
     }
 
@@ -58,7 +59,8 @@
           background: linear-gradient(90deg, transparent 0%, var(--color-error-muted-hover) 33%);
         }
 
-        p, .copyable__icon {
+        p,
+        .copyable__icon {
           color: var(--color-error-default);
         }