TCA-1028 updates completed state for cords on home

Author: kkartunov

src-ts/tools/learn/welcome/courses-card/CoursesCard.module.scss

@@ -19,7 +19,7 @@
 
 .completed {
     background: $tc-white;
-    border: 1px solid $black-20;
+    border: 2px solid $turq-75;
 }
 
 .cardHeader {
@@ -48,6 +48,11 @@
             display: flex;
             align-items: center;
 
+            @include ltexs {
+                display: grid;
+                grid-template-columns: 30px 1fr;
+            }
+
             >svg {
                 color: $blue-140;
                 margin-right: $space-xs;
@@ -103,6 +108,29 @@
     a:nth-child(2) {
         margin-left: $space-sm;
     }
+
+    .completedCTAs {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        @include ltexs {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .completedLabel {
+            background-color: $turq-75;
+            padding: $space-xs $space-sm;
+            border-radius: $space-xs;
+            color: $black-100;
+            font-weight: $font-weight-medium;
+
+            @include ltexs {
+                margin-top: $space-lg;
+            }
+        }
+    }
 }
 
 .infoText {

src-ts/tools/learn/welcome/courses-card/CoursesCard.tsx

@@ -43,10 +43,14 @@ const CoursesCard: FC<CoursesCardProps> = (props: CoursesCardProps) => {
         switch (status) {
             case UserCertificationProgressStatus.completed:
                 return (
-                    <>
-                        <Button buttonStyle='primary' size='xs' label='View Certificate' route={certifRoute} />
-                        <Button buttonStyle='secondary' size='xs' label='Details' route={detailsRoute} />
-                    </>
+                    <div className={styles.completedCTAs}>
+                        <div>
+                            <Button buttonStyle='primary' size='xs' label='View Certificate' route={certifRoute} />
+                            <Button buttonStyle='secondary' size='xs' label='Details' route={detailsRoute} />
+
+                        </div>
+                        <div className={styles.completedLabel}>Completed</div>
+                    </div>
                 )
             case UserCertificationProgressStatus.inProgress:
                 return <Button buttonStyle='primary' size='xs' label='Resume' route={resumeRoute} />

src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.module.scss

@@ -8,6 +8,10 @@
     border-radius: 8px;
     overflow: auto;
 
+    @include ltesm {
+        padding: $space-xxl $space-lg;
+    }
+
     .cardHeader {
         display: flex;
         align-items: center;
@@ -30,6 +34,11 @@
                 display: flex;
                 align-items: center;
 
+                @include ltexs {
+                    display: grid;
+                    grid-template-columns: 30px 1fr;
+                }
+
                 >svg {
                     margin-right: $space-xs;
                     color: $blue-140;
@@ -63,7 +72,7 @@
 
 .completed {
     background: $tc-white;
-    border: 1px solid $black-20;
+    border: 2px solid $turq-75;
 }
 
 .separatorBar {
@@ -86,6 +95,29 @@
 .cardBottom {
     margin-top: $space-lg;
 
+    .completedCTAs {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        @include ltesm {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .completedLabel {
+            background-color: $turq-75;
+            padding: $space-xs $space-sm;
+            border-radius: $space-xs;
+            color: $black-100;
+            font-weight: $font-weight-medium;
+
+            @include ltesm {
+                margin-top: $space-lg;
+            }
+        }
+    }
+
     .certCTAButtons {
         a:first-child {
             margin-right: $space-sm;

src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx

@@ -50,9 +50,12 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
 
         if (isCompleted) {
             return (
-                <div className={styles.certCTAButtons}>
-                    {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))}
-                    {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
+                <div className={styles.completedCTAs}>
+                    <div className={styles.certCTAButtons}>
+                        {getCtaBtn('primary', 'View Certificate', getTCACertificateUrl(dashedName))}
+                        {getCtaBtn('secondary', 'Details', getTCACertificationPath(dashedName))}
+                    </div>
+                    <div className={styles.completedLabel}>Completed</div>
                 </div>
             )
         }