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,7 +164,8 @@ class DonateForm extends Component {
   renderDonateForm() {
     const { isFormValid } = this.state;
     return (
-      <div>
+      <Row>
+        <Col sm={10} smOffset={1} xs={12}>
           <Form className='donation-form' onSubmit={this.handleSubmit}>
             <FormGroup className='donation-email-container'>
               <ControlLabel>
@@ -179,7 +182,6 @@ class DonateForm extends Component {
             <StripeCardForm getValidationState={this.getValidationState} />
             <Button
               block={true}
-            bsSize='lg'
               bsStyle='primary'
               disabled={!isFormValid}
               id='confirm-donation-btn'
@@ -189,7 +191,8 @@ class DonateForm extends Component {
             </Button>
             <Spacer />
           </Form>
-      </div>
+        </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,7 +18,8 @@ const mapStateToProps = createSelector(
 const DonateText = ({ activeDonations }) => {
   const donationsLocale = activeDonations.toLocaleString();
   return (
-    <div className='text-center'>
+    <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.
@@ -28,7 +30,8 @@ const DonateText = ({ activeDonations }) => {
         <p>
           Your $5 / month donation will help keep tech education free and open.
         </p>
-    </div>
+      </Col>
+    </Row>
   );
 };