Improve styling

[MAILPOET-2142]

assets/css/src/components/_welcomeWizard.scss

@@ -70,7 +70,8 @@
     line-height: 22px;
     margin: 0 0 40px;
 
-    + p { margin-top: -20px; }
+    + p,
+    + ul { margin-top: -20px; }
   }
 
   .welcome_wizard_tracking_sub_title {

assets/js/src/wizard/steps/pitch_mss/step.jsx

@@ -12,70 +12,18 @@ const BenefitsList = () => (
   </ul>
 );
 
-const FreePlanSubscribers = (props) => (
+const Controlls = (props) => (
-  <>
+  <div className="mailpoet_welcome_wizard_step_controls">
-    <h1>{MailPoet.I18n.t('welcomeWizardMSSFreeTitle')}</h1>
-    <p>{MailPoet.I18n.t('welcomeWizardMSSFreeSubtitle')}</p>
     <p>
-      {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
-      :
-    </p>
-    <BenefitsList />
       <a
         href={props.mailpoetAccountUrl}
         target="_blank"
         rel="noopener noreferrer"
         className="button button-primary"
       >
-      {MailPoet.I18n.t('welcomeWizardMSSFreeButton')}
+        {props.nextButtonText}
       </a>
-  </>
-);
-
-FreePlanSubscribers.propTypes = {
-  mailpoetAccountUrl: PropTypes.string.isRequired,
-};
-
-const NotFreePlanSubscribers = (props) => (
-  <>
-    <h1>{MailPoet.I18n.t('welcomeWizardMSSNotFreeTitle')}</h1>
-    <p>
-      {MailPoet.I18n.t('welcomeWizardMSSNotFreeSubtitle')}
-      :
     </p>
-    <p>
-      {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
-      :
-    </p>
-    <BenefitsList />
-    <a
-      href={props.mailpoetAccountUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="button button-primary"
-    >
-      {MailPoet.I18n.t('welcomeWizardMSSNotFreeButton')}
-    </a>
-  </>
-);
-
-NotFreePlanSubscribers.propTypes = {
-  mailpoetAccountUrl: PropTypes.string.isRequired,
-};
-
-const Step = (props) => (
-  <div className="mailpoet_welcome_wizard_step_content">
-    { props.subscribersCount < 1000
-      ? (
-        <FreePlanSubscribers
-          mailpoetAccountUrl={props.mailpoetAccountUrl}
-        />
-      ) : (
-        <NotFreePlanSubscribers
-          mailpoetAccountUrl={props.mailpoetAccountUrl}
-        />
-      )
-    }
     <p>
       <a
         onClick={props.next}
@@ -95,6 +43,77 @@ const Step = (props) => (
   </div>
 );
 
+Controlls.propTypes = {
+  mailpoetAccountUrl: PropTypes.string.isRequired,
+  next: PropTypes.func.isRequired,
+  nextButtonText: PropTypes.string.isRequired,
+};
+
+const FreePlanSubscribers = (props) => (
+  <>
+    <h1>{MailPoet.I18n.t('welcomeWizardMSSFreeTitle')}</h1>
+    <p>{MailPoet.I18n.t('welcomeWizardMSSFreeSubtitle')}</p>
+    <p>
+      {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
+      :
+    </p>
+    <BenefitsList />
+    <Controlls
+      mailpoetAccountUrl={props.mailpoetAccountUrl}
+      next={props.next}
+      nextButtonText={MailPoet.I18n.t('welcomeWizardMSSFreeButton')}
+    />
+  </>
+);
+
+FreePlanSubscribers.propTypes = {
+  mailpoetAccountUrl: PropTypes.string.isRequired,
+  next: PropTypes.func.isRequired,
+};
+
+const NotFreePlanSubscribers = (props) => (
+  <>
+    <h1>{MailPoet.I18n.t('welcomeWizardMSSNotFreeTitle')}</h1>
+    <p>
+      {MailPoet.I18n.t('welcomeWizardMSSNotFreeSubtitle')}
+      :
+    </p>
+    <p>
+      {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
+      :
+    </p>
+    <BenefitsList />
+    <Controlls
+      mailpoetAccountUrl={props.mailpoetAccountUrl}
+      next={props.next}
+      nextButtonText={MailPoet.I18n.t('welcomeWizardMSSNotFreeButton')}
+    />
+  </>
+);
+
+NotFreePlanSubscribers.propTypes = {
+  mailpoetAccountUrl: PropTypes.string.isRequired,
+  next: PropTypes.func.isRequired,
+};
+
+const Step = (props) => (
+  <div className="mailpoet_welcome_wizard_step_content">
+    { props.subscribersCount < 1000
+      ? (
+        <FreePlanSubscribers
+          mailpoetAccountUrl={props.mailpoetAccountUrl}
+          next={props.next}
+        />
+      ) : (
+        <NotFreePlanSubscribers
+          mailpoetAccountUrl={props.mailpoetAccountUrl}
+          next={props.next}
+        />
+      )
+    }
+  </div>
+);
+
 Step.propTypes = {
   next: PropTypes.func.isRequired,
   subscribersCount: PropTypes.number.isRequired,