Skip to content

Commit 6e676bf

Browse files
sulaiman-devhuyenltnguyenmajestic-owl448
authored
chore(client): Swap Spacer component (freeCodeCamp#56765)
Co-authored-by: Huyen Nguyen <[email protected]> Co-authored-by: Ilenia M <[email protected]>
1 parent ed06b9f commit 6e676bf

File tree

90 files changed

+403
-470
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+403
-470
lines changed

‎client/src/client-only-routes/show-certification.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { Trans, useTranslation } from 'react-i18next';
55
import { connect } from 'react-redux';
66
import { bindActionCreators, Dispatch } from 'redux';
77
import { createSelector } from 'reselect';
8-
import { Container, Col, Row, Image, Button } from '@freecodecamp/ui';
8+
import { Container, Col, Row, Image, Button, Spacer } from '@freecodecamp/ui';
99

1010
import envData from '../../config/env.json';
1111
import { getLangCode } from '../../../shared/config/i18n';
1212
import FreeCodeCampLogo from '../assets/icons/freecodecamp';
1313
import MicrosoftLogo from '../assets/icons/microsoft-logo';
1414
import { createFlashMessage } from '../components/Flash/redux';
15-
import { Loader, Spacer } from '../components/helpers';
15+
import { Loader } from '../components/helpers';
1616
import RedirectHome from '../components/redirect-home';
1717
import { Themes } from '../components/settings/theme';
1818
import { showCert, fetchProfileForUser } from '../redux/actions';
@@ -253,7 +253,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
253253
className='donation-section'
254254
data-playwright-test-label='donation-section'
255255
>
256-
<Spacer size='large' />
256+
<Spacer size='l' />
257257
{!isDonationSubmitted && (
258258
<Row>
259259
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -280,13 +280,13 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
280280
/>
281281
</Col>
282282
</Row>
283-
<Spacer size='medium' />
283+
<Spacer size='m' />
284284
<Row>
285285
<Col sm={4} smOffset={4} xs={6} xsOffset={3}>
286286
{isDonationSubmitted && donationCloseBtn}
287287
</Col>
288288
</Row>
289-
<Spacer size='large' />
289+
<Spacer size='l' />
290290
</div>
291291
);
292292

@@ -308,7 +308,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
308308
>
309309
{t('profile.add-linkedin')}
310310
</Button>
311-
<Spacer size='medium' />
311+
<Spacer size='m' />
312312
<Button
313313
block={true}
314314
size='large'
@@ -323,7 +323,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
323323
{t('profile.add-twitter')}
324324
</Button>
325325
</Col>
326-
<Spacer size='large' />
326+
<Spacer size='l' />
327327
</Row>
328328
);
329329

@@ -484,11 +484,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
484484
className='row certificate-links'
485485
data-playwright-test-label='cert-links'
486486
>
487-
<Spacer size='large' />
487+
<Spacer size='l' />
488488
{signedInUserName === username ? shareCertBtns : ''}
489-
<Spacer size='large' />
489+
<Spacer size='l' />
490490
<ShowProjectLinks certName={certTitle} name={displayName} user={user} />
491-
<Spacer size='large' />
491+
<Spacer size='l' />
492492
</div>
493493
</Container>
494494
);

‎client/src/client-only-routes/show-project-links.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { find } from 'lodash-es';
22
import React, { useState } from 'react';
33
import { Trans, useTranslation } from 'react-i18next';
44
import { connect } from 'react-redux';
5-
import { Table } from '@freecodecamp/ui';
5+
import { Table, Spacer } from '@freecodecamp/ui';
66

