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): remove the ButtonSpacer (#49480)

Browse Source 
Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org>
Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Manabu Matsumoto
2023-03-15 15:31:56 +03:00
committed by GitHub
co-authored by Muhammed Mustafa Ahmad Abdolsaheb
parent f03c4a2ecc
commit ba40dbddbb
48 changed files with 187 additions and 179 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 size={2} />
<Spacer paddingSize={30} />
{!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 size={2} />
<Spacer paddingSize={30} />
</div>
);
@@ -281,7 +281,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
>
{t('profile.add-linkedin')}
</Button>
<Spacer />
<Spacer paddingSize={15} />
<Button
block={true}
bsSize='lg'
@@ -295,7 +295,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
{t('profile.add-twitter')}
</Button>
</Col>
<Spacer size={2} />
<Spacer paddingSize={30} />
</Row>
);
@@ -365,11 +365,11 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
</footer>
</Row>
<div className='row certificate-links'>
<Spacer size={2} />
<Spacer paddingSize={30} />
{signedInUserName === username ? shareCertBtns : ''}
<Spacer size={2} />
<Spacer paddingSize={30} />
<ShowProjectLinks certName={certTitle} name={displayName} user={user} />
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
<Table striped>
<thead>
<tr>
@@ -170,7 +170,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
</thead>
<tbody>{renderProjectsFor(certName)}</tbody>
</Table>
<Spacer />
<Spacer paddingSize={15} />
<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 size={2} />
<Spacer paddingSize={30} />
<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 />
<Spacer paddingSize={15} />
<Privacy />
<Spacer />
<Spacer paddingSize={15} />
<Email
email={email}
isEmailVerified={isEmailVerified}
sendQuincyEmail={sendQuincyEmail}
updateQuincyEmail={updateQuincyEmail}
/>
<Spacer />
<Spacer paddingSize={15} />
<Internet
githubProfile={githubProfile}
linkedin={linkedin}
@@ -197,12 +197,12 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
updateSocials={updateSocials}
website={website}
/>
<Spacer />
<Spacer paddingSize={15} />
{/* @ts-expect-error Portfolio types mismatch */}
<Portfolio portfolio={portfolio} updatePortfolio={updatePortfolio} />
<Spacer />
<Spacer paddingSize={15} />
<Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
<Spacer />
<Spacer paddingSize={15} />
<Certification
completedChallenges={completedChallenges}
createFlashMessage={createFlashMessage}
@@ -229,11 +229,11 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
/>
{userToken && (
<>
<Spacer />
<Spacer paddingSize={15} />
<UserToken />
</>
)}
<Spacer />
<Spacer paddingSize={15} />
<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 size={2} />
<Spacer paddingSize={30} />
<Panel bsStyle='primary' className='text-center'>
<Spacer />
<Spacer paddingSize={15} />
<h2>{t('misc.unsubscribed')}</h2>
<p>{t('misc.keep-coding')}</p>
</Panel>
@@ -42,7 +42,7 @@ function ShowUnsubscribed({
</Button>
</FullWidthRow>
) : null}
<Spacer size={2} />
<Spacer paddingSize={30} />
</main>
</Grid>
</>
client/src/client-only-routes/show-user.tsx
+5 -5
View File
@@ -83,7 +83,7 @@ function ShowUser({
return (
<main>
<FullWidthRow>
<Spacer size={2} />
<Spacer paddingSize={30} />
<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 size={2} />
<Spacer paddingSize={30} />
<Col md={6} mdOffset={3} sm={8} smOffset={2} xs={12}>
<Login block={true}>{t('buttons.click-here')}</Login>
</Col>
<Spacer size={3} />
<Spacer paddingSize={45} />
</Panel.Body>
</Panel>
</FullWidthRow>
@@ -108,7 +108,7 @@ function ShowUser({
<Helmet>
<title>{t('report.portfolio')} | freeCodeCamp.org</title>
</Helmet>
<Spacer size={2} />
<Spacer paddingSize={30} />
<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 />
<Spacer paddingSize={15} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<Row>
<Col xs={12}>
<DonateForm
@@ -144,7 +144,7 @@ function DonateModal({
/>
</Col>
</Row>
<Spacer />
<Spacer paddingSize={15} />
<Row>
<Col sm={4} smOffset={4} xs={8} xsOffset={2}>
<Button
client/src/components/FourOhFour/index.tsx
+4 -4
View File
@@ -16,12 +16,12 @@ 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 />
<Spacer paddingSize={15} />
<h1>{t('404.page-not-found')}.</h1>
<Spacer />
<Spacer paddingSize={15} />
<div>
<p>{t('404.heres-a-quote')}</p>
<Spacer />
<Spacer paddingSize={15} />
<blockquote className='quote-wrapper'>
<p className='quote'>
<span>&#8220;</span>
@@ -30,7 +30,7 @@ const FourOhFour = (): JSX.Element => {
<p className='author'>- {quote.author}</p>
</blockquote>
</div>
<Spacer size={2} />
<Spacer paddingSize={30} />
<Link className='btn btn-cta' to='/learn'>
{t('buttons.view-curriculum')}
</Link>
client/src/components/Intro/components/IntroDescription.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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<Loader />
<Spacer />
<Spacer paddingSize={15} />
</>
);
} else if (isSignedIn) {
const { quote, author } = randomQuote();
return (
<>
<Spacer />
<Spacer paddingSize={15} />
<h1 className='text-center'>
{name
? `${t('learn.welcome-1', { name: name })}`
: `${t('learn.welcome-2')}`}
</h1>
<Spacer />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<p>
<Trans i18nKey='learn.start-at-beginning'>
<Link to={slug} />
@@ -81,13 +81,13 @@ const Intro = ({
} else {
return (
<>
<Spacer />
<Spacer paddingSize={15} />
<h1>{t('learn.heading')}</h1>
<Spacer />
<Spacer paddingSize={15} />
<IntroDescription />
<Spacer />
<Spacer paddingSize={15} />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
<Spacer />
<Spacer paddingSize={15} />
</>
);
}
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 />
<Spacer paddingSize={15} />
</div>
</>
)}
client/src/components/helpers/button-spacer.tsx
-9
View File
@@ -1,9 +0,0 @@
import React from 'react';
function ButtonSpacer(): JSX.Element {
return <div className='button-spacer' style={{ padding: '5px 0' }} />;
}
ButtonSpacer.displayName = 'ButtonSpacer';
export default ButtonSpacer;
client/src/components/helpers/index.ts
-1
View File
@@ -1,4 +1,3 @@
export { default as ButtonSpacer } from './button-spacer';
export { default as FullWidthRow } from './full-width-row';
export { default as SlimWidthRow } from './slim-width-row';
export { default as Loader } from './loader';
client/src/components/helpers/spacer.tsx
+7 -15
View File
@@ -1,22 +1,14 @@
import React from 'react';
interface SpacerProps {
size?: number;
paddingSize: number;
}
const styles = { padding: '15px 0', height: '1px' };
const Comp = ({ ...props }): JSX.Element => <div style={styles} {...props} />;
const Spacer = ({ size = 1 }: SpacerProps): JSX.Element =>
size === 1 ? (
<Comp />
) : (
<>
{Array.from(Array(size), (_, i) => (
<Comp key={`spacer_${i}`} />
))}
</>
);
const Spacer = ({ paddingSize }: SpacerProps): JSX.Element => (
<div
className='spacer'
style={{ padding: `${paddingSize}px 0`, height: '1px' }}
/>
);
export default Spacer;
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 />
<Spacer paddingSize={15} />
<BigCallToAction pageName={pageName} />
<Spacer />
<Spacer paddingSize={15} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<BigCallToAction pageName={pageName} />
<CampersImage pageName={pageName} />
<Spacer />
<Spacer paddingSize={15} />
</Col>
</Row>
</div>
client/src/components/profile/__snapshots__/profile.test.tsx.snap
+4
View File
@@ -3,12 +3,14 @@
exports[`<Profile/> renders correctly 1`] = `
<div>
<div
class="spacer"
style="padding: 15px 0px; height: 1px;"
/>
<div
class="container"
>
<div
class="spacer"
style="padding: 15px 0px; height: 1px;"
/>
<div>
@@ -273,6 +275,7 @@ exports[`<Profile/> renders correctly 1`] = `
<br />
</div>
<div
class="spacer"
style="padding: 15px 0px; height: 1px;"
/>
<div
@@ -285,6 +288,7 @@ exports[`<Profile/> renders correctly 1`] = `
</a>
</div>
<div
class="spacer"
style="padding: 15px 0px; height: 1px;"
/>
</div>
client/src/components/profile/components/certifications.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
import { certificatesByNameSelector } from '../../../redux/selectors';
import type { CurrentCert } from '../../../redux/prop-types';
import { ButtonSpacer, FullWidthRow, Link, Spacer } from '../../helpers';
import { FullWidthRow, Link, Spacer } from '../../helpers';
import './certifications.css';
const mapStateToProps = (
@@ -61,7 +61,7 @@ function CertButton({ username, cert }: CertButtonProps): JSX.Element {
</Link>
</Col>
</Row>
<ButtonSpacer />
<Spacer paddingSize={5} />
</>
);
}
@@ -102,7 +102,7 @@ function Certificates({
username={username}
/>
))}
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
</>
) : (
<>
@@ -43,7 +43,7 @@ function renderMessage(
{t('profile.username-change-privacy', { username: username })}
</p>
</FullWidthRow>
<Spacer />
<Spacer paddingSize={15} />
</>
);
}
@@ -103,7 +103,7 @@ function renderProfile(user: ProfileProps['user']): JSX.Element {
{showTimeLine ? (
<Timeline completedMap={completedChallenges} username={username} />
) : null}
<Spacer />
<Spacer paddingSize={15} />
</>
);
}
@@ -120,9 +120,9 @@ function Profile({ user, isSessionUser }: ProfileProps): JSX.Element {
<Helmet>
<title>{t('buttons.profile')} | freeCodeCamp.org</title>
</Helmet>
<Spacer />
<Spacer paddingSize={15} />
<Grid>
<Spacer />
<Spacer paddingSize={15} />
{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 />
<Spacer paddingSize={15} />
</Grid>
</>
);
client/src/components/settings/__snapshots__/settings-button.test.js.snap
+15
View File
@@ -9,6 +9,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -148,6 +149,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -287,6 +289,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -426,6 +429,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -565,6 +569,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -704,6 +709,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -843,6 +849,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -982,6 +989,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1121,6 +1129,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1260,6 +1269,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1399,6 +1409,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1543,6 +1554,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1762,6 +1774,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -1981,6 +1994,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -2200,6 +2214,7 @@ Array [
className="col-sm-8 col-sm-offset-2 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<h3 className='text-center'>
{t('certification.title.Legacy Full Stack Certification')}
</h3>
@@ -403,7 +403,7 @@ export class CertificationSettings extends Component {
</Button>
)}
</div>
<Spacer />
<Spacer paddingSize={15} />
</FullWidthRow>
);
};
client/src/components/settings/danger-zone.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ import { bindActionCreators } from 'redux';
import type { Dispatch } from 'redux';
import { deleteAccount, resetProgress } from '../../redux/settings/actions';
import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
import { FullWidthRow, Spacer } from '../helpers';
import DeleteModal from './delete-modal';
import ResetModal from './reset-modal';
@@ -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 />
<Spacer paddingSize={15} />
<p>{t('settings.danger.be-careful')}</p>
<FullWidthRow>
<Button
@@ -58,7 +58,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
>
{t('settings.danger.reset')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsSize='lg'
@@ -69,7 +69,7 @@ function DangerZone({ deleteAccount, resetProgress, t }: DangerZoneProps) {
>
{t('settings.danger.delete')}
</Button>
<Spacer />
<Spacer paddingSize={15} />
</FullWidthRow>
</Panel>
client/src/components/settings/delete-modal.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { Button, Modal } from '@freecodecamp/react-bootstrap';
import React from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { ButtonSpacer } from '../helpers';
import { Spacer } from '../helpers';
import './danger-zone.css';
@@ -52,7 +52,7 @@ function DeleteModal(props: DeleteModalProps): JSX.Element {
>
{t('settings.danger.nevermind')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
<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 />
<Spacer paddingSize={15} />
<FullWidthRow>
<form id='form-quincy-email' onSubmit={handleSubmit}>
<ToggleSetting
client/src/components/settings/portfolio.tsx
+6 -6
View File
@@ -13,7 +13,7 @@ import isURL from 'validator/lib/isURL';
import { hasProtocolRE } from '../../utils';
import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
import { FullWidthRow, Spacer } from '../helpers';
import BlockSaveButton from '../helpers/form/block-save-button';
import SectionHeader from './section-header';
@@ -295,7 +295,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
>
{t('buttons.save-portfolio')}
</BlockSaveButton>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsSize='lg'
@@ -308,9 +308,9 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
</form>
{index + 1 !== arr.length && (
<>
<Spacer />
<Spacer paddingSize={15} />
<hr />
<Spacer />
<Spacer paddingSize={15} />
</>
)}
</FullWidthRow>
@@ -329,7 +329,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
</div>
</FullWidthRow>
<FullWidthRow>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsSize='lg'
@@ -341,7 +341,7 @@ class PortfolioSettings extends Component<PortfolioProps, PortfolioState> {
{t('buttons.add-portfolio')}
</Button>
</FullWidthRow>
<Spacer size={2} />
<Spacer paddingSize={30} />
{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 />
<Spacer paddingSize={15} />
<p>{t('settings.data')}</p>
<Button
block={true}
client/src/components/settings/reset-modal.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { Button, Modal } from '@freecodecamp/react-bootstrap';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { ButtonSpacer } from '../helpers';
import { Spacer } from '../helpers';
type ResetModalProps = {
onHide: () => void;
@@ -43,7 +43,7 @@ function ResetModal(props: ResetModalProps): JSX.Element {
>
{t('settings.danger.nevermind-2')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
<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></Spacer>
<Spacer paddingSize={15}></Spacer>
</Form>
);
}
client/src/components/settings/toggle-setting.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import {
} from '@freecodecamp/react-bootstrap';
import React from 'react';
import { ButtonSpacer } from '../helpers';
import { Spacer } from '../helpers';
import TB from '../helpers/toggle-button';
import './toggle-setting.css';
@@ -48,7 +48,7 @@ export default function ToggleSetting({
/>
</FormGroup>
</div>
<ButtonSpacer />
<Spacer paddingSize={5} />
</>
);
}
client/src/components/settings/user-token.tsx
+4 -4
View File
@@ -5,7 +5,7 @@ import { TFunction, withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { deleteUserToken } from '../../redux/actions';
import { ButtonSpacer, FullWidthRow, Spacer } from '../helpers';
import { FullWidthRow, Spacer } from '../helpers';
import './user-token.css';
@@ -33,10 +33,10 @@ class UserToken extends Component<UserTokenProps> {
<FullWidthRow>
<Panel className='user-panel'>
<Panel.Heading>{t('user-token.title')}</Panel.Heading>
<Spacer />
<Spacer paddingSize={15} />
<p>{t('user-token.delete-p1')}</p>
<FullWidthRow>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsSize='lg'
@@ -48,7 +48,7 @@ class UserToken extends Component<UserTokenProps> {
>
{t('user-token.delete')}
</Button>
<Spacer />
<Spacer paddingSize={15} />
</FullWidthRow>
</Panel>
</FullWidthRow>
client/src/components/signout-modal/index.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { ButtonSpacer } from '../helpers';
import { Spacer } from '../helpers';
import { hardGoTo as navigate, closeSignoutModal } from '../../redux/actions';
import { isSignoutModalOpenSelector } from '../../redux/selectors';
import { apiLocation } from '../../../../config/env.json';
@@ -79,7 +79,7 @@ function SignoutModal(props: SignoutModalProps): JSX.Element {
>
{t('signout.nevermind')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsStyle='danger'
client/src/pages/__snapshots__/email-sign-up.test.js.snap
+9 -2
View File
@@ -13,6 +13,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -27,6 +28,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
learn.read-this.heading
</strong>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -95,6 +97,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
misc.quincy
</strong>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -106,6 +109,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
misc.email-blast
</p>
<div
className="spacer"
style={
Object {
"height": "1px",
@@ -118,9 +122,10 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
>
<div
className="button-spacer"
className="spacer"
style={
Object {
"height": "1px",
"padding": "5px 0",
}
}
@@ -134,9 +139,10 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
buttons.sign-up-email-list
</a>
<div
className="button-spacer"
className="spacer"
style={
Object {
"height": "1px",
"padding": "5px 0",
}
}
@@ -146,6 +152,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
className="col-xs-12"
>
<div
className="spacer"
style={
Object {
"height": "1px",
client/src/pages/blocked.tsx
+3 -3
View File
@@ -10,11 +10,11 @@ function BlockedPage(): JSX.Element {
<>
<Helmet title={`Access Denied | freeCodeCamp.org`} />
<Grid className='text-center'>
<Spacer size={2} />
<Spacer paddingSize={30} />
<Row>
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
<h1>We can&apos;t log you in.</h1>
<Spacer size={2} />
<Spacer paddingSize={30} />
<Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
<div className='text-left blocked-body'>
<p>
@@ -33,7 +33,7 @@ function BlockedPage(): JSX.Element {
</Col>
</Col>
</Row>
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
</Col>
</Row>
{isDonating ? (
@@ -94,12 +94,12 @@ function DonatePage({
<DonateForm paymentContext={PaymentContext.DonatePage} />
</Col>
</Row>
<Spacer size={3} />
<Spacer paddingSize={45} />
<Row className='donate-support' id='FAQ'>
<Col className={'text-center'} xs={12}>
<hr />
<h2>{t('donate.faq')}</h2>
<Spacer />
<Spacer paddingSize={15} />
</Col>
<Col xs={12}>
<DonationFaqText />
@@ -111,7 +111,7 @@ function DonatePage({
</Col>
</>
</Row>
<Spacer />
<Spacer paddingSize={15} />
</Grid>
</>
);
client/src/pages/email-sign-up.tsx
+9 -9
View File
@@ -8,7 +8,7 @@ import type { Dispatch } from 'redux';
import { createSelector } from 'reselect';
import IntroDescription from '../components/Intro/components/IntroDescription';
import createRedirect from '../components/create-redirect';
import { ButtonSpacer, Spacer, Loader } from '../components/helpers';
import { Spacer, Loader } from '../components/helpers';
import { apiLocation } from '../../../config/env.json';
import { acceptTerms } from '../redux/actions';
@@ -94,7 +94,7 @@ function AcceptPrivacyTerms({
>
{t('buttons.yes-please')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
</Col>
<Col md={4} sm={5} xs={12}>
<Button
@@ -106,14 +106,14 @@ function AcceptPrivacyTerms({
>
{t('buttons.no-thanks')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
</Col>
</Row>
);
} else {
return (
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Button
block={true}
bsSize='lg'
@@ -123,7 +123,7 @@ function AcceptPrivacyTerms({
>
{t('buttons.sign-up-email-list')}
</Button>
<ButtonSpacer />
<Spacer paddingSize={5} />
</Col>
);
}
@@ -139,7 +139,7 @@ function AcceptPrivacyTerms({
<Grid>
<Row>
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
<Spacer />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<p>{t('misc.email-blast')}</p>
<Spacer />
<Spacer paddingSize={15} />
</Col>
{renderEmailListOptin(isSignedIn, showLoading)}
<Col xs={12}>
<Spacer />
<Spacer paddingSize={15} />
</Col>
</Row>
</Grid>
client/src/pages/learn.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ function LearnPage({
isDonating={isDonating}
/>
<Map />
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
>
{title}
</ChallengeTitle>
<Spacer />
<Spacer paddingSize={15} />
<PrismFormatted text={description} />
<Spacer />
<Spacer paddingSize={15} />
<div className='ca-description'>
<Trans i18nKey='learn.github-required'>
<a
@@ -275,7 +275,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
</a>
</Trans>
</div>
<Spacer />
<Spacer paddingSize={15} />
{isSignedIn &&
challengeType === challengeTypes.codeAllyCert && (
<>
@@ -283,7 +283,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
{t('learn.complete-both-steps')}
</div>
<hr />
<Spacer />
<Spacer paddingSize={15} />
<b>{t('learn.step-1')}</b>
{(isPartiallyCompleted || isCompleted) && (
<GreenPass
@@ -294,13 +294,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
}}
/>
)}
<Spacer />
<Spacer paddingSize={15} />
<div className='ca-description'>
{t('learn.runs-in-vm')}
</div>
<Spacer />
<Spacer paddingSize={15} />
<PrismFormatted text={instructions} />
<Spacer />
<Spacer paddingSize={15} />
</>
)}
<Alert id='codeally-cookie-warning' bsStyle='info'>
@@ -321,7 +321,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
challengeType === challengeTypes.codeAllyCert && (
<>
<hr />
<Spacer />
<Spacer paddingSize={15} />
<b>{t('learn.step-2')}</b>
{isCompleted && (
<GreenPass
@@ -332,13 +332,13 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
}}
/>
)}
<Spacer />
<Spacer paddingSize={15} />
<div className='ca-description'>
{t('learn.submit-public-url')}
</div>
<Spacer />
<Spacer paddingSize={15} />
<PrismFormatted text={notes} />
<Spacer />
<Spacer paddingSize={15} />
<SolutionForm
challengeType={challengeType}
description={description}
@@ -349,7 +349,7 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
)}
<ProjectToolPanel />
<br />
<Spacer />
<Spacer paddingSize={15} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<h2>{title}</h2>
<PrismFormatted className={'line-numbers'} text={description} />
<Spacer />
<Spacer paddingSize={15} />
<ObserveKeys>
{assignments.length > 0 && (
<>
@@ -291,11 +291,11 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
className={'video-quiz-option'}
text={assignment}
/>
<Spacer />
<Spacer paddingSize={15} />
</label>
))}
</div>{' '}
<Spacer />
<Spacer paddingSize={15} />
</>
)}
@@ -326,7 +326,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
))}
</div>
</ObserveKeys>
<Spacer />
<Spacer paddingSize={15} />
<div
style={{
textAlign: 'center'
@@ -343,7 +343,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
</>
)}
</div>
<Spacer />
<Spacer paddingSize={15} />
<Button
block={true}
bsSize='large'
@@ -358,7 +358,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
>
{t('buttons.check-answer')}
</Button>
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
@@ -263,7 +263,7 @@ class BackEnd extends Component<BackEndProps> {
output={output}
/>
<TestSuite tests={tests} />
<Spacer />
<Spacer paddingSize={15} />
</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 />
<Spacer paddingSize={15} />
<ChallengeTitle
isCompleted={isChallengeCompleted}
translationPending={translationPending}
@@ -194,7 +194,7 @@ class Project extends Component<ProjectProps> {
guideUrl={getGuideUrl({ forumTopicId, title })}
/>
<br />
<Spacer />
<Spacer paddingSize={15} />
</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 />
<Spacer paddingSize={15} />
<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 />
<Spacer paddingSize={15} />
<ObserveKeys>
<div className='video-quiz-options'>
{answers.map((option, index) => (
@@ -273,7 +273,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
))}
</div>
</ObserveKeys>
<Spacer />
<Spacer paddingSize={15} />
<div
style={{
textAlign: 'center'
@@ -285,7 +285,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
<span>{t('learn.check-answer')}</span>
)}
</div>
<Spacer />
<Spacer paddingSize={15} />
<Button
block={true}
bsSize='large'
@@ -296,7 +296,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
>
{t('buttons.check-answer')}
</Button>
<Spacer size={2} />
<Spacer paddingSize={30} />
</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 />
<Spacer paddingSize={15} />
)}
</>
);
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 />
<Spacer paddingSize={15} />
{generateIconComponent(superBlock, 'cert-header-icon')}
<Spacer />
<Spacer paddingSize={15} />
{superBlockIntroText.map((str, i) => (
<p key={i}>{str}</p>
))}
client/src/templates/Introduction/intro.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import React from 'react';
import Helmet from 'react-helmet';
import { useTranslation } from 'react-i18next';
import ButtonSpacer from '../../components/helpers/button-spacer';
import Spacer from '../../components/helpers/spacer';
import FullWidthRow from '../../components/helpers/full-width-row';
import LearnLayout from '../../components/layouts/learn';
import {
@@ -67,11 +67,11 @@ function IntroductionPage({
>
{t('buttons.first-lesson')}
</Link>
<ButtonSpacer />
<Spacer paddingSize={5} />
<Link className='btn btn-lg btn-primary btn-block' to='/learn'>
{t('buttons.view-curriculum')}
</Link>
<ButtonSpacer />
<Spacer paddingSize={5} />
<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 size={2} />
<Spacer paddingSize={30} />
<LegacyLinks superBlock={superBlock} />
<SuperBlockIntro superBlock={superBlock} />
<Spacer size={2} />
<Spacer paddingSize={30} />
<h2 className='text-center big-subheading'>
{t(`intro:misc-text.courses`)}
</h2>
<Spacer />
<Spacer paddingSize={15} />
<div className='block-ui'>
{defaultCurriculumNames.map(blockDashedName => (
<Fragment key={blockDashedName}>
@@ -224,20 +224,20 @@ const SuperBlockIntroductionPage = (props: SuperBlockProp) => {
</div>
{!isSignedIn && !signInLoading && (
<div>
<Spacer size={2} />
<Spacer paddingSize={30} />
<Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
</div>
)}
<Spacer size={2} />
<Spacer paddingSize={30} />
<h3
className='text-center big-block-title'
style={{ whiteSpace: 'pre-line' }}
>
{t(`intro:misc-text.browse-other`)}
</h3>
<Spacer />
<Spacer paddingSize={15} />
<Map currentSuperBlock={superBlock} />
<Spacer size={2} />
<Spacer paddingSize={30} />
</Col>
</Row>
</main>