Improve visuals of data manipulation step

[MAILPOET-1809]

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;

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
-        <MatchTable
+        subscribersCount={stepMethodSelectionData.subscribersCount}
-          subscribersCount={stepMethodSelectionData.subscribersCount}
+        subscribers={stepMethodSelectionData.subscribers}
-          subscribers={stepMethodSelectionData.subscribers}
+        header={stepMethodSelectionData.header}
-          header={stepMethodSelectionData.header}
+      />
-        />
+      <SelectSegment setSelectedSegments={setSelectedSegments} />
-        <SelectSegment setSelectedSegments={setSelectedSegments} />
+      <UpdateExistingSubscribers
-        <UpdateExistingSubscribers
+        setUpdateExistingSubscribers={setUpdateExistingSubscribers}
-          setUpdateExistingSubscribers={setUpdateExistingSubscribers}
+        updateExistingSubscribers={updateExistingSubscribers}
-          updateExistingSubscribers={updateExistingSubscribers}
+      />
-        />
-      </div>
       <PreviousNextStepButtons
         canGoNext={selectedSegments.length > 0}
         onPreviousAction={() => (
@@ -63,7 +61,7 @@ function StepDataManipulation({
         )}
         onNextAction={() => history.push('todo')}
       />
-    </>
+    </div>
   );
 }
 

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')}
+        <div className="mailpoet_label_description">
-        <p className="description">
+          <b>{MailPoet.I18n.t('pickLists')}</b>
-          {MailPoet.I18n.t('pickListsDescription')}
+          <p className="description">
-        </p>
+            {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>
   );
 }
 

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 (
-    <>
+    <div className="mailpoet_update_existing_subscribers">
-      {MailPoet.I18n.t('updateExistingSubscribers')}
+      <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>
   );
 }