@comicrelief/component-library 7.3.0 → 7.5.0

package/dist/components/Organisms/Donate/Donate.js

@@ -31,12 +31,15 @@ var Donate = function Donate(_ref) {
   var alt = _ref.alt,
       cartID = _ref.cartID,
       clientID = _ref.clientID,
+      overlayColor = _ref.overlayColor,
       backgroundColor = _ref.backgroundColor,
+      buttonColor = _ref.buttonColor,
+      textColor = _ref.textColor,
       donateLink = _ref.donateLink,
       data = _ref.data,
       title = _ref.title,
       subtitle = _ref.subtitle,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       formAlignRight = _ref.formAlignRight,
       images = _ref.images,
       image = _ref.image,
@@ -68,6 +71,7 @@ var Donate = function Donate(_ref) {
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
+    overlayColor: overlayColor,
     id: mbshipID,
     key: overrideValue
   }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
@@ -80,7 +84,7 @@ var Donate = function Donate(_ref) {
     height: "100%",
     alt: mobileAlt
   }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
-    backgroundColor: backgroundColor,
+    backgroundColor: overlayColor,
     image: image,
     images: images,
     imageLow: imageLow,
@@ -96,25 +100,26 @@ var Donate = function Donate(_ref) {
     formAlignRight: formAlignRight
   }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, subtitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
-    color: "white",
+    color: textColor,
     size: "big",
     family: "Anton",
     weight: "normal",
     uppercase: true
   }, title), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "white",
+    color: textColor,
     size: "m"
   }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
-    otherDescription: otherDescription,
+    otherAmountText: otherAmountText,
     cartID: cartID,
     clientID: clientID,
     mbshipID: mbshipID,
     donateLink: donateLink,
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
-    chooseAmountText: chooseAmountText
+    chooseAmountText: chooseAmountText,
+    buttonColor: buttonColor
   })));
 };
 
@@ -129,9 +134,12 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
+  overlayColor: 'transparent',
   backgroundColor: 'blue_dark',
+  buttonColor: 'red',
+  textColor: 'white',
   mbshipID: null,
-  otherDescription: 'will help us fund amazing projects in the UK and around the world.',
+  otherAmountText: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',

package/dist/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red backgound on desktop view
+## Form align right, with red desktop overlay and purple mobile background colour
 
 ```js
 import data from './dev-data/data';
@@ -9,7 +9,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  backgroundColor="deep_violet_dark"
+  overlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -22,11 +23,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -35,6 +35,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -47,7 +48,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -60,6 +61,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -72,7 +74,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -85,6 +86,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -98,7 +100,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -112,6 +113,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   backgroundColor="transparent"
+  overlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -124,7 +126,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +150,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +174,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,16 +199,16 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+## Single Giving "No Money Buys", no background image, blue background; overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
 
 <Donate
+  overlayColor="blue_dark"
   backgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
@@ -220,12 +219,11 @@ import data from './dev-data/data-single';
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
-  chooseAmountText="Overridden via the 'choose amount text' props"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
-## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries, red background
 
 ```js
 import data from './dev-data/data';
