Add profile wizard base page (https://github.com/woocommerce/woocommerce-admin/pull/1933)
* Add profile wizard base page * Update wizard base to the new color/font treatments
This commit is contained in:
parent
cab0e38c30
commit
00cbca33df
|
@ -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 ) {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue