From 717d33a220b2242cb772794e4da7c9f8e41dce1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Tue, 23 Jun 2020 14:51:08 +0200
Subject: [PATCH] New wizard step layout

[MAILPOET-2784]
---
 .../components-plugin/_welcome-wizard.scss    |  89 ++++++++-----
 assets/js/src/wizard/layout/step_layout.jsx   |   4 +-
 .../js/src/wizard/layout/step_layout_body.jsx |   6 +-
 .../src/wizard/welcome_wizard_controller.jsx  | 122 +++++++++---------
 4 files changed, 121 insertions(+), 100 deletions(-)

diff --git a/assets/css/src/components-plugin/_welcome-wizard.scss b/assets/css/src/components-plugin/_welcome-wizard.scss
index 8734ebded0..9e9f990502 100644
--- a/assets/css/src/components-plugin/_welcome-wizard.scss
+++ b/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;
diff --git a/assets/js/src/wizard/layout/step_layout.jsx b/assets/js/src/wizard/layout/step_layout.jsx
index 7b8c738777..78e079b2c1 100644
--- a/assets/js/src/wizard/layout/step_layout.jsx
+++ b/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}
diff --git a/assets/js/src/wizard/layout/step_layout_body.jsx b/assets/js/src/wizard/layout/step_layout_body.jsx
index 7a46cd7fe5..b3845ea549 100644
--- a/assets/js/src/wizard/layout/step_layout_body.jsx
+++ b/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>
diff --git a/assets/js/src/wizard/welcome_wizard_controller.jsx b/assets/js/src/wizard/welcome_wizard_controller.jsx
index 9c4ae29871..cd4b7af568 100644
--- a/assets/js/src/wizard/welcome_wizard_controller.jsx
+++ b/assets/js/src/wizard/welcome_wizard_controller.jsx
@@ -78,72 +78,70 @@ const WelcomeWizardStepsController = (props) => {
     <>
       <Steps count={stepsCount} current={step} />
       <StepsContent>
-        <div className="mailpoet_welcome_wizard_steps">
-          { stepName === 'WelcomeWizardSenderStep'
-            ? (
-              <WelcomeWizardStepLayout
-                illustrationUrl={window.wizard_sender_illustration_url}
-              >
-                <WelcomeWizardSenderStep
-                  update_sender={updateSender}
-                  submit_sender={submitSender}
-                  finish={skipSenderStep}
-                  loading={loading}
-                  sender={sender}
-                />
-              </WelcomeWizardStepLayout>
-            ) : null}
+        { stepName === 'WelcomeWizardSenderStep'
+          ? (
+            <WelcomeWizardStepLayout
+              illustrationUrl={window.wizard_sender_illustration_url}
+            >
+              <WelcomeWizardSenderStep
+                update_sender={updateSender}
+                submit_sender={submitSender}
+                finish={skipSenderStep}
+                loading={loading}
+                sender={sender}
+              />
+            </WelcomeWizardStepLayout>
+          ) : null}
 
-          { stepName === 'WelcomeWizardMigratedUserStep'
-            ? (
-              <WelcomeWizardStepLayout
-                illustrationUrl={window.wizard_sender_illustration_url}
-              >
-                <WelcomeWizardMigratedUserStep
-                  next={() => redirect(step)}
-                />
-              </WelcomeWizardStepLayout>
-            ) : null}
+        { stepName === 'WelcomeWizardMigratedUserStep'
+          ? (
+            <WelcomeWizardStepLayout
+              illustrationUrl={window.wizard_sender_illustration_url}
+            >
+              <WelcomeWizardMigratedUserStep
+                next={() => redirect(step)}
+              />
+            </WelcomeWizardStepLayout>
+          ) : null}
 
-          { stepName === 'WelcomeWizardEmailCourseStep'
-            ? (
-              <WelcomeWizardStepLayout
-                illustrationUrl={window.wizard_email_course_illustration_url}
-              >
-                <WelcomeWizardEmailCourseStep
-                  next={() => redirect(step)}
-                />
-              </WelcomeWizardStepLayout>
-            ) : null}
+        { stepName === 'WelcomeWizardEmailCourseStep'
+          ? (
+            <WelcomeWizardStepLayout
+              illustrationUrl={window.wizard_email_course_illustration_url}
+            >
+              <WelcomeWizardEmailCourseStep
+                next={() => redirect(step)}
+              />
+            </WelcomeWizardStepLayout>
+          ) : null}
 
-          { stepName === 'WelcomeWizardUsageTrackingStep'
-            ? (
-              <WelcomeWizardStepLayout
-                illustrationUrl={window.wizard_tracking_illustration_url}
-              >
-                <WelcomeWizardUsageTrackingStep
-                  skip_action={() => redirect(step)}
-                  allow_action={activateTracking}
-                  allow_text={stepsCount > 3
-                    ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
-                  loading={loading}
-                />
-              </WelcomeWizardStepLayout>
-            ) : null}
+        { stepName === 'WelcomeWizardUsageTrackingStep'
+          ? (
+            <WelcomeWizardStepLayout
+              illustrationUrl={window.wizard_tracking_illustration_url}
+            >
+              <WelcomeWizardUsageTrackingStep
+                skip_action={() => redirect(step)}
+                allow_action={activateTracking}
+                allow_text={stepsCount > 3
+                  ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
+                loading={loading}
+              />
+            </WelcomeWizardStepLayout>
+          ) : null}
 
-          { stepName === 'WelcomeWizardPitchMSSStep'
-            ? (
-              <WelcomeWizardStepLayout
-                illustrationUrl={window.wizard_MSS_pitch_illustration_url}
-              >
-                <WelcomeWizardPitchMSSStep
-                  next={() => redirect(step)}
-                  subscribersCount={window.subscribers_count}
-                  mailpoetAccountUrl={window.mailpoet_account_url}
-                />
-              </WelcomeWizardStepLayout>
-            ) : null}
-        </div>
+        { stepName === 'WelcomeWizardPitchMSSStep'
+          ? (
+            <WelcomeWizardStepLayout
+              illustrationUrl={window.wizard_MSS_pitch_illustration_url}
+            >
+              <WelcomeWizardPitchMSSStep
+                next={() => redirect(step)}
+                subscribersCount={window.subscribers_count}
+                mailpoetAccountUrl={window.mailpoet_account_url}
+              />
+            </WelcomeWizardStepLayout>
+          ) : null}
       </StepsContent>
     </>
   );