Merge branch 'dev' of github.com:topcoder-platform/platform-ui into TCA-441_implement-sort-filter-on-learn-landing

Author: vas3a

src-ts/tools/learn/course-details/CourseDetailsPage.module.scss

@@ -47,10 +47,14 @@
         @extend .body-main;
         margin-top: $space-xxl;
     }
-    
+
     p {
         margin: $space-sm 0;
     }
+
+    :global(.details.mtop) {
+        margin-top: $space-xxl;
+    }
 }
 
 .coming-soon {

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

@@ -99,6 +99,27 @@ const CourseDetailsPage: FC<{}> = () => {
         )
     }
 
+    function getCompletionSuggestion(): ReactNode {
+        if (!course) {
+            return
+        }
+
+        return progress?.status === UserCertificationProgressStatus.completed ? (
+            <></>
+        ) : (
+            !!course.completionSuggestions?.length && (
+                <>
+                    <h3 className='details mtop'>Suggestions for completing this course</h3>
+
+                    <div
+                        className={styles['text']}
+                        dangerouslySetInnerHTML={{ __html: (course.completionSuggestions ?? []).join('<br /><br />') }}
+                    ></div>
+                </>
+            )
+        )
+    }
+
     function getFooter(): ReactNode {
         if (!resourceProvider) {
             return
@@ -141,6 +162,7 @@ const CourseDetailsPage: FC<{}> = () => {
 
                         <div className={styles['description']}>
                             {getDescription()}
+                            {getCompletionSuggestion()}
                             <div className={styles['coming-soon']}>
                                 <PromoCourse />
                             </div>

src-ts/tools/learn/learn-lib/courses-provider/courses-functions/learn-course.model.ts

@@ -4,6 +4,7 @@ import { LearnModule } from '../../lesson-provider'
 export interface LearnCourse extends LearnModelBase {
     certification: string
     certificationId: string
+    completionSuggestions: Array<string>
     estimatedCompletionTime: {
         units: string
         value: number

src-ts/tools/learn/learn-lib/my-course-card/in-progress/InProgress.module.scss

@@ -8,10 +8,6 @@
 
     display: flex;
 
-    &.large {
-        padding: $space-xxxxl;
-    }
-
     @include ltelg {
         &, &.large {
             padding: $space-lg;
@@ -119,8 +115,8 @@
 
 .started-date {
     font-weight: bold;
-    
+
     @include ltemd {
         order: -1;
     }
-}
+}

src-ts/tools/learn/learn-lib/wave-hero/WaveHero.module.scss

@@ -19,7 +19,7 @@
             }
         }
     }
-    
+
     &-inner {
         padding: calc($space-xxxxl + $space-sm) 0 $space-lg;
         @include contentWidth;
@@ -47,13 +47,13 @@
             flex-direction: column;
         }
     }
-    
+
     &-card-col {
         flex: 0 0 auto;
     }
-    
+
     &-text {
         @extend .body-medium-normal;
-        margin-top: $space-xxl;
+        margin-top: $space-sm;
     }
 }

src-ts/tools/learn/learn-lib/wave-hero/WaveHero.tsx

@@ -7,7 +7,7 @@ interface WaveHeroProps {
     children?: ReactNode
     text: string
     theme?: 'light'
-    title: string
+    title: ReactNode
 }
 
 const WaveHero: FC<WaveHeroProps> = (props: WaveHeroProps) => {

src-ts/tools/learn/welcome/WelcomePage.module.scss

@@ -1,6 +1,11 @@
 @import '../../../lib/styles/includes';
 
 .hero-wrap {
+    svg:global(.tca-logo) {
+        margin-bottom: $space-xxl;
+        max-width: calc(100% - 70px);
+    }
+
     :global(.hero-card-col) {
         width: 43.5%;
         max-width: 600px;

src-ts/tools/learn/welcome/WelcomePage.tsx

@@ -15,6 +15,7 @@ import {
 
 import { CoursesCard } from './courses-card'
 import { ProgressBlock } from './progress-block'
+import { ReactComponent as TcAcademyFullLogoSvg } from './tca-full-logo.svg'
 import styles from './WelcomePage.module.scss'
 
 type SORT_FIELD_TYPE = keyof LearnCertification
@@ -71,7 +72,12 @@ const WelcomePage: FC<{}> = () => {
                 <Portal portalId='page-subheader-portal-el'>
                     <div className={styles['hero-wrap']}>
                         <WaveHero
-                            title='Welcome to Topcoder ACADEMY'
+                            title={(
+                                <>
+                                    <TcAcademyFullLogoSvg className='tca-logo' />
+                                    Welcome!
+                                </>
+                            )}
                             text={`
                                 The Topcoder Academy will provide you with learning opportunities
                                 in the form of guided learning paths.

src-ts/tools/learn/welcome/progress-block/ProgressBlock.module.scss

@@ -4,14 +4,14 @@
 .wrap {
     background: $black-5;
     border-radius: $space-sm;
-    padding: $space-xxl;
+    padding: $space-xxl $space-xxl $space-lg;
     color: $black-100;
 
     display: flex;
     flex-direction: column;
-    gap: $space-lg;
+    gap: $space-xxl;
     width: 100%;
-    
+
     @include ltemd {
         padding: $space-lg;
     }

src-ts/tools/learn/welcome/progress-block/cards-slider/CardsSlider.module.scss

@@ -0,0 +1,63 @@
+@import '../../../../../lib/styles/includes';
+
+.slides-wrap {
+    display: block;
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+}
+
+.slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.2s ease;
+    &:global(:not(.active)) {
+        pointer-events: none;
+    }
+
+
+    &:global(.is-prev) {
+        transform: translateX(-100%);
+    }
+
+    &:global(.is-next) {
+        transform: translateX(100%);
+    }
+
+    &:global(.active) {
+        position: relative;
+        opacity: 1;
+        transform: translateX(0);
+        visibility: visible;
+    }
+}
+
+.nav-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: $space-xxl;
+
+    gap: calc($space-xs + $border-xs);
+}
+
+.nav-dot {
+    display: block;
+    width: $space-md;
+    height: $space-md;
+    background: $black-40;
+    border-radius: 50%;
+    cursor: pointer;
+
+    &:global(.active) {
+        width: calc($space-lg + $border);
+        height: calc($space-lg + $border);
+        border: $border solid $turq-100;
+        background: $tc-white;
+    }
+}