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>pull/36765/head
parent
2b9d2605c5
commit
338234d635
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue