Enhancement/9643 one tap copy

assets/js/modules/sign-in-with-google/components/common/OneTapToggle.js

@@ -17,14 +17,16 @@
 /**
  * WordPress dependencies
  */
+import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { Switch } from 'googlesitekit-components';
+import { Switch, HelperText } from 'googlesitekit-components';
 import { useDispatch, useSelect } from 'googlesitekit-data';
 import { MODULES_SIGN_IN_WITH_GOOGLE } from '../../datastore/constants';
+import Link from '../../../../components/Link';
 
 export default function OneTapToggle() {
 	const oneTapEnabled = useSelect( ( select ) =>
@@ -33,13 +35,30 @@ export default function OneTapToggle() {
 	const { setOneTapEnabled } = useDispatch( MODULES_SIGN_IN_WITH_GOOGLE );
 
 	return (
-		<div className="googlesitekit-settings-module__fields-group">
+		<div className="googlesitekit-settings-module__fields-group googlesitekit-settings-module__one-tap">
 			<Switch
 				label={ __( 'Enable One Tap sign in', 'google-site-kit' ) }
 				checked={ oneTapEnabled }
 				onClick={ () => setOneTapEnabled( ! oneTapEnabled ) }
 				hideLabel={ false }
 			/>
+			<HelperText persistent>
+				{ createInterpolateElement(
+					__(
+						'One Tap allows users to sign in or sign up with one click offering smooth user entry points without redirecting to a dedicated sign in and sign up page. <a>Learn more</a>',
+						'google-site-kit'
+					),
+					{
+						a: (
+							<Link
+								key="link"
+								href="https://developers.google.com/identity/gsi/web/guides/offerings#one_tap"
+								external
+							/>
+						),
+					}
+				) }
+			</HelperText>
 		</div>
 	);
 }

assets/js/modules/sign-in-with-google/components/settings/SettingsForm.js

@@ -25,7 +25,6 @@ import {
 	ButtonThemeSelect,
 	ClientIDTextField,
 	OneTapToggle,
-	Preview,
 } from '../common';
 import { MODULES_SIGN_IN_WITH_GOOGLE } from '../../datastore/constants';
 import StoreErrorNotices from '../../../../components/StoreErrorNotices';
@@ -41,7 +40,7 @@ export default function SettingsForm() {
 			<Grid>
 				<Row>
 					<Cell size={ 8 }>
-						<Grid>
+						<Grid className="googlesitekit-sign-in-with-google-settings-fields__stretch-form">
 							<Row>
 								<Cell size={ 12 }>
 									<ClientIDTextField />
@@ -58,15 +57,10 @@ export default function SettingsForm() {
 									<ButtonShapeSelect />
 								</Cell>
 							</Row>
-							<Row>
-								<Cell size={ 12 }>
-									<OneTapToggle />
-								</Cell>
-							</Row>
 						</Grid>
 					</Cell>
-					<Cell size={ 4 }>
-						<Preview />
+					<Cell size={ 12 }>
+						<OneTapToggle />
 					</Cell>
 				</Row>
 			</Grid>

assets/sass/components/sign-in-with-google/_googlesitekit-sign-in-with-google-settings-module.scss

@@ -20,20 +20,112 @@
 
 	.googlesitekit-settings-module--sign-in-with-google {
 
+		.googlesitekit-settings-module__footer {
+			margin-top: 30px;
+		}
+
 		& > .mdc-layout-grid {
 			margin-bottom: 0;
 		}
 
-		.googlesitekit-sign-in-with-google-settings-fields .mdc-layout-grid {
-			padding: 0;
-		}
+		.googlesitekit-sign-in-with-google-settings-fields {
 
-		.googlesitekit-sign-in-with-google-settings-fields .mdc-layout-grid .mdc-layout-grid .mdc-layout-grid__inner {
-			margin-bottom: $grid-gap-desktop;
-		}
+			.googlesitekit-text-field-client-id,
+			.mdc-select,
+			.mdc-select__selected-text {
+				height: 52px;
+			}
+
+			.mdc-select {
+				width: 100%;
+
+				.mdc-select__selected-text {
+					min-width: 100%;
+					padding-top: 12px;
+
+					@media (min-width: $bp-desktop) and (max-width: $bp-xlarge) {
+						padding-right: 28px;
+					}
+				}
+
+				.mdc-select__dropdown-icon {
+					bottom: 14px;
+				}
+
+				&.mdc-select--focused {
+					.mdc-select__dropdown-icon {
+						transform: rotate(180deg);
+					}
+				}
+			}
+
+			.googlesitekit-settings-module__one-tap {
+				@media (min-width: $bp-xlarge) {
+					margin-top: 10px;
+				}
+
+				.mdc-switch {
+					margin-left: 3px;
+				}
+
+				p {
+					color: $c-surfaces-on-background-variant;
+					letter-spacing: $ls-xs;
+					margin: 4px 0 0;
+				}
+			}
+
+			.googlesitekit-sign-in-with-google-settings-fields__button-preview {
+
+				@media (min-width: $bp-xlarge) {
+					margin-left: 30px;
+				}
+
+				.mdc-layout-grid__inner {
+					@media (min-width: $bp-desktop) {
+						display: block;
+					}
+				}
+			}
+
+			.mdc-layout-grid {
+				padding: 0;
+
+				.mdc-layout-grid {
+					.mdc-layout-grid__inner {
+						margin-bottom: $grid-gap-desktop;
+					}
+				}
+
+				&.googlesitekit-sign-in-with-google-settings-fields__stretch-form {
+					@media (min-width: $bp-xlarge) {
+						display: flex;
+						flex-direction: column;
+						height: 100%;
+						justify-content: space-between;
+						margin-right: 52px;
+						width: 100%;
+					}
+
+					> .mdc-layout-grid__inner:last-child {
+						@media (min-width: $bp-desktop) {
+							margin-bottom: 0;
+						}
+
+						.mdc-layout-grid__cell {
+							@media (min-width: $bp-xlarge) {
+								margin-right: 14px;
+							}
 
-		.mdc-select {
-			width: 100%;
+							&:last-child {
+								@media (min-width: $bp-xlarge) {
+									margin: 0;
+								}
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 }