fix: set color based on theme (#37634)

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'

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>