From c11c516e14c3e5718c6b473c5ceb620037a1fde4 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 23 Oct 2024 19:07:29 +0800
Subject: [PATCH] Made unsubscribe from all button sticky on scroll (#21381)

ref DES-785
---
 .../components/common/NewsletterManagement.js | 28 ++++++++++---------
 .../src/components/common/ProductsSection.js  |  6 ++--
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/apps/portal/src/components/common/NewsletterManagement.js b/apps/portal/src/components/common/NewsletterManagement.js
index a255f3da6f..07d3336e72 100644
--- a/apps/portal/src/components/common/NewsletterManagement.js
+++ b/apps/portal/src/components/common/NewsletterManagement.js
@@ -183,21 +183,23 @@ export default function NewsletterManagement({
                     />
                 </div>
             </div>
+            <div className='gh-portal-btn-product gh-portal-btn-unsubscribe' style={{marginTop: '-48px', marginBottom: 0}}>
+                <ActionButton
+                    isRunning={false}
+                    onClick={() => {
+                        unsubscribeAll();
+                    }}
+                    disabled={isDisabled}
+                    brandColor={brandColor}
+                    isPrimary={false}
+                    label={t('Unsubscribe from all emails')}
+                    isDestructive={true}
+                    style={{width: '100%', zIndex: 900}}
+                    dataTestId="unsubscribe-from-all-emails"
+                />
+            </div>
             <footer className={'gh-portal-action-footer' + (hasMemberGotEmailSuppression({member}) ? ' gh-feature-suppressions' : '')}>
                 <div style={{width: '100%'}}>
-                    <ActionButton
-                        isRunning={false}
-                        onClick={() => {
-                            unsubscribeAll();
-                        }}
-                        disabled={isDisabled}
-                        brandColor={brandColor}
-                        isPrimary={false}
-                        label={t('Unsubscribe from all emails')}
-                        isDestructive={true}
-                        style={{width: '100%'}}
-                        dataTestId="unsubscribe-from-all-emails"
-                    />
                     <ShowPaidMemberMessage isPaid={isPaidMember} site={site} />
                 </div>
                 {hasMemberGotEmailSuppression({member}) && !isDisabled &&
diff --git a/apps/portal/src/components/common/ProductsSection.js b/apps/portal/src/components/common/ProductsSection.js
index 30957d7895..c6ef2eb945 100644
--- a/apps/portal/src/components/common/ProductsSection.js
+++ b/apps/portal/src/components/common/ProductsSection.js
@@ -353,7 +353,7 @@ export const ProductsSectionStyles = () => {
             z-index: 800;
         }
 
-        .gh-portal-btn-product .gh-portal-btn {
+        .gh-portal-btn-product:not(.gh-portal-btn-unsubscribe) .gh-portal-btn {
             background: var(--brandcolor);
             color: var(--white);
             border: none;
@@ -361,11 +361,11 @@ export const ProductsSectionStyles = () => {
             z-index: 900;
         }
 
-        .gh-portal-btn-product .gh-portal-btn:hover {
+        .gh-portal-btn-product:not(.gh-portal-btn-unsubscribe) .gh-portal-btn:hover {
             opacity: 0.9;
         }
 
-        .gh-portal-btn-product .gh-portal-btn {
+        .gh-portal-btn-product:not(.gh-portal-btn-unsubscribe) .gh-portal-btn {
             background: var(--brandcolor);
             color: var(--white);
             border: none;