From 6d3f41d6fec84b062f7cc03d0ecc7f56d45d8e82 Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Fri, 30 Jun 2023 23:59:51 -0500 Subject: [PATCH] feat(client): add exam nav (#50776) --- client/src/assets/icons/microsoft-logo.tsx | 22 +++++------ .../components/Header/components/exam-nav.css | 37 ++++++++++++++++++ .../components/Header/components/exam-nav.tsx | 24 ++++++++++++ client/src/components/Header/index.tsx | 39 +++++++++++++------ client/src/templates/Challenges/exam/exam.css | 7 ++++ client/src/templates/Challenges/exam/show.tsx | 2 - 6 files changed, 105 insertions(+), 26 deletions(-) create mode 100644 client/src/components/Header/components/exam-nav.css create mode 100644 client/src/components/Header/components/exam-nav.tsx diff --git a/client/src/assets/icons/microsoft-logo.tsx b/client/src/assets/icons/microsoft-logo.tsx index c5d9566ddf1..de28e699759 100644 --- a/client/src/assets/icons/microsoft-logo.tsx +++ b/client/src/assets/icons/microsoft-logo.tsx @@ -7,23 +7,19 @@ function MicrosoftLogo( - - - - + + + + ); } diff --git a/client/src/components/Header/components/exam-nav.css b/client/src/components/Header/components/exam-nav.css new file mode 100644 index 00000000000..858a565718e --- /dev/null +++ b/client/src/components/Header/components/exam-nav.css @@ -0,0 +1,37 @@ +.exam-nav { + display: flex; + justify-content: space-around; + height: 80px; + background: var(--theme-color); + position: fixed; + z-index: 1000; + width: 100%; + top: 0; +} + +.exam-nav .logo { + display: flex; + width: 50%; + align-items: center; + justify-content: center; + height: 80px; +} + +.exam-nav .freecodecamp-logo svg { + height: 80%; + width: 80%; + max-width: 360px; +} + +.exam-nav .partner-logo svg { + height: 80%; + width: 80%; + max-width: 450px; +} + +@media (max-width: 600px) { + .exam-nav .freecodecamp-logo svg { + height: 90%; + width: 90%; + } +} diff --git a/client/src/components/Header/components/exam-nav.tsx b/client/src/components/Header/components/exam-nav.tsx new file mode 100644 index 00000000000..d1996bfcd62 --- /dev/null +++ b/client/src/components/Header/components/exam-nav.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import FreeCodeCampLogo from '../../../assets/icons/freecodecamp'; +import MicrosoftLogo from '../../../assets/icons/microsoft-logo'; + +import './exam-nav.css'; + +const ExamNav = (): JSX.Element => { + const { t } = useTranslation(); + + return ( + + ); +}; + +ExamNav.displayName = 'ExamNav'; +export default ExamNav; diff --git a/client/src/components/Header/index.tsx b/client/src/components/Header/index.tsx index bc0bf51d4ab..23b18395435 100644 --- a/client/src/components/Header/index.tsx +++ b/client/src/components/Header/index.tsx @@ -3,17 +3,30 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; import { User } from '../../redux/prop-types'; +import { examInProgressSelector } from '../../redux/selectors'; import UniversalNav from './components/universal-nav'; +import ExamNav from './components/exam-nav'; import './header.css'; +const mapStateToProps = createSelector( + examInProgressSelector, + (examInProgress: boolean) => ({ + examInProgress + }) +); + interface HeaderProps { + examInProgress: boolean; fetchState: { pending: boolean }; user: User; skipButtonText: string; } + class Header extends React.Component { menuButtonRef: React.RefObject; searchBarRef: React.RefObject; @@ -63,21 +76,25 @@ class Header extends React.Component { render(): JSX.Element { const { displayMenu } = this.state; - const { fetchState, user, skipButtonText } = this.props; + const { examInProgress, fetchState, user, skipButtonText } = this.props; return (
{skipButtonText} - + {examInProgress ? ( + + ) : ( + + )}
); } @@ -85,4 +102,4 @@ class Header extends React.Component { Header.displayName = 'Header'; -export default Header; +export default connect(mapStateToProps, null)(Header); diff --git a/client/src/templates/Challenges/exam/exam.css b/client/src/templates/Challenges/exam/exam.css index e54715a3ee5..a0709d3c599 100644 --- a/client/src/templates/Challenges/exam/exam.css +++ b/client/src/templates/Challenges/exam/exam.css @@ -1,9 +1,16 @@ .exam-wrapper { + margin-top: 60px; padding: 25px; background-color: var(--primary-background); border: 2px solid var(--tertiary-background); } +@media (max-width: 600px) { + .exam-wrapper { + margin-top: 80px; + } +} + .exam-header { width: 100%; display: flex; diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx index 8d7ccd04d95..2e20d13adc9 100644 --- a/client/src/templates/Challenges/exam/show.tsx +++ b/client/src/templates/Challenges/exam/show.tsx @@ -491,8 +491,6 @@ class ShowExam extends Component { const windowTitle = `${blockNameTitle} | freeCodeCamp.org`; const ariaLabel = t('aria.answer'); - console.log(this.state); - return examInProgress ? (