From 7a095685c8f311fd4a1c431ae7c0886a786a76be Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Fri, 1 Mar 2024 13:38:39 +0000
Subject: [PATCH] feat(cxl-ui): [cxl-certificate-header] update completed page

---
 .../cxl-ui/scss/global/cxl-certificate-header.scss   | 12 ++++++++++++
 .../cxl-ui/src/components/cxl-certificate-header.js  |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/cxl-ui/scss/global/cxl-certificate-header.scss b/packages/cxl-ui/scss/global/cxl-certificate-header.scss
index 7db7b1a3b..14df2a8b1 100644
--- a/packages/cxl-ui/scss/global/cxl-certificate-header.scss
+++ b/packages/cxl-ui/scss/global/cxl-certificate-header.scss
@@ -1,5 +1,17 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
 cxl-certificate-header {
   position: relative;
   display: block;
   z-index: 1;
+
+  &[theme~="completed"] {
+    [slot="credential"] img {
+      display: none;
+
+      @media #{mq.$medium} {
+        display: initial;
+      }
+    }
+  }
 }
diff --git a/packages/cxl-ui/src/components/cxl-certificate-header.js b/packages/cxl-ui/src/components/cxl-certificate-header.js
index ffdc74c6e..644a0c15e 100644
--- a/packages/cxl-ui/src/components/cxl-certificate-header.js
+++ b/packages/cxl-ui/src/components/cxl-certificate-header.js
@@ -33,10 +33,10 @@ export class CXLCertificateHeaderElement extends LitElement {
       return nothing;
     }
 
-    return html`<h2 class="completed">
+    return html`<h3 class="completed">
       <span class="completed-icon"><vaadin-icon icon="lumo:checkmark"></vaadin-icon></span>
-      Training completed
-    </h2>`;
+      Certificate earned
+    </h3>`;
   }
 
   // eslint-disable-next-line class-methods-use-this