diff --git a/client/src/components/Donation/DonateForm.js b/client/src/components/Donation/DonateForm.js index 3008bc4f7cd..44850f48425 100644 --- a/client/src/components/Donation/DonateForm.js +++ b/client/src/components/Donation/DonateForm.js @@ -234,6 +234,20 @@ class DonateForm extends Component { )); } + renderDonationDescription() { + const { donationAmount, donationDuration } = this.state; + return ( +

+ {`Your `} + {this.getFormatedAmountLabel(donationAmount)} + {` donation will provide `} + {this.convertToTimeContributed(donationAmount)} + {` of learning to people around the world`} + {donationDuration === 'onetime' ? `.` : ` each ${donationDuration}.`} +

+ ); + } + renderDurationAmountOptions() { const { donationAmount, donationDuration, processing } = this.state; return !processing ? ( @@ -267,14 +281,7 @@ class DonateForm extends Component { {this.renderAmountButtons(duration)} -

- {`Your `} - {this.getFormatedAmountLabel(donationAmount)} - {` donation will provide `} - {this.convertToTimeContributed(donationAmount)} - {` of learning to people around the world`} - {duration === 'onetime' ? `.` : ` each ${duration}.`} -

+ {this.renderDonationDescription()} ))} @@ -383,7 +390,7 @@ class DonateForm extends Component { renderPageForm() { return ( - {this.renderDurationAmountOptions()} + {this.renderDonationDescription()} {this.renderDonationOptions()} ); diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index 2d96910a186..f354fd047fc 100644 --- a/client/src/components/Donation/Donation.css +++ b/client/src/components/Donation/Donation.css @@ -407,3 +407,8 @@ button#confirm-donation-btn:hover { margin-right: auto; } } + +.donate-page-wrapper .alert.alert-info a:hover { + color: #327290; + background-color: #acdef3; +} diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js index 78c1be8dfdf..bcf805c1a40 100644 --- a/client/src/pages/donate.js +++ b/client/src/pages/donate.js @@ -101,13 +101,15 @@ export class DonatePage extends Component {


- If you would like to make additional donations, those will - help our nonprofit and our mission, too. + You can make an additional one-time donation of any amount + using this link:{' '} + + https://www.paypal.me/freecodecamp +

) : null} -