Add Promotion for 2023 Fundraiser

client/constants.js

@@ -90,6 +90,8 @@ export const SHOW_EDITOR_OPTIONS = 'SHOW_EDITOR_OPTIONS';
 export const CLOSE_EDITOR_OPTIONS = 'CLOSE_EDITOR_OPTIONS';
 export const SHOW_KEYBOARD_SHORTCUT_MODAL = 'SHOW_KEYBOARD_SHORTCUT_MODAL';
 export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL';
+export const SHOW_FUNDRAISER_MODAL = 'SHOW_FUNDRAISER_MODAL';
+export const CLOSE_FUNDRAISER_MODAL = 'CLOSE_FUNDRAISER_MODAL';
 export const SHOW_TOAST = 'SHOW_TOAST';
 export const HIDE_TOAST = 'HIDE_TOAST';
 export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';

client/modules/IDE/actions/ide.js

@@ -184,6 +184,18 @@ export function closeKeyboardShortcutModal() {
   };
 }
 
+export function showFundraiserModal() {
+  return {
+    type: ActionTypes.SHOW_FUNDRAISER_MODAL
+  };
+}
+
+export function closeFundraiserModal() {
+  return {
+    type: ActionTypes.CLOSE_FUNDRAISER_MODAL
+  };
+}
+
 export function setUnsavedChanges(value) {
   return {
     type: ActionTypes.SET_UNSAVED_CHANGES,

client/modules/IDE/components/About.jsx

@@ -162,6 +162,20 @@ function About(props) {
             Discord
           </a>
         </p>
+        <p className="about__content-column-list">
+          <a
+            href="https://p5js.org/download/support.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Donate
+          </a>
+        </p>
         <p className="about__content-column-list">
           <Link to="/privacy-policy">
             <AsteriskIcon

client/modules/IDE/components/FundraiserModal.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import LogoIcon from '../../../images/p5js-logo.svg';
+import PFLogoIcon from '../../../images/processing-foundation-logo.svg';
+
+export default function FundraiserModal() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="fundraiser">
+      <p className="fundraiser__description">{t('Fundraiser.Description')}</p>
+      <div className="fundraiser__img-container">
+        <LogoIcon
+          className="fundraiser__logo"
+          role="img"
+          aria-label={t('Common.p5logoARIA')}
+          focusable="false"
+        />
+        <PFLogoIcon
+          className="fundraiser__logo"
+          role="img"
+          aria-label={t('Common.PFlogoARIA')}
+          focusable="false"
+        />
+      </div>
+      <a
+        className="fundraiser__CTA"
+        href="https://donorbox.org/to-the-power-of-10"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {t('Fundraiser.CallToAction')}
+      </a>
+    </div>
+  );
+}

client/modules/IDE/components/Header/Nav.jsx

@@ -24,6 +24,7 @@ import {
   newFile,
   newFolder,
   showKeyboardShortcutModal,
+  showFundraiserModal,
   startSketch,
   stopSketch
 } from '../../actions/ide';
@@ -37,6 +38,7 @@ const Nav = ({ layout }) => (
       matches ? (
         <NavBar>
           <LeftLayout layout={layout} />
+          <FundraiserSection />
           <UserMenu />
         </NavBar>
       ) : (
@@ -85,6 +87,24 @@ const UserMenu = () => {
   return null;
 };
 
+const FundraiserSection = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <button
+        className="nav__fundraiser-btn"
+        onClick={() => dispatch(showFundraiserModal())}
+        aria-label="2023-fundraiser-button"
+        title="2023 Fundraiser Button"
+      >
+        {t('Nav.Fundraiser')}
+      </button>
+    </>
+  );
+};
+
 const DashboardMenu = () => {
   const { t } = useTranslation();
   const editorLink = useSelector(selectSketchPath);

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -39,6 +39,13 @@ exports[`Nav renders dashboard version for desktop 1`] = `
           </a>
         </li>
       </ul>
+      <button
+        aria-label="2023-fundraiser-button"
+        class="nav__fundraiser-btn"
+        title="2023 Fundraiser Button"
+      >
+        Support p5.js and the Processing Foundation!
+      </button>
     </nav>
   </header>
 </DocumentFragment>
@@ -666,6 +673,13 @@ exports[`Nav renders editor version for desktop 1`] = `
           </ul>
         </li>
       </ul>
+      <button
+        aria-label="2023-fundraiser-button"
+        class="nav__fundraiser-btn"
+        title="2023 Fundraiser Button"
+      >
+        Support p5.js and the Processing Foundation!
+      </button>
     </nav>
   </header>
 </DocumentFragment>

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')}

client/modules/IDE/reducers/ide.js

@@ -15,6 +15,7 @@ const initialState = {
   shareModalProjectName: 'My Cute Sketch',
   shareModalProjectUsername: 'p5_user',
   keyboardShortcutVisible: false,
+  fundraiserContentVisible: false,
   unsavedChanges: false,
   infiniteLoop: false,
   previewIsRefreshing: false,
@@ -85,6 +86,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { keyboardShortcutVisible: true });
     case ActionTypes.CLOSE_KEYBOARD_SHORTCUT_MODAL:
       return Object.assign({}, state, { keyboardShortcutVisible: false });
+    case ActionTypes.SHOW_FUNDRAISER_MODAL:
+      return Object.assign({}, state, { fundraiserContentVisible: true });
+    case ActionTypes.CLOSE_FUNDRAISER_MODAL:
+      return Object.assign({}, state, { fundraiserContentVisible: false });
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
     case ActionTypes.DETECT_INFINITE_LOOPS:

client/styles/abstracts/_variables.scss

@@ -50,6 +50,10 @@ $themes: (
     button-nav-inactive-color: $middle-gray,
     button-hover-color: $lightest,
     button-active-color: $lightest,
+    fundraiser-button-nav-color: $p5js-pink,
+    fundraiser-button-background-color: $p5js-pink,
+    fundraiser-button-color: $white,
+    fundraiser-button-hover-active-color: $medium-dark,
     modal-background-color: $light,
     preferences-button-background-color: $medium-light,
     modal-border-color: $middle-light,
@@ -164,6 +168,9 @@ $themes: (
     editor-gutter-color: $darker,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
+    fundraiser-button-background-color: $p5js-pink,
+    fundraiser-button-color: $white,
+    fundraiser-button-hover-active-color: $medium-dark,
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,
@@ -258,6 +265,9 @@ $themes: (
     editor-gutter-color: $darker,
     file-hover-color: $dark,
     file-selected-color: $medium-dark,
+    fundraiser-button-background-color: $yellow,
+    fundraiser-button-color: $dark,
+    fundraiser-button-hover-active-color: $medium-light,
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,

client/styles/components/_fundraiser.scss

@@ -0,0 +1,46 @@
+.fundraiser {
+    padding: #{20 / $base-font-size}rem;
+    margin-right: #{20 / $base-font-size}rem;
+    padding-bottom: #{40 / $base-font-size}rem;
+    width: #{525 / $base-font-size}rem;
+    text-align: center;
+    overflow-y: auto;
+}
+
+.fundraiser__CTA {
+    font-size: #{23 / $base-font-size}rem;
+    font-weight: bold;
+    margin-top: #{10 / $base-font-size}rem;
+    padding: #{20 / $base-font-size}rem;
+    border-radius: #{35 / $base-font-size}rem;
+
+    @include themify() {
+        color: getThemifyVariable('fundraiser-button-color');
+        background-color: getThemifyVariable('fundraiser-button-background-color');
+    }
+
+    &:hover,
+    &:focus {
+        @include themify() {
+            color: getThemifyVariable('fundraiser-button-color');
+            background-color: getThemifyVariable('fundraiser-button-hover-active-color');
+        }
+    }
+}
+
+.fundraiser__description {
+    margin: #{20 / $base-font-size}rem 0;
+    font-size: #{20 / $base-font-size}rem;
+}
+
+.fundraiser__img-container {
+    display: flex;
+    justify-content: center;
+    margin: #{40 / $base-font-size}rem 0;
+}
+
+.fundraiser__logo {
+    margin:0 #{30 / $base-font-size}rem;
+    width:#{150 / $base-font-size}rem;
+    height:#{150 / $base-font-size}rem;
+}

client/styles/components/_nav.scss

@@ -23,6 +23,15 @@
   align-items: center;
 }
 
+.nav__fundraiser-btn {
+  font-weight: bold;
+  font-size: #{14 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('fundraiser-button-nav-color');
+  }
+}
+
+
 .preview-nav__editor-svg {
   @include icon();
 }

client/styles/main.scss

@@ -43,6 +43,7 @@
 @import 'components/asset-list';
 @import 'components/asset-size';
 @import 'components/keyboard-shortcuts';
+@import 'components/fundraiser';
 @import 'components/copyable-input';
 @import 'components/feedback';
 @import 'components/console-input';

client/testData/testReduxStore.js

@@ -35,6 +35,7 @@ const initialTestState = {
     shareModalProjectName: 'My Cute Sketch',
     shareModalProjectUsername: 'p5_user',
     keyboardShortcutVisible: false,
+    fundraiserContentVisible: false,
     unsavedChanges: false,
     infiniteLoop: false,
     previewIsRefreshing: false,

translations/locales/en-US/translations.json

@@ -45,7 +45,8 @@
       "Asset": "Asset",
       "MyAssets": "My Assets",
       "LogOut": "Log Out"
-    }
+    },
+    "Fundraiser": "Support p5.js and the Processing Foundation!"
   },
   "CodemirrorFindAndReplace": {
     "ToggleReplace": "Toggle Replace",
@@ -201,6 +202,11 @@
       "TurnOffAccessibleOutput": "Turn Off Accessible Output"
     }
   },
+  "Fundraiser": {
+    "Title": "Support Our Software and Team",
+    "Description": "🎉 Join us in celebrating a Decade of Code! 🎉 Support p5.js and the Processing Foundation and earn unique rewards. 🙂", 
+    "CallToAction": "Contribute and learn more!"
+  },
   "Sidebar": {
     "Title": "Sketch Files",
     "ToggleARIA": "Toggle open/close sketch file options",
@@ -230,6 +236,7 @@
     "ErrorARIA": "Error",
     "Save": "Save",
     "p5logoARIA": "p5.js Logo",
+    "PFlogoARIA": "Processing Foundation Logo",
     "DeleteConfirmation": "Are you sure you want to delete {{name}}?"
   },
   "IDEView": {