Fix MetaMetrics settings toggle styling (#17224)

app/_locales/en/messages.json

@@ -2069,6 +2069,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."

ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap

@@ -478,6 +478,14 @@ 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-padded"
+    >
       <div
         class="settings-page__content-row"
       >
@@ -551,4 +559,5 @@ exports[`Security Tab should match snapshot 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;

ui/pages/settings/security-tab/security-tab.component.js

@@ -520,8 +520,13 @@ export default class SecurityTab extends PureComponent {
           {this.renderBatchAccountBalanceRequestsToggle()}
           {this.renderCollectibleDetectionToggle()}
         </div>
+        <span className="settings-page__security-tab-sub-header">
+          {this.context.t('metrics')}
+        </span>
+        <div className="settings-page__content-padded">
           {this.renderMetaMetricsOptIn()}
         </div>
+      </div>
     );
   }
 }