show connected google account

public/locales/de/translation.json

@@ -242,7 +242,8 @@
       "button": "Erneut versuchen"
     },
     "cardPersonalCalendarSettings": {
-      "title": "Persönliche Kalendereinstellungen"
+      "title": "Persönliche Kalendereinstellungen",
+      "tooltipConnectedGoogleAccount": "Verbunden mit Google-Konto von {{accountName}}"
     },
     "cardStoreCalendarSettings": {
       "title": "Geschäftskalendereinstellungen"

public/locales/en/translation.json

@@ -245,7 +245,8 @@
       "button": "Try again"
     },
     "cardPersonalCalendarSettings": {
-      "title": "Personal calendar settings"
+      "title": "Personal calendar settings",
+      "tooltipConnectedGoogleAccount": "Connected with Google account from {{accountName}}"
     },
     "cardStoreCalendarSettings": {
       "title": "Store calendar settings"

src/Pages/Store/Calendar/index.js

@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Button,
   Card,
   Col,
@@ -11,6 +12,7 @@ import {
   Space,
   Spin,
   Switch,
+  Tooltip,
   Typography,
   notification,
 } from "antd";
@@ -40,7 +42,6 @@ import MyModal, {
 } from "../../../Components/MyModal";
 import { useParams } from "react-router-dom";
 import {
-  DownloadOutlined,
   MailOutlined,
   ShareAltOutlined,
   WhatsAppOutlined,
@@ -476,6 +477,23 @@ function CardPersonalCalendarSettings({ settings }) {
             setRequestState={setRequestState}
           />
 
+          {settings.google_account_name !== undefined &&
+          settings.google_account_name !== "" &&
+          settings.google_account_picture !== undefined &&
+          settings.google_account_picture !== "" ? (
+            <Tooltip
+              title={t(
+                "calendar.cardPersonalCalendarSettings.tooltipConnectedGoogleAccount",
+                {
+                  accountName: settings.google_account_name,
+                }
+              )}
+              placement="top"
+            >
+              <Avatar src={settings.google_account_picture} />
+            </Tooltip>
+          ) : null}
+
           <Button
             danger
             onClick={() => setIsModalOpen(true)}
@@ -494,7 +512,7 @@ function CardPersonalCalendarSettings({ settings }) {
 
       <Card
         title={
-          screenBreakpoint.xl ? (
+          screenBreakpoint.xxl ? (
             <div
               style={{
                 display: "flex",