fix(client): english challenge styles (#52608)

2026-04-13 22:00:19 -04:00 · 2023-12-19 12:25:37 -06:00
parent b848613aa3
commit dd984e86ca
9 changed files with 106 additions and 48 deletions
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -15,10 +15,10 @@ import { Container, Col, Row, Alert } from '@freecodecamp/ui';
 import Spacer from '../../../components/helpers/spacer';
 import LearnLayout from '../../../components/layouts/learn';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import PrismFormatted from '../components/prism-formatted';
 import { challengeTypes } from '../../../../../shared/config/challenge-types';
 import CompletionModal from '../components/completion-modal';
-import GreenPass from '../../../assets/icons/green-pass';
 import HelpModal from '../components/help-modal';
 import Hotkeys from '../components/hotkeys';
 import { hideCodeAlly, tryToShowCodeAlly } from '../../../redux/actions';
@@ -292,16 +292,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                      </div>
                      <hr />
                      <Spacer size='medium' />
-                      <b>{t('learn.step-1')}</b>
-                      {(isPartiallyCompleted || isCompleted) && (
-                        <GreenPass
-                          style={{
-                            height: '15px',
-                            width: '15px',
-                            marginInlineEnd: '7px'
-                          }}
-                        />
-                      )}
+                      <ChallengeHeading
+                        heading={t('learn.step-1')}
+                        isCompleted={isPartiallyCompleted || isCompleted}
+                      />
                      <Spacer size='medium' />
                      <div className='ca-description'>
                        {t('learn.runs-in-vm')}
@@ -330,16 +324,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                    <>
                      <hr />
                      <Spacer size='medium' />
-                      <b>{t('learn.step-2')}</b>
-                      {isCompleted && (
-                        <GreenPass
-                          style={{
-                            height: '15px',
-                            width: '15px',
-                            marginInlineStart: '7px'
-                          }}
-                        />
-                      )}
+                      <ChallengeHeading
+                        heading={t('learn.step-2')}
+                        isCompleted={isCompleted}
+                      />
                      <Spacer size='medium' />
                      <div className='ca-description'>
                        {t('learn.submit-public-url')}
--- a/client/src/templates/Challenges/components/challenge-heading.css
+++ b/client/src/templates/Challenges/components/challenge-heading.css
@@ -0,0 +1,10 @@
+.challenge-heading-wrap {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  justify-content: center;
+}
+
+.challenge-heading {
+  font-size: 16px;
+}
--- a/client/src/templates/Challenges/components/challenge-heading.tsx
+++ b/client/src/templates/Challenges/components/challenge-heading.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import GreenPass from '../../../assets/icons/green-pass';
+
+import './challenge-heading.css';
+
+interface ChallengeHeadingProps {
+  heading: string;
+  isCompleted?: boolean;
+}
+
+function ChallengeHeading({
+  heading,
+  isCompleted = false
+}: ChallengeHeadingProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div className='challenge-heading-wrap'>
+      <h2 className='challenge-heading'>{t(heading)}</h2>
+      {isCompleted && <GreenPass />}
+    </div>
+  );
+}
+
+ChallengeHeading.displayName = 'ChallengeHeading';
+
+export default ChallengeHeading;
--- a/client/src/templates/Challenges/dialogue/show.tsx
+++ b/client/src/templates/Challenges/dialogue/show.tsx
@@ -18,6 +18,8 @@ import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import CompletionModal from '../components/completion-modal';
+import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import HelpModal from '../components/help-modal';
 import PrismFormatted from '../components/prism-formatted';
 import {
@@ -181,6 +183,7 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
            block,
            fields: { blockName },
            assignments,
+            translationPending,
            scene
          }
        }
@@ -189,6 +192,7 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
      pageContext: {
        challengeMeta: { nextChallengePath, prevChallengePath }
      },
+      isChallengeCompleted,
      t
    } = this.props;

@@ -211,7 +215,13 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
            <Row>
              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                <Spacer size='medium' />
-                <h2>{title}</h2>
+
+                <ChallengeTitle
+                  isCompleted={isChallengeCompleted}
+                  translationPending={translationPending}
+                >
+                  {title}
+                </ChallengeTitle>
                <PrismFormatted className={'line-numbers'} text={description} />
                <Spacer size='medium' />
              </Col>
