From dd1f89f4d91826f6084aedf9fbb63188998ff026 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Tue, 19 May 2020 16:07:11 +0200
Subject: [PATCH] Add preview sidebar visual enhancements

[MAILPOET-2811]
---
 .../css/src/components-form-editor/_preview.scss | 16 +++++++++++++++-
 .../components/preview/fixed_bar_settings.tsx    |  1 +
 .../components/preview/other_settings.tsx        |  1 +
 .../components/preview/popup_settings.tsx        |  1 +
 .../form_editor/components/preview/preview.tsx   |  1 +
 .../components/preview/slide_in_settings.tsx     |  1 +
 6 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/assets/css/src/components-form-editor/_preview.scss b/assets/css/src/components-form-editor/_preview.scss
index 4f98813289..d57fe40dcd 100644
--- a/assets/css/src/components-form-editor/_preview.scss
+++ b/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;
+    }
   }
 }
diff --git a/assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx b/assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx
index ca63319d05..eeae2fb8b4 100644
--- a/assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx
+++ b/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}
diff --git a/assets/js/src/form_editor/components/preview/other_settings.tsx b/assets/js/src/form_editor/components/preview/other_settings.tsx
index eb5751c358..d7fc1b8dc4 100644
--- a/assets/js/src/form_editor/components/preview/other_settings.tsx
+++ b/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}
diff --git a/assets/js/src/form_editor/components/preview/popup_settings.tsx b/assets/js/src/form_editor/components/preview/popup_settings.tsx
index 8be43520aa..890a56e223 100644
--- a/assets/js/src/form_editor/components/preview/popup_settings.tsx
+++ b/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}
diff --git a/assets/js/src/form_editor/components/preview/preview.tsx b/assets/js/src/form_editor/components/preview/preview.tsx
index 028dcfb3af..98479fbc82 100644
--- a/assets/js/src/form_editor/components/preview/preview.tsx
+++ b/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') },
diff --git a/assets/js/src/form_editor/components/preview/slide_in_settings.tsx b/assets/js/src/form_editor/components/preview/slide_in_settings.tsx
index 8cd92d0afe..8052231225 100644
--- a/assets/js/src/form_editor/components/preview/slide_in_settings.tsx
+++ b/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}