fix/202: make "You're connected to Square" page entire UI to be visible

src/new-user-experience/components/onboarding-header/index.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies.
  */
-import { Button, Flex, FlexBlock, FlexItem } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -20,38 +20,35 @@ export const OnboardingHeader = () => {
 
 	return (
 		<div className="woo-square-onboarding__header">
-			<Flex direction={ [ 'column', 'row' ] }>
-				<FlexItem className="flexItem backBtn">
-					{ backStep && (
-						<Button
-							data-testid="previous-step-button"
-							onClick={ () => setStep( backStep ) }
-						>
-							<Back />
-							<span>{ __( 'Back', 'woocommerce-square' ) }</span>
-						</Button>
-					) }
-				</FlexItem>
-				<FlexBlock className="wizardTitle">
-					<Square />
-				</FlexBlock>
-				<FlexItem className="flexItem closeWizard">
+			<div className="flexItem backBtn">
+				{ backStep && (
 					<Button
-						onClick={ () => {
-							queueRecordEvent(
-								ONBOARDING_TRACK_EVENTS.EXIT_CLICKED,
-								{
-									exited_on_step: stepData.step,
-								}
-							);
-							window.location.href =
-								wc.wcSettings.getAdminLink( '' );
-						} }
+						data-testid="previous-step-button"
+						onClick={ () => setStep( backStep ) }
 					>
-						<Close />
+						<Back />
+						<span>{ __( 'Back', 'woocommerce-square' ) }</span>
 					</Button>
-				</FlexItem>
-			</Flex>
+				) }
+			</div>
+			<div className="wizardTitle">
+				<Square />
+			</div>
+			<div className="flexItem closeWizard">
+				<Button
+					onClick={ () => {
+						queueRecordEvent(
+							ONBOARDING_TRACK_EVENTS.EXIT_CLICKED,
+							{
+								exited_on_step: stepData.step,
+							}
+						);
+						window.location.href = wc.wcSettings.getAdminLink( '' );
+					} }
+				>
+					<Close />
+				</Button>
+			</div>
 		</div>
 	);
 };

src/new-user-experience/components/onboarding-header/index.scss

@@ -1,42 +1,81 @@
+@mixin is-below-mobile {
+	@media screen and (max-width: 600px) {
+		@content;
+	}
+}
+
+@mixin is-mobile {
+	@media screen and (min-width: 601px) and (max-width: 782px) {
+		@content;
+	}
+}
+
+@mixin is-tablet {
+	@media screen and (min-width: 783px) and (max-width: 960px) {
+		@content;
+	}
+}
+
+@mixin is-desktop {
+	@media screen and (min-width: 961px) {
+		@content;
+	}
+}
+
 .woo-square-onboarding__header {
-    position: absolute;
-    top: 0;
-    left: -20px;
-    width: calc(100% + 20px);
-    background: #fff;
-    padding: 22px 0;
-    border-bottom: 0.5px solid #bfbfbf;
-    z-index: 9999;
-
-    .backBtn {
-        button {
-            margin-left: 10px;
-            font-weight: 590;
-        }
-
-        svg {
-            margin: 0 10px -2px 0;
-        }
-    }
-
-    .wizardTitle {
-        text-align: center;
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 200px;
-        margin: auto;
-
-        svg {
-            margin: 0 10px -7px;
-        }
-
-        span {
-            font-weight: 700;
-        }
-    }
-
-    .closeWizard {
-        margin-right: 20px;
-    }
+	position: fixed;
+	top: 46px;
+	width: calc( 100% - 160px );
+	display: flex;
+
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 0.5px solid #bfbfbf;
+	background-color: #fff;
+	z-index: 999;
+
+	@media screen and (max-width: 960px) {
+		top: 32px;
+		width: calc( 100% - 36px );
+	}
+
+	@media screen and (max-width: 782px) {
+		width: 100%;
+	}
+
+	.backBtn {
+		button {
+			display: flex !important;
+
+			span {
+				display: inline-block;
+				margin-left: 12px;
+			}
+		}
+	}
+
+	.wizardTitle {
+		display: flex;
+		justify-content: center;
+	}
+
+	@include is-below-mobile() {
+		top: 46px;
+		height: 46px;
+		position: absolute;
+	}
+
+	@include is-mobile {
+		top: 46px;
+		height: 46px;
+	}
+
+	@include is-tablet() {
+		height: 80px;
+	}
+
+	@include is-desktop() {
+		top: 32px;
+		height: 80px;
+	}
 }

