From 65d4a7c57a13caa0afc0b74619994a1c40b1d8ab Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 4 Jul 2019 11:25:49 +0200
Subject: [PATCH] Improve visuals of data manipulation step

[MAILPOET-1809]
---
 assets/css/src/components/_importExport.scss  | 45 +++++++++++++++++++
 .../import/step_data_manipulation.jsx         | 26 +++++------
 .../step_data_manipulation/select_segment.jsx | 14 +++---
 .../update_existing_subscribers.jsx           |  6 +--
 4 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/assets/css/src/components/_importExport.scss b/assets/css/src/components/_importExport.scss
index 56bd5208be..b2b0738b00 100644
--- a/assets/css/src/components/_importExport.scss
+++ b/assets/css/src/components/_importExport.scss
@@ -99,6 +99,51 @@ tr {
   }
 }
 
+.mailpoet_data_manipulation_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin: 10px 0;
+  }
+
+  .mailpoet_label_description {
+    padding: 20px 10px 20px 0;
+    width: 310px;
+  }
+
+  .mailpoet_import_select_segment {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+    }
+
+    .mailpoet_create_segment {
+      margin-left: 15px;
+    }
+  }
+
+  .mailpoet_update_existing_subscribers {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      margin-right: 4px;
+    }
+
+    .mailpoet_label_description {
+      font-weight: 400;
+    }
+  }
+}
+
 .mailpoet_subscribers_data_parse_results_details_show,
 .mailpoet_create_segment {
   cursor: pointer;
diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
index 25f398e842..d0f7a4967e 100644
--- a/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
@@ -40,22 +40,20 @@ function StepDataManipulation({
     return null;
   }
   return (
-    <>
+    <div className="mailpoet_data_manipulation_step">
       <Warnings
         stepMethodSelectionData={stepMethodSelectionData}
       />
-      <div className="inside">
-        <MatchTable
-          subscribersCount={stepMethodSelectionData.subscribersCount}
-          subscribers={stepMethodSelectionData.subscribers}
-          header={stepMethodSelectionData.header}
-        />
-        <SelectSegment setSelectedSegments={setSelectedSegments} />
-        <UpdateExistingSubscribers
-          setUpdateExistingSubscribers={setUpdateExistingSubscribers}
-          updateExistingSubscribers={updateExistingSubscribers}
-        />
-      </div>
+      <MatchTable
+        subscribersCount={stepMethodSelectionData.subscribersCount}
+        subscribers={stepMethodSelectionData.subscribers}
+        header={stepMethodSelectionData.header}
+      />
+      <SelectSegment setSelectedSegments={setSelectedSegments} />
+      <UpdateExistingSubscribers
+        setUpdateExistingSubscribers={setUpdateExistingSubscribers}
+        updateExistingSubscribers={updateExistingSubscribers}
+      />
       <PreviousNextStepButtons
         canGoNext={selectedSegments.length > 0}
         onPreviousAction={() => (
@@ -63,7 +61,7 @@ function StepDataManipulation({
         )}
         onNextAction={() => history.push('todo')}
       />
-    </>
+    </div>
   );
 }
 
diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
index dc4cee9fe4..37e272fc24 100644
--- a/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
@@ -24,12 +24,14 @@ function SelectSegment({ setSelectedSegments }) {
   };
 
   return (
-    <>
+    <div className="mailpoet_import_select_segment">
       <label htmlFor="mailpoet_segments_select">
-        {MailPoet.I18n.t('pickLists')}
-        <p className="description">
-          {MailPoet.I18n.t('pickListsDescription')}
-        </p>
+        <div className="mailpoet_label_description">
+          <b>{MailPoet.I18n.t('pickLists')}</b>
+          <p className="description">
+            {MailPoet.I18n.t('pickListsDescription')}
+          </p>
+        </div>
         <select
           id="mailpoet_segments_select"
           data-placeholder={MailPoet.I18n.t('select')}
@@ -53,7 +55,7 @@ function SelectSegment({ setSelectedSegments }) {
       >
         {MailPoet.I18n.t('createANewList')}
       </a>
-    </>
+    </div>
   );
 }
 
diff --git a/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx b/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
index 8e56c6dfbf..47b806d058 100644
--- a/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 
 function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistingSubscribers }) {
   return (
-    <>
-      {MailPoet.I18n.t('updateExistingSubscribers')}
+    <div className="mailpoet_update_existing_subscribers">
+      <div className="mailpoet_label_description">{MailPoet.I18n.t('updateExistingSubscribers')}</div>
       <label htmlFor="update_existing_subscribers">
         <input
           id="update_existing_subscribers"
@@ -26,7 +26,7 @@ function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistin
         />
         {MailPoet.I18n.t('updateExistingSubscribersNo')}
       </label>
-    </>
+    </div>
   );
 }