From a51d3d9f4c82d1eb3c6f099879c8b6a3fce4176e Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 17 Jan 2023 05:52:55 -0700
Subject: [PATCH] Fix MetaMetrics settings toggle styling (#17224)

---
 app/_locales/en/messages.json                 |   3 +
 .../__snapshots__/security-tab.test.js.snap   | 107 ++++++++++--------
 .../security-tab/security-tab.component.js    |   7 +-
 3 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 364a50717..5d27a7181 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2126,6 +2126,9 @@
   "metametricsOptInDescription": {
     "message": "MetaMask would like to gather usage data to better understand how our users interact with the extension. This data will be used to continually improve the usability and user experience of our product and the Ethereum ecosystem."
   },
+  "metrics": {
+    "message": "Metrics"
+  },
   "mismatchedChainLinkText": {
     "message": "verify the network details",
     "description": "Serves as link text for the 'mismatchedChain' key. This text will be embedded inside the translation for that key."
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index 8e8ad5763..ce1993d98 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -478,74 +478,83 @@ exports[`Security Tab should match snapshot 1`] = `
         </div>
       </div>
     </div>
+    <span
+      class="settings-page__security-tab-sub-header"
+    >
+      Metrics
+    </span>
     <div
-      class="settings-page__content-row"
+      class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-item"
+        class="settings-page__content-row"
       >
-        <span>
-          Participate in MetaMetrics
-        </span>
         <div
-          class="settings-page__content-description"
+          class="settings-page__content-item"
         >
           <span>
-            Participate in MetaMetrics to help us make MetaMask better
+            Participate in MetaMetrics
           </span>
-        </div>
-      </div>
-      <div
-        class="settings-page__content-item"
-      >
-        <div
-          class="settings-page__content-item-col"
-        >
-          <label
-            class="toggle-button toggle-button--off"
-            tabindex="0"
+          <div
+            class="settings-page__content-description"
           >
-            <div
-              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+            <span>
+              Participate in MetaMetrics to help us make MetaMask better
+            </span>
+          </div>
+        </div>
+        <div
+          class="settings-page__content-item"
+        >
+          <div
+            class="settings-page__content-item-col"
+          >
+            <label
+              class="toggle-button toggle-button--off"
+              tabindex="0"
             >
               <div
-                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
               >
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                />
+                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+                >
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                  />
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                  />
+                </div>
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                >
+                  <div
+                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                  />
+                </div>
+                <input
+                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                  type="checkbox"
+                  value="false"
                 />
               </div>
               <div
-                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                class="toggle-button__status"
               >
-                <div
-                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                />
+                <span
+                  class="toggle-button__label-off"
+                >
+                  Off
+                </span>
+                <span
+                  class="toggle-button__label-on"
+                >
+                  On
+                </span>
               </div>
-              <input
-                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                type="checkbox"
-                value="false"
-              />
-            </div>
-            <div
-              class="toggle-button__status"
-            >
-              <span
-                class="toggle-button__label-off"
-              >
-                Off
-              </span>
-              <span
-                class="toggle-button__label-on"
-              >
-                On
-              </span>
-            </div>
-          </label>
+            </label>
+          </div>
         </div>
       </div>
     </div>
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index a15173a80..abe5c188c 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -520,7 +520,12 @@ export default class SecurityTab extends PureComponent {
           {this.renderBatchAccountBalanceRequestsToggle()}
           {this.renderCollectibleDetectionToggle()}
         </div>
-        {this.renderMetaMetricsOptIn()}
+        <span className="settings-page__security-tab-sub-header">
+          {this.context.t('metrics')}
+        </span>
+        <div className="settings-page__content-padded">
+          {this.renderMetaMetricsOptIn()}
+        </div>
       </div>
     );
   }