Updated copy and styles, added default recurring option

public/quiz.html

@@ -803,7 +803,7 @@ <h3>We hope you enjoyed the quiz!</h3>
   }
 
   .form-group .error--message {
-    color: #f8492e;
+    color: #ed3224;
     font-size: 14px;
     float: right;
     text-align: right;
@@ -812,7 +812,7 @@ <h3>We hope you enjoyed the quiz!</h3>
   }
 
   .sweet-placeholder label.error {
-    color: #f8492e;
+    color: #ed3224;
     font-size: 14px;
     float: right;
     text-align: right;

quiz_maker_player/quiz.css

@@ -1,16 +1,17 @@
 body {
   background: white;
   color: #424242;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .quiz .button {
   width: auto;
   text-transform: none;
-  padding-top: calc(.375em - 1px);
+  padding-top: calc(0.375em - 1px);
 }
 
-.quiz h1 span, .quiz h2 span {
+.quiz h1 span,
+.quiz h2 span {
   background-color: #30394f;
   line-height: 1.4;
   box-shadow: 7px 0 0 #30394f, -7px 0 0 #30394f;
@@ -37,21 +38,27 @@ body {
 
 .quiz .qz-section-wrapper {
   padding: 15px;
-  background: rgba(255, 255, 255,0.85);
+  background: rgba(255, 255, 255, 0.85);
   border-radius: 5px;
   padding: 40px 15px;
 }
 
-button.button, a.button {
+button.button,
+a.button {
   color: white;
-  background-color: #f8492e;
-  border-color: #f8492e;
+  background-color: #ed3224;
+  border-color: #ed3224;
 }
 
-button.button:hover, a.button:hover, a.button:active, button.button:active, a.button:focus, button.button:focus {
-  background-color: rgba(0,192,207,0.85);
+button.button:hover,
+a.button:hover,
+a.button:active,
+button.button:active,
+a.button:focus,
+button.button:focus {
+  background-color: rgba(0, 192, 207, 0.85);
   color: white;
-  border-color: rgba(0,192,207,0.85);
+  border-color: rgba(0, 192, 207, 0.85);
 }
 
 .quiz .section-buttons {
@@ -64,10 +71,10 @@ button.button:hover, a.button:hover, a.button:active, button.button:active, a.bu
 }
 
 .quiz .qz-share-image img {
-
 }
 
-.quiz .qz-question, .quiz .section {
+.quiz .qz-question,
+.quiz .section {
   background-position: top;
   background-size: cover;
   background-repeat: no-repeat;
@@ -78,7 +85,8 @@ button.button:hover, a.button:hover, a.button:active, button.button:active, a.bu
   padding: 0 5%;
 }
 
-button.share-on-facebook, button.share-on-facebook:hover {
+button.share-on-facebook,
+button.share-on-facebook:hover {
   background-color: #597ac7;
   border-color: #597ac7;
   color: white;

src/FundraiserMailingGenerator/components/ConditionalCTA.js

@@ -16,7 +16,7 @@ class BoxTextHTML extends Component {
       donorRecurring: '',
       donorOneClick: true,
       donorWeekly: false,
-      nonDonorButtonTemplate: locales[props.lang].donorButtonDefaults,
+      nonDonorButtonTemplate: locales[props.lang].nonDonorButtonDefaults,
       nonDonorLinkTemplate: locales[props.lang].nonDonorLinkDefaults,
     };
   }
@@ -26,6 +26,7 @@ class BoxTextHTML extends Component {
   };
 
   buildMarkup = (donorTemplate = 'XXXX', nonDonorTemplate = 'YYYY') => {
+    console.log(this.state.donorRecurring);
     // Note: We are doing snapshot testing. If we modify this template,
     //       we should also update the snapshot. Make sure the snapshot
     //       test is passing, before updating the snapshot, otherwise
@@ -36,14 +37,14 @@ class BoxTextHTML extends Component {
     <p style="text-align: center; font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"><em>${
       locales[this.props.lang].oneClickCopy
     }</em></p>
-    <p style="text-align: center;">
+    <p style="text-align: center; width: fit-content;">
       ${donorTemplate}
     </p>
 
     {% else %}
     <!--- NON-DONOR --->
-    <p style="text-align: center;">
-      ${donorTemplate}
+    <p style="text-align: center; width: fit-content;">
+      ${nonDonorTemplate}
     </p>
     {% endif %}`;
     return tpl;
@@ -56,25 +57,31 @@ class BoxTextHTML extends Component {
       url: this.props.url,
       styles: this.props.styles,
       multipliers: this.state.donorMultipliers,
-      recurringDefault: this.state.donorRecurring,
+      recurringDefault:
+        this.state.donorRecurring == ''
+          ? 'only_one_off'
+          : this.state.donorRecurring,
       oneClick: this.state.donorOneClick,
       weekly: this.state.donorWeekly,
       buttonTemplate: this.state.donorButtonTemplate,
       otherAmountTemplate: this.state.donorOtherLinkTemplate,
     });
   };
 
-  nonDonorTemplate = (options = {}) => {
-    return utils.nonDonorSuggestedAmountsMarkup({
-      correctLowAsks: options.correctLowAsks || false,
-      isButton: options.isButton || false,
+  nonDonorTemplate = () => {
+    return utils.donorSuggestedAmountsMarkup({
       locale: this.props.lang,
       rates: this.props.rates,
-      styles: this.props.styles,
-      template: options.template || this.state.nonDonorButtonTemplate,
       url: this.props.url,
-      recurringDefault: this.state.donorRecurring,
+      styles: this.props.styles,
+      multipliers: this.state.donorMultipliers,
+      recurringDefault:
+        this.state.donorRecurring == ''
+          ? 'only_one_off'
+          : this.state.donorRecurring,
       weekly: this.state.donorWeekly,
+      buttonTemplate: this.state.nonDonorButtonTemplate,
+      otherAmountTemplate: this.state.nonDonorLinkTemplate,
     });
   };
 

src/FundraiserMailingGenerator/components/ConditionalCTA.test.js

@@ -7,7 +7,6 @@
 // - updating the TEST_RATES mocked rates
 // - changing the default values in the generator form.
 // - etc. (anything that would affect the resulting markup)
-
 jest.mock('copy-to-clipboard');
 import copy from 'copy-to-clipboard';
 import React from 'react';

src/FundraiserMailingGenerator/locales/en.js

@@ -12,9 +12,10 @@ export const monthlyAmount4 = '';
 export const monthlyAmount5 = '';
 export const recurringDefault = '';
 export const amounts = [];
-export const donorButtonDefaults = `Donate {{amount}} now`;
+export const donorButtonDefaults = `Donate {{amount}}`;
+export const nonDonorButtonDefaults = `Chip in {{amount}}`;
 export const donorLinkDefaults = `Donate another amount`;
-export const nonDonorLinkDefaults = `Will you chip in {{amount}} to help?`;
+export const nonDonorLinkDefaults = 'Chip in another amount';
 export const oneClickCopy = `If you’ve saved your payment information with SumOfUs, your donation will go through immediately:`;
 export const paymentMethodsCopy =
   'Donating just takes a moment -- use Paypal or your card.';

src/FundraiserMailingGenerator/utils/styles.ts

@@ -10,20 +10,19 @@ type Styles = {
 const styles: Styles = {
   classic: {
     linkStyle: {
-      color: '#00abbd',
-      fontFamily: 'sans-serif',
+      color: '#ed3224',
+      fontFamily: 'Montserrat, Helvetica, Arial, sans-serif',
       fontWeight: 'bold',
       textAlign: 'center',
     },
     buttonStyle: {
       backgroundColor: '#ed3224',
       borderRadius: '8px',
-      boxShadow: 'inset 0 -1.2px rgba(0, 0, 0, 0.12) !important',
       color: 'white',
       display: 'block',
-      fontFamily: 'sans-serif',
+      fontFamily: 'Montserrat, Helvetica, Arial, sans-serif',
       fontWeight: 'bold',
-      lineHeight: '50px',
+      lineHeight: '55px',
       margin: '10px auto',
       maxWidth: '300px',
       textAlign: 'center',
@@ -35,12 +34,12 @@ const styles: Styles = {
   },
   rebranding: {
     linkStyle: {
-      color: '#00abbd',
+      color: '#ed3224',
       fontFamily: 'Montserrat, Helvetica, Arial, sans-serif',
       fontWeight: 'bold',
     },
     buttonStyle: {
-      backgroundColor: '#f8492e',
+      backgroundColor: '#ed3224',
       borderRadius: '0px',
       color: 'white',
       display: 'block',