From c15226325e7144fc11e9e9029a923eb2e467ff6a Mon Sep 17 00:00:00 2001
From: Ariella Vu <20778143+digiwand@users.noreply.github.com>
Date: Thu, 31 Aug 2023 06:50:21 -0700
Subject: [PATCH] style: update Desktop App settings styles (#20676)

---
 app/_locales/en/messages.json                 |  3 ++
 .../experimental-tab.test.js.snap             | 19 ++++----
 .../experimental-tab.component.js             | 43 ++++++++++++-------
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a749b4420..018c671a1 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1159,6 +1159,9 @@
     "message": "Description from $1",
     "description": "$1 represents the name of the snap"
   },
+  "desktopApp": {
+    "message": "Desktop App"
+  },
   "desktopConnectionCriticalErrorDescription": {
     "message": "This error could be intermittent, so try restarting the extension or disable MetaMask Desktop."
   },
diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
index 8c04a63ff..5110d0484 100644
--- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
+++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
@@ -197,19 +197,22 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
         </div>
       </div>
     </div>
+    <h4
+      class="mm-box mm-text mm-text--heading-sm mm-box--margin-bottom-2 mm-box--color-text-alternative"
+    >
+      Desktop App
+    </h4>
     <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 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center"
       data-testid="advanced-setting-desktop-pairing"
     >
-      <div
-        class="settings-page__content-item"
+      <p
+        class="mm-box mm-text mm-text--body-md mm-box--margin-top-3 mm-box--padding-right-2 mm-box--color-text-default"
       >
-        <span>
-          Click to run all background processes in the desktop app.
-        </span>
-      </div>
+        Click to run all background processes in the desktop app.
+      </p>
       <div
-        class="settings-page__content-item-col"
+        class="mm-box settings-page__content-item-col mm-box--padding-top-3"
       >
         <button
           class="button btn--rounded btn-primary btn--large"
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index 2d083a3a4..4f21d5d9e 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -13,8 +13,10 @@ import {
   TextVariant,
   FontWeight,
   ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+  AlignItems,
   Display,
   FlexDirection,
+  FlexWrap,
   JustifyContent,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
@@ -245,22 +247,31 @@ export default class ExperimentalTab extends PureComponent {
     const { t } = this.context;
 
     return (
-      <Box
-        ref={this.settingsRefs[6]}
-        className="settings-page__content-row"
-        data-testid="advanced-setting-desktop-pairing"
-        display={Display.Flex}
-        flexDirection={FlexDirection.Row}
-        justifyContent={JustifyContent.spaceBetween}
-      >
-        <div className="settings-page__content-item">
-          <span>{t('desktopEnableButtonDescription')}</span>
-        </div>
-
-        <div className="settings-page__content-item-col">
-          <DesktopEnableButton />
-        </div>
-      </Box>
+      <>
+        <Text
+          variant={TextVariant.headingSm}
+          color={TextColor.textAlternative}
+          marginBottom={2}
+        >
+          {t('desktopApp')}
+        </Text>
+        <Box
+          ref={this.settingsRefs[6]}
+          data-testid="advanced-setting-desktop-pairing"
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          flexDirection={FlexDirection.Row}
+          flexWrap={FlexWrap.Wrap}
+          justifyContent={JustifyContent.spaceBetween}
+        >
+          <Text marginTop={3} paddingRight={2}>
+            {t('desktopEnableButtonDescription')}
+          </Text>
+          <Box className="settings-page__content-item-col" paddingTop={3}>
+            <DesktopEnableButton />
+          </Box>
+        </Box>
+      </>
     );
   }
   ///: END:ONLY_INCLUDE_IN