From 8f73a92e1660b33a407e96ebfdec493a4959b3fd Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 31 Oct 2019 20:29:47 +0300
Subject: [PATCH] fix: set color based on theme (#37634)

---
 .../src/components/Donation/components/DonateForm.js  | 11 ++++++++---
 .../components/Donation/components/StripeCardForm.js  |  6 ++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Donation/components/DonateForm.js b/client/src/components/Donation/components/DonateForm.js
index d4f9b2c9ae..7f8539512a 100644
--- a/client/src/components/Donation/components/DonateForm.js
+++ b/client/src/components/Donation/components/DonateForm.js
@@ -25,7 +25,8 @@ const propTypes = {
   isSignedIn: PropTypes.bool,
   stripe: PropTypes.shape({
     createToken: PropTypes.func.isRequired
-  })
+  }),
+  theme: PropTypes.string
 };
 const initialState = {
   donationAmount: 500,
@@ -39,7 +40,7 @@ const initialState = {
 const mapStateToProps = createSelector(
   userSelector,
   isSignedInSelector,
-  ({ email }, isSignedIn) => ({ email, isSignedIn })
+  ({ email, theme }, isSignedIn) => ({ email, theme, isSignedIn })
 );
 
 class DonateForm extends Component {
@@ -168,6 +169,7 @@ class DonateForm extends Component {
 
   renderDonateForm() {
     const { isFormValid } = this.state;
+    const { theme } = this.props;
     return (
       <Row>
         <Col sm={10} smOffset={1} xs={12}>
@@ -184,7 +186,10 @@ class DonateForm extends Component {
                 value={this.getUserEmail()}
               />
             </FormGroup>
-            <StripeCardForm getValidationState={this.getValidationState} />
+            <StripeCardForm
+              getValidationState={this.getValidationState}
+              theme={theme}
+            />
             <Button
               block={true}
               bsStyle='primary'
diff --git a/client/src/components/Donation/components/StripeCardForm.js b/client/src/components/Donation/components/StripeCardForm.js
index 4d83461786..086c14b901 100644
--- a/client/src/components/Donation/components/StripeCardForm.js
+++ b/client/src/components/Donation/components/StripeCardForm.js
@@ -10,12 +10,12 @@ import { ControlLabel, FormGroup } from '@freecodecamp/react-bootstrap';
 import '../Donation.css';
 
 const propTypes = {
-  getValidationState: PropTypes.func.isRequired
+  getValidationState: PropTypes.func.isRequired,
+  theme: PropTypes.string
 };
 
 const style = {
   base: {
-    color: '#0a0a23',
     fontSize: '18px'
   }
 };
@@ -74,6 +74,8 @@ class StripeCardForm extends Component {
   }
 
   render() {
+    // set color based on theme
+    style.base.color = this.props.theme === 'night' ? '#fff' : '#0a0a23';
     return (
       <div className='donation-elements'>
         <FormGroup>