Merge pull request #535 from topcoder-platform/miscellaneous-qa-fixes

Miscellaneous qa fixes -> dev

Author: vas3a

src-ts/lib/modals/base-modal/BaseModal.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode, useEffect } from 'react'
 import Modal, { ModalProps } from 'react-responsive-modal'
 import classNames from 'classnames'
 
@@ -37,6 +37,13 @@ const BaseModal: FC<BaseModalProps> = (props: BaseModalProps) => {
         )
     }
 
+    useEffect(() => {
+        if (props.blockScroll === false) {
+            document.documentElement.style.overflow = props.open ? 'hidden' : ''
+            document.body.style.overflow = props.open ? 'hidden' : ''
+        }
+    }, [props.blockScroll, props.open])
+
     return (
         <Modal
             {...props}

src-ts/tools/learn/certification-details/certification-details-modal/CertificationDetailsModal.tsx

@@ -23,6 +23,7 @@ const CertificationDetailsModal: FC<CertificationDetailsModalProps> = (props: Ce
     return (
         <BaseModal
             onClose={props.onClose}
+            blockScroll={false}
             open={isOpen}
             size='body'
             title={`${props.certification.title} Details`}

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -84,7 +84,7 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                         <CompletionTimeRange range={props.certification.completionTimeRange} />
                         <Tooltip
                             content={renderTooltipContents(<IconSolid.ClockIcon />, [
-                                'Assuming 4 hour',
+                                'Assuming 1 to 4 hour',
                                 'learning per day',
                             ])}
                             place='bottom'
@@ -115,7 +115,7 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                 )}
             </ul>
 
-            <div className={classNames('body-main-medium', styles['section-header'])}>
+            <div className={classNames('body-small-medium', styles['section-header'])}>
                 Skills Covered
             </div>
             <ul className={styles['certification-skills-list']}>

src-ts/tools/learn/certification-details/enrolled-modal/EnrolledModal.tsx

@@ -30,7 +30,11 @@ const EnrolledModal: FC<EnrolledModalProps> = (props: EnrolledModalProps) => {
                 <h2 className='details'>
                     You have successfully enrolled!
                 </h2>
-                <Button buttonStyle='outline' label='Close' onClick={props.onClose} />
+                <Button
+                    buttonStyle='outline'
+                    label='Go to the certification details'
+                    onClick={props.onClose}
+                />
             </>
 
         </BaseModal>

src-ts/tools/learn/learn-lib/course-outline/collapsible-item/CollapsibleItem.tsx

@@ -147,7 +147,7 @@ const CollapsibleItem: FC<CollapsibleItemProps> = (props: CollapsibleItemProps)
                             {' '}
                             Lessons
                         </span>
-                        {props.duration && (
+                        {!!props.duration && (
                             <span className={styles['summary-item']}>
                                 <IconOutline.ClockIcon />
                                 {props.duration}

src-ts/tools/learn/learn-lib/tca-certification-completed-modal/TCACertificationCompletedModal.tsx

@@ -20,10 +20,15 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
         = useSessionStorage<boolean>(storeKey, false)
 
     function handleClick(): void {
-        props.onClose()
+        handleClose()
         window.open(getTCACertificateUrl(props.certification.dashedName), '_blank')
     }
 
+    function handleClose(): void {
+        setIsOpen(false)
+        props.onClose()
+    }
+
     useEffect(() => {
         if (!storeKey || sessionStorage.getItem(storeKey) !== null) {
             return
@@ -34,7 +39,7 @@ const TCACertificationCompletedModal: FC<TCACertificationCompletedModalProps>
 
     return (
         <BaseModal
-            onClose={props.onClose}
+            onClose={handleClose}
             open={isOpen}
             size='sm'
             classNames={{ modal: styles.completedModal, root: styles.modalRoot }}