[FLASK] Fix Snaps UI divider (#19919)

MetaMask · Jul 7, 2023 · 4918aa4 · 4918aa4
1 parent 484dae3
commit 4918aa4
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -44,7 +44,6 @@ export const safeComponentList = {
   SnapDelineator,
   Copyable,
   Spinner,
-  hr: 'hr',
   SnapUIMarkdown,
   ///: END:ONLY_INCLUDE_IN
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -9,6 +9,7 @@
 
   &__divider {
     width: 100%;
+    height: 1px;
   }
 
   &__panel {

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
@@ -10,6 +10,7 @@ import {
   OverflowWrap,
   FontWeight,
   TextVariant,
+  BorderColor,
 } from '../../../../helpers/constants/design-system';
 import { SnapDelineator } from '../snap-delineator';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -53,9 +54,12 @@ export const UI_MAPPING = {
     },
   }),
   divider: () => ({
-    element: 'hr',
+    element: 'Box',
     props: {
       className: 'snap-ui-renderer__divider',
+      backgroundColor: BorderColor.borderDefault,
+      marginTop: 2,
+      marginBottom: 2,
     },
   }),
   copyable: (props) => ({