opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-09-24 23:01:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(UI): give the spacer a few standard sizes (#49723)

Browse Source 
Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
This commit is contained in:
Manabu Matsumoto
2023-03-21 08:17:42 +00:00
committed by GitHub
co-authored by Muhammed Mustafa
parent d3396a2017
commit 9136f8e408
43 changed files with 153 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/client-only-routes/show-certification.tsx
+7 -7
View File
@@ -240,7 +240,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
const donationSection = (
<div className='donation-section'>
<Spacer paddingSize={30} />
<Spacer size='large' />
{!isDonationSubmitted && (
<Row>
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@@ -263,7 +263,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
{isDonationSubmitted && donationCloseBtn}
</Col>
</Row>
<Spacer paddingSize={30} />
<Spacer size='large' />
</div>
);
@@ -281,7 +281,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
>
{t('profile.add-linkedin')}
</Button>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Button
block={true}
bsSize='lg'
@@ -295,7 +295,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
{t('profile.add-twitter')}
</Button>
</Col>
<Spacer paddingSize={30} />
<Spacer size='large' />
</Row>
);
@@ -365,11 +365,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
</footer>
</Row>
<div className='row certificate-links'>
<Spacer paddingSize={30} />
<Spacer size='large' />
{signedInUserName === username ? shareCertBtns : ''}
<Spacer paddingSize={30} />
<Spacer size='large' />
<ShowProjectLinks certName={certTitle} name={displayName} user={user} />
<Spacer paddingSize={30} />
<Spacer size='large' />
</div>
</Grid>
);
client/src/client-only-routes/show-project-links.tsx
+2 -2
View File
@@ -160,7 +160,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
: 'certification.project.heading',
{ user: name }
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Table striped>
<thead>
<tr>
@@ -170,7 +170,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
</thead>
<tbody>{renderProjectsFor(certName)}</tbody>
</Table>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ProjectModal
challengeFiles={completedChallenge?.challengeFiles ?? null}
handleSolutionModalHide={handleSolutionModalHide}
client/src/client-only-routes/show-settings.tsx
+9 -9
View File
@@ -161,7 +161,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
<Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />
<Grid>
<main>
<Spacer paddingSize={30} />
<Spacer size='large' />
<h1 className='text-center' style={{ overflowWrap: 'break-word' }}>
{t('settings.for', { username: username })}
</h1>
@@ -180,16 +180,16 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
toggleKeyboardShortcuts={toggleKeyboardShortcuts}
username={username}
/>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Privacy />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Email
email={email}
isEmailVerified={isEmailVerified}
sendQuincyEmail={sendQuincyEmail}
updateQuincyEmail={updateQuincyEmail}
/>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Internet
githubProfile={githubProfile}
linkedin={linkedin}
@@ -197,12 +197,12 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
updateSocials={updateSocials}
website={website}
/>
<Spacer paddingSize={15} />
<Spacer size='medium' />
{/* @ts-expect-error Portfolio types mismatch */}
<Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Certification
completedChallenges={completedChallenges}
createFlashMessage={createFlashMessage}
@@ -229,11 +229,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
/>
{userToken && (
<>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<UserToken />
</>
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
<DangerZone />
</main>
</Grid>
client/src/client-only-routes/show-unsubscribed.tsx
+3 -3
View File
@@ -23,9 +23,9 @@ function ShowUnsubscribed({
<Grid>
<main>
<FullWidthRow>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Panel bsStyle='primary' className='text-center'>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h2>{t('misc.unsubscribed')}</h2>
<p>{t('misc.keep-coding')}</p>
</Panel>
@@ -42,7 +42,7 @@ function ShowUnsubscribed({
</Button>
</FullWidthRow>
) : null}
<Spacer paddingSize={30} />
<Spacer size='large' />
</main>
</Grid>
</>
client/src/client-only-routes/show-user.tsx
+5 -5
View File
@@ -83,7 +83,7 @@ function ShowUser({
return (
<main>
<FullWidthRow>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Panel bsStyle='info' className='text-center'>
<Panel.Heading>
<Panel.Title componentClass='h3'>
@@ -91,11 +91,11 @@ function ShowUser({
</Panel.Title>
</Panel.Heading>
<Panel.Body className='text-center'>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
<Login block={true}>{t('buttons.click-here')}</Login>
</Col>
<Spacer paddingSize={45} />
<Spacer size='exLarge' />
</Panel.Body>
</Panel>
</FullWidthRow>
@@ -108,7 +108,7 @@ function ShowUser({
<Helmet>
<title>{t('report.portfolio')} | freeCodeCamp.org</title>
</Helmet>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Row className='text-center overflow-fix'>
<Col sm={8} smOffset={2} xs={12}>
<h2>{t('report.portfolio-2', { username: username })}</h2>
@@ -135,7 +135,7 @@ function ShowUser({
<Button block={true} bsStyle='primary' type='submit'>
{t('report.submit')}
</Button>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</form>
</Col>
</Row>
client/src/components/Donation/donate-form.tsx
+1 -1
View File
@@ -273,7 +273,7 @@ class DonateForm extends Component<DonateFormProps, DonateFormComponentState> {
<b className={isMinimalForm ? 'donation-label-modal' : ''}>
{this.getDonationButtonLabel()}:
</b>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<fieldset className={'donate-btn-group security-legend'}>
<legend>
<SecurityLockIcon />
client/src/components/Donation/donation-modal.tsx
+2 -2
View File
@@ -134,7 +134,7 @@ function DonateModal({
>
<Modal.Body>
{donationText}
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Row>
<Col xs={12}>
<DonateForm
@@ -144,7 +144,7 @@ function DonateModal({
/>
</Col>
</Row>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Row>
<Col sm={4} smOffset={4} xs={8} xsOffset={2}>
<Button
client/src/components/FourOhFour/index.tsx
+4 -4
View File
@@ -16,18 +16,18 @@ const FourOhFour = (): JSX.Element => {
<div className='notfound-page-wrapper'>
<Helmet title={t('404.page-not-found') + '| freeCodeCamp'} />
<img alt={t('404.not-found')} src={notFoundLogo} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h1>{t('404.page-not-found')}.</h1>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div>
<p>{t('404.heres-a-quote')}</p>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<blockquote className='quote-wrapper'>
<p className='quote'>{quote.quote}</p>
<p className='author'>- {quote.author}</p>
</blockquote>
</div>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Link className='btn btn-cta' to='/learn'>
{t('buttons.view-curriculum')}
</Link>
client/src/components/Intro/components/intro-description.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ function IntroDescription(): JSX.Element {
return (
<div className='intro-description'>
<strong>{t('learn.read-this.heading')}</strong>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>{t('learn.read-this.p1')}</p>
<p>{t('learn.read-this.p2')}</p>
<p>{t('learn.read-this.p3')}</p>
client/src/components/Intro/index.tsx
+9 -9
View File
@@ -34,22 +34,22 @@ const Intro = ({
if (pending && !complete) {
return (
<>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Loader />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
);
} else if (isSignedIn) {
const { quote, author } = randomQuote();
return (
<>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h1 className='text-center'>
{name
? `${t('learn.welcome-1', { name: name })}`
: `${t('learn.welcome-2')}`}
</h1>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='text-center quote-partial'>
<blockquote className='blockquote'>
<span>
@@ -66,7 +66,7 @@ const Intro = ({
/>
{completedChallengeCount && slug && completedChallengeCount < 15 ? (
<div className='intro-description'>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>
<Trans i18nKey='learn.start-at-beginning'>
<Link to={slug} />
@@ -81,13 +81,13 @@ const Intro = ({
} else {
return (
<>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h1>{t('learn.heading')}</h1>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<IntroDescription />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
);
}
client/src/components/Map/index.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ function renderLearnMap(currentSuperBlock: MapProps['currentSuperBlock']) {
>
{i18next.t('learn.help-translate-link')}
</Link>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</div>
</>
)}
client/src/components/helpers/spacer.tsx
+11 -3
View File
@@ -1,13 +1,21 @@
import React from 'react';
const Padding = Object.freeze({
small: 5,
medium: 15,
large: 30,
exLarge: 45
});
type PaddingKeys = keyof typeof Padding;
interface SpacerProps {
paddingSize: number;
size: PaddingKeys;
}
const Spacer = ({ paddingSize }: SpacerProps): JSX.Element => (
const Spacer = ({ size }: SpacerProps): JSX.Element => (
<div
className='spacer'
style={{ padding: `${paddingSize}px 0`, height: '1px' }}
style={{ padding: `${Padding[size]}px 0`, height: '1px' }}
/>
);
client/src/components/landing/components/certifications.tsx
+2 -2
View File
@@ -19,9 +19,9 @@ const Certifications = ({
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<h1 className='big-heading'>{t('landing.certification-heading')}</h1>
<Map forLanding={true} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<BigCallToAction pageName={pageName} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
</Row>
);
client/src/components/landing/components/landing-top.tsx
+3 -3
View File
@@ -28,7 +28,7 @@ function LandingTop({ pageName }: LandingTopProps): JSX.Element {
return (
<div className='landing-top'>
<Row>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
<h1 className='big-heading' data-test-label={`${pageName}-header`}>
{t('landing.big-heading-1')}
@@ -52,10 +52,10 @@ function LandingTop({ pageName }: LandingTopProps): JSX.Element {
</>
)}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<BigCallToAction pageName={pageName} />
<CampersImage pageName={pageName} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
</Row>
</div>
client/src/components/profile/components/certifications.tsx
+2 -2
View File
@@ -61,7 +61,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
</Link>
</Col>
</Row>
<Spacer paddingSize={5} />
<Spacer size='small' />
</>
);
}
@@ -102,7 +102,7 @@ function Certificates({
username={username}
/>
))}
<Spacer paddingSize={30} />
<Spacer size='large' />
</div>
) : null}
<hr />
client/src/components/profile/components/heat-map.tsx
+2 -2
View File
@@ -124,7 +124,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
&gt;
</button>
</Row>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<CalendarHeatMap
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -164,7 +164,7 @@ class HeatMapInner extends Component<HeatMapInnerProps, HeatMapInnerState> {
/>
<ReactTooltip className='react-tooltip' effect='solid' html={true} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Row>
<div className='streak-container'>
<span className='streak' data-testid='longest-streak'>
client/src/components/profile/profile.tsx
+6 -6
View File
@@ -29,7 +29,7 @@ function renderMessage(
<FullWidthRow>
<p className='alert alert-info'>{t('profile.you-change-privacy')}</p>
</FullWidthRow>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
) : (
<>
@@ -43,7 +43,7 @@ function renderMessage(
{t('profile.username-change-privacy', { username: username })}
</p>
</FullWidthRow>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
);
}
@@ -103,7 +103,7 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
{showTimeLine ? (
<Timeline completedMap={completedChallenges} username={username} />
) : null}
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
);
}
@@ -120,9 +120,9 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
<Helmet>
<title>{t('buttons.profile')} | freeCodeCamp.org</title>
</Helmet>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Grid>
<Spacer paddingSize={15} />
<Spacer size='medium' />
{isLocked ? renderMessage(isSessionUser, username, t) : null}
{!isLocked || isSessionUser ? renderProfile(user) : null}
{isSessionUser ? null : (
@@ -132,7 +132,7 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
</Link>
</Row>
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Grid>
</>
);
client/src/components/settings/about.tsx
+2 -2
View File
@@ -208,7 +208,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
return (
<>
<UsernameSettings username={username} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<SectionHeader>{t('settings.headings.personal-info')}</SectionHeader>
<FullWidthRow>
<form id='camper-identity' onSubmit={this.handleSubmit}>
@@ -271,7 +271,7 @@ class AboutSettings extends Component<AboutProps, AboutState> {
</BlockSaveButton>
</form>
</FullWidthRow>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<FullWidthRow>
<ThemeSettings
currentTheme={currentTheme}
client/src/components/settings/certification.js
+3 -3
View File
@@ -231,7 +231,7 @@ export class CertificationSettings extends Component {
const { certSlug } = first(projectsMap[certName]);
return (
<FullWidthRow key={certName}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h3 className='text-center' id={`cert-${certSlug}`}>
{t(`certification.title.${certName}`, certName)}
</h3>
@@ -345,7 +345,7 @@ export class CertificationSettings extends Component {
};
return (
<FullWidthRow key={certSlug}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h3 className='text-center'>
{t('certification.title.Legacy Full Stack Certification')}
</h3>
@@ -403,7 +403,7 @@ export class CertificationSettings extends Component {
</Button>
)}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</FullWidthRow>
);
};
client/src/components/settings/danger-zone.tsx
+3 -3
View File
@@ -45,7 +45,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
<FullWidthRow className='danger-zone text-center'>
<Panel bsStyle='danger'>
<Panel.Heading>{t('settings.danger.heading')}</Panel.Heading>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>{t('settings.danger.be-careful')}</p>
<FullWidthRow>
<Button
@@ -58,7 +58,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
>
{t('settings.danger.reset')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
@@ -69,7 +69,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
>
{t('settings.danger.delete')}
</Button>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</FullWidthRow>
</Panel>
client/src/components/settings/delete-modal.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
>
{t('settings.danger.nevermind')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
client/src/components/settings/email.tsx
+1 -1
View File
@@ -223,7 +223,7 @@ function EmailSettings({
</BlockSaveButton>
</form>
</FullWidthRow>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<FullWidthRow>
<form id='form-quincy-email' onSubmit={handleSubmit}>
<ToggleSetting
client/src/components/settings/portfolio.tsx
+5 -5
View File
@@ -314,7 +314,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
>
{t('buttons.save-portfolio')}
</BlockSaveButton>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
@@ -327,9 +327,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
</form>
{index + 1 !== arr.length && (
<>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<hr />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
)}
</FullWidthRow>
@@ -348,7 +348,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
</div>
</FullWidthRow>
<FullWidthRow>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
@@ -360,7 +360,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
{t('buttons.add-portfolio')}
</Button>
</FullWidthRow>
<Spacer paddingSize={30} />
<Spacer size='large' />
{portfolio.length ? portfolio.map(this.renderPortfolio) : null}
</section>
);
client/src/components/settings/privacy.tsx
+1 -1
View File
@@ -161,7 +161,7 @@ function PrivacySettings({
</Form>
</FullWidthRow>
<FullWidthRow>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>{t('settings.data')}</p>
<Button
block={true}
client/src/components/settings/reset-modal.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ function ResetModal(props: ResetModalProps): JSX.Element {
>
{t('settings.danger.nevermind-2')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
client/src/components/settings/sound.tsx
+1 -1
View File
@@ -65,7 +65,7 @@ export default function SoundSettings({
className='soundbar'
onInput={handleVolumeChange}
/>
<Spacer paddingSize={15}></Spacer>
<Spacer size='medium'></Spacer>
</Form>
);
}
client/src/components/settings/toggle-setting.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export default function ToggleSetting({
/>
</FormGroup>
</div>
<Spacer paddingSize={5} />
<Spacer size='small' />
</>
);
}
client/src/components/settings/user-token.tsx
+3 -3
View File
@@ -33,10 +33,10 @@ class UserToken extends Component<UserTokenProps> {
<FullWidthRow>
<Panel className='user-panel'>
<Panel.Heading>{t('user-token.title')}</Panel.Heading>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>{t('user-token.delete-p1')}</p>
<FullWidthRow>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
@@ -48,7 +48,7 @@ class UserToken extends Component<UserTokenProps> {
>
{t('user-token.delete')}
</Button>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</FullWidthRow>
</Panel>
</FullWidthRow>
client/src/components/signout-modal/index.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
>
{t('signout.nevermind')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsStyle='danger'
client/src/pages/blocked.tsx
+3 -3
View File
@@ -9,11 +9,11 @@ function BlockedPage(): JSX.Element {
<>
<Helmet title={`Access Denied | freeCodeCamp.org`} />
<Grid className='text-center'>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Row>
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
<h1>We can&apos;t log you in.</h1>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
<div className='text-left blocked-body'>
<p>
@@ -32,7 +32,7 @@ function BlockedPage(): JSX.Element {
</Col>
</Col>
</Row>
<Spacer paddingSize={30} />
<Spacer size='large' />
</Grid>
</>
);
client/src/pages/donate.tsx
+5 -5
View File
@@ -67,7 +67,7 @@ function DonatePage({
<>
<Helmet title={`${t('donate.title')} | freeCodeCamp.org`} />
<Grid className='donate-page-wrapper'>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Row>
<>
<Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10} smOffset={1}>
@@ -78,7 +78,7 @@ function DonatePage({
) : (
<h2>{t('donate.help-more')}</h2>
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
</Row>
{isDonating ? (
@@ -94,12 +94,12 @@ function DonatePage({
<DonateForm paymentContext={PaymentContext.DonatePage} />
</Col>
</Row>
<Spacer paddingSize={45} />
<Spacer size='exLarge' />
<Row className='donate-support' id='FAQ'>
<Col className={'text-center'} xs={12}>
<hr />
<h2>{t('donate.faq')}</h2>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
<Col xs={12}>
<DonationFaqText />
@@ -111,7 +111,7 @@ function DonatePage({
</Col>
</>
</Row>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Grid>
</>
);
client/src/pages/email-sign-up.tsx
+8 -8
View File
@@ -94,7 +94,7 @@ function AcceptPrivacyTerms({
>
{t('buttons.yes-please')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
</Col>
<Col md={4} sm={5} xs={12}>
<Button
@@ -106,14 +106,14 @@ function AcceptPrivacyTerms({
>
{t('buttons.no-thanks')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
</Col>
</Row>
);
} else {
return (
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Button
block={true}
bsSize='lg'
@@ -123,7 +123,7 @@ function AcceptPrivacyTerms({
>
{t('buttons.sign-up-email-list')}
</Button>
<Spacer paddingSize={5} />
<Spacer size='small' />
</Col>
);
}
@@ -139,7 +139,7 @@ function AcceptPrivacyTerms({
<Grid>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<IntroDescription />
<hr />
</Col>
@@ -147,13 +147,13 @@ function AcceptPrivacyTerms({
<Row className='email-sign-up' data-cy='email-sign-up'>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<strong>{t('misc.quincy')}</strong>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<p>{t('misc.email-blast')}</p>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
{renderEmailListOptin(isSignedIn, showLoading)}
<Col xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
</Row>
</Grid>
client/src/pages/learn.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ function LearnPage({
isDonating={isDonating}
/>
<Map />
<Spacer paddingSize={30} />
<Spacer size='large' />
</Col>
</Row>
</Grid>
client/src/pages/update-email.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
<Helmet>
<title>{t('misc.update-email-1')} | freeCodeCamp.org</title>
</Helmet>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h2 className='text-center'>{t('misc.update-email-2')}</h2>
<Grid>
<Row>
client/src/templates/Challenges/codeally/show.tsx
+13 -13
View File
@@ -253,16 +253,16 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
<Grid>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
>
{title}
</ChallengeTitle>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<PrismFormatted text={description} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='ca-description'>
<Trans i18nKey='learn.github-required'>
<a
@@ -275,7 +275,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
</a>
</Trans>
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
{isSignedIn &&
challengeType === challengeTypes.codeAllyCert && (
<>
@@ -283,7 +283,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
{t('learn.complete-both-steps')}
</div>
<hr />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<b>{t('learn.step-1')}</b>
{(isPartiallyCompleted || isCompleted) && (
<GreenPass
@@ -294,13 +294,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
}}
/>
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='ca-description'>
{t('learn.runs-in-vm')}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<PrismFormatted text={instructions} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
)}
<Alert id='codeally-cookie-warning' bsStyle='info'>
@@ -321,7 +321,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
challengeType === challengeTypes.codeAllyCert && (
<>
<hr />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<b>{t('learn.step-2')}</b>
{isCompleted && (
<GreenPass
@@ -332,13 +332,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
}}
/>
)}
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='ca-description'>
{t('learn.submit-public-url')}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<PrismFormatted text={notes} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<SolutionForm
challengeType={challengeType}
description={description}
@@ -349,7 +349,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
)}
<ProjectToolPanel />
<br />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
<CompletionModal
block={block}
client/src/templates/Challenges/odin/show.tsx
+8 -8
View File
@@ -243,7 +243,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
<Row>
{videoId && (
<Col lg={10} lgOffset={1} md={10} mdOffset={1}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='video-wrapper'>
{!this.state.videoIsLoaded ? (
<div className='video-placeholder-loader'>
@@ -262,10 +262,10 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
</Col>
)}
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<h2>{title}</h2>
<PrismFormatted className={'line-numbers'} text={description} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ObserveKeys>
{assignments.length > 0 && (
<>
@@ -291,11 +291,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
className={'video-quiz-option'}
text={assignment}
/>
<Spacer paddingSize={15} />
<Spacer size='medium' />
</label>
))}
</div>{' '}
<Spacer paddingSize={15} />
<Spacer size='medium' />
</>
)}
@@ -326,7 +326,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
))}
</div>
</ObserveKeys>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div
style={{
textAlign: 'center'
@@ -343,7 +343,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
</>
)}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Button
block={true}
bsSize='large'
@@ -358,7 +358,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
>
{t('buttons.check-answer')}
</Button>
<Spacer paddingSize={30} />
<Spacer size='large' />
</Col>
<CompletionModal
block={block}
client/src/templates/Challenges/projects/backend/show.tsx
+2 -2
View File
@@ -232,7 +232,7 @@ class BackEnd extends Component<BackEndProps> {
<Grid>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
@@ -263,7 +263,7 @@ class BackEnd extends Component<BackEndProps> {
output={output}
/>
<TestSuite tests={tests} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
<CompletionModal
block={block}
client/src/templates/Challenges/projects/frontend/show.tsx
+2 -2
View File
@@ -172,7 +172,7 @@ class Project extends Component<ProjectProps> {
<Grid>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
@@ -194,7 +194,7 @@ class Project extends Component<ProjectProps> {
guideUrl={getGuideUrl({ forumTopicId, title })}
/>
<br />
<Spacer paddingSize={15} />
<Spacer size='medium' />
</Col>
<CompletionModal
block={block}
client/src/templates/Challenges/video/show.tsx
+5 -5
View File
@@ -216,7 +216,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
/>
<Grid>
<Row>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
@@ -244,7 +244,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<ChallengeDescription description={description} />
<PrismFormatted className={'line-numbers'} text={text} />
<Spacer paddingSize={15} />
<Spacer size='medium' />
<ObserveKeys>
<div className='video-quiz-options'>
{answers.map((option, index) => (
@@ -273,7 +273,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
))}
</div>
</ObserveKeys>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div
style={{
textAlign: 'center'
@@ -285,7 +285,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
<span>{t('learn.check-answer')}</span>
)}
</div>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Button
block={true}
bsSize='large'
@@ -296,7 +296,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
>
{t('buttons.check-answer')}
</Button>
<Spacer paddingSize={30} />
<Spacer size='large' />
</Col>
<CompletionModal
block={block}
client/src/templates/Introduction/components/block.tsx
+1 -1
View File
@@ -352,7 +352,7 @@ class Block extends Component<BlockProps> {
{blockrenderer()}
{(isNewResponsiveWebDesign || isNewJsAlgos || isCollegeAlgebraPy) &&
!isProjectBlock ? null : (
<Spacer paddingSize={15} />
<Spacer size='medium' />
)}
</>
);
client/src/templates/Introduction/components/super-block-intro.tsx
+2 -2
View File
@@ -26,9 +26,9 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
return (
<>
<h1 className='text-center big-heading'>{i18nSuperBlock}</h1>
<Spacer paddingSize={15} />
<Spacer size='medium' />
{generateIconComponent(superBlock, 'cert-header-icon')}
<Spacer paddingSize={15} />
<Spacer size='medium' />
{superBlockIntroText.map((str, i) => (
<p key={i}>{str}</p>
))}
client/src/templates/Introduction/intro.tsx
+2 -2
View File
@@ -67,11 +67,11 @@ function IntroductionPage({
>
{t('buttons.first-lesson')}
</Link>
<Spacer paddingSize={5} />
<Spacer size='small' />
<Link className='btn btn-lg btn-primary btn-block' to='/learn'>
{t('buttons.view-curriculum')}
</Link>
<Spacer paddingSize={5} />
<Spacer size='small' />
<hr />
</FullWidthRow>
<FullWidthRow>
client/src/templates/Introduction/super-block-intro.tsx
+7 -7
View File
@@ -190,14 +190,14 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
<main>
<Row className='super-block-intro-page'>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer paddingSize={30} />
<Spacer size='large' />
<LegacyLinks superBlock={superBlock} />
<SuperBlockIntro superBlock={superBlock} />
<Spacer paddingSize={30} />
<Spacer size='large' />
<h2 className='text-center big-subheading'>
{t(`intro:misc-text.courses`)}
</h2>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<div className='block-ui'>
{defaultCurriculumNames.map(blockDashedName => (
<Fragment key={blockDashedName}>
@@ -224,20 +224,20 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
</div>
{!isSignedIn && !signInLoading && (
<div>
<Spacer paddingSize={30} />
<Spacer size='large' />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
</div>
)}
<Spacer paddingSize={30} />
<Spacer size='large' />
<h3
className='text-center big-block-title'
style={{ whiteSpace: 'pre-line' }}
>
{t(`intro:misc-text.browse-other`)}
</h3>
<Spacer paddingSize={15} />
<Spacer size='medium' />
<Map currentSuperBlock={superBlock} />
<Spacer paddingSize={30} />
<Spacer size='large' />
</Col>
</Row>
</main>