Update "improve your measurement" section mobile design to match Figma

assets/js/components/conversion-tracking/ConversionTrackingToggle.js

@@ -51,30 +51,32 @@ export default function ConversionTrackingToggle( { children, loading } ) {
 	return (
 		<div>
 			<LoadingWrapper loading={ loading } width="180px" height="21.3px">
-				<Switch
-					label={ __(
-						'Enhanced conversion tracking',
-						'google-site-kit'
-					) }
-					checked={ isConversionTrackingEnabled }
-					disabled={ isSaving || loading }
-					onClick={ () => {
-						// If Conversion Tracking is currently enabled, show a confirmation
-						// dialog warning users about the impact of disabling it.
-						if ( isConversionTrackingEnabled ) {
-							trackEvent( `${ viewContext }`, 'ect_disable' );
+				<div className="googlesitekit-module-settings-group__switch">
+					<Switch
+						label={ __(
+							'Enhanced conversion tracking',
+							'google-site-kit'
+						) }
+						checked={ isConversionTrackingEnabled }
+						disabled={ isSaving || loading }
+						onClick={ () => {
+							// If Conversion Tracking is currently enabled, show a confirmation
+							// dialog warning users about the impact of disabling it.
+							if ( isConversionTrackingEnabled ) {
+								trackEvent( `${ viewContext }`, 'ect_disable' );
 
-							setShowConfirmDialog( true );
-						} else {
-							trackEvent( `${ viewContext }`, 'ect_enable' );
+								setShowConfirmDialog( true );
+							} else {
+								trackEvent( `${ viewContext }`, 'ect_enable' );
 
-							// Conversion Tracking is not currently enabled, so this toggle
-							// enables it.
-							setConversionTrackingEnabled( true );
-						}
-					} }
-					hideLabel={ false }
-				/>
+								// Conversion Tracking is not currently enabled, so this toggle
+								// enables it.
+								setConversionTrackingEnabled( true );
+							}
+						} }
+						hideLabel={ false }
+					/>
+				</div>
 			</LoadingWrapper>
 			{ !! saveError && <ErrorText message={ saveError.message } /> }
 			<LoadingWrapper

assets/js/components/first-party-mode/FirstPartyModeToggle.js

@@ -25,7 +25,7 @@ import { useMount } from 'react-use';
 /**
  * WordPress dependencies
  */
-import { Fragment, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -74,7 +74,7 @@ export default function FirstPartyModeToggle( { className } ) {
 				/>
 			) }
 			{ ! isLoading && (
-				<Fragment>
+				<div className="googlesitekit-module-settings-group__switch">
 					<Switch
 						label={ __( 'First-party mode', 'google-site-kit' ) }
 						checked={
@@ -85,12 +85,14 @@ export default function FirstPartyModeToggle( { className } ) {
 						onClick={ handleClick }
 						hideLabel={ false }
 					/>
-					<Badge
-						className="googlesitekit-badge--beta"
-						hasLeftSpacing
-						label={ __( 'Beta', 'google-site-kit' ) }
-					/>
-				</Fragment>
+					<div className="googlesitekit-first-party-mode-toggle__switch-badge">
+						<Badge
+							className="googlesitekit-badge--beta"
+							hasLeftSpacing
+							label={ __( 'Beta', 'google-site-kit' ) }
+						/>
+					</div>
+				</div>
 			) }
 			<p className="googlesitekit-module-settings-group__helper-text">
 				{ __(

assets/js/components/first-party-mode/__snapshots__/FirstPartyModeToggle.test.js.snap

@@ -6,43 +6,51 @@ exports[`FirstPartyModeToggle should render in default state 1`] = `
     class="googlesitekit-first-party-mode-toggle"
   >
     <div
-      aria-checked="false"
-      class="mdc-switch"
-      role="switch"
-      tabindex="0"
+      class="googlesitekit-module-settings-group__switch"
     >
       <div
-        class="mdc-switch__track"
+        aria-checked="false"
+        class="mdc-switch"
+        role="switch"
+        tabindex="0"
       >
-
+        <div
+          class="mdc-switch__track"
+        >
+
+        </div>
+        <div
+          class="mdc-switch__thumb-underlay"
+        >
+          <div
+            class="mdc-switch__thumb"
+          >
+            <input
+              class="mdc-switch__native-control"
+              id="googlesitekit-switch-4"
+              readonly=""
+              role="switch"
+              type="checkbox"
+            />
+          </div>
+        </div>
       </div>
+      <label
+        class=""
+        for="googlesitekit-switch-4"
+      >
+        First-party mode
+      </label>
       <div
-        class="mdc-switch__thumb-underlay"
+        class="googlesitekit-first-party-mode-toggle__switch-badge"
       >
-        <div
-          class="mdc-switch__thumb"
+        <span
+          class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
         >
-          <input
-            class="mdc-switch__native-control"
-            id="googlesitekit-switch-4"
-            readonly=""
-            role="switch"
-            type="checkbox"
-          />
-        </div>
+          Beta
+        </span>
       </div>
     </div>
-    <label
-      class=""
-      for="googlesitekit-switch-4"
-    >
-      First-party mode
-    </label>
-    <span
-      class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
-    >
-      Beta
-    </span>
     <p
       class="googlesitekit-module-settings-group__helper-text"
     >
@@ -58,44 +66,52 @@ exports[`FirstPartyModeToggle should render in disabled state if server requirem
     class="googlesitekit-first-party-mode-toggle"
   >
     <div
-      aria-checked="false"
-      class="mdc-switch mdc-switch--disabled"
-      role="switch"
-      tabindex="0"
+      class="googlesitekit-module-settings-group__switch"
     >
       <div
-        class="mdc-switch__track"
+        aria-checked="false"
+        class="mdc-switch mdc-switch--disabled"
+        role="switch"
+        tabindex="0"
       >
-
+        <div
+          class="mdc-switch__track"
+        >
+
+        </div>
+        <div
+          class="mdc-switch__thumb-underlay"
+        >
+          <div
+            class="mdc-switch__thumb"
+          >
+            <input
+              class="mdc-switch__native-control"
+              disabled=""
+              id="googlesitekit-switch-6"
+              readonly=""
+              role="switch"
+              type="checkbox"
+            />
+          </div>
+        </div>
       </div>
+      <label
+        class=""
+        for="googlesitekit-switch-6"
+      >
+        First-party mode
+      </label>
       <div
-        class="mdc-switch__thumb-underlay"
+        class="googlesitekit-first-party-mode-toggle__switch-badge"
       >
-        <div
-          class="mdc-switch__thumb"
+        <span
+          class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
         >
-          <input
-            class="mdc-switch__native-control"
-            disabled=""
-            id="googlesitekit-switch-6"
-            readonly=""
-            role="switch"
-            type="checkbox"
-          />
-        </div>
+          Beta
+        </span>
       </div>
     </div>
-    <label
-      class=""
-      for="googlesitekit-switch-6"
-    >
-      First-party mode
-    </label>
-    <span
-      class="googlesitekit-badge googlesitekit-badge--beta googlesitekit-badge--has-left-spacing"
-    >
-      Beta
-    </span>
     <p
       class="googlesitekit-module-settings-group__helper-text"
     >

assets/sass/components/settings/_googlesitekit-settings-group.scss

@@ -24,7 +24,11 @@
 		display: flex;
 		flex-direction: column;
 		gap: 20px;
-		padding: $grid-gap-desktop;
+		padding: $grid-gap-desktop $grid-gap-phone;
+
+		@media (min-width: $bp-tablet) {
+			padding: $grid-gap-desktop;
+		}
 
 		h4 {
 			font-family: $f-primary;
@@ -34,15 +38,24 @@
 			margin: 0;
 		}
 
+		.googlesitekit-module-settings-group__switch {
+			display: flex;
+
+			.mdc-switch {
+				top: 3px;
+			}
+		}
+
+		.googlesitekit-first-party-mode-toggle__switch-badge {
+			position: relative;
+			top: -2px;
+		}
+
 		.googlesitekit-module-settings-group__helper-text {
 			color: $c-surfaces-on-surface-variant;
 			flex-basis: 100%;
 			font-size: $fs-label-sm;
-			margin: 6px 0 0;
-
-			@media (min-width: $bp-tablet) {
-				margin-left: 42px; // margin-left = 32px switch width + 10px margin-left of label.
-			}
+			margin: 6px 0 0 $mdc-switch-track-width + $mdc-switch-label-margin-left;
 		}
 
 		.googlesitekit-analytics-enable-enhanced-measurement--loading {

assets/sass/config/_variables.scss

@@ -307,6 +307,7 @@ $mdc-typography-styles-subtitle1: (
 $mdc-text-field-error: $c-utility-error;
 $mdc-text-field-placeholder-ink-color: $c-interactive-on-disable-container;
 $mdc-text-field-label: $c-interactive-on-disable-container;
+$mdc-switch-label-margin-left: 10px;
 
 // Custom max width for settings notice content
 $max-width-settings-notice-content: 1098px;

assets/sass/vendor/_mdc-switch.scss

@@ -40,7 +40,7 @@
 		font-size: $fs-body-md;
 		letter-spacing: $ls-s;
 		line-height: $lh-body-md;
-		margin-left: 10px;
+		margin-left: $mdc-switch-label-margin-left;
 	}
 
 	.mdc-switch__track {