gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: add logos for payment buttons (#38548)

Browse Source 
* fix: add assets
* fix: add accepted-cards and style donation assets
This commit is contained in:
Ahmad Abdolsaheb
2020-04-14 15:52:20 +03:00
committed by GitHub
parent d302fc94e0
commit 6517f88b6c
5 changed files with 150 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/Donation/DonateForm.js
View File

@ -12,7 +12,9 @@ import {
ToggleButtonGroup
} from '@freecodecamp/react-bootstrap';
// import { StripeProvider, Elements } from 'react-stripe-elements';
import ApplePay from './assets/ApplePay';
import GooglePay from './assets/GooglePay';
import acceptedCards from './assets/accepted-cards.png';
import {
amountsConfig,
durationsConfig,
@ -274,7 +276,9 @@ class DonateForm extends Component {
id='confirm-donation-btn'
onClick={this.handleStripeCheckoutRedirect}
>
Pay with Apple Pay
<span>Pay with Apple Pay</span>
<ApplePay className='apple-pay-logo' />
</Button>
<Spacer />
<Button
@ -284,7 +288,8 @@ class DonateForm extends Component {
id='confirm-donation-btn'
onClick={this.handleStripeCheckoutRedirect}
>
Pay with Google Pay
<span>Pay with Google Pay</span>
<GooglePay className='google-pay-logo' />
</Button>
<Spacer />
<Button
@ -294,7 +299,13 @@ class DonateForm extends Component {
id='confirm-donation-btn'
onClick={this.handleStripeCheckoutRedirect}
>
Pay with Card
<span>Pay with Card</span>
<img
alt='accepted cards'
className='accepted-cards'
src={acceptedCards}
/>
</Button>
<Spacer />
{isOneTime ? (

20
client/src/components/Donation/Donation.css
View File

@ -331,3 +331,23 @@ li.disabled > a {
background-size: 84px;
filter: brightness(0.95);
}
.apple-pay-logo,
.google-pay-logo,
.accepted-cards {
height: 30px;
width: auto;
padding: 0 10px;
}
.accepted-cards {
height: 20px;
align-self: center;
}
#confirm-donation-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}

42
client/src/components/Donation/assets/ApplePay.js Normal file
View File

@ -0,0 +1,42 @@
/* eslint-disable max-len */
import React, { Fragment } from 'react';
const propTypes = {};
function ApplePay(props) {
return (
<Fragment>
<span className='sr-only'>Apple Pay Logo</span>
<svg
height={272}
version='1.1'
viewBox='0 0 425 272'
width={425}
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<title>ApplePay-mark</title>
<g fill='none' fillRule='evenodd'>
<g fillRule='nonzero'>
<path
d='m386.73 0.089764h-348.69c-1.4525 0-2.9076 0-4.3575 0.0076941-1.2241 0.010259-2.4457 0.023082-3.6698 0.056423-2.6663 0.071811-5.3558 0.22826-7.9888 0.70273-2.674 0.4796-5.1633 1.2644-7.591 2.5006-2.3892 1.2131-4.5731 2.8006-6.4696 4.6934-1.8939 1.8953-3.4824 4.0753-4.6963 6.4656-1.2369 2.4262-2.0222 4.914-2.4995 7.5889-0.47733 2.6339-0.63387 5.3192-0.70572 7.9813-0.033361 1.2234-0.048759 2.4442-0.056458 3.6649-0.0055431 1.4516-0.0055431 2.9032-0.0055431 4.3574v195.73c0 1.4542 0 2.9032 0.0055431 4.3574 0.0076988 1.2208 0.023096 2.4442 0.056458 3.6649 0.071855 2.6596 0.2284 5.3474 0.70572 7.9788 0.47733 2.675 1.2626 5.1627 2.4995 7.5915 1.2138 2.3877 2.8024 4.5703 4.6963 6.463 1.8965 1.8953 4.0804 3.4829 6.4696 4.6934 2.4277 1.2387 4.917 2.0235 7.591 2.5057 2.633 0.46934 5.3224 0.62835 7.9888 0.70016 1.2241 0.028212 2.4457 0.046165 3.6698 0.051294 1.4499 0.010259 2.905 0.010259 4.3575 0.010259h348.69c1.4499 0 2.905 0 4.355-0.010259 1.2215-0.005129 2.4431-0.023082 3.6723-0.051294 2.6612-0.071811 5.3507-0.23082 7.9888-0.70016 2.6715-0.48216 5.1608-1.267 7.591-2.5057 2.3892-1.2105 4.568-2.7981 6.467-4.6934 1.8913-1.8927 3.4799-4.0753 4.6963-6.463 1.2395-2.4288 2.0248-4.9165 2.4995-7.5915 0.47732-2.6314 0.6313-5.3192 0.70316-7.9788 0.033362-1.2208 0.048759-2.4442 0.056458-3.6649 0.010265-1.4542 0.010265-2.9032 0.010265-4.3574v-195.73c0-1.4542 0-2.9058-0.010265-4.3574-0.007699-1.2208-0.023096-2.4416-0.056458-3.6649-0.071855-2.6622-0.22583-5.3474-0.70316-7.9813-0.47476-2.675-1.26-5.1627-2.4995-7.5889-1.2164-2.3903-2.8049-4.5703-4.6963-6.4656-1.899-1.8927-4.0778-3.4803-6.467-4.6934-2.4303-1.2362-4.9195-2.021-7.591-2.5006-2.6381-0.47447-5.3276-0.63091-7.9888-0.70273-1.2292-0.033341-2.4508-0.046164-3.6723-0.056423-1.4499-0.0076941-2.905-0.0076941-4.355-0.0076941'
fill='#000'
/>
<path
d='m386.73 9.1483 4.2908 0.0076941c1.16 0.0076941 2.3225 0.020518 3.4901 0.053859 2.0325 0.053859 4.4114 0.16414 6.6287 0.56167 1.9247 0.34623 3.5414 0.87456 5.0915 1.6619 1.5321 0.7771 2.9332 1.7979 4.1574 3.0186 1.2292 1.2311 2.2506 2.6339 3.0385 4.1805 0.78528 1.5388 1.3088 3.1443 1.6552 5.0832 0.3952 2.1928 0.50556 4.5754 0.55945 6.6195 0.033362 1.1515 0.048759 2.3057 0.053892 3.488 0.010265 1.4285 0.010265 2.8545 0.010265 4.2856v195.73c0 1.4311 0 2.8571-0.010265 4.3138-0.005133 1.1541-0.02053 2.3082-0.053892 3.4649-0.053891 2.0389-0.16424 4.4215-0.56458 6.6374-0.34131 1.9133-0.86483 3.5188-1.6552 5.0653-0.78528 1.5439-1.8041 2.9443-3.0282 4.1676-1.2318 1.2311-2.6279 2.2467-4.1779 3.0315-1.5398 0.7848-3.1514 1.3131-5.0581 1.6542-2.2634 0.40266-4.7399 0.5155-6.6056 0.56423-1.1728 0.028212-2.3404 0.0436-3.5389 0.04873-1.4243 0.010258-2.8563 0.010258-4.2831 0.010258h-348.69-0.056458c-1.4089 0-2.8229 0-4.2574-0.010258-1.1702-0.00513-2.3379-0.020518-3.467-0.046165-1.9093-0.051294-4.3883-0.16414-6.6312-0.56423-1.9247-0.34367-3.5363-0.872-5.0966-1.6671-1.5346-0.7771-2.9307-1.7927-4.1625-3.0263-1.2215-1.2182-2.2378-2.616-3.0231-4.1625-0.78784-1.5439-1.3139-3.1546-1.6604-5.0909-0.39777-2.2133-0.50812-4.5831-0.56458-6.6118-0.030795-1.1592-0.043626-2.321-0.051325-3.4726l-0.0051325-3.4059v-197.53l0.0051325-3.3982c0.0076988-1.1618 0.02053-2.321 0.051325-3.4803 0.056458-2.0312 0.16681-4.4036 0.56971-6.6349 0.34131-1.9158 0.8674-3.529 1.6578-5.0807 0.78014-1.5337 1.799-2.934 3.0256-4.1599 1.2241-1.2259 2.6279-2.2415 4.1702-3.0263 1.5423-0.78736 3.1591-1.3131 5.0838-1.6594 2.2173-0.39753 4.5962-0.50781 6.6338-0.56167 1.16-0.033341 2.3225-0.046164 3.4747-0.053859l4.3036-0.0076941h348.69'
fill='#fff'
/>
<g fill='#000' transform='translate(48 69)'>
<path d='m44.053 25.048c-0.77353-6.1656 2.2561-12.716 5.8014-16.763 3.8676-4.6884 10.636-8.0281 16.115-8.285 0.64461 6.4225-1.8694 12.716-5.6725 17.405-3.8676 4.5599-10.056 8.1565-16.244 7.6427zm0.96691 6.294c-4.3189 0-10.829-4.8168-17.92-4.6884-9.2179 0.12845-17.791 5.3306-22.497 13.616-9.6691 16.57-2.514 41.104 6.8328 54.591 4.5767 6.6794 10.056 14.001 17.275 13.744 6.8328-0.2569 9.5402-4.4315 17.791-4.4315 8.3154 0 10.7 4.4315 17.92 4.303 7.4774-0.12845 12.183-6.6794 16.76-13.359 5.2213-7.5785 7.3485-14.964 7.4774-15.35-0.12892-0.12845-14.439-5.5875-14.568-22.029-0.12892-13.744 11.281-20.295 11.796-20.68-6.4461-9.5052-16.502-10.533-19.983-10.79-8.96-0.5138-16.631 5.0737-20.885 5.0737zm72.647-23.699v100.13h15.599v-34.232h21.594c19.725 0 33.584-13.487 33.584-33.011s-13.601-32.883-33.068-32.883h-37.709zm15.599 13.102h17.984c13.537 0 21.272 7.1931 21.272 19.845 0 12.652-7.7353 19.91-21.336 19.91h-17.92v-39.755zm83.67 87.795c9.798 0 18.887-4.9453 23.012-12.781h0.3223v12.01h14.439v-49.838c0-14.451-11.603-23.763-29.458-23.763-16.566 0-28.814 9.441-29.265 22.414h14.052c1.1603-6.1656 6.8973-10.212 14.761-10.212 9.5402 0 14.89 4.4315 14.89 12.588v5.5233l-19.467 1.156c-18.113 1.0918-27.911 8.4776-27.911 21.323 0 12.973 10.12 21.579 24.624 21.579zm4.1899-11.882c-8.3154 0-13.601-3.9819-13.601-10.083 0-6.294 5.0924-9.9548 14.826-10.533l17.34-1.0918v5.6518c0 9.3768-7.9931 16.056-18.565 16.056zm52.858 38.342c15.213 0 22.368-5.7802 28.62-23.314l27.396-76.556h-15.857l-18.371 59.151h-0.3223l-18.371-59.151h-16.309l26.429 72.895-1.4181 4.4315c-2.385 7.5143-6.2527 10.404-13.15 10.404-1.2248 0-3.6098-0.12845-4.5767-0.2569v12.01c0.90245 0.2569 4.7701 0.38535 5.9304 0.38535z' />
</g>
</g>
</g>
</svg>
</Fragment>
);
}
ApplePay.displayName = 'ApplePay';
ApplePay.propTypes = propTypes;
export default ApplePay;

73
client/src/components/Donation/assets/GooglePay.js Normal file
View File

@ -0,0 +1,73 @@
/* eslint-disable max-len */
import React, { Fragment } from 'react';
const propTypes = {};
function GooglePay(props) {
return (
<Fragment>
<span className='sr-only'>Google Pay Logo</span>
<svg
height={272}
version='1.1'
viewBox='0 0 425 272'
width={425}
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<title>GooglePay_mark</title>
<g fill='none' fillRule='evenodd'>
<path
d='m386.73 0.089764h-348.69c-1.4525 0-2.9076 0-4.3575 0.0076941-1.2241 0.010259-2.4457 0.023082-3.6698 0.056423-2.6663 0.071811-5.3558 0.22826-7.9888 0.70273-2.674 0.4796-5.1633 1.2644-7.591 2.5006-2.3892 1.2131-4.5731 2.8006-6.4696 4.6934-1.8939 1.8953-3.4824 4.0753-4.6963 6.4656-1.2369 2.4262-2.0222 4.914-2.4995 7.5889-0.47733 2.6339-0.63387 5.3192-0.70572 7.9813-0.033361 1.2234-0.048759 2.4442-0.056458 3.6649-0.0076988 1.4516-0.0051325 2.9032-0.0051325 4.3574v195.73c0 1.4542-0.0025663 2.9032 0.0051325 4.3574 0.0076988 1.2208 0.023096 2.4442 0.056458 3.6649 0.071855 2.6596 0.2284 5.3474 0.70572 7.9788 0.47733 2.675 1.2626 5.1627 2.4995 7.5915 1.2138 2.3877 2.8024 4.5703 4.6963 6.463 1.8965 1.8953 4.0804 3.4829 6.4696 4.6934 2.4277 1.2387 4.917 2.0235 7.591 2.5057 2.633 0.46934 5.3224 0.62835 7.9888 0.70016 1.2241 0.028212 2.4457 0.046165 3.6698 0.051294 1.4499 0.010259 2.905 0.010259 4.3575 0.010259h348.69c1.4499 0 2.905 0 4.355-0.010259 1.2215-0.005129 2.4431-0.023082 3.6723-0.051294 2.6612-0.071811 5.3507-0.23082 7.9888-0.70016 2.6715-0.48216 5.1608-1.267 7.591-2.5057 2.3892-1.2105 4.568-2.7981 6.467-4.6934 1.8913-1.8927 3.4799-4.0753 4.6963-6.463 1.2395-2.4288 2.0248-4.9165 2.4995-7.5915 0.47732-2.6314 0.6313-5.3192 0.70316-7.9788 0.033362-1.2208 0.048759-2.4442 0.056458-3.6649 0.010265-1.4542 0.010265-2.9032 0.010265-4.3574v-195.73c0-1.4542 0-2.9058-0.010265-4.3574-0.007699-1.2208-0.023096-2.4416-0.056458-3.6649-0.071855-2.6622-0.22583-5.3474-0.70316-7.9813-0.47476-2.675-1.26-5.1627-2.4995-7.5889-1.2164-2.3903-2.8049-4.5703-4.6963-6.4656-1.899-1.8927-4.0778-3.4803-6.467-4.6934-2.4303-1.2362-4.9195-2.021-7.591-2.5006-2.6381-0.47447-5.3276-0.63091-7.9888-0.70273-1.2292-0.033341-2.4508-0.046164-3.6723-0.056423-1.4499-0.0076941-2.905-0.0076941-4.355-0.0076941'
fill='#3C4043'
/>
<path
d='m386.73 9.1483 4.2908 0.0076941c1.16 0.0076941 2.3225 0.020518 3.4901 0.053859 2.0325 0.053859 4.4114 0.16414 6.6287 0.56167 1.9247 0.34623 3.5414 0.87456 5.0915 1.6619 1.5321 0.7771 2.9332 1.7979 4.1574 3.0186 1.2292 1.2311 2.2506 2.6339 3.0385 4.1805 0.78528 1.5388 1.3088 3.1443 1.6552 5.0832 0.3952 2.1928 0.50556 4.5754 0.55945 6.6195 0.033362 1.1515 0.048759 2.3057 0.053892 3.488 0.010265 1.4285 0.010265 2.8545 0.010265 4.2856v195.73c0 1.4311 0 2.8571-0.010265 4.3138-0.005133 1.1541-0.02053 2.3082-0.053892 3.4649-0.053891 2.0389-0.16424 4.4215-0.56458 6.6374-0.34131 1.9133-0.86483 3.5188-1.6552 5.0653-0.78528 1.5439-1.8041 2.9443-3.0282 4.1676-1.2318 1.2311-2.6279 2.2467-4.1779 3.0315-1.5398 0.7848-3.1514 1.3131-5.0581 1.6542-2.2634 0.40266-4.7399 0.5155-6.6056 0.56423-1.1728 0.028212-2.3404 0.0436-3.5389 0.04873-1.4243 0.010258-2.8563 0.010258-4.2831 0.010258h-348.69-0.056458c-1.4089 0-2.8229 0-4.2574-0.010258-1.1702-0.00513-2.3379-0.020518-3.467-0.046165-1.9093-0.051294-4.3883-0.16414-6.6312-0.56423-1.9247-0.34367-3.5363-0.872-5.0966-1.6671-1.5346-0.7771-2.9307-1.7927-4.1625-3.0263-1.2215-1.2182-2.2378-2.616-3.0231-4.1625-0.78784-1.5439-1.3139-3.1546-1.6604-5.0909-0.39777-2.2133-0.50812-4.5831-0.56458-6.6118-0.030795-1.1592-0.043626-2.321-0.051325-3.4726l-0.0051325-3.4059v-197.53l0.0051325-3.3982c0.0076988-1.1618 0.02053-2.321 0.051325-3.4803 0.056458-2.0312 0.16681-4.4036 0.56971-6.6349 0.34131-1.9158 0.8674-3.529 1.6578-5.0807 0.78014-1.5337 1.799-2.934 3.0256-4.1599 1.2241-1.2259 2.6279-2.2415 4.1702-3.0263 1.5423-0.78736 3.1591-1.3131 5.0838-1.6594 2.2173-0.39753 4.5962-0.50781 6.6338-0.56167 1.16-0.033341 2.3225-0.046164 3.4747-0.053859l4.3036-0.0076941h348.69'
fill='#FFFFFE'
/>
<g transform='translate(48.759 76.981)'>
<g fill='#3C4043' transform='translate(143.57 7.6248)'>
<path
d='m12.177 57.643v38.734h-12.102v-95.615h32.097c7.7423-0.1525 15.259 2.8212 20.746 8.311 10.974 10.37 11.651 27.831 1.353 39.039-0.451 0.45749-0.90201 0.91498-1.353 1.3725-5.6376 5.4136-12.553 8.1585-20.746 8.1585h-19.995zm0-45.139v33.397h20.295c4.51 0.1525 8.8698-1.6775 11.952-4.9561 6.3141-6.6336 6.1637-17.308-0.37584-23.713-3.0819-3.0499-7.2161-4.7274-11.576-4.7274h-20.295z'
fillRule='nonzero'
id='a'
/>
<path
d='m89.524 28.822c8.9449 0 16.011 2.4399 21.197 7.2436 5.1866 4.8036 7.7423 11.513 7.7423 19.977v40.335h-11.576v-9.0735h-0.52617c-5.0362 7.4723-11.651 11.208-19.995 11.208-7.0657 0-13.079-2.1349-17.815-6.4048-4.6604-3.9649-7.2912-9.836-7.1409-16.012 0-6.7861 2.5557-12.123 7.5919-16.165 5.0362-4.0411 11.801-6.0236 20.22-6.0236 7.2161 0 13.079 1.3725 17.74 3.9649v-2.8212c0-4.1936-1.804-8.1585-4.9611-10.903-3.2322-2.8974-7.3664-4.4986-11.651-4.4986-6.7651 0-12.102 2.8974-16.011 8.6923l-10.674-6.7861c5.7127-8.4635 14.357-12.733 25.858-12.733zm-15.635 47.502c0 3.2024 1.5033 6.1761 3.9839 8.006 2.706 2.1349 6.0134 3.2787 9.3959 3.2024 5.1114 0 9.9973-2.0587 13.605-5.7186 3.9839-3.8124 6.0134-8.311 6.0134-13.496-3.7584-3.0499-9.0201-4.5749-15.785-4.4986-4.8859 0-9.0201 1.22-12.327 3.5837-3.2322 2.3637-4.8859 5.3374-4.8859 8.921z'
fillRule='nonzero'
/>
<polygon
id='Path'
points='184.91 30.957 144.47 125.12 131.99 125.12 147.03 92.184 120.49 30.957 133.65 30.957 152.82 77.925 153.04 77.925 171.76 30.957'
/>
</g>
<path
d='m106.81 56.881c0-3.7362-0.30067-7.4723-0.90201-11.132h-51.039v21.121h29.24c-1.2027 6.7861-5.1114 12.886-10.824 16.698v13.725h17.439c10.223-9.531 16.086-23.637 16.086-40.411z'
fill='#4285F4'
id='Path'
/>
<path
d='m54.872 110.56c14.582 0 26.91-4.8799 35.855-13.267l-17.439-13.725c-4.8859 3.3549-11.125 5.2611-18.416 5.2611-14.131 0-26.083-9.6835-30.368-22.646h-17.965v14.182c9.1704 18.528 27.887 30.194 48.333 30.194z'
fill='#34A853'
id='Path'
/>
<path
d='m24.505 66.183c-2.255-6.7861-2.255-14.182 0-21.044v-14.106h-17.965c-7.7423 15.478-7.7423 33.778 0 49.256l17.965-14.106z'
fill='#FBBC04'
id='b'
/>
<path
d='m54.872 22.493c7.7423-0.1525 15.184 2.8212 20.746 8.2348l15.485-15.707c-9.8469-9.3023-22.776-14.411-36.231-14.258-20.446 0-39.162 11.742-48.333 30.27l17.965 14.182c4.2845-13.038 16.236-22.722 30.368-22.722z'
fill='#EA4335'
/>
</g>
</g>
</svg>
</Fragment>
);
}
GooglePay.displayName = 'GooglePay';
GooglePay.propTypes = propTypes;
export default GooglePay;

BIN
client/src/components/Donation/assets/accepted-cards.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB