fix: update classes and dismissal actions.

impress-org · Oct 31, 2023 · 0ca2020 · 0ca2020
1 parent 8cf5688
commit 0ca2020
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/assets/src/css/admin/sale-banners.scss b/assets/src/css/admin/sale-banners.scss
@@ -1,4 +1,4 @@
-.give-sale-banners-container {
+.givewp-sale-banners-container {
     display: block;
     width: 100%;
     position: relative;
@@ -27,31 +27,31 @@
 
 /* List Table pages */
 #give-admin-donations-root, #give-admin-donation-forms-root, #give-admin-donors-root {
-    .give-sale-banners-container {
+    .givewp-sale-banners-container {
         width: auto;
         margin: 1rem;
     }
 }
 
 /* Add Form page */
 .post-type-give_forms {
-    .give-sale-banners-container {
+    .givewp-sale-banners-container {
         width: 100%;
         margin: 1.55rem 0 0 0;
     }
 }
 
 /* Settings & Tools page */
 .give_forms_page_give-settings, .give-tools-setting-page{
-    .give-sale-banners-container {
+    .givewp-sale-banners-container {
         width: 100%;
         margin: .5rem 0;
     }
 }
 
 /* Reports page */
 .give_forms_page_give-reports {
-    .give-sale-banners-container {
+    .givewp-sale-banners-container {
         margin: .5rem 0 0 0;
     }
 }
@@ -76,15 +76,10 @@
         }
 
         & p {
-            font-size: 1.25rem;
+            font-size: 1.25rem !important;
             font-weight: 500;
         }
 
-        & .wp-die-message, p {
-            font-size: 1.25rem;
-        }
-
-
         & a {
             display: inline-flex;
             padding: 1rem 1.5rem;
@@ -118,7 +113,7 @@
 
 /* Media query for small screens */
 @media screen and (max-width: 768px) {
-    .give-sale-banners-container {
+    .givewp-sale-banners-container {
         padding: 1.25rem 0 1.5rem 1.5rem;
     }
 
@@ -129,7 +124,7 @@
 
         & p {
             margin: .5rem 0 1rem 0;
-            font-size: 0.875rem;
+            font-size: 0.875rem !important;
             line-height: 1.75rem;
 
         }
@@ -150,7 +145,7 @@
         }
 
         & p {
-            font-size: 1.125rem;
+            font-size: 1.125rem !important;
             line-height: 1.5rem;
             margin: .75rem 0 1rem 0;
         }

diff --git a/src/Promotions/InPluginUpsells/resources/js/sale-banner.js b/src/Promotions/InPluginUpsells/resources/js/sale-banner.js
@@ -1,5 +1,5 @@
-const bannersContainer = document.querySelector('.give-sale-banners-container');
-const dismissActions = document.querySelectorAll('.give-sale-banner-dismiss');
+const bannersContainer = document.querySelector('.givewp-sale-banners-container');
+const dismissActions = document.querySelectorAll('.givewp-sale-banner__dismiss');
 const pageTitle = document.querySelector('.page-title-action, .wp-heading-inline, #give-in-plugin-upsells h1');
 const listTable = document.querySelector('#give-admin-donations-root, #give-admin-donation-forms-root, #give-admin-donors-root');
 
@@ -20,7 +20,7 @@ const hideBanner = ({target: dismissAction}) => {
         body: formData,
     });
 
-    if (bannersContainer.querySelectorAll('.give-sale-banner').length === 0) {
+    if (bannersContainer.querySelectorAll('.givewp-sale-banner').length === 0) {
         bannersContainer.remove();
     }
 };

diff --git a/src/Promotions/InPluginUpsells/resources/views/sale-banners.php b/src/Promotions/InPluginUpsells/resources/views/sale-banners.php
@@ -1,5 +1,5 @@
 <?php /** @var array[] $banners */?>
-<div class="give-sale-banners-container" style="display: none;">
+<div class="givewp-sale-banners-container" style="display: none;">
     <?php
     foreach ($banners as $banner): extract($banner);
         /**
@@ -26,12 +26,12 @@
         );
         ?>
 
-        <aside aria-label="<?= $accessibleLabel ?>" id="<?= $dismissableElementId = "give-sale-banner-{$id}" ?>"
+        <aside aria-label="<?= $accessibleLabel ?>" id="<?= $dismissableElementId = "givewp-sale-banner-{$id}" ?>"
                class="givewp-sale-banner">
             <div class="givewp-sale-banner__content">
                 <h2> <?php echo $header ?> </h2>
 
-                <p> <?php echo $leadText ?> </p>
+                <p> <?php echo  $leadText ?> </p>
 
                 <a href="<?php echo $actionURL ?>" target="_blank" rel="noopener noreferrer">
                     <img src="<?php echo $shoppingCartIconURL ?>" alt="cart"/>
@@ -40,36 +40,32 @@ class="givewp-sale-banner">
                 </a>
             </div>
 
-            <button type="button" aria-label="<?= __('Dismiss', 'give') ?> <?= $accessibleLabel ?>"
-                    aria-controls="<?= $dismissableElementId ?>" class="givewp-sale-banner__dismiss"
-                    data-id="<?= $id ?>">
-
-                <img src="<?php echo $dismissIconURL ?>" alt="dismiss"/>
+            <button type="button" class="givewp-sale-banner__dismiss" aria-label="<?= __('Dismiss', 'give') ?> <?= $accessibleLabel ?>">
+                <img aria-controls="<?= $dismissableElementId ?>" data-id="<?= $id ?>" src="<?php echo $dismissIconURL ?>" alt="dismiss"/>
             </button>
         </aside>
 
         <style>
-
             /* Default background image for Admin pages */
-            .give-sale-banners-container {
+            .givewp-sale-banners-container {
                 background-image: url('<?= $backgroundImageLargeURL ?>');
             }
 
             /* Default background image Addons page */
-            #give-in-plugin-upsells .give-sale-banners-container {
+            #give-in-plugin-upsells .givewp-sale-banners-container {
                 background-image: url('<?= $backgroundImageMediumURL ?>');
             }
 
             /* Media query for small screens */
             @media screen and (max-width: 768px) {
-                .give-sale-banners-container {
+                .givewp-sale-banners-container {
                     background-image: url('<?= $backgroundImageSmallURL ?>')!important;
                 }
             }
 
             /* Media query for medium screens */
             @media screen and (min-width: 769px) and (max-width: 1278px) {
-               .give-sale-banners-container {
+               .givewp-sale-banners-container {
                     background-image: url('<?= $backgroundImageMediumURL ?>');
                 }
             }