Merge pull request #538 from topcoder-platform/qa-fixes

Multiple QA fixes -> dev

Author: vas3a

src-ts/lib/styles/_layout.scss

@@ -2,18 +2,16 @@
 @import 'mixins';
 
 html {
-    --header-height: 80px;
-    --footer-height: 51px;
+    --header-height: 60px;
+    --footer-height: 96px;
     --breadcrumb-height: 64px;
 
-    @include ltemd {
-        --header-height: 64px;
-        --breadcrumb-height: 48px;
+    @media (max-width: 767px) {
+        --header-height: 48px;
     }
 
-    @include ltesm {
-        --header-height: 48px;
-        --footer-height: 101px;
+    @include ltemd {
+        --breadcrumb-height: 48px;
     }
 }
 

src-ts/tools/learn/certification-details/certification-curriculum/curriculum-cards/course-card/CourseCard.tsx

@@ -86,7 +86,7 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
     }
 
     const completionTimeRange: TCACertificationCompletionTimeRange = useHoursEstimateToRange(
-        props.certification.completionHours,
+        props.certification.course.estimatedCompletionTimeValue,
     )
 
     return (
@@ -108,7 +108,10 @@ const CourseCard: FC<CourseCardProps> = (props: CourseCardProps) => {
                             <span className={styles.icon}>
                                 <IconSolid.DocumentTextIcon />
                             </span>
-                            <span className='quote-small'>4 modules</span>
+                            <span className='quote-small'>
+                                {props.certification.course.modules.length}
+                                {' modules'}
+                            </span>
                         </li>
                         <li className={styles.stat}>
                             <span className={styles.icon}>

src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx

@@ -24,7 +24,12 @@ const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarP
                     Enroll until April 30 with no cost.
                 </div>
             </div>
-            <Button buttonStyle='primary' onClick={props.onEnroll} label='Enroll Now' size='lg' />
+            <Button
+                buttonStyle='primary'
+                onClick={props.onEnroll}
+                label='Complete Enrollment'
+                size='lg'
+            />
             {/* TODO: this form will probably be re-used when we add actuall payments, leaving this here for now */}
             {/* <EnrollmentForm profile={props.profile} onSubmit={props.onEnroll}>
             </EnrollmentForm> */}

src-ts/tools/learn/course-details/CourseDetailsPage.tsx

@@ -93,7 +93,7 @@ const CourseDetailsPage: FC<{}> = () => {
                             {' '}
                             {course.title}
                             ,
-                            we&appos;d recommend you enroll in another course to continue your learning.
+                            we&apos;d recommend you enroll in another course to continue your learning.
                             You can view our other courses from the Topcoder Academy course page.
                         </p>
                     </div>

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss

@@ -11,8 +11,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100%;
+    height: 100%;
     z-index: -1;
 }
 

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/certificate-background/certificate-bg.svg

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 
 import { Button, FccLogoBlackSvg, IconSolid, ProgressBar } from '../../../../lib'
 import {
+    clearFCCCertificationTitle,
     CompletionTimeRange,
     CourseBadge,
     LearnCertification,
@@ -67,7 +68,7 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
             <div className={styles.cardHeader}>
                 <CourseBadge type={props.certification.certificationCategory.track ?? 'DEV'} />
                 <div className={styles.cardHeaderTitleWrap}>
-                    <p className='body-medium-medium'>{props.certification.title}</p>
+                    <p className='body-medium-medium'>{clearFCCCertificationTitle(props.certification.title)}</p>
                     <div className={styles.subTitleWrap}>
                         <LearnLevelIcon level={props.certification.learnerLevel} />
                         <span className={classNames('body-small', styles.infoText)}>