From 4918aa4c34ea9becb4ab0944bdbb50e1a7d2b7f3 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Fri, 7 Jul 2023 15:10:58 +0200
Subject: [PATCH] [FLASK] Fix Snaps UI divider (#19919)

---
 .../app/metamask-template-renderer/safe-component-list.js   | 1 -
 ui/components/app/snaps/snap-ui-renderer/index.scss         | 1 +
 .../app/snaps/snap-ui-renderer/snap-ui-renderer.js          | 6 +++++-
 3 files changed, 6 insertions(+), 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
index d76f7298a..f8ae5650e 100644
--- 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
index 31c5110d8..5f7f97902 100644
--- 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
index d5103e58e..37d83c2c9 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
@@ -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) => ({