From 81e68f7788ad3581831764529b0f8220f944cf10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= <pawel@kopocinski.pl>
Date: Thu, 11 Jan 2024 10:32:32 +0100
Subject: [PATCH 1/3] feat(cxl-ui): cxl-credential add fitParent property

New property if set `true`, sets credential width to the width of
credential parent element (wrapper).

This makes component size correct on different screen sizes.
---
 packages/cxl-ui/src/components/cxl-credential.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/cxl-ui/src/components/cxl-credential.js b/packages/cxl-ui/src/components/cxl-credential.js
index 6a6727573..82035e5c5 100644
--- a/packages/cxl-ui/src/components/cxl-credential.js
+++ b/packages/cxl-ui/src/components/cxl-credential.js
@@ -44,6 +44,13 @@ export class CXLCredentialElement extends LitElement {
 
   @property({ type: Number, attribute: 'code-scale' }) codeScale = 8;
 
+  /**
+   * Resize credential to fit the parent element.
+   *
+   * @type {boolean}
+   */
+  @property({ type: Boolean, attribute: 'fit-parent' }) fitParent = false;
+
   @query('#qr-code') qrCodeCanvas = null;
 
   defaultUrl ='https://cxl.com/institute/credential'
@@ -109,7 +116,10 @@ export class CXLCredentialElement extends LitElement {
    * device orientation. But it will adjust, if the page is reloaded after.
    */
   _handleScaling() {
-    const width = this.maxWidth || window.innerWidth - this.parentPadding;
+    const width = this.fitParent
+      ? this.parentElement.clientWidth - this.parentPadding
+      : this.maxWidth || window.innerWidth - this.parentPadding;
+
     const finalW = this._certWidth * this.scale;
     this.correctionFactor = width < finalW || this.maxWidth ? width / finalW : 1;
     this.style.height = `${this._certHeight * this.scale * this.correctionFactor}px`;

From 8075f44a0d4ee6129f4bcc7279a85b69f9b827a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= <pawel@kopocinski.pl>
Date: Thu, 11 Jan 2024 11:47:50 +0100
Subject: [PATCH 2/3] refactor(cxl-ui): cxl-certificate-header[completed]
 credential adjustments

Adjust width of the content and credential depending on the screen size.
---
 .../cxl-ui/scss/cxl-certificate-header.scss   | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
index de4d92ada..e633ef4d8 100644
--- a/packages/cxl-ui/scss/cxl-certificate-header.scss
+++ b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -101,15 +101,39 @@
 }
 
 :host([theme~="completed"]) {
+  &::before {
+    display: none;
+  }
+
   color: var(--lumo-shade);
   background-color: var(--lumo-tint);
 
-  @media #{mq.$medium} {
-    @include mixins.pesudo-element-full-width(var(--lumo-tint));
+  .container {
+    @media #{mq.$small} {
+      display: block;
+    }
+
+    @media #{mq.$medium} {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--lumo-space-m);
+    }
   }
 
   .credential {
     padding-top: 0;
     border-top: none;
+
+    @media #{mq.$small} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
+
+    @media #{mq.$medium} {
+      max-width: calc( var(--cxl-hero-certificate-max-width) / 2 );
+    }
+
+    @media #{mq.$large} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
   }
 }

From cae354fb9edbb18a5ad3fbe16dd2e745c0457e4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= <pawel@kopocinski.pl>
Date: Fri, 12 Jan 2024 09:28:51 +0100
Subject: [PATCH 3/3] refactor: cxl-certificate-header typography changes

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

diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
index e633ef4d8..13aba572b 100644
--- a/packages/cxl-ui/scss/cxl-certificate-header.scss
+++ b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -1,5 +1,6 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 @use "./mixins";
+@import "../../cxl-lumo-styles/scss/typography";
 
 :host {
   color: var(--lumo-tint);
@@ -38,10 +39,8 @@
   }
 
   .completed {
+    align-items: center;
     display: flex;
-    margin-top: var(--lumo-space-l);
-    font-size: var(--lumo-font-size-xl);
-    font-weight: 700;
     color: var(--lumo-primary-color);
   }
 
diff --git a/packages/cxl-ui/src/components/cxl-certificate-header.js b/packages/cxl-ui/src/components/cxl-certificate-header.js
index c43fe04fa..40ebec1c2 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`<div class="completed">
+    return html`<h2 class="completed">
       <span class="completed-icon"><vaadin-icon icon="lumo:checkmark"></vaadin-icon></span>
       Course completed
-    </div>`;
+    </h2>`;
   }
 
   // eslint-disable-next-line class-methods-use-this