Only show the Jetpack logo in the header if we need to setup Jetpack (https://github.com/woocommerce/woocommerce-admin/pull/3160)

* Only show the Jetpack logo in the header if we need to setup Jetpack

* Adjust woo logo position

plugins/woocommerce-admin/client/dashboard/profile-wizard/header-logo.js

@@ -1,18 +1,42 @@
 /** @format */
+/**
+ * External dependencies
+ */
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import classNames from 'classnames';
 
-export default () => (
+/**
+ * Internal depdencies
+ */ import withSelect from 'wc-api/with-select';
+
+class HeaderLogo extends Component {
+	render() {
+		const { isJetpackConnected } = this.props;
+
+		const ariaLabel = ! isJetpackConnected ? 'Jetpack + WooCommerce' : 'WooCommerce';
+		const classes = classNames( 'woocommerce-profile-wizard__header-logo', {
+			'woocommerce-profile-wizard__header-logo-with-jetpack': ! isJetpackConnected,
+		} );
+
+		return (
 			<svg
 				role="img"
-		aria-label="Jetpack + Woo"
+				aria-label={ ariaLabel }
 				width="200"
 				viewBox="0 0 1270 170"
 				version="1.1"
 				xmlns="http://www.w3.org/2000/svg"
+				className={ classes }
 			>
 				<g fill="none" fillRule="evenodd">
 					<g>
 						<g>
-					<g transform="translate(219 35.082353)" className="woocommerce-profile-wizard__plus">
+							{ ! isJetpackConnected && (
+								<g
+									transform="translate(219 35.082353)"
+									className="woocommerce-profile-wizard__plus"
+								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 24 24"
@@ -25,6 +49,7 @@ export default () => (
 										</g>
 									</svg>
 								</g>
+							) }
 							<g fillRule="nonzero" transform="translate(360)">
 								<path
 									d="M23.7,0.2 L222.8,0.2 C235.4,0.2 245.6,10.4 245.6,23
@@ -78,6 +103,7 @@ export default () => (
 									fillRule="nonzero"
 								/>
 							</g>
+							{ ! isJetpackConnected && (
 								<svg height="150" width="150" viewBox="0 0 32 32">
 									<path
 										fill="#2B2D2F"
@@ -86,8 +112,20 @@ export default () => (
 									<polygon fill="#F6F6F6" points="15,19 7,19 15,3 " />
 									<polygon fill="#F6F6F6" points="17,29 17,13 25,13 " />
 								</svg>
+							) }
 						</g>
 					</g>
 				</g>
 			</svg>
 		);
+	}
+}
+
+export default compose(
+	withSelect( select => {
+		const { isJetpackConnected } = select( 'wc-api' );
+		return {
+			isJetpackConnected: isJetpackConnected(),
+		};
+	} )
+)( HeaderLogo );

plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss

@@ -57,7 +57,11 @@
 		justify-content: center;
 		background: $studio-white;
 
-		svg > g {
+		svg.woocommerce-profile-wizard__header-logo > g {
+			transform: translateX(12%);
+		}
+
+		svg.woocommerce-profile-wizard__header-logo-with-jetpack > g {
 			transform: translateX(25%);
 		}