Onboarding: Fix alignment of container on benefits screen. (https://github.com/woocommerce/woocommerce-admin/pull/4837)

This commit is contained in:
Timmy Crawford 2020-07-21 14:03:34 -07:00 committed by GitHub
parent e2d41ea718
commit ae6f5d4615
2 changed files with 8 additions and 4 deletions

View File

@ -288,6 +288,7 @@ class ProfileWizard extends Component {
render() {
const { query } = this.props;
const step = this.getCurrentStep();
const stepKey = step.key;
const container = createElement( step.container, {
query,
@ -300,13 +301,12 @@ class ProfileWizard extends Component {
const steps = this.getSteps().map( ( _step ) =>
pick( _step, [ 'key', 'label', 'isComplete' ] )
);
const classNames = `woocommerce-profile-wizard__container ${ stepKey }`;
return (
<Fragment>
<ProfileWizardHeader currentStep={ step.key } steps={ steps } />
<div className="woocommerce-profile-wizard__container">
{ container }
</div>
<ProfileWizardHeader currentStep={ stepKey } steps={ steps } />
<div className={ classNames }>{ container }</div>
</Fragment>
);
}

View File

@ -85,6 +85,10 @@
margin-right: auto;
}
&.benefits {
text-align: center;
}
@include breakpoint( '<782px' ) {
padding-left: $gap;
padding-right: $gap;