Merge pull request #536 from topcoder-platform/TCA-1077

TCA-1077 free promo

Author: kkartunov

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;
+    }
+}

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss

@@ -57,6 +57,14 @@
                 text-decoration: line-through;
                 color: $black-40;
             }
+
+            :global(.body-main-bold) {
+                font-style: normal;
+            }
+        }
+
+        .freeLabel {
+            @include freeLabel;
         }
     }
 }

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

@@ -99,17 +99,9 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                             <IconSolid.CurrencyDollarIcon />
                         </span>
                         <span className='quote-main'>
-                            <strong>Free</strong>
-                            &nbsp;until April 30&nbsp;
+                            <strong className={styles.freeLabel}>FREE</strong>
+                            <span className='body-main-bold'>&nbsp;until April 30&nbsp;</span>
                             <span className='strike'>$20</span>
-                            <Tooltip
-                                content={renderTooltipContents(<IconSolid.CurrencyDollarIcon />, [
-                                    'Introductory low pricing',
-                                ])}
-                                place='bottom'
-                                trigger={<IconOutline.InformationCircleIcon />}
-                                triggerOn='hover'
-                            />
                         </span>
                     </li>
                 )}

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) {

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

@@ -13,9 +13,8 @@ interface EnrollmentSidebarProps {
 const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarProps) => (
     <StickySidebar className={styles.wrap}>
         <div className={styles.header}>
-            <h3 className='marketing'>Free</h3>
+            <div className={styles.freeLabel}>FREE</div>
             <span className='strike'>$20</span>
-            <strong className='overline'>Total payment</strong>
         </div>
         <hr />
         <div className={styles.form}>

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

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;

src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx

@@ -50,6 +50,11 @@ const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProp
                     of our pilot Certification program. Click on a certification below to learn more.
                 </p>
             </div>
+            <div className={styles.freeBanner}>
+                <strong className='body-large-bold'>FREE!</strong>
+                &nbsp;
+                <span className='body-large'>Certifications are free until April 30th.</span>
+            </div>
 
             <div className={styles.certsList}>
                 {

src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg-mobile.png

@@ -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;
+            }
         }
     }
 }

src-ts/tools/learn/welcome/tc-certifications/assets/free-banner-bg.png

@@ -136,7 +136,10 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                         )
                     }
                 </div>
-                <div className={styles.newLabel}>NEW</div>
+                <div className={styles.cardLabels}>
+                    <div className={styles.newLabel}>NEW</div>
+                    <div className={styles.freeLabel}>FREE</div>
+                </div>
             </div>
 
             {renderProgressBar()}