create fundraiser modal and add it to IDEOverlays

Author: Rachel Lim

client/modules/IDE/components/FundraiserModal.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
+
+export default function FundraiserModal() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="fundraiser">
+      <p className="fundraiser__description">{t('Fundraiser.Description')}</p>
+      <SquareLogoIcon
+        className="about__logo"
+        role="img"
+        aria-label={t('Common.p5logoARIA')}
+        focusable="false"
+      />
+      <p className="fundraiser__description">{t('Fundraiser.CallToAction')}</p>
+    </div>
+  );
+}

client/modules/IDE/components/IDEOverlays.jsx

@@ -5,6 +5,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import Overlay from '../../App/components/Overlay';
 import {
   closeKeyboardShortcutModal,
+  closeFundraiserModal,
   closePreferences,
   closeShareModal,
   hideErrorModal
@@ -14,6 +15,7 @@ import AddToCollectionList from './AddToCollectionList';
 import ErrorModal from './ErrorModal';
 import Feedback from './Feedback';
 import KeyboardShortcutModal from './KeyboardShortcutModal';
+import FundraiserModal from './FundraiserModal';
 import NewFileModal from './NewFileModal';
 import NewFolderModal from './NewFolderModal';
 import Preferences from './Preferences';
@@ -33,6 +35,7 @@ export default function IDEOverlays() {
     uploadFileModalVisible,
     preferencesIsVisible,
     keyboardShortcutVisible,
+    fundraiserContentVisible,
     shareModalVisible,
     shareModalProjectId,
     shareModalProjectName,
@@ -106,6 +109,15 @@ export default function IDEOverlays() {
           <KeyboardShortcutModal />
         </Overlay>
       )}
+      {fundraiserContentVisible && (
+        <Overlay
+          title={t('Fundraiser.Title')}
+          ariaLabel={t('Fundraiser.Title')}
+          closeOverlay={() => dispatch(closeFundraiserModal())}
+        >
+          <FundraiserModal />
+        </Overlay>
+      )}
       {errorType && (
         <Overlay
           title={t('Common.Error')}