diff --git a/client/package.json b/client/package.json index 0420cdb9c2e..2822f5614b3 100644 --- a/client/package.json +++ b/client/package.json @@ -50,7 +50,7 @@ "@freecodecamp/loop-protect": "3.0.0", "@freecodecamp/react-calendar-heatmap": "1.1.0", "@freecodecamp/strip-comments": "3.0.1", - "@freecodecamp/ui": "0.1.0", + "@freecodecamp/ui": "1.0.2", "@growthbook/growthbook-react": "0.20.0", "@loadable/component": "5.16.3", "@reach/router": "1.3.4", diff --git a/client/serve/serve.json b/client/serve/serve.json index 14164e53bfb..e55916d428d 100644 --- a/client/serve/serve.json +++ b/client/serve/serve.json @@ -29,7 +29,7 @@ ] }, { - "source": "{js/sass.sync.js,css/bootstrap.min.css}", + "source": "{js/sass.sync.js}", "headers": [ { "key": "Cache-Control", diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx index 325e472133e..8e81412d098 100644 --- a/client/src/client-only-routes/show-project-links.tsx +++ b/client/src/client-only-routes/show-project-links.tsx @@ -137,12 +137,12 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => { <> {projects.map(({ link, title, id }) => ( - + {t(`certification.projects.title.${title}`, title)} - {getProjectSolution(id, title)} + {getProjectSolution(id, title)} ))} diff --git a/client/src/components/Donation/donate-completion.tsx b/client/src/components/Donation/donate-completion.tsx index 99cb4d5ff8a..a9de43ad058 100644 --- a/client/src/components/Donation/donate-completion.tsx +++ b/client/src/components/Donation/donate-completion.tsx @@ -48,14 +48,14 @@ function DonateCompletion({ /> )} {success && ( -
+ <>

{t('donate.free-tech')}

{isSignedIn && ( <>

{t('donate.visit-supporters')}

)} -
+ )} {error &&

{error}

} diff --git a/client/src/components/Donation/donation-modal-body.tsx b/client/src/components/Donation/donation-modal-body.tsx index 6026952747c..e6fddd7cccc 100644 --- a/client/src/components/Donation/donation-modal-body.tsx +++ b/client/src/components/Donation/donation-modal-body.tsx @@ -47,7 +47,7 @@ function ModalHeader({ return null; } else if (!showForm) { return ( - + {recentlyClaimedBlock !== null && ( <> diff --git a/client/src/components/Donation/donation.css b/client/src/components/Donation/donation.css index 35828ab71a2..bd01429de79 100644 --- a/client/src/components/Donation/donation.css +++ b/client/src/components/Donation/donation.css @@ -74,6 +74,10 @@ align-items: center; } +.donation-completion-body .complete-button { + border-color: var(--green70); +} + .donation-email-container label { display: flex; flex-direction: column; @@ -89,7 +93,10 @@ } .donate-input-element { - padding-top: 8px; + height: 40px; + padding: 0 12px; + display: flex; + align-items: center; } .donation-form .form-control::placeholder { @@ -280,6 +287,8 @@ li.disabled > a { .donation-modal li { list-style-type: none; margin-bottom: 4px; + display: flex; + align-items: center; } .donation-modal li svg { margin: 0 5px; diff --git a/client/src/components/Donation/stripe-card-form.tsx b/client/src/components/Donation/stripe-card-form.tsx index 32bb1657c71..3d2be5774d6 100644 --- a/client/src/components/Donation/stripe-card-form.tsx +++ b/client/src/components/Donation/stripe-card-form.tsx @@ -75,9 +75,11 @@ export default function StripeCardForm({ } const options = { + // Ref: https://docs.stripe.com/js/appendix/style style: { base: { fontSize: '18px', + fontFamily: 'Lato, sans-serif', color: `${theme === Themes.Night ? '#fff' : '#0a0a23'}`, '::placeholder': { color: `#858591` diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css index db69edc328b..b0bb92275c0 100644 --- a/client/src/components/Footer/footer.css +++ b/client/src/components/Footer/footer.css @@ -51,6 +51,10 @@ margin-bottom: 0; } +.site-footer h2 { + line-height: 1.1; +} + .trending-guides-articles { list-style-type: none; padding: 0; @@ -122,6 +126,12 @@ p.footer-donation a:hover { gap: 16px; } +/* This rule to is ensure the li element doesn't take more space than it needs */ +.mobile-app-container li { + display: flex; + flex: initial; +} + .mobile-app-container img { width: 9.5rem; height: 3rem; diff --git a/client/src/components/Intro/learn-alert.tsx b/client/src/components/Intro/learn-alert.tsx index a14097cfef8..4deaefa4243 100644 --- a/client/src/components/Intro/learn-alert.tsx +++ b/client/src/components/Intro/learn-alert.tsx @@ -38,7 +38,7 @@ const LearnAlert = ({

{t('learn.if-getting-value')}


-

+

snapshot 1`] = `