From 5bcb94376141d510d6b57bb86a0b39ab737bb6ab Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Wed, 9 Apr 2025 15:10:04 +0300
Subject: [PATCH] better popup

---
 pages/api/schedule.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/pages/api/schedule.ts b/pages/api/schedule.ts
index 20909f5..4decffd 100644
--- a/pages/api/schedule.ts
+++ b/pages/api/schedule.ts
@@ -197,13 +197,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
                     //check if the day is thursday
                     const dayOfWeek = common.getDayOfWeekNameEnEnumForDate(shift.date);
                     if (dayOfWeek == "Thursday") {
-                        shift.notes = `<a href="#" onclick="document.getElementById('imageModal').style.display='block'; return false;" style="color: blue; text-decoration: underline; cursor: pointer;">Специален текст с линк към снимка</a>
-                        <div id="imageModal" style="display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);">
-                            <div style="position: relative; margin: auto; padding: 20px; width: 90%; height: 90%; max-width: 90vw; max-height: 90vh; background-color: white; border-radius: 5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;">
-                                <span onclick="document.getElementById('imageModal').style.display='none'" style="position: absolute; right: 10px; top: 10px; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
-                                <div style="flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden;">
-                                    <img src="/images/cart_EN.jpg" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
+                        shift.notes = `<a href="#" onclick="document.getElementById('cart-image-modal').style.display='block'; return false;" class="text-blue-600 hover:underline">Специален текст с линк към снимка</a>
+                        <div id="cart-image-modal" style="display: none;">
+                            <div class="fixed inset-0 flex items-center justify-center z-50">
+                                <div style="background-color: white; padding: 16px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; max-width: fit-content;">
+                                    <span onclick="document.getElementById('cart-image-modal').style.display='none'" style="position: absolute; right: 10px; top: 5px; cursor: pointer; font-size: 24px; color: #6b7280;">&times;</span>
+                                    <img src="/images/cart_EN.jpg" style="max-height: 80vh; object-fit: contain;" />
                                 </div>
+                                <div class="fixed inset-0 bg-black opacity-50" onclick="document.getElementById('cart-image-modal').style.display='none'"></div>
                             </div>
                         </div>`;
                     }