From 7ac062ae685fa321c2052c3ff24717a015e91491 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 9 May 2022 16:08:37 +0530
Subject: [PATCH] Added transition classnames for success icon

---
 .../components/common/NewsletterManagement.js    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index 1e925381e2..e81d28fb6d 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -21,12 +21,18 @@ function AccountHeader() {
     );
 }
 
-function SuccessIcon({show}) {
-    if (!show) {
-        return null;
+function SuccessIcon({show, checked}) {
+    let classNames = [];
+    if (show) {
+        classNames.push('gh-portal-show');
     }
+
+    if (checked) {
+        classNames.push('gh-portal-toggle-checked');
+    }
+
     return (
-        <div style={{marginRight: '8px', display: 'flex', transition: 'all ease 1s'}}>
+        <div style={{marginRight: '8px', display: 'flex', transition: 'all ease 1s'}} className={classNames.join(' ')}>
             <CheckmarkIcon className='gh-portal-checkmark-icon' alt='' style={{height: '24px', color: '#30cf43'}} />
         </div>
     );
@@ -46,7 +52,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
                 <p>{newsletter?.description}</p>
             </div>
             <div style={{display: 'flex', alignItems: 'center'}}>
-                <SuccessIcon show={showUpdated} />
+                <SuccessIcon show={showUpdated} checked={isChecked} />
                 <Switch id={newsletter.id} onToggle={(e, checked) => {
                     let updatedNewsletters = [];
                     if (!checked) {