From 7cff157014cd0599dd4fae9820079bce885dc3b6 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sun, 21 Jan 2024 20:46:11 +0100
Subject: [PATCH] center loading spin

---
 public/locales/de/translation.json |  3 ++-
 public/locales/en/translation.json |  3 ++-
 src/Pages/Store/Calendar/index.js  | 19 ++++++++++++++-----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index ea159e6..fb828d9 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -173,7 +173,8 @@
       "description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.",
       "checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)",
       "button": "Google Kalender trennen"
-    }
+    },
+    "calendarFrameCustomerView": "Terminkalenderansicht der Kunden"
   },
   "storeSettings": {
     "pageTitle": "Einstellungen"
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 4741c5e..3ee4aa0 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -176,7 +176,8 @@
       "description": "For security reasons, you need to enter your password to unlink your Google Calendar.",
       "checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)",
       "button": "Unlink Google Calendar"
-    }
+    },
+    "calendarFrameCustomerView": "Appointment diary view of customers"
   },
   "storeSettings": {
     "pageTitle": "Settings"
diff --git a/src/Pages/Store/Calendar/index.js b/src/Pages/Store/Calendar/index.js
index bc598f1..f5f4eca 100644
--- a/src/Pages/Store/Calendar/index.js
+++ b/src/Pages/Store/Calendar/index.js
@@ -106,7 +106,9 @@ export default function StoreCalendar() {
             </Col>
 
             <Col xs={24}>
-              <CalendarFrame storeId={storeId} />
+              <Card title={t("calendar.calendarFrameCustomerView")}>
+                <CalendarFrame storeId={storeId} />
+              </Card>
             </Col>
           </Row>
         </>
@@ -121,15 +123,22 @@ function CalendarFrame({ storeId }) {
   return (
     <>
       {isLoading && (
-        <MyCenteredContainer>
+        <div
+          style={{
+            display: "flex",
+            height: "50vh",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
           <Spin size="large" />
-        </MyCenteredContainer>
+        </div>
       )}
       <iframe
         onLoad={() => setIsLoading(false)}
-        style={{ border: 0, borderRadius: 10 }}
+        style={{ border: 0, borderRadius: 12 }}
         width="100%"
-        height={600}
+        height={530}
         src={`${Constants.EMBED_CALENDAR_ADDRESS}${storeId}`}
       />
     </>