From 7699424ceeb09bd5064056be82497321edbbe71a Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 16 May 2022 16:52:21 +0200
Subject: [PATCH] Updated unsubscribe success message design

refs https://github.com/TryGhost/Team/issues/1495
---
 ghost/portal/src/components/Frame.styles.js         | 13 +++++++++++++
 .../portal/src/components/pages/UnsubscribePage.js  |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 13326accf3..a99db8b789 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -1120,6 +1120,15 @@ const MultipleProductsGlobalStyles = `
     }
 }
 
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
 .gh-portal-newsletter-selection {
     animation: 0.5s ease-in-out fadeIn;
 }
@@ -1133,6 +1142,10 @@ const MultipleProductsGlobalStyles = `
     color: var(--grey6);
     font-weight: 400;
 }
+
+.gh-portal-hide {
+    display: none;
+}
 `;
 
 export function getFrameStyles({site}) {
diff --git a/ghost/portal/src/components/pages/UnsubscribePage.js b/ghost/portal/src/components/pages/UnsubscribePage.js
index 00a3a8aeba..d93eb553bd 100644
--- a/ghost/portal/src/components/pages/UnsubscribePage.js
+++ b/ghost/portal/src/components/pages/UnsubscribePage.js
@@ -121,9 +121,9 @@ export default function UnsubscribePage() {
         const unsubscribedNewsletter = siteNewsletters?.find((d) => {
             return d.uuid === pageData.newsletterUuid;
         });
-        const hideClassName = hasInteracted ? 'hide' : '';
+        const hideClassName = hasInteracted ? 'gh-portal-hide' : '';
         return (
-            <p className={`gh-portal-text-center ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive <strong>{unsubscribedNewsletter?.name}</strong> newsletter.</p>
+            <p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive <strong>{unsubscribedNewsletter?.name}</strong> newsletter.</p>
         );
     };