add pf logo and update cta styling

Author: Rachel Lim

client/images/processing-foundation-logo.svg

@@ -1,20 +1,36 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
+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>
-      <SquareLogoIcon
-        className="about__logo"
-        role="img"
-        aria-label={t('Common.p5logoARIA')}
-        focusable="false"
-      />
-      <p className="fundraiser__description">{t('Fundraiser.CallToAction')}</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.p5logoARIA')}
+          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/FundraiserModal.jsx

@@ -50,7 +50,10 @@ $themes: (
     button-nav-inactive-color: $middle-gray,
     button-hover-color: $lightest,
     button-active-color: $lightest,
-    fundraiser-button-color: $p5js-pink,
+    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,
@@ -165,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,
@@ -259,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/abstracts/_variables.scss

@@ -2,12 +2,45 @@
     padding: #{20 / $base-font-size}rem;
     margin-right: #{20 / $base-font-size}rem;
     padding-bottom: #{40 / $base-font-size}rem;
-    width: #{500 / $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/_fundraiser.scss

@@ -27,7 +27,7 @@
   font-weight: bold;
   font-size: #{14 / $base-font-size}rem;
   @include themify() {
-    color: getThemifyVariable('fundraiser-button-color');
+    color: getThemifyVariable('fundraiser-button-nav-color');
   }
 }