New wizard step layout

[MAILPOET-2784]

assets/css/src/components-plugin/_welcome-wizard.scss

@@ -8,8 +8,64 @@
   .wrap {
     margin: 0;
   }
+
+  div.updated,
+  div.error,
+  .notice {
+    display: none !important;
+  }
 }
 
+.mailpoet-wizard-logo {
+  margin-bottom: 100px;
+  text-align: center;
+
+  @include respond-to(medium-screen) {
+    margin-bottom: 20px;
+  }
+}
+
+.mailpoet-wizard-step {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  @include respond-to(medium-screen) {
+    flex-direction: column;
+  }
+}
+
+.mailpoet-wizard-step-illustration {
+  margin-right: $grid-gap;
+  max-width: $grid-column;
+  text-align: center;
+  width: 100%;
+
+  img {
+    max-height: 300px;
+    max-width: 100%;
+  }
+
+  @include respond-to(medium-screen) {
+    margin-right: 0;
+    max-width: $grid-column-small;
+
+    img {
+      max-height: 240px;
+    }
+  }
+}
+
+.mailpoet-wizard-step-content {
+  max-width: $grid-column-small + $grid-gap + $grid-column;
+  width: 100%;
+
+  @include respond-to(medium-screen) {
+    max-width: $grid-column;
+  }
+}
+
+// Welcome wizard - old styles
 .mailpoet_welcome_wizard_header {
   text-align: center;
 }
@@ -25,45 +81,12 @@
   }
 }
 
-.mailpoet_welcome_wizard_flex {
-  display: flex;
-}
-
-.mailpoet_welcome_wizard_illustration {
-  flex-grow: 1;
-  height: 400px;
-  padding: 60px 40px 40px 60px;
-  text-align: right;
-  width: 50%;
-
-  img {
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  @include breakpoint-max-width(782px) {
-    display: none;
-  }
-}
-
 .mailpoet_welcome_wizard_step_revenue_tracking {
   input[type='submit'] {
     margin-top: 40px;
   }
 }
 
-.mailpoet_welcome_wizard_step {
-  flex-grow: 1;
-  padding: 60px 60px 40px 40px;
-  text-align: left;
-  width: 50%;
-
-  @include breakpoint-max-width(782px) {
-    padding: 30px;
-    width: 100%;
-  }
-}
-
 .mailpoet_welcome_wizard_step_content {
   margin-top: 40px;
   max-width: 620px;

assets/js/src/wizard/layout/step_layout.jsx

@@ -5,8 +5,8 @@ import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
 
 const WelcomeWizardStepLayout = (props) => (
   <>
-    <div className="mailpoet_welcome_wizard_header">
-      <img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
+    <div className="mailpoet-wizard-logo">
+      <img src={window.mailpoet_logo_url} width="160" height="50" alt="MailPoet logo" />
     </div>
     <WelcomeWizardStepLayoutBody
       illustrationUrl={props.illustrationUrl}

assets/js/src/wizard/layout/step_layout_body.jsx

@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const WelcomeWizardStepLayoutBody = (props) => (
-  <div className="mailpoet_welcome_wizard_flex">
-    <div className="mailpoet_welcome_wizard_illustration">
+  <div className="mailpoet-wizard-step">
+    <div className="mailpoet-wizard-step-illustration">
       <img src={props.illustrationUrl} alt="" />
     </div>
-    <div className="mailpoet_welcome_wizard_step">
+    <div className="mailpoet-wizard-step-content">
       {props.children}
     </div>
   </div>

assets/js/src/wizard/welcome_wizard_controller.jsx

@@ -78,7 +78,6 @@ const WelcomeWizardStepsController = (props) => {
     <>
       <Steps count={stepsCount} current={step} />
       <StepsContent>
-        <div className="mailpoet_welcome_wizard_steps">
         { stepName === 'WelcomeWizardSenderStep'
           ? (
             <WelcomeWizardStepLayout
@@ -143,7 +142,6 @@ const WelcomeWizardStepsController = (props) => {
               />
             </WelcomeWizardStepLayout>
           ) : null}
-        </div>
       </StepsContent>
     </>
   );