chore: fix security settings layout

MetaMask · Dec 16, 2024 · 71f1188 · 71f1188
1 parent edd7b25
commit 71f1188
Showing 1 changed file with 43 additions and 34 deletions.
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
@@ -26,7 +26,7 @@ import {
 import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz';
 import {
   Button,
-  BUTTON_SIZES,
+  ButtonSize,
   Icon,
   IconSize,
   IconName,
@@ -44,6 +44,7 @@ import {
   TextColor,
   TextVariant,
   IconColor,
+  AlignItems,
 } from '../../../helpers/constants/design-system';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import {
@@ -177,7 +178,7 @@ export default class SecurityTab extends PureComponent {
           <Button
             data-testid="reveal-seed-words"
             type="danger"
-            size={BUTTON_SIZES.LG}
+            size={ButtonSize.Lg}
             onClick={(event) => {
               event.preventDefault();
               this.context.trackEvent({
@@ -1042,8 +1043,44 @@ export default class SecurityTab extends PureComponent {
         data-testid="advanced-setting-show-testnet-conversion"
       >
         <div className="settings-page__content-item">
-          <span>{t('basicConfigurationLabel')}</span>
-          <div className="settings-page__content-description">
+          <Box
+            display={Display.Flex}
+            justifyContent={JustifyContent.spaceBetween}
+            alignItems={AlignItems.center}
+            marginBottom={2}
+          >
+            <Text variant={TextVariant.headingSm}>
+              {t('basicConfigurationLabel')}
+            </Text>
+            <ToggleButton
+              value={useExternalServices}
+              onToggle={() => {
+                if (useExternalServices) {
+                  // If we are going to be disabling external services, then we want to show the "turn off" warning modal
+                  setBasicFunctionalityModalOpen();
+                } else {
+                  toggleExternalServices(true);
+                  this.context.trackEvent({
+                    category: MetaMetricsEventCategory.Settings,
+                    event: MetaMetricsEventName.SettingsUpdated,
+                    properties: {
+                      settings_group: 'security_privacy',
+                      settings_type: 'basic_functionality',
+                      old_value: false,
+                      new_value: true,
+                      // these values will always be set to false
+                      // when basic functionality is re-enabled
+                      was_notifications_on: false,
+                      was_profile_syncing_on: false,
+                    },
+                  });
+                }
+              }}
+              offLabel={t('off')}
+              onLabel={t('on')}
+            />
+          </Box>
+          <Text marginBottom={2} color={TextColor.textAlternative}>
             {t('basicConfigurationDescription', [
               <a
                 href="https://consensys.io/privacy-policy"
@@ -1054,38 +1091,10 @@ export default class SecurityTab extends PureComponent {
                 {t('privacyMsg')}
               </a>,
             ])}
-          </div>
+          </Text>
         </div>
 
-        <div className="settings-page__content-item-col">
-          <ToggleButton
-            value={useExternalServices}
-            onToggle={() => {
-              if (useExternalServices) {
-                // If we are going to be disabling external services, then we want to show the "turn off" warning modal
-                setBasicFunctionalityModalOpen();
-              } else {
-                toggleExternalServices(true);
-                this.context.trackEvent({
-                  category: MetaMetricsEventCategory.Settings,
-                  event: MetaMetricsEventName.SettingsUpdated,
-                  properties: {
-                    settings_group: 'security_privacy',
-                    settings_type: 'basic_functionality',
-                    old_value: false,
-                    new_value: true,
-                    // these values will always be set to false
-                    // when basic functionality is re-enabled
-                    was_notifications_on: false,
-                    was_profile_syncing_on: false,
-                  },
-                });
-              }
-            }}
-            offLabel={t('off')}
-            onLabel={t('on')}
-          />
-        </div>
+        <div className="settings-page__content-item-col"></div>
       </Box>
     );
   }