Move Back button to topbar on Jetpack Connection screens (#103463)

* Remove back button from Connection screen footer

* Add back button to the compact logo topbar

* Use compact logo & menu in connection screens

Author: robertsreberski

client/jetpack-connect/jetpack-connection.jsx

@@ -1,6 +1,5 @@
 import { PLAN_JETPACK_FREE } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
-import { Button, Gridicon } from '@automattic/components';
 import debugModule from 'debug';
 import { localize } from 'i18n-calypso';
 import { flowRight, get, omit } from 'lodash';
@@ -82,19 +81,6 @@ const jetpackConnection = ( WrappedComponent ) => {
 						{ translate( 'Install Jetpack manually' ) }
 					</LoggedOutFormLinkItem>
 					<HelpButton />
-					{ this.canGoBack() && (
-						<div className="jetpack-connect__navigation">
-							<Button
-								compact
-								borderless
-								className="jetpack-connect__back-button"
-								onClick={ this.goBack }
-							>
-								<Gridicon icon="arrow-left" size={ 18 } />
-								{ translate( 'Back' ) }
-							</Button>
-						</div>
-					) }
 				</LoggedOutFormLinks>
 			);
 		};
@@ -325,6 +311,8 @@ const jetpackConnection = ( WrappedComponent ) => {
 					status={ this.state.status }
 					renderFooter={ this.renderFooter }
 					renderNotices={ this.renderNotices }
+					canGoBack={ this.canGoBack() }
+					goBack={ this.goBack }
 					isCurrentUrlFetching={ this.isCurrentUrlFetching() }
 					{ ...props }
 				/>

client/jetpack-connect/main-wrapper.jsx

@@ -1,3 +1,5 @@
+import { Button } from '@wordpress/components';
+import { chevronLeftSmall } from '@wordpress/icons';
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -20,6 +22,7 @@ export class JetpackConnectMainWrapper extends PureComponent {
 		pageTitle: PropTypes.string,
 		// Whether to use a compact logo in the left corner or the main center logo
 		useCompactLogo: PropTypes.bool,
+		compactBackButton: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -42,6 +45,7 @@ export class JetpackConnectMainWrapper extends PureComponent {
 			wooDnaConfig,
 			pageTitle,
 			useCompactLogo,
+			compactBackButton,
 		} = this.props;
 
 		const isWooDna = wooDnaConfig && wooDnaConfig.isWooDnaFlow();
@@ -62,20 +66,33 @@ export class JetpackConnectMainWrapper extends PureComponent {
 		return (
 			<Main className={ clsx( className, wrapperClassName ) }>
 				{ useCompactLogo && (
-					<div className="jetpack-connect__compact-logo">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="24"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="none"
-						>
-							<path
-								d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519938 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C24 8.8174 22.7357 5.76515 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0ZM11.3684 13.9895H5.40632L11.3684 2.35579V13.9895ZM12.5811 21.6189V9.98526H18.5621L12.5811 21.6189Z"
-								fill="#069E08"
-							/>
-						</svg>
-					</div>
+					<>
+						<div className="jetpack-connect__compact-logo">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+							>
+								<path
+									d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519938 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C24 8.8174 22.7357 5.76515 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0ZM11.3684 13.9895H5.40632L11.3684 2.35579V13.9895ZM12.5811 21.6189V9.98526H18.5621L12.5811 21.6189Z"
+									fill="#069E08"
+								/>
+							</svg>
+							{ compactBackButton && (
+								<Button
+									compact
+									borderless
+									icon={ chevronLeftSmall }
+									className="jetpack-connect__back-button jetpack-connect__back-button--compact"
+									onClick={ compactBackButton }
+								>
+									{ translate( 'Back' ) }
+								</Button>
+							) }
+						</div>
+					</>
 				) }
 				<DocumentHead
 					title={ pageTitle || translate( 'Jetpack Connect' ) }

client/jetpack-connect/main.jsx

@@ -124,9 +124,9 @@ export class JetpackConnectMain extends Component {
 	}
 
 	render() {
-		const { renderFooter, status, type } = this.props;
+		const { renderFooter, status, type, canGoBack, goBack } = this.props;
 		return (
-			<MainWrapper>
+			<MainWrapper useCompactLogo compactBackButton={ canGoBack && goBack }>
 				{ this.renderLocaleSuggestions() }
 				<div className="jetpack-connect__site-url-entry-container">
 					<MainHeader type={ type } />

client/jetpack-connect/style.scss

@@ -51,7 +51,6 @@ $colophon-height: 50px;
 	&.layout {
 		position: relative;
 		min-height: calc(100% - #{$colophon-height});
-		padding-bottom: $colophon-height;
 	}
 
 	// Hide the masterbar for real
@@ -125,9 +124,24 @@ $colophon-height: 50px;
 }
 
 .jetpack-connect__compact-logo {
+	display: flex;
 	position: absolute;
 	top: 24px;
 	left: 24px;
+
+	align-items: center;
+	column-gap: 16px;
+
+	.jetpack-connect__back-button {
+		--wp-components-color-accent: var(--color-accent-dark);
+
+		margin-top: 0;
+
+		&:focus {
+			outline: none;
+			box-shadow: none;
+		}
+	}
 }
 
 .jetpack-connect__main.is-wide {
@@ -144,7 +158,7 @@ $colophon-height: 50px;
 
 .jetpack-connect__site-url-entry-container,
 .purchase-product__site-url-entry-container {
-	margin: 0 auto;
+	margin: 10vh auto 0; // match spacing of onboarding flow (.jetpack-connect__authorize-form-wrapper--onboarding)
 	max-width: 400px;
 
 	.formatted-header {
@@ -839,7 +853,6 @@ $colophon-height: 50px;
 	&.layout {
 		position: relative;
 		min-height: calc(100% - #{$colophon-height});
-		padding-bottom: $colophon-height;
 	}
 
 	.site__title::after,