src/new-user-experience/onboarding/onboarding-app.js

@@ -31,6 +31,14 @@ import {
 import { recordEvent, ONBOARDING_TRACK_EVENTS } from '../../tracks';
 import { connectToSquare } from '../utils';
 
+const SettingsWrapper = ( { children } ) => {
+	return (
+		<div className="woo-square-onboarding__settings-wrapper">
+			{ children }
+		</div>
+	);
+};
+
 export const OnboardingApp = () => {
 	const [ settingsLoaded, setSettingsLoaded ] = useState( false );
 	const [ sandboxConnectLabel, setSandboxConnectLabel ] = useState( '' );
@@ -163,9 +171,13 @@ export const OnboardingApp = () => {
 		<>
 			<OnboardingHeader />
 			<div className={ 'woo-square-onboarding__cover ' + step }>
-				{ step === 'connect-square' && <ConnectSetup /> }
+				{ step === 'connect-square' && (
+					<SettingsWrapper>
+						<ConnectSetup />
+					</SettingsWrapper>
+				) }
 				{ step === 'business-location' && (
-					<>
+					<SettingsWrapper>
 						<BusinessLocation />
 						{ settings.locations.length ? (
 							<SquareSettingsSaveButton
@@ -192,12 +204,12 @@ export const OnboardingApp = () => {
 								} }
 							/>
 						) : null }
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'payment-methods' && <PaymentMethods /> }
 				{ step === 'payment-complete' && <PaymentComplete /> }
 				{ step === 'credit-card' && (
-					<>
+					<SettingsWrapper>
 						<CreditCardSetup />
 						<PaymentGatewaySettingsSaveButton
 							data-testid="credit-card-settings-save-button"
@@ -208,10 +220,10 @@ export const OnboardingApp = () => {
 								} )();
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'digital-wallets' && (
-					<>
+					<SettingsWrapper>
 						<DigitalWalletsSetup />
 						<PaymentGatewaySettingsSaveButton
 							data-testid="digital-wallets-settings-save-button"
@@ -229,10 +241,10 @@ export const OnboardingApp = () => {
 								} )();
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'gift-card' && (
-					<>
+					<SettingsWrapper>
 						<GiftCardSetup />
 						<PaymentGatewaySettingsSaveButton
 							data-testid="gift-card-settings-save-button"
@@ -243,10 +255,10 @@ export const OnboardingApp = () => {
 								} )();
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'cash-app' && (
-					<>
+					<SettingsWrapper>
 						<CashAppSetup />
 						<PaymentGatewaySettingsSaveButton
 							data-testid="cash-app-settings-save-button"
@@ -257,10 +269,10 @@ export const OnboardingApp = () => {
 								} )();
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'sync-settings' && (
-					<>
+					<SettingsWrapper>
 						<ConfigureSync />
 						<SquareSettingsSaveButton
 							data-testid="square-settings-save-button"
@@ -298,10 +310,10 @@ export const OnboardingApp = () => {
 								setStep( 'payment-complete' );
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'advanced-settings' && (
-					<>
+					<SettingsWrapper>
 						<AdvancedSettings />
 						<SquareSettingsSaveButton
 							data-testid="square-settings-save-button"
@@ -317,10 +329,10 @@ export const OnboardingApp = () => {
 								setStep( 'payment-complete' );
 							} }
 						/>
-					</>
+					</SettingsWrapper>
 				) }
 				{ step === 'sandbox-settings' && (
-					<>
+					<SettingsWrapper>
 						<SandboxSettings />
 						{ sandboxConnected &&
 							( businessLocationLoaded ||
@@ -382,7 +394,7 @@ export const OnboardingApp = () => {
 							{ sandboxConnectLabel }
 							{ isVerifyingConnection && <Spinner /> }
 						</p>
-					</>
+					</SettingsWrapper>
 				) }
 			</div>
 		</>