feat(cxl-ui): [cxl-certificate-header] update completed page

conversionxl · Feb 21, 2024 · 640b4f9 · 640b4f9
1 parent 374c4f3
commit 640b4f9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -35,6 +35,7 @@
   }
 
   .title {
+    font-size: var(--lumo-font-size-xxl);
     margin: 0;
   }
 

diff --git a/packages/cxl-ui/scss/global/cxl-certificate-header.scss b/packages/cxl-ui/scss/global/cxl-certificate-header.scss
@@ -3,3 +3,11 @@ cxl-certificate-header {
   display: block;
   z-index: 1;
 }
+
+cxl-app-layout:not([wide]) {
+  cxl-certificate-header {
+    &::part(credential) {
+      display: none;
+    }
+  }
+}
diff --git 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
@@ -63,7 +63,7 @@ export class CXLCertificateHeaderElement extends LitElement {
       return nothing;
     }
 
-    return html`<div class="credential"><slot name="credential"></slot>`;
+    return html`<div class="credential" part="credential"><slot name="credential"></slot>`;
   }
 
   render() {