fix(donate): unify layouts and navigation for consitency (#37795)

This commit updates the layouts and the styles to be consistent with the rest of the application. This also ensures now that the gatsby navigation is used for smoother transtions.

client/src/client-only-routes/ShowSettings.js

@@ -24,6 +24,7 @@ import Portfolio from '../components/settings/Portfolio';
 import Honesty from '../components/settings/Honesty';
 import Certification from '../components/settings/Certification';
 import DangerZone from '../components/settings/DangerZone';
+import SectionHeader from '../components/settings/SectionHeader.js';
 
 const propTypes = {
   createFlashMessage: PropTypes.func.isRequired,
@@ -54,6 +55,7 @@ const propTypes = {
     isApisMicroservicesCert: PropTypes.bool,
     isBackEndCert: PropTypes.bool,
     isDataVisCert: PropTypes.bool,
+    isDonating: PropTypes.bool,
     isEmailVerified: PropTypes.bool,
     isFrontEndCert: PropTypes.bool,
     isFrontEndLibsCert: PropTypes.bool,
@@ -122,6 +124,7 @@ export function ShowSettings(props) {
     user: {
       completedChallenges,
       email,
+      isDonating,
       is2018DataVisCert,
       isApisMicroservicesCert,
       isJsAlgoDataStructCert,
@@ -161,7 +164,7 @@ export function ShowSettings(props) {
     return <Loader fullScreen={true} />;
   }
 
-  if (!showLoading && !isSignedIn) {
+  if (!isSignedIn) {
     navigate(`${apiLocation}/signin?returnTo=settings`);
     return <Loader fullScreen={true} />;
   }
@@ -215,6 +218,20 @@ export function ShowSettings(props) {
             updateQuincyEmail={updateQuincyEmail}
           />
           <Spacer />
+          {isDonating ? (
+            <div>
+              <SectionHeader>Donation Settings</SectionHeader>
+              <FullWidthRow className='button-group'>
+                <Link
+                  className='btn-invert btn btn-lg btn-primary btn-block'
+                  to={`/donation/settings`}
+                >
+                  Manage your existing donations
+                </Link>
+              </FullWidthRow>
+              <Spacer />
+            </div>
+          ) : null}
           <Internet
             githubProfile={githubProfile}
             linkedin={linkedin}