center loading spin

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"

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"

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}`}
       />
     </>