7-
import { Link, Spacer } from '../components/helpers';
7+
import { Link } from '../components/helpers';
88
import ProjectModal from '../components/SolutionViewer/project-modal';
99
import type { CompletedChallenge, User } from '../redux/prop-types';
1010
import {
@@ -186,7 +186,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
186186
return (
187187
<div data-playwright-test-label='project-links'>
188188
{t(getCertHeading(certName), { user: name })}
189-
<Spacer size='medium' />
189+
<Spacer size='m' />
190190
<Table striped>
191191
<thead>
192192
<tr>
@@ -199,7 +199,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
199199
<ProjectsFor certName={certName} />
200200
</tbody>
201201
</Table>
202-
<Spacer size='medium' />
202+
<Spacer size='m' />
203203
<ProjectModal
204204
challengeFiles={completedChallenge?.challengeFiles ?? null}
205205
handleSolutionModalHide={handleSolutionModalHide}

‎client/src/client-only-routes/show-settings.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next';
44
import { connect } from 'react-redux';
55
import { createSelector } from 'reselect';
66

7-
import { Callout, Container } from '@freecodecamp/ui';
7+
import { Callout, Container, Spacer } from '@freecodecamp/ui';
88
import { useFeatureIsOn } from '@growthbook/growthbook-react';
99

1010
import store from 'store';
1111
import envData from '../../config/env.json';
1212
import { createFlashMessage } from '../components/Flash/redux';
13-
import { FullWidthRow, Loader, Spacer } from '../components/helpers';
13+
import { FullWidthRow, Loader } from '../components/helpers';
1414
import Certification from '../components/settings/certification';
1515
import MiscSettings from '../components/settings/misc-settings';
1616
import DangerZone from '../components/settings/danger-zone';
@@ -145,7 +145,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
145145
<Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
146146
<Container>
147147
<main>
148-
<Spacer size='large' />
148+
<Spacer size='l' />
149149
<FullWidthRow>
150150
<Callout variant='info'>{t('settings.profile-note')}</Callout>
151151
</FullWidthRow>
@@ -165,18 +165,18 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
165165
toggleNightMode={toggleNightMode}
166166
toggleSoundMode={toggleSoundMode}
167167
/>
168-
<Spacer size='medium' />
168+
<Spacer size='m' />
169169
<Privacy />
170-
<Spacer size='medium' />
170+
<Spacer size='m' />
171171
<Email
172172
email={email}
173173
isEmailVerified={isEmailVerified}
174174
sendQuincyEmail={sendQuincyEmail}
175175
updateQuincyEmail={updateQuincyEmail}
176176
/>
177-
<Spacer size='medium' />
177+
<Spacer size='m' />
178178
<Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
179-
<Spacer size='medium' />
179+
<Spacer size='m' />
180180
{examTokenFlag && <ExamToken />}
181181
<Certification
182182
completedChallenges={completedChallenges}
@@ -207,11 +207,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
207207
/>
208208
{userToken && (
209209
<>
210-
<Spacer size='medium' />
210+
<Spacer size='m' />
211211
<UserToken />
212212
</>
213213
)}
214-
<Spacer size='medium' />
214+
<Spacer size='m' />
215215
<DangerZone />
216216
</main>
217217
</Container>

‎client/src/client-only-routes/show-unsubscribed.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@ import type { RouteComponentProps } from '@reach/router';
22
import React from 'react';
33
import Helmet from 'react-helmet';
44
import { useTranslation } from 'react-i18next';
5-
import { Container, Panel, Button } from '@freecodecamp/ui';
5+
import { Container, Panel, Button, Spacer } from '@freecodecamp/ui';
66

77
import envData from '../../config/env.json';
8-
import { Spacer } from '../components/helpers';
98
import FullWidthRow from '../components/helpers/full-width-row';
109

1110
const { apiLocation } = envData;
@@ -26,9 +25,9 @@ function ShowUnsubscribed({
2625
<Container>
2726
<main>
2827
<FullWidthRow>
29-
<Spacer size='large' />
28+
<Spacer size='l' />
3029
<Panel variant='primary' className='text-center'>
31-
<Spacer size='medium' />
30+
<Spacer size='m' />
3231
<h2 data-playwright-test-label='main-heading'>
3332
{t('misc.unsubscribed')}
3433
</h2>
@@ -49,7 +48,7 @@ function ShowUnsubscribed({
4948
</Button>
5049
</FullWidthRow>
5150
) : null}
52-
<Spacer size='large' />
51+
<Spacer size='l' />
5352
</main>
5453
</Container>
5554
</>

‎client/src/client-only-routes/show-update-email.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ import {
1616
ControlLabel,
1717
Col,
1818
Row,
19-
Button
19+
Button,
20+
Spacer
2021
} from '@freecodecamp/ui';
2122

2223
import envData from '../../config/env.json';
23-
import { Spacer, Loader, Link } from '../components/helpers';
24+
import { Loader, Link } from '../components/helpers';
2425
import './show-update-email.css';
2526
import { isSignedInSelector, userSelector } from '../redux/selectors';
2627
import { hardGoTo as navigate } from '../redux/actions';
@@ -87,7 +88,7 @@ function ShowUpdateEmail({
8788
<title>{t('misc.update-email-1')} | freeCodeCamp.org</title>
8889
</Helmet>
8990
<Container>
90-
<Spacer size='medium' />
91+
<Spacer size='m' />
9192
<h2 className='text-center'>{t('misc.update-email-2')}</h2>
9293
<Row>
9394
<Col sm={6} smOffset={3}>

‎client/src/client-only-routes/show-user.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ import {
1111
Panel,
1212
Col,
1313
Row,
14-
Button
14+
Button,
15+
Spacer
1516
} from '@freecodecamp/ui';
1617

1718
import Login from '../components/Header/components/login';
18-
import { Spacer, Loader, FullWidthRow } from '../components/helpers';
19+
import { Loader, FullWidthRow } from '../components/helpers';
1920
import { reportUser } from '../redux/actions';
2021
import {
2122
userFetchStateSelector,
@@ -83,17 +84,17 @@ function ShowUser({
8384
return (
8485
<main>
8586
<FullWidthRow>
86-
<Spacer size='large' />
87+
<Spacer size='l' />
8788
<Panel variant='primary' className='text-center'>
8889
<Panel.Heading>
8990
<Panel.Title>{t('report.sign-in')}</Panel.Title>
9091
</Panel.Heading>
9192
<Panel.Body className='text-center'>
92-
<Spacer size='large' />
93+
<Spacer size='l' />
9394
<Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
9495
<Login block={true}>{t('buttons.click-here')}</Login>
9596
</Col>
96-
<Spacer size='exLarge' />
97+
<Spacer size='xl' />
9798
</Panel.Body>
9899
</Panel>
99100
</FullWidthRow>
@@ -106,7 +107,7 @@ function ShowUser({
106107
<Helmet>
107108
<title>{t('report.portfolio')} | freeCodeCamp.org</title>
108109
</Helmet>
109-
<Spacer size='large' />
110+
<Spacer size='l' />
110111
<Row className='text-center overflow-fix'>
111112
<Col sm={8} smOffset={2} xs={12}>
112113
<h2>{t('report.portfolio-2', { username: username })}</h2>
@@ -133,7 +134,7 @@ function ShowUser({
133134
<Button block={true} variant='primary' type='submit'>
134135
{t('report.submit')}
135136
</Button>
136-
<Spacer size='medium' />
137+
<Spacer size='m' />
137138
</form>
138139
</Col>
139140
</Row>

‎client/src/components/Donation/donate-completion.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import Spinner from 'react-spinkit';
4-
import { Alert } from '@freecodecamp/ui';
4+
import { Alert, Spacer } from '@freecodecamp/ui';
55

6-
import { Link, Spacer } from '../helpers';
6+
import { Link } from '../helpers';
77

88
type DonateCompletionProps = {
99
error: string | null;
@@ -37,7 +37,7 @@ function DonateCompletion({
3737
return (
3838
<Alert variant={style} className='donation-completion'>
3939
<b>{heading}</b>
40-
<Spacer size={'medium'} />
40+
<Spacer size='m' />
4141
<div className='donation-completion-body'>
4242
{(processing || redirecting) && (
4343
<Spinner

‎client/src/components/Donation/donate-form.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
66
import Spinner from 'react-spinkit';
77
import { createSelector } from 'reselect';
88
import type { TFunction } from 'i18next';
9+
import { Spacer } from '@freecodecamp/ui';
910

1011
import {
1112
defaultDonation,
@@ -22,7 +23,6 @@ import {
2223
donationFormStateSelector,
2324
completedChallengesSelector
2425
} from '../../redux/selectors';
25-
import Spacer from '../helpers/spacer';
2626
import { Themes } from '../settings/theme';
2727
import { DonateFormState } from '../../redux/types';
2828
import type { CompletedChallenge } from '../../redux/prop-types';
@@ -242,7 +242,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
242242
return (
243243
<>
244244
<div className={confirmationClass()}>{confirmationWithEditAmount}</div>
245-
<Spacer size={editAmount ? 'small' : 'medium'} />
245+
<Spacer size={editAmount ? 'xs' : 'm'} />
246246
<fieldset
247247
data-playwright-test-label='donation-form'
248248
className={'donate-btn-group security-legend'}

‎client/src/components/Donation/donation-modal-body.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { Col, Row, Modal } from '@freecodecamp/ui';
3+
import { Col, Row, Modal, Spacer } from '@freecodecamp/ui';
44
import { closeDonationModal } from '../../redux/actions';
5-
import { Spacer } from '../helpers';
65
import { PaymentContext } from '../../../../shared/config/donation-settings'; //
76
import donationAnimation from '../../assets/images/donation-bear-animation.svg';
87
import supporterBear from '../../assets/images/supporter-bear.svg';
@@ -58,7 +57,7 @@ function ModalHeader({
5857
)
5958
})}
6059
</b>
61-
<Spacer size='small' />
60+
<Spacer size='xs' />
6261
</>
6362
)}
6463

@@ -109,15 +108,15 @@ const Benefits = ({ setShowForm }: { setShowForm: (arg: boolean) => void }) => {
109108
<Row className={'donate-btn-group'}>
110109
<Col xs={12}>
111110
<ModalBenefitList />
112-
<Spacer size='small' />
111+
<Spacer size='xs' />
113112
<button
114113
className='text-center confirm-donation-btn donate-btn-group'
115114
type='submit'
116115
onClick={handleBecomeSupporterClick}
117116
>
118117
{t('donate.become-supporter')}
119118
</button>
120-
<Spacer size='medium' />
119+
<Spacer size='m' />
121120
</Col>
122121
</Row>
123122
);
@@ -195,7 +194,7 @@ const BecomeASupporterConfirmation = ({
195194
donationAttempted={donationAttempted}
196195
showForm={showForm}
197196
/>
198-
<Spacer size='small' />
197+
<Spacer size='xs' />
199198
{showForm ? (
200199
<MultiTierDonationForm
201200
setShowHeaderAndFooter={setShowHeaderAndFooter}

0 commit comments

Comments
 (0)