diff --git a/src/components/Popup/popup.js b/src/components/Popup/popup.js
index cadc097db..df2de4b2a 100644
--- a/src/components/Popup/popup.js
+++ b/src/components/Popup/popup.js
@@ -1,65 +1,69 @@
-export class Modal {
- constructor() {
- this.triggerModal = this.triggerModal.bind(this);
- this.onDOMLoaded = this.onDOMLoaded.bind(this);
- this.handleCloseModal = this.handleCloseModal.bind(this);
- this.handleKeydown = this.handleKeydown.bind(this);
+export class Popup {
+ constructor() {
+ this.triggerPopup = this.triggerPopup.bind(this);
+ this.onDOMLoaded = this.onDOMLoaded.bind(this);
+ this.handleClosePopup = this.handleClosePopup.bind(this);
+ this.handleKeydown = this.handleKeydown.bind(this);
+ }
+
+ /**
+ * Triggers the popup on target elements
+ * @param {Event} e
+ */
+ triggerPopup(e) {
+ const popupToShow =
+ e?.target?.closest('[data-popup]')?.dataset?.popup || 'unknown-popup';
+ const popupEl = document.querySelector(`#${popupToShow}`);
+
+ if (!popupEl) {
+ return;
}
-
- /**
- * Triggers the modal on target elements
- * @param {Event} e
- */
- triggerModal(e) {
- const modalToShow = e?.target?.closest('[data-modal]')?.dataset?.modal || 'unknown-modal';
- const modalEl = document.querySelector(`#${modalToShow}`);
-
- if (!modalEl) {
- return;
- }
-
- modalEl.classList.remove('hidden');
- const focusEl = modalEl.querySelector('[autofocus]');
- if (focusEl) {
- focusEl.focus();
- }
+
+ popupEl.classList.remove('hidden');
+ popupEl.classList.add('flex');
+ const focusEl = popupEl.querySelector('[autofocus]');
+ if (focusEl) {
+ focusEl.focus();
}
-
- handleCloseModal(e) {
- const target = e.target;
- const modalBody = target.closest('.modal-body');
- const closestModal = target.closest('.modal');
-
- if (modalBody) {
- return;
- }
-
- if (closestModal) {
- closestModal.classList.add('hidden');
- }
+ }
+
+ handleClosePopup(e) {
+ const target = e.target;
+ const popupBody = target.closest('.popup-body');
+ const closestPopup = target.closest('.popup');
+
+ if (popupBody) {
+ return;
}
-
- handleKeydown(e) {
- if (e.key !== 'Escape') {
- return;
- }
-
- const modal = document.querySelector('.modal:not(.hidden)');
- if (modal) {
- modal.classList.add('hidden');
- }
+
+ if (closestPopup) {
+ closestPopup.classList.add('hidden');
+ closestPopup.classList.remove('flex');
}
-
- onDOMLoaded() {
- document.addEventListener('click', this.triggerModal);
- document.addEventListener('click', this.handleCloseModal);
- document.addEventListener('keydown', this.handleKeydown);
+ }
+
+ handleKeydown(e) {
+ if (e.key !== 'Escape') {
+ return;
}
-
- init() {
- window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+
+ const popup = document.querySelector('.popup:not(.hidden)');
+ if (popup) {
+ popup.classList.add('hidden');
+ popup.classList.remove('flex');
}
}
-
- const modalRef = new Modal();
- modalRef.init();
\ No newline at end of file
+
+ onDOMLoaded() {
+ document.addEventListener('click', this.triggerPopup);
+ document.addEventListener('click', this.handleClosePopup);
+ document.addEventListener('keydown', this.handleKeydown);
+ }
+
+ init() {
+ window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
+ }
+}
+
+const popupRef = new Popup();
+popupRef.init();
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 77e859c30..a336d4eec 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -48,7 +48,7 @@ const isRoadmapReady = !isUpcoming;
{isRoadmapReady && (