Add preview sidebar visual enhancements

[MAILPOET-2811]

assets/css/src/components-form-editor/_preview.scss

@@ -56,6 +56,12 @@
     max-height: 100%;
     width: 100%;
   }
+
+  .mailpoet_preview_form_type_selection {
+    label {
+      font-weight: bold;
+    }
+  }
 }
 
 .mailpoet_form_preview_modal_overlay {
@@ -76,9 +82,13 @@
   flex-direction: row;
 
   .mailpoet_preview_sidebar {
-    padding: 35px 15px 10px 0;
+    padding: 35px 20px 10px 0;
     width: 300px;
 
+    & > .components-base-control, & > p, & > hr {
+      margin-bottom: 18px;
+    }
+
     .components-base-control__label {
       display: block;
     }
@@ -95,5 +105,9 @@
       font-weight: normal;
       margin-bottom: 4px;
     }
+
+    .mailpoet-size-settings-control .components-range-control__number {
+      min-width: 5em;
+    }
   }
 }

assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx

@@ -28,6 +28,7 @@ const FixedBarSettings = () => {
   return (
     <>
       <p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
+      <hr />
       <ToggleControl
         label={MailPoet.I18n.t('placeFormOnAllPages')}
         checked={formSettings.placeFixedBarFormOnAllPages || false}

assets/js/src/form_editor/components/preview/other_settings.tsx

@@ -82,6 +82,7 @@ const OtherSettings = () => {
       <p>{addFormShortcodeHint}</p>
       <p>{addFormPhpIframeHint}</p>
       {getCopyTextArea()}
+      <hr />
       <SizeSettings
         label={MailPoet.I18n.t('formSettingsWidth')}
         value={formSettings.otherStyles.width}

assets/js/src/form_editor/components/preview/popup_settings.tsx

@@ -27,6 +27,7 @@ const PopUpSettings = () => {
   return (
     <>
       <p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p>
+      <hr />
       <ToggleControl
         label={MailPoet.I18n.t('placeFormOnAllPages')}
         checked={formSettings.placePopupFormOnAllPages || false}

assets/js/src/form_editor/components/preview/preview.tsx

@@ -97,6 +97,7 @@ const FormPreview = () => {
               label={MailPoet.I18n.t('formPlacementLabel')}
               value={previewSettings.formType}
               onChange={setFormType}
+              className="mailpoet_preview_form_type_selection"
               data-automation-id="form_type_selection"
               options={[
                 { value: 'others', label: MailPoet.I18n.t('placeFormOthers') },

assets/js/src/form_editor/components/preview/slide_in_settings.tsx

@@ -28,6 +28,7 @@ const SlideInSettings = () => {
   return (
     <>
       <p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
+      <hr />
       <ToggleControl
         label={MailPoet.I18n.t('placeFormOnAllPages')}
         checked={formSettings.placeSlideInFormOnAllPages || false}