fix(learn): progress bar label alignment (#49659)

Co-authored-by: Denys Slieptsov <denys.slieptsov@leaseplan.com>

client/src/components/Donation/donation.css

@@ -242,12 +242,10 @@ li.disabled > a {
   color: var(--gray-15) !important;
 }
 
-.donate-page-wrapper,
-.donate-page-wrapper b,
+.donate-page-wrapper h2,
 .donate-page-wrapper h3,
-.donate-page-wrapper p,
 [name='payment-method'] {
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
 }
 
 @media (max-width: 400px) {
@@ -278,10 +276,6 @@ li.disabled > a {
   }
 }
 
-.donation-modal {
-  font-family: 'Lato', sans-serif;
-}
-
 .donation-modal .btn-link:focus {
   outline-width: 1px;
   outline-style: solid;
@@ -489,7 +483,6 @@ a.patreon-button:hover {
 }
 
 .form-status p {
-  font-family: 'Lato', sans-serif;
   font-size: 16px;
   color: #eb1c26;
   text-align: left;

client/src/components/Footer/footer.css

@@ -6,7 +6,6 @@
   color: var(--tertiary-color);
   background: var(--tertiary-background);
   line-height: 1.6;
-  font-family: 'Lato', sans-serif;
 }
 
 .footer-container {
@@ -19,7 +18,6 @@
 .footer-container p {
   margin: 0 0 1.45rem;
   line-height: 30px;
-  font-family: 'Lato', sans-serif;
   font-size: 16px;
 }
 
@@ -39,7 +37,6 @@
   text-align: center;
   padding: 0 15px 15px;
   margin-bottom: 0;
-  font-family: Lato, sans-serif;
 }
 
 .footer-row {

client/src/components/FourOhFour/404.css

@@ -33,7 +33,6 @@
   font-size: 50px;
   font-weight: 700;
   color: var(--tertiary-color);
-  font-family: 'Arial', sans-serif;
   font-style: normal;
   padding-inline-start: 15px;
   padding-top: 5px;

client/src/components/Header/components/universal-nav.css

@@ -3,7 +3,6 @@
   justify-content: space-between;
   align-items: flex-start;
   font-size: 18px;
-  font-family: 'Lato', sans-serif;
   height: var(--header-height);
   background: var(--theme-color);
   position: fixed;
@@ -326,7 +325,6 @@ button.nav-link[aria-disabled='true'] {
 .toggle-button-nav {
   padding: 2px 14px;
   border: 1px solid var(--gray-00);
-  font-family: 'lato', sans-serif;
   font-size: 18px;
   color: var(--gray-00);
   background-color: var(--theme-color);
@@ -436,7 +434,6 @@ button.nav-link[aria-disabled='true'] {
   max-height: calc(var(--header-height) - 6px);
   padding: 4px 12px;
   margin-inline-start: 2px;
-  font-family: 'Hack-ZeroSlash', monospace;
   display: flex;
   align-items: center;
   justify-content: center;

client/src/components/Intro/intro.css

@@ -26,7 +26,6 @@
 
 .intro-description strong,
 .intro-description p {
-  font-family: 'Lato', sans-serif;
   font-size: 1.17rem;
 }
 

client/src/components/landing/landing.css

@@ -26,9 +26,8 @@
 }
 
 .landing-page h1,
-.landing-page h2,
-.landing-page p {
-  font-family: 'Lato', sans-serif;
+.landing-page h2 {
+  font-family: var(--font-family-sans-serif);
 }
 
 figcaption.caption {
@@ -120,7 +119,6 @@ figcaption.caption {
 
 .testimonials p,
 .testimonials strong {
-  font-family: 'Lato', sans-serif;
   font-size: 1.1rem;
   margin: 0;
   color: var(--quaternary-color);

client/src/components/layouts/global.css

@@ -6,7 +6,7 @@ html {
 
 body {
   height: 100%;
-  font-family: 'Hack-ZeroSlash', monospace;
+  font-family: var(--font-family-sans-serif);
   color: var(--secondary-color);
   background: var(--secondary-background);
 }
@@ -77,24 +77,30 @@ h1 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.5rem;
-  font-family: 'Hack-ZeroSlash', monospace;
+  font-family: var(--font-family-monospace);
   margin: 0.6rem 0;
 }
 h2 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.25rem;
-  font-family: 'Hack-ZeroSlash', monospace;
+  font-family: var(--font-family-monospace);
   margin: 0.6rem 0;
 }
 h3 {
   color: var(--secondary-color);
   font-weight: 700;
   font-size: 1.1rem;
-  font-family: 'Hack-ZeroSlash', monospace;
+  font-family: var(--font-family-monospace);
   margin: 0 0 0.6rem;
 }
 
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-monospace);
+}
+
 h4,
 h5,
 h6,
@@ -104,7 +110,6 @@ th {
   color: var(--secondary-color);
   font-weight: 400;
   font-size: 1rem;
-  font-family: 'Hack-ZeroSlash', monospace;
   margin: 0 0 1.2rem;
 }
 
@@ -433,7 +438,7 @@ code {
   background-color: var(--quaternary-background);
   color: var(--tertiary-color);
   border-radius: 0;
-  font-family: 'Hack-ZeroSlash', monospace;
+  font-family: var(--font-family-monospace);
   overflow-wrap: anywhere;
 }
 

client/src/components/layouts/variables.css

@@ -28,6 +28,8 @@
   --love-dark: #f82153;
   --editor-background-light: #fffffe;
   --editor-background-dark: #2a2b40;
+  --font-family-sans-serif: 'Lato', sans-serif;
+  --font-family-monospace: 'Hack-ZeroSlash', monospace;
 }
 
 .dark-palette {

client/src/components/search/searchBar/searchbar.css

@@ -1,7 +1,6 @@
 .fcc_searchBar {
   flex-grow: 1;
   max-height: 33px;
-  font-family: 'Lato', sans-serif;
 }
 
 .fcc_searchBar strong,

client/src/components/settings/honesty.css

@@ -1,6 +1,5 @@
 .honesty-panel p {
   margin-inline: 10px;
-  font-family: 'Lato', sans-serif;
 }
 
 .honesty-panel {

client/src/pages/blocked.css

@@ -1,3 +0,0 @@
-.blocked-body p {
-  font-family: Lato, sans-serif;
-}

client/src/pages/blocked.tsx

@@ -3,7 +3,6 @@ import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 
 import { Spacer } from '../components/helpers';
-import './blocked.css';
 
 function BlockedPage(): JSX.Element {
   return (

client/src/pages/certification.css

@@ -1,9 +1,3 @@
-@font-face {
-  font-family: 'Sax Mono';
-  src: url('/fonts/saxmono.ttf') format('truetype');
-  font-display: fallback;
-}
-
 .certification-namespace * {
   margin: 0;
   padding: 0;
@@ -30,10 +24,6 @@
   padding: 0;
 }
 
-.certification-namespace.certificate-wrapper {
-  font-family: 'Sax Mono', monospace;
-}
-
 /* center the certificate vertically */
 .certificate-outer-wrapper {
   display: flex;
@@ -65,11 +55,6 @@
   color: var(--quaternary-color);
 }
 
-.certificate-outer-wrapper .donation-section,
-.certificate-outer-wrapper .donation-section p {
-  font-family: 'Lato', sans-serif;
-}
-
 .certification-namespace header {
   width: 100%;
   height: 140px;

client/src/pages/email-sign-up.css

@@ -1,6 +1,5 @@
 .email-sign-up strong,
 .email-sign-up p {
-  font-family: 'Lato', sans-serif;
   font-size: 1rem;
 }
 

client/src/templates/Challenges/classic/editor.css

@@ -59,7 +59,6 @@ textarea.inputarea {
 
 .description-container h1 {
   color: var(--secondary-color);
-  font-family: Hack-ZeroSlash, monospace;
   font-size: 1.1rem;
   font-weight: 700;
   line-height: 1.1;
@@ -119,7 +118,6 @@ textarea.inputarea {
 
 .test-feedback p {
   margin: 0.45rem 0 0;
-  font-family: 'Lato', sans-serif;
 }
 
 .test-feedback h2 {

client/src/templates/Challenges/codeally/codeally.css

@@ -1,7 +1,3 @@
-.ca-description {
-  font-family: 'Lato', sans-serif;
-}
-
 button[aria-described-by='codeally-cookie-warning'] {
   font-size: 1.1rem;
 }

client/src/templates/Challenges/components/challenge-description.css

@@ -7,15 +7,3 @@
   margin-bottom: 1.45rem;
   font-size: 0.9rem;
 }
-
-#description p,
-#instructions p,
-#notes p,
-#description ul,
-#instructions ul,
-#notes ul,
-#description ol,
-#instructions ol,
-#notes ol {
-  font-family: 'Lato', sans-serif;
-}

client/src/templates/Introduction/intro.css

@@ -1,10 +1,8 @@
 .super-block-intro-page p {
-  font-family: 'Lato', sans-serif;
   font-size: 1.17rem;
 }
 
 .super-block-intro-page .alert p {
-  font-family: inherit;
   font-size: inherit;
 }
 
@@ -358,11 +356,6 @@ button.map-title {
   margin-top: 1.45rem;
 }
 
-.intro-layout p,
-.intro-layout li {
-  font-family: 'Lato', sans-serif;
-}
-
 .intro-toc .list-group-item {
   margin: 5px auto;
 }
@@ -429,7 +422,7 @@ button.map-title {
   padding: 25px;
 }
 
-/* this margin is used to center the element. 
+/* this margin is used to center the element.
 ToDo: find out why, and remove the need for it */
 .block-grid .map-title > svg {
   margin-bottom: 4px;
@@ -451,6 +444,7 @@ ToDo: find out why, and remove the need for it */
 .block-grid .progress-wrapper {
   width: 100%;
   text-align: left;
+  font-family: var(--font-family-sans-serif);
   display: flex;
   align-items: center;
   margin-top: 18px;

tools/challenge-editor/client/src/index.css

@@ -3,6 +3,8 @@
   --background: #1b1b32;
   --content: #f5f6f7;
   --grey: #3b3b4f;
+  --font-family-sans-serif: 'Lato', sans-serif;
+  --font-family-monospace: 'Hack-ZeroSlash', monospace;
 }
 
 @font-face {
@@ -13,7 +15,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Lato';
+  font-family: var(--font-family-sans-serif);
   text-align: center;
   background: var(--background);
   color: var(--content);