Align welcome wizard left

[MAILPOET-1927]

assets/css/src/components/_welcomeWizard.scss

@@ -1,17 +1,15 @@
-.mailpoet_welcome_wizard_centered_column {
+.mailpoet_welcome_wizard_header {
-  align-items: center;
+  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
 
-.mailpoet_welcome_wizard_header img {
+  img {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
+  }
 }
 
 .mailpoet_welcome_wizard_steps {
   padding-top: 20px;
   width: 100%;
+
   div.updated, div.error, .notice {
     display: none !important;
   }
@@ -55,44 +53,51 @@
   margin-top: 40px;
   max-width: 620px;
   min-height: 30vh;
+
   h1 {
     font-weight: 400;
     padding-bottom: 10px;
-    text-align: center;
   }
+
   p {
     color: #595c65;
     font-size: 15px;
     font-weight: normal;
     line-height: 22px;
     margin: 10px 0;
-    text-align: center;
   }
+
   .welcome_wizard_tracking_sub_title {
     margin-bottom: 0;
   }
+
   .welcome_wizard_tracking_list {
-    list-style: disc
+    list-style: disc;
+    padding-left: 30px;
   }
 }
 
 #mailpoet_sender_form {
   margin-top: 30px;
   width: 330px;
+
   label {
     display: inline-block;
     font-size: 15px;
     margin-bottom: 20px;
   }
+
   input[type="text"] {
     font-size: 15px;
     height: 30px;
     margin-top: 10px;
     width: 328px;
   }
+
   input[type="submit"] {
     margin: 50px 0 25px 0;
   }
+
   a.sender_form_small {
     color: #595c65;
     font-size: 12px;
@@ -107,21 +112,21 @@
   margin-bottom: 10px;
   padding-top: 30px;
   position: relative;
+
   img {
     left: 0;
     position: absolute;
     top: 0;
   }
-  iframe {
-    margin-left: 155px;
-  }
 
   @media screen and (max-width: 520px) {
     padding: 0 10px;
     text-align: center;
+
     iframe {
       margin-left: 0;
     }
+
     img {
       position: static;
     }
@@ -130,8 +135,9 @@
 
 .mailpoet_welcome_wizard_step_controls {
   margin-top: 50px;
-  .button {
+
-    margin: 0 10px;
+  .button + .button {
+    margin-left: 20px;
   }
 }
 

assets/js/src/welcome_wizard/header.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import SteppedProgressBar from '../common/stepped_progess_bar.jsx';
 
 const WelcomeWizardHeader = props => (
-  <div className="mailpoet_welcome_wizard_centered_column mailpoet_welcome_wizard_header">
+  <div className="mailpoet_welcome_wizard_header">
     <img src={props.logo_src} width="200" height="87" alt="MailPoet logo" />
     {
       props.current_step <= props.steps_count

assets/js/src/welcome_wizard/steps/email_course_step.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 
 const WelcomeWizardEmailCourseStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+  <div className="mailpoet_welcome_wizard_step_content">
     <h1>{MailPoet.I18n.t('welcomeWizardEmailCourseTitle')}</h1>
     <p>{MailPoet.I18n.t('welcomeWizardEmailCourseText')}</p>
     <div className="mailpoet_welcome_wizard_course_form_box">

assets/js/src/welcome_wizard/steps/migrated_user_step.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 
 const WelcomeWizardMigratedUserStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+  <div className="mailpoet_welcome_wizard_step_content">
     <h1>{MailPoet.I18n.t('welcomeWizardLetsStartTitle')}</h1>
     <p>{MailPoet.I18n.t('welcomeWizardSenderMigratedUserText')}</p>
     <div className="mailpoet_welcome_wizard_step_controls">

assets/js/src/welcome_wizard/steps/sender_step.jsx

@@ -4,14 +4,12 @@ import MailPoet from 'mailpoet';
 import jQuery from 'jquery';
 
 const WelcomeWizardSenderStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+  <div className="mailpoet_welcome_wizard_step_content">
     <h1>{MailPoet.I18n.t('welcomeWizardLetsStartTitle')}</h1>
     <p>{MailPoet.I18n.t('welcomeWizardSenderText')}</p>
     <form
       id="mailpoet_sender_form"
-      className={
+      className={props.loading ? 'mailpoet_sender_form_loading' : ''}
-        `mailpoet_welcome_wizard_centered_column ${(props.loading ? 'mailpoet_sender_form_loading' : '')}`
-      }
       onSubmit={(e) => {
         e.preventDefault();
         if (!jQuery('#mailpoet_sender_form').parsley().validate()) { return; }

assets/js/src/welcome_wizard/steps/usage_tracking_step.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 
 const WelcomeWizardUsageTrackingStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+  <div className="mailpoet_welcome_wizard_step_content">
     <h1>{MailPoet.I18n.t('welcomeWizardUsageTrackingStepTitle')}</h1>
     <p>{MailPoet.I18n.t('welcomeWizardTrackingText')}</p>
     <h2 className="welcome_wizard_tracking_sub_title">{MailPoet.I18n.t('welcomeWizardUsageTrackingStepSubTitle')}</h2>

assets/js/src/welcome_wizard/steps/woo_commerce_step.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 
 const WelcomeWizardWooCommerceStep = props => (
-  <div className="mailpoet_welcome_wizard_step_content mailpoet_welcome_wizard_centered_column">
+  <div className="mailpoet_welcome_wizard_step_content">
     <h1>{MailPoet.I18n.t('welcomeWizardWooCommerceStepTitle')}</h1>
     <p>
       {MailPoet.I18n.t('welcomeWizardHelpingShopOwnersText')}

assets/js/src/welcome_wizard/steps_controller.jsx

@@ -76,7 +76,7 @@ const WelcomeWizardStepsController = (props) => {
   }
 
   return (
-    <div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
+    <div className="mailpoet_welcome_wizard_steps">
       <WelcomeWizardHeader
         current_step={step}
         steps_count={stepsCount}