From e9175f491d422dd3ebe33bafea6c300c3a4dcfae Mon Sep 17 00:00:00 2001
From: Jonathan Barrow <jonbarrow1998@gmail.com>
Date: Sun, 10 Jul 2022 12:32:57 -0400
Subject: [PATCH] Fixed scroll issues with modal open

---
 public/assets/css/upgrade.css    | 5 ++++-
 public/assets/js/upgrade.js      | 4 ++++
 views/account/upgrade.handlebars | 1 -
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css
index 2e0229d..87885ab 100644
--- a/public/assets/css/upgrade.css
+++ b/public/assets/css/upgrade.css
@@ -13,6 +13,9 @@
   width: 1600px;
   height: 1400px;
 }
+body.modal-open {
+  overflow: hidden;
+}
 
 .back-arrow {
   position: absolute;
@@ -261,7 +264,7 @@ form button.unsubscribe:hover {
 
 div.unsub-modal-wrapper,
 div.switch-tier-modal-wrapper {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
diff --git a/public/assets/js/upgrade.js b/public/assets/js/upgrade.js
index a652d6a..bc6b451 100644
--- a/public/assets/js/upgrade.js
+++ b/public/assets/js/upgrade.js
@@ -70,6 +70,7 @@ buttons.submit.addEventListener('click', function(e) {
 		oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
 		newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
 
+		document.body.classList.add('modal-open');
 		document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
 	} else {
 		submitForm();
@@ -83,12 +84,14 @@ buttons.unsubModal.show.addEventListener('click', function(e) {
 	tierNameSpan.innerText = currentTierElement.dataset.tierName;
 
 	// Show the unsubscribe modal
+	document.body.classList.add('modal-open');
 	document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
 });
 buttons.unsubModal.close.addEventListener('click', function(e) {
 	e.preventDefault();
 
 	// Hide the unsubscribe modal
+	document.body.classList.remove('modal-open');
 	document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
 });
 buttons.unsubModal.confirm.addEventListener('click', function(e) {
@@ -101,6 +104,7 @@ buttons.switchTierModal.close.addEventListener('click', function(e) {
 	e.preventDefault();
 
 	// Hide the switch tier modal
+	document.body.classList.remove('modal-open');
 	document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
 });
 buttons.switchTierModal.confirm.addEventListener('click', function(e) {
diff --git a/views/account/upgrade.handlebars b/views/account/upgrade.handlebars
index 4c5b2fd..9cca93a 100644
--- a/views/account/upgrade.handlebars
+++ b/views/account/upgrade.handlebars
@@ -1,6 +1,5 @@
 <link rel="stylesheet" href="/assets/css/upgrade.css" />
 <div class="wrapper">
-  
 	<a href="/account" class="back-arrow">
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
 		<span>Back</span>