@smileid/web-components 11.4.5 → 11.6.0

package/lib/components/document/src/document-capture-review/DocumentCaptureReview.js

@@ -5,249 +5,214 @@ import { t, getDirection } from '../../../../domain/localisation';
 function templateString() {
   return `
   <style>
-    .retake-photo.button[data-variant~="ghost"] {
-      color: #FF5805;
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
     }
 
-
-    @media (max-width: 600px) {
-      .id-camera-screen {
-        width: 100%;
-        height: 100vh;
-      }
-    
-      .section {
-        width: 100%;
-        justify-content: center;
-      }
+    *, *::before, *::after {
+      box-sizing: border-box;
     }
-    
-    .id-image-container {
+
+    #document-capture-review-screen {
+      font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
+      background: #f8fafc;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      gap: 1.75rem;
-    }
-
-    .id-image {
-        width: 100%;
-        text-align: center;
-        position: relative;
-        background: white;
-    }
-    img {
+      width: 100%;
       height: 100%;
-      min-height: 100px;
-      width: 98%;
+      min-height: 100%;
+      position: relative;
+      overflow: hidden;
     }
 
-    .action-buttons {
-      width: 80%;
+    /* ── Navigation (top) ─────────────────────────────────── */
+    .review-nav {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      right: 16px;
+      z-index: 10;
     }
 
-
-    .icon-btn {
-      appearance: none;
-      background: none;
-      border: none;
-      color: hsl(0deg 0% 94%);
-      cursor: pointer;
+    /* ── Captured image area ──────────────────────────────── */
+    .review-image-area {
+      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 4px 8px;
-    }
-    .justify-right {
-      justify-content: end !important;
-    }
-    .nav {
-      display: flex;
-      justify-content: space-between;
+      padding: 72px 24px 16px;
+      min-height: 0;
     }
 
-    .back-wrapper {
-      display: flex;
-      align-items: center;
-    }
-
-    .back-button-text {
-      font-size: 11px;
-      line-height: 11px;
-      color: rgb(21, 31, 114);
+    .review-image {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+      border-radius: 12px;
+      display: block;
+      object-fit: contain;
     }
 
-
-
-    .tips,
-    .powered-by {
-      align-items: center;
-      border-radius: 0.25rem;
-      color: #4e6577;
+    /* ── Bottom card ──────────────────────────────────────── */
+    .review-footer {
+      padding: 0 20px 16px;
       display: flex;
-      justify-content: center;
-      letter-spacing: 0.075em;
-    }
-
-    .powered-by {
-      box-shadow: 0px 2.57415px 2.57415px rgba(0, 0, 0, 0.06);
-      display: inline-flex;
-      font-size: 0.5rem;
-    }
-
-    .tips {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: 17rem;
-    }
-
-    .tips > * + *,
-    .powered-by > * + * {
-      display: inline-block;
-      margin-left: 0.5em;
-    }
-
-    .powered-by .company {
-      color: #18406d;
-      font-weight: 700;
-      letter-spacing: 0.15rem;
-    }
-
-    .logo-mark {
-      background-color: #004071;
-      display: inline-block;
-      padding: 0.25em 0.5em;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      flex-shrink: 0;
     }
 
-    .logo-mark svg {
-      height: auto;
-      justify-self: center;
-      width: 0.75em;
-    }
-    
-    #document-capture-review-screen {
+    .review-card {
+      width: 100%;
+      max-width: 420px;
+      background: #ffffff;
+      border-radius: 16px;
+      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+        0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+      padding: 24px 20px;
       display: flex;
       flex-direction: column;
-      max-block-size: 100%;
-      max-inline-size: 40ch;
-      padding: 1rem;
-    }
-
-    #document-capture-review-screen .id-image-container.landscape {
-    height: auto;
+      align-items: center;
+      gap: 4px;
+      text-align: center;
     }
 
-    #document-capture-review-screen header p {
-      margin-block: 0 !important;
+    .review-title {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: ${this.themeColor};
     }
 
-    .description {
-      color: var(--neutral-off-black, #2D2B2A);
-      text-align: center;
-
-      /* p */
-      font-family: DM Sans;
-      font-size: 0.875rem;
-      font-style: normal;
+    .review-description {
+      margin: 0 0 8px;
+      font-size: 0.8125rem;
       font-weight: 400;
-      line-height: 18px;
+      line-height: 1.3;
+      color: #5b6b7b;
     }
 
-    .padding-bottom-2 {
-      padding-bottom: 2rem;
+    /* ── Circular action buttons ──────────────────────────── */
+    .review-actions {
+      display: flex;
+      gap: 40px;
+      align-items: flex-start;
+      justify-content: center;
+      margin-top: 4px;
     }
-    img {
-        border-width: 0.25rem;
-        border-color: #9394ab;
-        border-style: solid;
-        border-radius: 0.25rem;
-      }
 
-    .instructions-wrapper {
-      display: inline-flex;
+    .circle-btn {
+      appearance: none;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      display: flex;
       flex-direction: column;
-      align-items: flex-start;
-      gap: 2rem;
-      margin-block-start: 2rem;
-      margin-block-end: 4rem;
+      align-items: center;
+      gap: 8px;
     }
-    .instructions {
+
+    .circle {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
       display: flex;
       align-items: center;
-      text-align: initial;
+      justify-content: center;
+      transition: transform 0.1s ease, opacity 0.15s ease;
     }
 
-    .instructions svg {
-      flex-shrink: 0;
-      margin-inline-end: 2rem;
+    .circle-btn:active .circle {
+      transform: scale(0.95);
     }
 
-    .instructions p {
-      margin-block: 0;
+    .circle-btn.retake .circle {
+      background: #ffffff;
+      border: 1.5px solid #cbd5e1;
     }
 
-    .instruction-body {
-      font-size: 0.75rem;
+    .circle-btn.confirm .circle {
+      background: #e7f9ee;
+      border: 1.5px solid #2cc05c;
     }
 
-    h1 {
-      color: var(--web-digital-blue, #001096);
-      text-align: center;
+    .circle-label {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: #90a1b9;
+    }
 
-      /* h1 */
-      font-size: 1.25rem;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 36px; /* 150% */
+    .circle-label.confirm-label {
+      color: #12b76a;
     }
 
-    .p2 {
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 1rem;
+    .circle-btn:focus-visible {
+      outline: 2px solid ${this.themeColor};
+      outline-offset: 3px;
+      border-radius: 8px;
     }
 
-    .instruction-header {
-      color: var(--web-digital-blue, #001096);
+    .review-attribution {
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
-    .h2 {
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 700;
-      line-height: 1.5rem;
+    @media (min-width: 640px) {
+      .review-image-area {
+        padding-top: 80px;
+      }
+      .review-close {
+        top: 28px;
+        right: 28px;
+      }
     }
   </style>
   ${styles(this.themeColor)}
-  <div id='document-capture-review-screen' class='flow center' dir='${this.direction}'>
-  ${this.showNavigation ? `<smileid-navigation show-navigation hide-back></smileid-navigation>` : ''}
-    <h1 class="header-title title-color">
-      ${t('document.review.question')}
-    </h1>
-    <p class="description">${t('document.review.description')}</p>
-    <div class='section | flow'>
-      <div class='id-image-container'>
-        <div class='id-image'>
-          <div class='video-overlay'></div>
-          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' />` : ''}
-          </div>
-        <div class='flow action-buttons'>
-          <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
-            ${t('document.review.acceptButton')}
+  <div id='document-capture-review-screen' dir='${this.direction}'>
+    ${
+      this.showNavigation
+        ? `<div class='review-nav'>
+            <smileid-navigation theme-color='${this.themeColor}' show-navigation hide-back></smileid-navigation>
+          </div>`
+        : ''
+    }
+
+    <div class='review-image-area'>
+      ${this.imageSrc ? `<img class='review-image' alt='${t('document.submission.imageAlt')}' id='document-capture-review-image' src='${this.imageSrc.replace(/'/g, '&#39;').replace(/</g, '&lt;')}' />` : ''}
+    </div>
+
+    <div class='review-footer'>
+      <div class='review-card'>
+        <h1 class='review-title'>${t('document.review.confirmTitle')}</h1>
+        <p class='review-description'>${t('document.review.confirmBody')}</p>
+        <div class='review-actions'>
+          <button class='circle-btn retake' type='button' id='re-capture-id-image' aria-label='${t('document.review.retake')}'>
+            <span class='circle'>
+              <svg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#90A1B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
+                <polyline points='1 4 1 10 7 10'></polyline>
+                <path d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'></path>
+              </svg>
+            </span>
+            <span class='circle-label'>${t('document.review.retake')}</span>
           </button>
-          <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-id-image'>
-            ${t('document.review.retakeButton')}
+          <button class='circle-btn confirm' type='button' id='select-id-image' aria-label='${t('document.review.confirm')}'>
+            <span class='circle'>
+              <svg width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='#12B76A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
+                <polyline points='20 6 9 17 4 12'></polyline>
+              </svg>
+            </span>
+            <span class='circle-label confirm-label'>${t('document.review.confirm')}</span>
           </button>
         </div>
       </div>
 
-      ${
-        this.hideAttribution
-          ? ''
-          : `
-        <powered-by-smile-id></powered-by-smile-id>
-      `
-      }
+      ${this.hideAttribution ? '' : '<div class="review-attribution"><powered-by-smile-id></powered-by-smile-id></div>'}
     </div>
   </div>
   `;
@@ -329,13 +294,12 @@ class IdReview extends HTMLElement {
       '#re-capture-id-image',
     );
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
-    this.navigation?.addEventListener('navigation.back', () => {
-      this.handleBackEvents();
-    });
-
     this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
+    this.navigation?.addEventListener('navigation.back', () => {
+      this.handleBackEvents();
+    });
 
     this.selectIDImage.addEventListener('click', () => {
       this.dispatchEvent(