@@ -235,6 +233,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   backgroundColor="red"
+  overlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -247,7 +246,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
   isDesktopOverride={false}
 />;
 ```

package/dist/components/Organisms/Donate/Donate.style.js

@@ -26,12 +26,13 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
 })(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.color('blue_dark');
+  var theme = _ref.theme,
+      backgroundColor = _ref.backgroundColor;
+  return theme.color(backgroundColor);
 }, (0, _size.media)('medium'), function (_ref2) {
   var theme = _ref2.theme,
-      backgroundColor = _ref2.backgroundColor;
-  return theme.color(backgroundColor);
+      overlayColor = _ref2.overlayColor;
+  return theme.color(overlayColor);
 });
 
 exports.Container = Container;
@@ -171,8 +172,9 @@ var Button = _styledComponents.default.button.withConfig({
   var theme = _ref14.theme;
   return theme.fontSize('s');
 }, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.color('red');
+  var theme = _ref15.theme,
+      buttonColor = _ref15.buttonColor;
+  return theme.color(buttonColor);
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.color('coral_dark');

package/dist/components/Organisms/Donate/Form/Form.js

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "buttonColor"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -36,13 +36,14 @@ var Signup = function Signup(_ref) {
       singleGiving = _ref$data.singleGiving,
       regularGiving = _ref$data.regularGiving,
       donateLink = _ref.donateLink,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       clientID = _ref.clientID,
       cartID = _ref.cartID,
       mbshipID = _ref.mbshipID,
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
+      buttonColor = _ref.buttonColor,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -86,7 +87,7 @@ var Signup = function Signup(_ref) {
   }, [givingType, singleGiving, regularGiving]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    var moneyBuyNewDescription = otherDescription;
+    var moneyBuyNewDescription = otherAmountText;
     givingData.moneybuys.map(function (moneyBuy, index) {
       if (moneyBuy.value === amountDonate) {
         moneyBuyNewDescription = moneyBuy.description;
@@ -102,7 +103,7 @@ var Signup = function Signup(_ref) {
       if (errorMsg) setErrorMsg(false);
       setMoneyBuyCopy(moneyBuyNewDescription);
     }
-  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherDescription]); // Updates our flag that differentiates between the popup
+  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText]); // Updates our flag that differentiates between the popup
   // being *currently* open and it *ever* having been shown to user
 
   (0, _react.useEffect)(function () {
@@ -184,11 +185,13 @@ var Signup = function Signup(_ref) {
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
-    value: "Donate"
+    value: "Donate",
+    buttonColor: buttonColor
   }) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
-    value: givingType === 'single' ? 'Donate now' : 'Donate monthly'
+    value: givingType === 'single' ? 'Donate now' : 'Donate monthly',
+    buttonColor: buttonColor
   }))));
 };
 

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -500,7 +500,7 @@ exports[`Monthly donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1251,7 +1251,7 @@ exports[`Single donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1845,7 +1845,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.3.0",
+  "version": "7.5.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/Donate/Donate.js

@@ -18,12 +18,15 @@ const Donate = ({
   alt,
   cartID,
   clientID,
+  overlayColor,
   backgroundColor,
+  buttonColor,
+  textColor,
   donateLink,
   data,
   title,
   subtitle,
-  otherDescription,
+  otherAmountText,
   formAlignRight,
   images,
   image,
@@ -52,7 +55,12 @@ const Donate = ({
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
 
   return (
-    <Container backgroundColor={backgroundColor} id={mbshipID} key={overrideValue}>
+    <Container
+      backgroundColor={backgroundColor}
+      overlayColor={overlayColor}
+      id={mbshipID}
+      key={overrideValue}
+    >
       {!isDesktop && mobileImages ? (
         <Picture
           backgroundColor={backgroundColor}
@@ -68,7 +76,7 @@ const Donate = ({
 
       {isDesktop && images ? (
         <BgImage
-          backgroundColor={backgroundColor}
+          backgroundColor={overlayColor}
           image={image}
           images={images}
           imageLow={imageLow}
@@ -87,7 +95,7 @@ const Donate = ({
               <>
                 <Text
                   tag="h2"
-                  color="white"
+                  color={textColor}
                   size="big"
                   family="Anton"
                   weight="normal"
@@ -95,7 +103,7 @@ const Donate = ({
                 >
                   {title}
                 </Text>
-                <Text tag="p" color="white" size="m">
+                <Text tag="p" color={textColor} size="m">
                   {subtitle}
                 </Text>
               </>
@@ -105,7 +113,7 @@ const Donate = ({
 
         <Form
           data={data}
-          otherDescription={otherDescription}
+          otherAmountText={otherAmountText}
           cartID={cartID}
           clientID={clientID}
           mbshipID={mbshipID}
@@ -113,6 +121,7 @@ const Donate = ({
           noMoneyBuys={noMoneyBuys}
           PopUpText={PopUpText}
           chooseAmountText={chooseAmountText}
+          buttonColor={buttonColor}
         />
       </Wrapper>
     </Container>
@@ -126,7 +135,7 @@ Donate.propTypes = {
   clientID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string,
+  otherAmountText: PropTypes.string,
   subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
   imageLow: PropTypes.string,
@@ -137,6 +146,9 @@ Donate.propTypes = {
   mobileImages: PropTypes.string,
   mobileAlt: PropTypes.string,
   backgroundColor: PropTypes.string,
+  overlayColor: PropTypes.string,
+  buttonColor: PropTypes.string,
+  textColor: PropTypes.string,
   mbshipID: PropTypes.string,
   noMoneyBuys: PropTypes.bool,
   PopUpText: PropTypes.string,
@@ -155,9 +167,12 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
+  overlayColor: 'transparent',
   backgroundColor: 'blue_dark',
+  buttonColor: 'red',
+  textColor: 'white',
   mbshipID: null,
-  otherDescription:
+  otherAmountText:
     'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,

package/src/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red backgound on desktop view
+## Form align right, with red desktop overlay and purple mobile background colour
 
 ```js
 import data from './dev-data/data';
@@ -9,7 +9,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  backgroundColor="deep_violet_dark"
+  overlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -22,11 +23,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -35,6 +35,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -47,7 +48,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -60,6 +61,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -72,7 +74,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -85,6 +86,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
+  overlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -98,7 +100,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -112,6 +113,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   backgroundColor="transparent"
+  overlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -124,7 +126,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +150,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +174,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,16 +199,16 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
-## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+## Single Giving "No Money Buys", no background image, blue background; overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
 
 <Donate
+  overlayColor="blue_dark"
   backgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
@@ -220,12 +219,11 @@ import data from './dev-data/data-single';
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
-  chooseAmountText="Overridden via the 'choose amount text' props"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
-## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries, red background
 
 ```js
 import data from './dev-data/data';
@@ -235,6 +233,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   backgroundColor="red"
+  overlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -247,7 +246,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
-  otherDescription="will help us fund amazing projects in the UK and around the world."
   isDesktopOverride={false}
 />;
 ```

package/src/components/Organisms/Donate/Donate.style.js

@@ -14,12 +14,12 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: center;
   height: auto;
-  background-color: ${({ theme }) => theme.color('blue_dark')};
+  background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   ${media('medium')} {
     flex-direction: row;
     align-items: center;
     justify-content: inherit;
-    background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+    background-color: ${({ theme, overlayColor }) => theme.color(overlayColor)};
   }
 `;
 
@@ -215,7 +215,7 @@ const Button = styled.button`
   font-weight: bold;
   cursor: pointer;
   min-height: 48px;
-  background: ${({ theme }) => theme.color('red')};
+  background: ${({ theme, buttonColor }) => theme.color(buttonColor)};
   text-decoration: none;
   border-radius: 2rem;
   border: none;

package/src/components/Organisms/Donate/Form/Form.js

@@ -26,13 +26,14 @@ import GivingSelector from '../GivingSelector/GivingSelector';
 const Signup = ({
   data: { singleGiving, regularGiving },
   donateLink,
-  otherDescription,
+  otherAmountText,
   clientID,
   cartID,
   mbshipID,
   noMoneyBuys,
   PopUpText,
   chooseAmountText,
+  buttonColor,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -59,7 +60,7 @@ const Signup = ({
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    let moneyBuyNewDescription = otherDescription;
+    let moneyBuyNewDescription = otherAmountText;
 
     givingData.moneybuys.map((moneyBuy, index) => {
       if (moneyBuy.value === amountDonate) {
@@ -88,7 +89,7 @@ const Signup = ({
     regularGiving,
     givingType,
     amountDonate,
-    otherDescription
+    otherAmountText
   ]);
 
   // Updates our flag that differentiates between the popup
@@ -211,12 +212,13 @@ const Signup = ({
           )}
 
           {noMoneyBuys ? (
-            <Button type="submit" as="input" value="Donate" />
+            <Button type="submit" as="input" value="Donate" buttonColor={buttonColor} />
           ) : (
             <Button
               type="submit"
               as="input"
               value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
+              buttonColor={buttonColor}
             />
           )}
 
@@ -230,12 +232,13 @@ Signup.propTypes = {
   clientID: PropTypes.string.isRequired,
   cartID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string.isRequired,
+  otherAmountText: PropTypes.string.isRequired,
   mbshipID: PropTypes.string.isRequired,
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),
   PopUpText: PropTypes.string.isRequired,
-  chooseAmountText: PropTypes.string.isRequired
+  chooseAmountText: PropTypes.string.isRequired,
+  buttonColor: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -500,7 +500,7 @@ exports[`Monthly donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1251,7 +1251,7 @@ exports[`Single donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1845,7 +1845,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }