From 17f54daea62c8ee43633c84134f004d787a8e65d Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 12 Feb 2019 15:39:40 +0100
Subject: [PATCH] Style import 2nd step

[MAILPOET-1626]
---
 assets/css/src/importExport.styl              | 20 +++++++++++++++++++
 .../importExport/step_input_validation.jsx    | 19 ++++++++++--------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/assets/css/src/importExport.styl b/assets/css/src/importExport.styl
index fbe226005e..86c5a85d3b 100644
--- a/assets/css/src/importExport.styl
+++ b/assets/css/src/importExport.styl
@@ -76,3 +76,23 @@ span
     &.select2-search--dropdown
       display none !important
 
+.import_validation_step
+  max-width: 600px
+  display: flex
+  flex-direction: column
+
+  .import_step_buttons
+    flex-direction: row
+    margin-top: 1.5em
+
+  p
+    margin-left: 2em
+
+  label
+    margin-top: 1.5em
+    margin-bottom: 0.3em
+    padding-left: 35px;
+    text-indent: -35px;
+    input
+      margin-right: 0.5em
+
diff --git a/assets/js/src/subscribers/importExport/step_input_validation.jsx b/assets/js/src/subscribers/importExport/step_input_validation.jsx
index db7a4f68c5..9e20d662ed 100644
--- a/assets/js/src/subscribers/importExport/step_input_validation.jsx
+++ b/assets/js/src/subscribers/importExport/step_input_validation.jsx
@@ -10,6 +10,7 @@ const renderServicesMessage = () => {
       href="https://www.briteverify.com"
       target="_blank"
       rel="noreferrer noopener"
+      key="BriteVerify"
     >
       BriteVerify
     </a>
@@ -19,6 +20,7 @@ const renderServicesMessage = () => {
       href="https://www.datavalidation.com/"
       target="_blank"
       rel="noreferrer noopener"
+      key="DataValidation"
     >
       DataValidation
     </a>
@@ -28,6 +30,7 @@ const renderServicesMessage = () => {
       href="https://neverbounce.com/"
       target="_blank"
       rel="noreferrer noopener"
+      key="NeverBounce"
     >
       NeverBounce
     </a>
@@ -59,7 +62,7 @@ class StepInputValidation extends Component {
       { 'button-disabled': !this.isFormValid() },
     );
     return (
-      <>
+      <div className="import_step_buttons">
         <button
           className="button-primary wysija button"
           type="button"
@@ -79,13 +82,13 @@ class StepInputValidation extends Component {
         >
           {MailPoet.I18n.t('nextStep')}
         </button>
-      </>
+      </div>
     );
   }
 
   render() {
     return (
-      <>
+      <div className="import_validation_step">
         <label htmlFor="subscribers_agreed">
           <input
             type="checkbox"
@@ -96,7 +99,7 @@ class StepInputValidation extends Component {
           />
           {MailPoet.I18n.t('subscribersAgreed')}
         </label>
-        <p>
+        <p className="description">
           {MailPoet.I18n.t('dontEmailSubscribers')}
           {' '}
           <a
@@ -117,10 +120,10 @@ class StepInputValidation extends Component {
           />
           {MailPoet.I18n.t('sentOnceYear')}
         </label>
-        <p>
+        <p className="description">
           {MailPoet.I18n.t('emailAddressesWillBounce')}
         </p>
-        <p>
+        <p className="description">
           {renderServicesMessage()}
         </p>
         <label htmlFor="understand">
@@ -133,11 +136,11 @@ class StepInputValidation extends Component {
           />
           {MailPoet.I18n.t('youUnderstand')}
         </label>
-        <p>
+        <p className="description">
           {MailPoet.I18n.t('weWillSuspend')}
         </p>
         {this.renderStepButtons()}
-      </>
+      </div>
     );
   }
 }