feat(donate): remove themes from donate pages

client/src/components/Donation/components/DonateFormChildViewForHOC.js

@@ -26,8 +26,7 @@ const propTypes = {
   isSignedIn: PropTypes.bool,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired
-  }),
+  })
-  theme: PropTypes.string
 };
 const initialState = {
   donationState: {
@@ -39,7 +38,7 @@ const initialState = {
 
 const mapStateToProps = createSelector(
   userSelector,
-  ({ email, theme }) => ({ email, theme })
+  ({ email }) => ({ email })
 );
 
 class DonateFormChildViewForHOC extends Component {
@@ -176,7 +175,7 @@ class DonateFormChildViewForHOC extends Component {
 
   renderDonateForm() {
     const { isFormValid } = this.state;
-    const { theme, getDonationButtonLabel } = this.props;
+    const { getDonationButtonLabel } = this.props;
     return (
       <Form className='donation-form' onSubmit={this.handleSubmit}>
         <FormGroup className='donation-email-container'>
@@ -191,10 +190,7 @@ class DonateFormChildViewForHOC extends Component {
             value={this.getUserEmail()}
           />
         </FormGroup>
-        <StripeCardForm
+        <StripeCardForm getValidationState={this.getValidationState} />
-          getValidationState={this.getValidationState}
-          theme={theme}
-        />
         <Button
           block={true}
           bsStyle='primary'

client/src/components/layouts/Default.js

@@ -81,7 +81,8 @@ const propTypes = {
   pathname: PropTypes.string.isRequired,
   removeFlashMessage: PropTypes.func.isRequired,
   showFooter: PropTypes.bool,
-  theme: PropTypes.string
+  theme: PropTypes.string,
+  useTheme: PropTypes.bool
 };
 
 const mapStateToProps = createSelector(
@@ -145,13 +146,16 @@ class DefaultLayout extends Component {
       isSignedIn,
       removeFlashMessage,
       showFooter = true,
-      theme = 'default'
+      theme = 'default',
+      useTheme = true
     } = this.props;
     return (
       <Fragment>
         <Helmet
           bodyAttributes={{
-            class: `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
+            class: useTheme
+              ? `${theme === 'default' ? 'light-palette' : 'dark-palette'}`
+              : 'light-palette'
           }}
           meta={[
             {

client/utils/gatsby/layoutSelector.js

@@ -27,6 +27,13 @@ export default function layoutSelector({ element, props }) {
       </DefaultLayout>
     );
   }
+  if (/^\/donation(\/.*)*|^\/donate(\/.*)*/.test(pathname)) {
+    return (
+      <DefaultLayout pathname={pathname} useTheme={false}>
+        {element}
+      </DefaultLayout>
+    );
+  }
   return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
 }