Display close button

[MAILPOET-2740]

assets/css/src/components-public/_public.scss

@@ -188,7 +188,7 @@ div.mailpoet_form_popup {
   z-index: 1001;
 }
 
-.mailpoet_popup_close_icon {
+.mailpoet_form_close_icon {
   cursor: pointer;
   display: block;
   margin: 0 0 0 auto;
@@ -229,7 +229,7 @@ div.mailpoet_form_fixed_bar {
 
 .mailpoet_form_popup_overlay.active,
 div.mailpoet_form_popup.active,
-div.mailpoet_form_fixed_bar {
+div.mailpoet_form_fixed_bar.active {
   display: block;
 }
 

assets/js/src/public.jsx

@@ -70,6 +70,13 @@ jQuery(($) => {
     }
     setTimeout(() => {
       formDiv.addClass('active');
+
+      if (form.width() < 500) {
+        form.addClass('mailpoet_form_tight_container');
+      } else {
+        form.removeClass('mailpoet_form_tight_container');
+      }
+
       if (showOverlay) {
         formDiv.prev('.mailpoet_form_popup_overlay').addClass('active');
       }
@@ -77,18 +84,20 @@ jQuery(($) => {
   }
 
   $(() => {
-    const closePopupForm = (formDiv) => {
+    const closeForm = (formDiv) => {
       formDiv.removeClass('active');
       formDiv.prev('.mailpoet_form_popup_overlay').removeClass('active');
       setCookie('popup_form_dismissed', '1', 365);
     };
-    $('.mailpoet_popup_close_icon').click((event) => {
+    $('.mailpoet_form_close_icon').click((event) => {
       const closeIcon = $(event.target);
       const formDiv = closeIcon.parent();
-      closePopupForm(formDiv);
+      closeForm(formDiv);
     });
 
     $('div.mailpoet_form_fixed_bar').each((index, element) => {
+      const cookieValue = getCookie('popup_form_dismissed');
+      if (cookieValue === '1') return;
       const formDiv = $(element);
       showForm(formDiv);
     });

views/form/front_end_form.html

@@ -9,9 +9,9 @@
 
   <div class="mailpoet_form_popup_overlay"></div>
   <div id="<%= form_html_id %>" class="mailpoet_form mailpoet_form_<%= form_type %>">
-    <% if form_type == 'popup' %>
+    <% if form_type == 'popup' or form_type == 'fixed_bar' %>
       <img
-        class="mailpoet_popup_close_icon"
+        class="mailpoet_form_close_icon"
         alt="close"
         width=15
         height=15