From 9514b47a7eb8486584741d69fd26f8a52a3de10a Mon Sep 17 00:00:00 2001
From: Danica Shen <zhaodanica@gmail.com>
Date: Thu, 24 Aug 2023 14:11:38 +0100
Subject: [PATCH] fix(878): fix toggle align styles for eth-sign in settings
 (#20587)

---
 .../__snapshots__/advanced-tab.component.test.js.snap |  2 +-
 .../settings/advanced-tab/advanced-tab.component.js   | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
index ab201bd7e..60d80a313 100644
--- a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
+++ b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
@@ -586,7 +586,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
       data-testid="advanced-setting-toggle-ethsign"
     >
       <div
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index caa1c4b78..eeda359ba 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -10,7 +10,7 @@ import {
   Display,
   FlexDirection,
   JustifyContent,
-  SEVERITIES,
+  Severity,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getPlatform } from '../../../../app/scripts/lib/util';
@@ -600,8 +600,7 @@ export default class AdvancedTab extends PureComponent {
         className="settings-page__content-row"
         data-testid="advanced-setting-toggle-ethsign"
         display={Display.Flex}
-        flexDirection={FlexDirection.Row}
-        justifyContent={JustifyContent.spaceBetween}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('toggleEthSignField')}</span>
@@ -609,11 +608,11 @@ export default class AdvancedTab extends PureComponent {
             {t('toggleEthSignDescriptionField')}
           </div>
         </div>
-
         {disabledRpcMethodPreferences?.eth_sign ? (
           <BannerAlert
-            severity={SEVERITIES.DANGER}
-            marginBottom={5}
+            severity={Severity.Danger}
+            marginTop={3}
+            marginBottom={4}
             descriptionProps={{ variant: TextVariant.bodyMd }}
           >
             {t('toggleEthSignBannerDescription')}