Added in-popup notification component

no refs.

ghost/portal/src/App.js

@@ -374,7 +374,7 @@ export default class App extends React.Component {
                 <AppContext.Provider value={this.getContextFromState()}>
                     <PopupModal />
                     <TriggerButton />
-                    {/* <Notification /> */}
+                    <Notification />
                 </AppContext.Provider>
             );
         }

ghost/portal/src/components/Frame.styles.js

@@ -15,6 +15,7 @@ import {PlanSectionStyles} from './common/PlansSection';
 import {AvatarStyles} from './common/MemberGravatar';
 import {MagicLinkStyles} from './pages/MagicLinkPage';
 import {LinkPageStyles} from './pages/LinkPage';
+import {PopupNotificationStyles} from './common/PopupNotification';
 
 // Global styles
 const FrameStyles = `
@@ -661,6 +662,7 @@ const FrameStyle =
     MagicLinkStyles +
     LinkPageStyles +
     SignupPageStyles +
+    PopupNotificationStyles +
     MobileStyles;
 
 export default FrameStyle;

ghost/portal/src/components/Notification.styles.js

@@ -19,7 +19,8 @@ const NotificationStyles = `
         color: var(--white);
         border-radius: 5px;
         box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.12);
-        animation: notification-slidein 0.6s ease-in-out;
+        animation: notification-slidein 0.6s ease-in-out,
+                    notification-slideout 0.6s ease-in-out 2s;
     }
 
     .gh-portal-notification p {
@@ -51,7 +52,7 @@ const NotificationStyles = `
         height: 14px;
         padding: 12px;
         transition: all 0.2s ease-in-out forwards;
-        opacity: 0.5;
+        opacity: 0.8;
     }
 
     .gh-portal-notification-closeicon:hover {
@@ -88,6 +89,12 @@ const NotificationStyles = `
         60% { transform: translateY(8px); }
         100% { transform: translateY(0); }
     }
+
+    @keyframes notification-slideout {
+        0% { transform: translateY(0); }
+        40% { transform: translateY(8px); }
+        100% { transform: translateY(-100px); }
+    }
 `;
 
 const NotificationStyle = 

ghost/portal/src/components/PopupModal.js

@@ -3,6 +3,7 @@ import {hasMode} from '../utils/check-mode';
 import AppContext from '../AppContext';
 import FrameStyle from './Frame.styles';
 import Pages, {getActivePage} from '../pages';
+import PopupNotification from './common/PopupNotification';
 
 const React = require('react');
 
@@ -89,6 +90,7 @@ class PopupContent extends React.Component {
         return (
             <div className='gh-portal-popup-wrapper'>
                 <div className={(hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container') + ' ' + popupWidthStyle} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
+                    <PopupNotification />
                     {this.renderActivePage()}
                 </div>
             </div>

ghost/portal/src/components/common/PopupNotification.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import AppContext from '../../AppContext';
+import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
+
+export const PopupNotificationStyles = `
+    .gh-portal-popupnotification {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        right: 8px;
+        padding: 8px;
+        background: var(--green);
+        z-index: 9999;
+        border-radius: 4px;
+        font-size: 1.3rem;
+        box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(0,0,0,0.01),
+                    0px 2.2538793087005615px 2.2538793087005615px 0px rgba(0,0,0,0.02), 
+                    0px 5.426473140716553px 5.426473140716553px 0px rgba(0,0,0,0.03),  
+                    0px 18px 18px 0px rgba(0,0,0,0.04);
+        animation: popupnotification-slidein 0.6s ease-in-out,
+                    popupnotification-slideout 0.6s ease-in-out 2s;
+    }
+
+    .gh-portal-popupnotification p {
+        color: var(--white);
+        margin: 0;
+        padding: 0;
+        font-size: 1.4rem;
+        letter-spacing: 0.2px;
+        text-align: center;
+    }
+
+    .gh-portal-popupnotification .closeicon {
+        position: absolute;
+        top: 1px;
+        bottom: 0;
+        right: 0;
+        color: var(--white);
+        cursor: pointer;
+        width: 12px;
+        height: 12px;
+        padding: 12px;
+        transition: all 0.2s ease-in-out forwards;
+        opacity: 0.8;
+    }
+    
+    .gh-portal-popupnotification .closeicon:hover {
+        opacity: 1.0;
+    }
+
+    .gh-portal-popupnotification.success {
+        background: var(--green);
+    }
+
+    .gh-portal-popupnotification.error {
+        background: var(--red);
+    }
+
+    @keyframes popupnotification-slidein {
+        0% { transform: translateY(-100px); }
+        60% { transform: translateY(8px); }
+        100% { transform: translateY(0); }
+    }
+
+    @keyframes popupnotification-slideout {
+        0% { transform: translateY(0); }
+        40% { transform: translateY(8px); }
+        100% { transform: translateY(-100px); }
+    }
+`;
+
+export default class PopupNotification extends React.Component {
+    static contextType = AppContext;
+    render() {
+        return (
+            <div className='gh-portal-popupnotification success'>
+                <p>Plan changed successfully</p>
+                <CloseIcon className='closeicon' alt='Close' />
+            </div>
+        );
+    }
+}