diff --git a/src-ts/lib/styles/mixins/_layout.mixins.scss b/src-ts/lib/styles/mixins/_layout.mixins.scss index ac70501dd..ffecff189 100644 --- a/src-ts/lib/styles/mixins/_layout.mixins.scss +++ b/src-ts/lib/styles/mixins/_layout.mixins.scss @@ -43,6 +43,7 @@ } @mixin scrollbar { + // firefox's solution for "customizing" scrollbars & { scrollbar-width: thin; @@ -67,3 +68,20 @@ } } } + +@mixin freeLabel { + font-size: 24px; + line-height: 32px; + font-weight: $font-weight-bold; + font-style: normal; + background-color: $orange-100; + padding: 2px $space-sm; + border-radius: 4px; + color: $black-100; + display: inline-block; + + @include ltesm { + font-size: 20px; + line-height: 28px; + } +} \ No newline at end of file diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss index 4f2bf5d62..eedab59de 100644 --- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss +++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss @@ -55,6 +55,14 @@ text-decoration: line-through; color: $black-40; } + + :global(.body-main-bold) { + font-style: normal; + } + } + + .freeLabel { + @include freeLabel; } } } diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx index 11dae6f30..7cfb4d754 100644 --- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx +++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx @@ -99,17 +99,9 @@ const CertificationDetailsSidebar: FC = (props - Free -  until April 30  + FREE +  until April 30  $20 - , [ - 'Introductory low pricing', - ])} - place='bottom' - trigger={} - triggerOn='hover' - /> )} diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss index 482d80a98..44ccd20c0 100644 --- a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss +++ b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss @@ -9,8 +9,10 @@ .header { text-align: center; - h3 { - color: $blue-140; + .freeLabel { + @include freeLabel; + + margin-bottom: $space-sm; } :global(.strike) { diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx index eb1576dd8..0b5ea6398 100644 --- a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx +++ b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx @@ -13,9 +13,8 @@ interface EnrollmentSidebarProps { const EnrollmentSidebar: FC = (props: EnrollmentSidebarProps) => (
-

Free

+
FREE
$20 - Total payment

diff --git a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts index 83ce58966..fbb55d147 100644 --- a/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts +++ b/src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts @@ -14,6 +14,7 @@ export interface TCACertificationProgress extends LearnModelBase { completionUuid: string coursesCount: number topcoderCertification: TCACertification + topcoderCertificationId: number status: TCACertificationProgressStatus completedAt: null | Date certificationProgress: number diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss index 11aa44d51..2de7671c9 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss +++ b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss @@ -29,14 +29,15 @@ flex-direction: column; position: relative; padding: $space-xxxxl; - margin: $space-mx 0; + margin: $space-mx 0 0; background-image: url("./assets/certs-banner-bg.png"); background-size: cover; - border-radius: 8px; + border-top-left-radius: 8px; + border-top-right-radius: 8px; @include ltemd { padding: 88px $space-lg $space-lg; - margin: $space-lg 0; + margin: $space-lg 0 0; background-image: url("./assets/certs-banner-bg-mobile.png"); } @@ -57,6 +58,28 @@ } } + .freeBanner { + display: flex; + align-items: center; + padding: $space-lg $space-xxxxl; + margin: 0 0 $space-mx; + background-image: url("./assets/free-banner-bg.png"); + background-size: cover; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + @include ltemd { + padding: $space-lg $space-xxl; + margin-bottom: $space-xxl; + background-image: url("./assets/free-banner-bg-mobile.png"); + + >span { + font-size: 14px; + line-height: 20px; + } + } + } + .certsList { display: grid; grid-template-columns: 1fr 1fr; diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx index 0b4b6abc4..fe4de350d 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx +++ b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx @@ -50,6 +50,11 @@ const TCCertifications: FC = (props: TCCertificationsProp of our pilot Certification program. Click on a certification below to learn more.

+
+ FREE! +   + Certifications are free until April 30th. +
{ diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png b/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png new file mode 100644 index 000000000..cc53443cb Binary files /dev/null and b/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png differ diff --git a/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png b/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png new file mode 100644 index 000000000..3a71feaed Binary files /dev/null and b/src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png differ diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss index 844f6ab93..d6eb412b1 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss @@ -18,6 +18,11 @@ @include ltemd { align-items: flex-start; + + >svg { + max-width: 60px; + max-height: 56px; + } } .cardTitleWrap { @@ -26,6 +31,10 @@ flex: 1; margin-left: $space-xxl; + @include ltesm { + margin-left: $space-lg; + } + >p { text-align: left; } @@ -57,15 +66,30 @@ } } - .newLabel { - padding: 3px 4px; - background-color: $green-140; - font-weight: 500; - font-size: 11px; - line-height: 10px; - color: $tc-white; - border-radius: 2px; - margin-bottom: $space-xl; + .cardLabels { + display: flex; + align-items: flex-start; + + .newLabel { + font-weight: 500; + font-size: 11px; + line-height: 10px; + border-radius: 2px; + margin-bottom: $space-xl; + background-color: $green-140; + padding: 3px $space-xs; + color: $tc-white; + } + + .freeLabel { + @include freeLabel; + + margin-left: $space-sm; + padding: 3px $space-xs; + font-weight: 500; + font-size: 11px; + line-height: 10px; + } } } } diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx index 4d86b1da4..3bd8ee7fe 100644 --- a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx +++ b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx @@ -134,7 +134,10 @@ const TCCertCard: FC = (props: TCCertCardProps) => { ) }
-
NEW
+
+
NEW
+
FREE
+
{renderProgressBar()}