From 475426ef3d4889ac5deceb2ab5e8c0a1d226c53e Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Thu, 22 Feb 2024 14:06:37 +0000
Subject: [PATCH] feat(cxl-ui): [cxl-certificate-header] update styles

---
 .../cxl-ui/scss/cxl-certificate-header.scss   |  1 +
 .../src/components/cxl-certificate-header.js  | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
index 13aba572b..632c6a556 100644
--- 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/src/components/cxl-certificate-header.js b/packages/cxl-ui/src/components/cxl-certificate-header.js
index ffdc74c6e..8ccc286ed 100644
--- a/packages/cxl-ui/src/components/cxl-certificate-header.js
+++ b/packages/cxl-ui/src/components/cxl-certificate-header.js
@@ -5,6 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
 import '@conversionxl/cxl-ui/src/components/cxl-section.js';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 
 import cxlCertificateHeaderStyles from '../styles/cxl-certificate-header-css.js';
 import cxlCertificateHeaderGlobalStyles from '../styles/global/cxl-certificate-header-css.js';
@@ -27,16 +28,31 @@ export class CXLCertificateHeaderElement extends LitElement {
 
   @property({ type: Boolean, attribute: 'hide-credential' }) hideCredential = false;
 
+  @property({ type: Boolean, reflect: true })
+  wide;
+
+  _wideMediaQuery = '(min-width: 528px)';
+
+  constructor() {
+    super();
+
+    this.addController(
+      new MediaQueryController(this._wideMediaQuery, (matches) => {
+        this.wide = matches;
+      })
+    );
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _renderCompletedEmblem() {
     if (!this.theme.includes('completed')) {
       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
@@ -77,7 +93,7 @@ export class CXLCertificateHeaderElement extends LitElement {
             ${this._renderStats()}
             ${this._renderActions()}
           </div>
-          ${this._renderCredential()}
+          ${this.wide ? this._renderCredential() : nothing}
         </div>
       </cxl-section>
     `;