improved unlink button

master
alex 2024-02-11 13:57:29 +01:00
parent aa53203c2d
commit 7b91f555d4
3 changed files with 50 additions and 73 deletions

View File

@ -270,8 +270,7 @@
"unlinkGoogleCalendar": { "unlinkGoogleCalendar": {
"title": "Google Kalender trennen", "title": "Google Kalender trennen",
"description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.", "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)", "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", "calendarFrameCustomerView": "Terminkalenderansicht der Kunden",
"modalShareCalendarLink": { "modalShareCalendarLink": {

View File

@ -273,8 +273,7 @@
"unlinkGoogleCalendar": { "unlinkGoogleCalendar": {
"title": "Unlink Google Calendar", "title": "Unlink Google Calendar",
"description": "For security reasons, you need to enter your password to unlink your Google Calendar.", "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)", "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", "calendarFrameCustomerView": "Appointment diary view of customers",
"modalShareCalendarLink": { "modalShareCalendarLink": {

View File

@ -42,6 +42,7 @@ import MyModal, {
} from "../../../Components/MyModal"; } from "../../../Components/MyModal";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import {
LogoutOutlined,
MailOutlined, MailOutlined,
ShareAltOutlined, ShareAltOutlined,
WhatsAppOutlined, WhatsAppOutlined,
@ -458,9 +459,23 @@ function CardPersonalCalendarSettings({ settings }) {
formUnlinkCalendar.resetFields(); formUnlinkCalendar.resetFields();
}, [isModalOpen]); }, [isModalOpen]);
const CardTitleContent = () => {
return ( return (
<> <>
{notificationContextHolder}
<Card
title={
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
justifyItems: "center",
alignContent: "center",
overflowX: "scroll",
overflow: "auto",
}}
>
<Typography.Title <Typography.Title
level={5} level={5}
style={{ style={{
@ -494,48 +509,12 @@ function CardPersonalCalendarSettings({ settings }) {
</Tooltip> </Tooltip>
) : null} ) : null}
<Button <LogoutOutlined
danger
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
style={{ paddingBottom: 10 }} style={{ paddingTop: 6, color: "#ff4d4f" }}
> />
{t("calendar.unlinkGoogleCalendar.button")}
</Button>
</Space> </Space>
</>
);
};
return (
<>
{notificationContextHolder}
<Card
title={
screenBreakpoint.xxl ? (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
justifyItems: "center",
alignContent: "center",
}}
>
<CardTitleContent />
</div> </div>
) : (
<div
style={{
display: "flex",
flexDirection: "column",
paddingTop: 10,
paddingBottom: 10,
}}
>
<CardTitleContent />
</div>
)
} }
> >
<Form form={form} requiredMark={false}> <Form form={form} requiredMark={false}>