Updated Tips&Donations portal success and loading states design (#17592)

refs https://github.com/TryGhost/Product/issues/3677

- Updated portal loading design when user clicks on a Tips&Donations
link
- Removed "Retry" button from error state and added "Close"

apps/portal/src/components/pages/SupportError.js

@@ -24,10 +24,10 @@ export const TipsAndDonationsErrorStyle = `
 `;
 
 const SupportError = ({error}) => {
+    const {onAction} = useContext(AppContext);
     const errorTitle = 'Sorry, that didn’t work.';
     const errorMessage = error || 'There was an error processing your payment. Please try again.';
-    const buttonLabel = 'Retry';
-    const {brandColor} = useContext(AppContext);
+    const buttonLabel = 'Close';
 
     return (
         <div className='gh-portal-content gh-portal-tips-and-donations'>
@@ -41,10 +41,9 @@ const SupportError = ({error}) => {
             <ActionButton
                 style={{width: '100%'}}
                 retry={true}
-                // onClick = {() => onAction('closePopup')}
+                onClick = {() => onAction('closePopup')}
                 disabled={false}
-                brandColor={brandColor}
-                // brandColor='#000000'
+                brandColor='#000000'
                 label={buttonLabel}
                 isDestructive={true}
                 isRunning={false}

apps/portal/src/components/pages/SupportPage.js

@@ -1,11 +1,9 @@
-import {useEffect, useState, useContext} from 'react';
+import {useEffect, useState} from 'react';
 import SupportError from './SupportError';
 import LoadingPage from './LoadingPage';
 import setupGhostApi from '../../utils/api';
-import AppContext from '../../AppContext';
 
 const SupportPage = () => {
-    const {site} = useContext(AppContext);
     const [isLoading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -37,10 +35,10 @@ const SupportPage = () => {
     }, []);
 
     if (isLoading) {
-        const title = `Support ${site.title}`;
+        const title = `Loading checkout...`;
         return (
             <div>
-                <h1>{title}</h1>
+                <h1 style={{textAlign: 'center'}}>{title}</h1>
                 <LoadingPage />
             </div>
         );