From 8684f840e81c038379fcdd1370cbabe73785dc3e Mon Sep 17 00:00:00 2001
From: Syb Wartna <sybren.wartna@cognizant.com>
Date: Tue, 5 Dec 2023 16:01:19 +0100
Subject: [PATCH 1/3] refactor icon usage

---
 common/modal/modal.css | 2 +-
 common/modal/modal.js  | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/common/modal/modal.css b/common/modal/modal.css
index dd3148ed..41db3f47 100644
--- a/common/modal/modal.css
+++ b/common/modal/modal.css
@@ -105,7 +105,7 @@
   outline-offset: 5px;
 }
 
-.modal-top-bar svg {
+.modal-top-bar .icon svg {
   height: 24px;
   width: 24px;
 }
diff --git a/common/modal/modal.js b/common/modal/modal.js
index 853f3957..411f6aea 100644
--- a/common/modal/modal.js
+++ b/common/modal/modal.js
@@ -1,5 +1,5 @@
 import { createElement, getTextLabel } from '../../scripts/common.js';
-import { loadCSS } from '../../scripts/lib-franklin.js';
+import { decorateIcons, loadCSS } from '../../scripts/lib-franklin.js';
 // eslint-disable-next-line import/no-cycle
 import { createIframe, isLowResolutionVideoUrl } from '../../scripts/video-helper.js';
 
@@ -16,15 +16,14 @@ const createModalTopBar = (parentEl) => {
     <div class="modal-top-bar">
       <div class="modal-top-bar-content">
         <h2 class="modal-top-bar-heading" id="modal-heading"></h2>
-        <button class="modal-close-button" aria-label=${getTextLabel('close')}>
-          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.97979 4.97979C5.17505 4.78453 5.49163 4.78453 5.6869 4.97979L16 15.2929L26.3131 4.97979C26.5084 4.78453 26.825 4.78453 27.0202 4.97979C27.2155 5.17505 27.2155 5.49163 27.0202 5.6869L16.7071 16L27.0202 26.3131C27.2155 26.5084 27.2155 26.825 27.0202 27.0202C26.825 27.2155 26.5084 27.2155 26.3131 27.0202L16 16.7071L5.6869 27.0202C5.49163 27.2155 5.17505 27.2155 4.97979 27.0202C4.78453 26.825 4.78453 26.5084 4.97979 26.3131L15.2929 16L4.97979 5.6869C4.78453 5.49163 4.78453 5.17505 4.97979 4.97979Z" fill="var(--color-icon, #000)"/>
-          </svg>
+        <button type="button" class="modal-close-button" aria-label=${getTextLabel('close')}>
+          <span class="icon icon-close" aria-hidden="true" />
         </button>
       </div>
     </div>
   `);
 
+  decorateIcons(topBar);
   parentEl.prepend(...topBar.children);
   // eslint-disable-next-line no-use-before-define
   parentEl.querySelector('.modal-close-button').addEventListener('click', () => hideModal());

From 0775e2dd2e7b7c8ac4a50929182c034c061acd7e Mon Sep 17 00:00:00 2001
From: Syb Wartna <sybren.wartna@cognizant.com>
Date: Tue, 5 Dec 2023 16:04:01 +0100
Subject: [PATCH 2/3] remove redundant close button

---
 common/modal/modal.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/common/modal/modal.js b/common/modal/modal.js
index 411f6aea..cb4e8efc 100644
--- a/common/modal/modal.js
+++ b/common/modal/modal.js
@@ -125,12 +125,6 @@ const createModal = () => {
         bannerWrapper.classList.add('modal-before-banner');
         bannerWrapper.addEventListener('click', (event) => event.stopPropagation());
         bannerWrapper.appendChild(beforeBanner);
-        const closeButton = document.createElement('button');
-        closeButton.classList.add('modal-close-button');
-        closeButton.innerHTML = '<i class="fa fa-close"></i>';
-        bannerWrapper.appendChild(closeButton);
-        // eslint-disable-next-line no-use-before-define
-        closeButton.addEventListener('click', () => hideModal());
 
         videoOrIframe.before(bannerWrapper);
       }

From 1f2884ff1ad6ec7b2564d540c2bb50d46ea6d49d Mon Sep 17 00:00:00 2001
From: Syb Wartna <sybren.wartna@cognizant.com>
Date: Tue, 5 Dec 2023 16:43:37 +0100
Subject: [PATCH 3/3] fix video size

---
 common/modal/modal.css | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/common/modal/modal.css b/common/modal/modal.css
index 41db3f47..abf16302 100644
--- a/common/modal/modal.css
+++ b/common/modal/modal.css
@@ -48,6 +48,10 @@
   position: relative;
   transform: translateY(-100vh);
   transition: transform 0.3s ease-out;
+}
+
+:root:not(.redesign-v2) .modal-content {
+  margin-top: 100px;
   background-color: var(--c-grey-1);
 }
 
@@ -179,6 +183,7 @@
   gap: 2%;
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
 .modal-content:has(.modal-soundcloud) {
   aspect-ratio: unset;
 }
@@ -199,3 +204,36 @@
   width: 100%;
   height: unset;
 }
+
+.redesign-v2 .modal-content:has(.modal-video) {
+  padding: 0 16px;
+  max-width: calc(var(--wrapper-width) + 32px);
+}
+
+.redesign-v2 .modal-video {
+  width: calc(100% - 32px);
+  height: auto;
+  border-radius: 8px 8px 0 0;
+}
+
+@media (min-width: 744px) {
+  .redesign-v2 .modal-content:has(.modal-video) {
+    padding: 0 32px;
+  }
+
+  .redesign-v2 .modal-video {
+    width: calc(100% - 64px);
+  }
+}
+
+@media (min-width: 1200px) {
+  .redesign-v2 .modal-content:has(.modal-video) {
+    padding: 0;
+    margin: 0 auto;
+    max-width: var(--wrapper-width);
+  }
+
+  .redesign-v2 .modal-video {
+    width: 100%;
+  }
+}