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 ( <>

{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}

+
{

{addFormShortcodeHint}

{addFormPhpIframeHint}

{getCopyTextArea()} +
{ return ( <>

{MailPoet.I18n.t('placePopupFormOnPagesDescription')}

+
{ 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 ( <>

{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}

+