From 334c2c290a4f4e08ba0b576c3ed41f3c8ad7366c Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 10 May 2022 11:30:19 +0200
Subject: [PATCH] Updated checkmark notification design

refs https://github.com/TryGhost/Team/issues/1440
---
 ghost/portal/src/components/Frame.styles.js   | 21 +++++++++++++++++++
 .../components/common/NewsletterManagement.js | 14 +++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 19fecaeebc..a07af46d46 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -1075,6 +1075,27 @@ const MultipleProductsGlobalStyles = `
     font-weight: 600;
     cursor: pointer;
 }
+
+.gh-portal-toggle-checked {
+    transition: all 0.3s;
+    transition-delay: 2s;
+}
+
+.gh-portal-checkmark-container {
+    display: flex;
+    opacity: 0;
+    margin-right: 8px;
+    transition: opacity ease 0.4s 0.2s;
+}
+
+.gh-portal-checkmark-show {
+    opacity: 1;
+}
+
+.gh-portal-checkmark-icon {
+    height: 22px;
+    color: #30cf43;
+}
 `;
 
 export function getFrameStyles({site}) {
diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index e81d28fb6d..d876117c80 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -5,7 +5,7 @@ import {useContext, useState} from 'react';
 import Switch from '../common/Switch';
 import {getSiteNewsletters} from '../../utils/helpers';
 import ActionButton from '../common/ActionButton';
-import {ReactComponent as CheckmarkIcon} from '../../images/icons/checkmark-circle.svg';
+import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.svg';
 
 const React = require('react');
 
@@ -24,16 +24,18 @@ function AccountHeader() {
 function SuccessIcon({show, checked}) {
     let classNames = [];
     if (show) {
-        classNames.push('gh-portal-show');
+        classNames.push('gh-portal-checkmark-show');
     }
 
     if (checked) {
         classNames.push('gh-portal-toggle-checked');
     }
 
+    classNames.push('gh-portal-checkmark-container');
+
     return (
-        <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 className={classNames.join(' ')}>
+            <CheckmarkIcon className='gh-portal-checkmark-icon' alt='' />
         </div>
     );
 }
@@ -63,7 +65,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
                         clearTimeout(timeoutId);
                         let newTimeoutId = setTimeout(() => {
                             setShowUpdated(false);
-                        }, 3000);
+                        }, 2000);
                         setTimeoutId(newTimeoutId);
                     } else {
                         updatedNewsletters = subscribedNewsletters.filter((d) => {
@@ -73,7 +75,7 @@ function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribed
                         clearTimeout(timeoutId);
                         let newTimeoutId = setTimeout(() => {
                             setShowUpdated(false);
-                        }, 3000);
+                        }, 2000);
                         setTimeoutId(newTimeoutId);
                     }
                     setSubscribedNewsletters(updatedNewsletters);