Updated wizard content styles

[MAILPOET-1927]

assets/css/src/components/_welcomeWizard.scss

@@ -1,9 +1,5 @@
 .mailpoet_welcome_wizard_header {
   text-align: center;
-
-  img {
-    margin-bottom: 20px;
-  }
 }
 
 .mailpoet_welcome_wizard_steps {
@@ -55,8 +51,9 @@
   min-height: 30vh;
 
   h1 {
-    font-weight: 400;
+    font-weight: 700;
-    padding-bottom: 10px;
+    margin: 0 0 20px;
+    padding: 0;
   }
 
   p {
@@ -64,7 +61,9 @@
     font-size: 15px;
     font-weight: normal;
     line-height: 22px;
-    margin: 10px 0;
+    margin: 0 0 40px;
+
+    + p { margin-top: -20px; }
   }
 
   .welcome_wizard_tracking_sub_title {
@@ -82,7 +81,7 @@
   width: 330px;
 
   label {
-    display: inline-block;
+    display: block;
     font-size: 15px;
     margin-bottom: 20px;
   }
@@ -91,11 +90,7 @@
     font-size: 15px;
     height: 30px;
     margin-top: 10px;
-    width: 328px;
+    width: 350px;
-  }
-
-  input[type="submit"] {
-    margin: 50px 0 25px 0;
   }
 
   a.sender_form_small {
@@ -108,33 +103,8 @@
   opacity: 0.5;
 }
 
-.mailpoet_welcome_wizard_course_form_box {
-  margin-bottom: 10px;
-  padding-top: 30px;
-  position: relative;
-
-  img {
-    left: 0;
-    position: absolute;
-    top: 0;
-  }
-
-  @media screen and (max-width: 520px) {
-    padding: 0 10px;
-    text-align: center;
-
-    iframe {
-      margin-left: 0;
-    }
-
-    img {
-      position: static;
-    }
-  }
-}
-
 .mailpoet_welcome_wizard_step_controls {
-  margin-top: 50px;
+  margin: 40px 0 10px;
 
   .button + .button {
     margin-left: 20px;
@@ -142,14 +112,10 @@
 }
 
 .mailpoet_welcome_wizard_woo_screenshot {
-  margin-top: 30px;
+  box-shadow: 2px 3px 18px rgba(#000, 0.3);
-  width: 400px;
+  margin-top: -20px;
-}
+  max-width: 100%;
-
+  width: 350px;
-@media screen and (max-width: 520px) {
-  .mailpoet_welcome_wizard_woo_screenshot {
-    width: 340px;
-  }
 }
 
 .welcome_wizard_video {

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

@@ -6,19 +6,17 @@ const WelcomeWizardEmailCourseStep = props => (
   <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">
+    <iframe
-      <iframe
+      id="mailpoet_form_iframe"
-        id="mailpoet_form_iframe"
+      width="100%"
-        width="100%"
+      scrolling="no"
-        scrolling="no"
+      frameBorder="0"
-        frameBorder="0"
+      title="Apply to course"
-        title="Apply to course"
+      src="https://newsletters.mailpoet.com?mailpoet_form_iframe=13"
-        src="https://newsletters.mailpoet.com?mailpoet_form_iframe=13"
+      className="mailpoet_form_iframe"
-        className="mailpoet_form_iframe"
+      marginWidth="0"
-        marginWidth="0"
+      marginHeight="0"
-        marginHeight="0"
+    />
-      />
-    </div>
     <button type="button" className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
   </div>
 );

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

@@ -41,7 +41,9 @@ const WelcomeWizardSenderStep = props => (
           onChange={e => props.update_sender({ address: e.target.value })}
         />
       </label>
-      <input className="button button-primary" type="submit" value={MailPoet.I18n.t('next')} />
+      <div className="mailpoet_welcome_wizard_step_controls">
+        <input className="button button-primary" type="submit" value={MailPoet.I18n.t('next')} />
+      </div>
       <a onClick={props.finish} href="#finish" className="sender_form_small">{MailPoet.I18n.t('noThanksSkip')}</a>
     </form>
   </div>