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,36 @@
 
 	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,80 @@
+@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;
+	}
+
+	@include is-mobile {
+		top: 46px;
+		height: 46px;
+	}
+
+	@include is-tablet() {
+		height: 80px;
+	}
+
+	@include is-desktop() {
+		top: 32px;
+		height: 80px;
+	}
 }

src/new-user-experience/onboarding/steps/payment-methods/index.js

@@ -81,11 +81,11 @@ export const PaymentMethods = () => {
 						</p>
 					</SectionDescription>
 				</div>
+			</div>
+			<div className="woo-square-onbarding__payment-settings--right">
 				<div className="woo-square-onbarding__payment-settings__center-icon">
 					<RightArrowInCircle />
 				</div>
-			</div>
-			<div className="woo-square-onbarding__payment-settings--right">
 				<div className="woo-square-onbarding__payment-settings__toggles">
 					<SectionTitle
 						title={ __(

src/new-user-experience/styles/index.scss

@@ -126,42 +126,6 @@ body {
 	margin-bottom: 15px;
 }
 
-.woo-square-onboarding__cover {
-	width: 400px;
-	max-width: 100%;
-	margin: 0;
-	text-align: center;
-	position: relative;
-
-	&.payment-complete,
-	&.payment-methods {
-		width: 100%;
-	}
-
-	&.payment-methods,
-	&.payment-complete {
-		.woo-square-onbarding__payment-settings__intro {
-			max-width: 592px;
-
-			@media screen and (max-width: 1800px) {
-				max-width: 80%;
-				left: 40%;
-			}
-		}
-	}
-
-	&:not(.payment-methods):not(.payment-complete) {
-		margin: 100px auto 50px;
-	}
-
-	.woo-square-wizard__fields {
-		width: 450px;
-		max-width: 100%;
-		margin: auto;
-		text-align: left;
-	}
-}
-
 .woo-square-loader {
     position: absolute;
     left: 0;