From d5bbea43595d2ab860fb623ca41290965f1ef369 Mon Sep 17 00:00:00 2001
From: Niko <nikoshell20@gmail.com>
Date: Sat, 12 Jul 2025 13:31:20 +0200
Subject: [PATCH] Add close button to PWA prompt

---
 src/components/InstallPWA.astro | 38 +++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/InstallPWA.astro b/src/components/InstallPWA.astro
index df48f0750..c81b21141 100644
--- a/src/components/InstallPWA.astro
+++ b/src/components/InstallPWA.astro
@@ -1,12 +1,20 @@
 ---
-
 ---
 <div id="install-pwa" class="hidden">
-  <p>Add website to home screen and get easy access to the schedule!</p>
-  <button id="install-btn" class="button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border text-white
-      bg-primary hover:bg-primary-hover border-transparent">Add to home screen</button>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <div class="grid w-full">
+      <p>Add website to home screen and get easy access to the schedule!</p>
+      <button id="install-btn" class="button-link font-bold text-lg px-4 py-4 rounded-lg inline-flex items-center justify-center leading-4 transition-colors duration-200 not-prose border text-white m-5
+          bg-primary hover:bg-primary-hover border-transparent">Add to home screen</button>
+    </div>
+      <button id="close-btn" class="text-white hover:text-gray-300 transition-colors duration-200 p-2" aria-label="Close">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+  </div>
 </div>
-
 <style>
 #install-pwa {
   position: fixed;
@@ -20,36 +28,44 @@
   transition: all 0.3s ease;
   z-index: 200;
 }
-
 #install-pwa.hidden {
   transform: translateY(100%);
   opacity: 0;
 }
 </style>
-
 <script>
 function showInstallPrompt() {
   const installBanner = document.getElementById('install-pwa') as HTMLElement;
   installBanner.classList.remove('hidden');
 }
 
-  const installBtn = document.getElementById('install-btn') as HTMLElement;
-  installBtn.addEventListener('click', () => {
+function hideInstallPrompt() {
+  const installBanner = document.getElementById('install-pwa') as HTMLElement;
+  installBanner.classList.add('hidden');
+}
+
+const installBtn = document.getElementById('install-btn') as HTMLElement;
+const closeBtn = document.getElementById('close-btn') as HTMLElement;
+
+installBtn.addEventListener('click', () => {
   if (deferredPrompt) {
     deferredPrompt.prompt();
     deferredPrompt.userChoice.then((choiceResult: any) => {
       console.log(choiceResult.outcome);
       deferredPrompt = null;
+      hideInstallPrompt();
     });
   }
 });
 
-let deferredPrompt: any;
+closeBtn.addEventListener('click', () => {
+  hideInstallPrompt();
+});
 
+let deferredPrompt: any;
 window.addEventListener('beforeinstallprompt', (e) => {
   e.preventDefault();
   deferredPrompt = e;
-
   showInstallPrompt();
 });
 </script>