fix: make donate modal scrollable (#36761)

* fix: make donate modal scrollable

* fix: make text more readable on donate modal


Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/src/components/Donation/Donation.css

@@ -1,5 +1,5 @@
 .donation-modal {
-  font-size: 0.8rem;
+  overflow-y: auto;
 }
 
 .donation-modal p {
@@ -16,9 +16,6 @@
   font-size: 1.2rem;
 }
 
-.donation-modal .donation-form {
-  width: 60%;
-}
 .donation-form {
   display: flex;
   flex-direction: column;
@@ -27,6 +24,23 @@
   margin: 0 auto;
 }
 
+@media (max-width: 500px) {
+  .donation-form {
+    width: 100%;
+  }
+}
+
+.donation-modal .btn-link {
+  border: none;
+  text-decoration: underline;
+  background: transparent;
+}
+.donation-modal .btn-link:hover {
+  background: var(--tertiary-background);
+  text-decoration: none;
+  color: inherit;
+}
+
 .donation-elements {
   display: flex;
   flex-direction: column;

client/src/components/Donation/components/DonateForm.js

@@ -8,7 +8,9 @@ import {
   ControlLabel,
   Form,
   FormControl,
-  FormGroup
+  FormGroup,
+  Row,
+  Col
 } from '@freecodecamp/react-bootstrap';
 import { injectStripe } from 'react-stripe-elements';
 
@@ -162,34 +164,35 @@ class DonateForm extends Component {
   renderDonateForm() {
     const { isFormValid } = this.state;
     return (
-      <div>
-        <Form className='donation-form' onSubmit={this.handleSubmit}>
-          <FormGroup className='donation-email-container'>
-            <ControlLabel>
-              Email (we'll send you a tax-deductible donation receipt):
-            </ControlLabel>
-            <FormControl
-              onChange={this.handleEmailChange}
-              placeholder='me@example.com'
-              required={true}
-              type='text'
-              value={this.getUserEmail()}
-            />
-          </FormGroup>
-          <StripeCardForm getValidationState={this.getValidationState} />
-          <Button
-            block={true}
-            bsSize='lg'
-            bsStyle='primary'
-            disabled={!isFormValid}
-            id='confirm-donation-btn'
-            type='submit'
-          >
-            Confirm your donation of $5 / month
-          </Button>
-          <Spacer />
-        </Form>
-      </div>
+      <Row>
+        <Col sm={10} smOffset={1} xs={12}>
+          <Form className='donation-form' onSubmit={this.handleSubmit}>
+            <FormGroup className='donation-email-container'>
+              <ControlLabel>
+                Email (we'll send you a tax-deductible donation receipt):
+              </ControlLabel>
+              <FormControl
+                onChange={this.handleEmailChange}
+                placeholder='me@example.com'
+                required={true}
+                type='text'
+                value={this.getUserEmail()}
+              />
+            </FormGroup>
+            <StripeCardForm getValidationState={this.getValidationState} />
+            <Button
+              block={true}
+              bsStyle='primary'
+              disabled={!isFormValid}
+              id='confirm-donation-btn'
+              type='submit'
+            >
+              Confirm your donation of $5 / month
+            </Button>
+            <Spacer />
+          </Form>
+        </Col>
+      </Row>
     );
   }
 

client/src/components/Donation/components/DonateText.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { Row, Col } from '@freecodecamp/react-bootstrap';
 
 import { activeDonationsSelector } from '../../../redux';
 
@@ -17,18 +18,20 @@ const mapStateToProps = createSelector(
 const DonateText = ({ activeDonations }) => {
   const donationsLocale = activeDonations.toLocaleString();
   return (
-    <div className='text-center'>
-      <p>
-        freeCodeCamp.org is a tiny nonprofit that's helping millions of people
-        learn to code for free.
-      </p>
-      <p>
-        Join <strong>{donationsLocale}</strong> supporters.
-      </p>
-      <p>
-        Your $5 / month donation will help keep tech education free and open.
-      </p>
-    </div>
+    <Row>
+      <Col sm={10} smOffset={1} xs={12}>
+        <p>
+          freeCodeCamp.org is a tiny nonprofit that's helping millions of people
+          learn to code for free.
+        </p>
+        <p>
+          Join <strong>{donationsLocale}</strong> supporters.
+        </p>
+        <p>
+          Your $5 / month donation will help keep tech education free and open.
+        </p>
+      </Col>
+    </Row>
   );
 };