@@ -219,8 +229,9 @@ class ShowDialogue extends Component<ShowDialogueProps, ShowDialogueState> {
              {scene && <Scene scene={scene} />}

              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                <Spacer size='medium' />
                <ObserveKeys>
-                  <h2>{t('learn.assignments')}</h2>
+                  <ChallengeHeading heading={t('learn.assignments')} />
                  <div className='video-quiz-options'>
                    {assignments.map((assignment, index) => (
                      <label className='video-quiz-option-label' key={index}>
--- a/client/src/templates/Challenges/fill-in-the-blank/show.css
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.css
@@ -1,17 +1,29 @@
+.fill-in-the-blank-wrap {
+  background-color: var(--primary-background);
+  padding: 20px;
+  border: 4px solid var(--tertiary-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fill-in-the-blank-wrap > p {
+  margin: 0;
+  font-size: 1.25em;
+}
+
 .fill-in-the-blank-input {
  padding: 0;
  text-align: center;
-  background-color: var(--tertiary-background);
-  color: var(--tertiary-color);
+  background-color: var(--primary-background);
  border-radius: 0;
-  font-family: var(--font-family-monospace);
  overflow-wrap: anywhere;
  line-height: 1.5rem;
  z-index: 1;
  position: relative;
-  border: 1px solid var(--gray-45);
  border-left: none;
  border-right: none;
+  border-top: none;
  border-bottom-width: 4px;
  border-bottom-color: var(--gray-45) !important;
 }
--- a/client/src/templates/Challenges/fill-in-the-blank/show.tsx
+++ b/client/src/templates/Challenges/fill-in-the-blank/show.tsx
@@ -18,6 +18,7 @@ import LearnLayout from '../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types';
 import Hotkeys from '../components/hotkeys';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
 import PrismFormatted from '../components/prism-formatted';
@@ -301,10 +302,9 @@ class ShowFillInTheBlank extends Component<

              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                <PrismFormatted text={description} />
+                <Spacer size='medium' />
                {audioPath && (
                  <>
-                    <Spacer size='small' />
-                    <Spacer size='small' />
                    {/* TODO: Add tracks for audio elements */}
                    {/* eslint-disable-next-line jsx-a11y/media-has-caption*/}
                    <audio className='audio' controls>
@@ -313,22 +313,31 @@ class ShowFillInTheBlank extends Component<
                        type='audio/mp3'
                      ></source>
                    </audio>
+                    <Spacer size='medium' />
                  </>
                )}
              </Col>

-              {scene && <Scene scene={scene} />}
+              {scene && (
+                <>
+                  <Scene scene={scene} />
+                  <Spacer size='medium' />
+                </>
+              )}

              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
-                <Spacer size='medium' />
-                <PrismFormatted text={instructions} />
-                <Spacer size='medium' />
-                <h2>{t('learn.fill-in-the-blank')}</h2>
+                <ChallengeHeading heading={t('learn.fill-in-the-blank')} />
                <Spacer size='small' />
+                {instructions && (
+                  <>
+                    <PrismFormatted text={instructions} />
+                    <Spacer size='small' />
+                  </>
+                )}
                {/* what we want to observe is ctrl/cmd + enter, but ObserveKeys is buggy and throws an error
                if it encounters a key combination, so we have to pass in the individual keys to observe */}
                <ObserveKeys only={['ctrl', 'cmd', 'enter']}>
-                  <div>
+                  <div className='fill-in-the-blank-wrap'>
                    {paragraphs.map((p, i) => {
                      return (
                        // both keys, i and j, are stable between renders, since
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.css
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.css
@@ -1,8 +1,3 @@
-.link-ms-user-title {
-  text-align: center;
-  font-size: inherit;
-}
-
 .link-ms-user-ol li {
  margin-bottom: 5px;
 }
--- a/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
+++ b/client/src/templates/Challenges/ms-trophy/link-ms-user.tsx
@@ -25,6 +25,7 @@ import {
  isProcessingSelector
 } from '../../../redux/selectors';
 import Login from '../../../components/Header/components/login';
+import ChallengeHeading from '../components/challenge-heading';

 import './link-ms-user.css';

@@ -86,7 +87,7 @@ function LinkMsUser({

  return !isSignedIn ? (
    <>
-      <h2 className='link-ms-user-title'>{t('learn.ms.link-header')}</h2>
+      <ChallengeHeading heading={t('learn.ms.link-header')} />
      <Spacer size='small' />

      <p data-playwright-test-label='link-signin-text'>
@@ -111,7 +112,7 @@ function LinkMsUser({
        </>
      ) : (
        <div>
-          <h2 className='link-ms-user-title'>{t('learn.ms.link-header')}</h2>
+          <ChallengeHeading heading={'learn.ms.link-header'} />
          <Spacer size='small' />

          <p data-playwright-test-label='unlinked-text'>
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -24,6 +24,7 @@ import HelpModal from '../components/help-modal';
 import Scene from '../components/scene/scene';
 import PrismFormatted from '../components/prism-formatted';
 import ChallengeTitle from '../components/challenge-title';
+import ChallengeHeading from '../components/challenge-heading';
 import {
  challengeMounted,
  updateChallengeMeta,
@@ -287,10 +288,9 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                  {title}
                </ChallengeTitle>
                <PrismFormatted className={'line-numbers'} text={description} />
+                <Spacer size='medium' />
                {audioPath && (
                  <>
-                    <Spacer size='small' />
-                    <Spacer size='small' />
                    {/* TODO: Add tracks for audio elements */}
                    {/* eslint-disable-next-line jsx-a11y/media-has-caption*/}
                    <audio className='audio' controls>
@@ -299,18 +299,22 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                        type='audio/mp3'
                      />
                    </audio>
+                    <Spacer size='medium' />
                  </>
                )}
-                <Spacer size='medium' />
              </Col>

-              {scene && <Scene scene={scene} />}
+              {scene && (
+                <>
+                  <Scene scene={scene} /> <Spacer size='medium' />
+                </>
+              )}

              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                <ObserveKeys>
                  {assignments.length > 0 && (
                    <>
-                      <h2>{t('learn.assignments')}</h2>
+                      <ChallengeHeading heading={t('learn.assignments')} />
                      <div className='video-quiz-options'>
                        {assignments.map((assignment, index) => (
                          <label
@@ -340,7 +344,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                    </>
                  )}

-                  <h2>{t('learn.question')}</h2>
+                  <ChallengeHeading heading={t('learn.question')} />
                  <PrismFormatted className={'line-numbers'} text={text} />
                  <div className='video-quiz-options'>
                    {answers.map(({ answer }, index) => (