* Add profile wizard base page

* Update wizard base to the new color/font treatments
This commit is contained in:
Justin Shreve 2019-05-07 15:25:51 -04:00 committed by GitHub
parent cab0e38c30
commit 00cbca33df
3 changed files with 90 additions and 0 deletions

View File

@ -16,9 +16,16 @@ import Leaderboards from './leaderboards';
import { ReportFilters } from '@woocommerce/components';
import StorePerformance from './store-performance';
import TaskList from './task-list';
import ProfileWizard from './profile-wizard';
export default class Dashboard extends Component {
renderDashboardOutput() {
// @todo This should be replaced by a check from the REST API response from #1897.
const profileWizardComplete = true;
if ( window.wcAdminFeatures.onboarding && ! profileWizardComplete ) {
return <ProfileWizard />;
}
// @todo This should be replaced by a check of tasks from the REST API response from #1897.
const requiredTasksComplete = true;
if ( window.wcAdminFeatures.onboarding && ! requiredTasksComplete ) {

View File

@ -0,0 +1,40 @@
/** @format */
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
/**
* Internal depdencies
*/
import './style.scss';
import { H } from '@woocommerce/components';
export default class ProfileWizard extends Component {
componentDidMount() {
document.body.classList.add( 'woocommerce-profile-wizard__body' );
}
componentWillUnmount() {
document.body.classList.remove( 'woocommerce-profile-wizard__body' );
}
render() {
return (
<div className="woocommerce-profile-wizard__container">
<H className="woocommerce-profile-wizard__header-title">
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
</H>
<p>
{ __(
'Simplify and enhance the setup of your store with features and benefits offered by Jetpack ' +
'& WooCommerce Services.',
'woocommerce-admin'
) }
</p>
</div>
);
}
}

View File

@ -0,0 +1,43 @@
/** @format */
.woocommerce-profile-wizard__body {
background: #342248;
color: #beabce;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
.woocommerce-profile-wizard__header-title {
color: #fff;
font-size: 24px;
line-height: 32px;
font-weight: 400;
}
.woocommerce-profile-wizard__container {
p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
}
#woocommerce-layout__primary {
text-align: center;
margin-left: auto;
margin-right: auto;
@include breakpoint( '>960px' ) {
width: 70%;
}
}
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard*/
#adminmenumain,
#wpadminbar,
.woocommerce-layout__header {
display: none;
}
#wpcontent {
margin-left: 0;
}
}