fix(EmailNotifications): fix ui switch

src/components/users/modals/UserMenuModal.tsx

@@ -34,6 +34,8 @@ import {getUserName} from "@/components/users/modals/util.tsx";
 import {isNotEmpty, useForm} from "@mantine/form";
 import {useMutation} from "@tanstack/react-query";
 import {showSuccessNotification} from "@/components/util.tsx";
+import {CheckboxCard} from "@/components/input/CheckboxCard";
+import {useEffect} from "react";
 
 export default function UserMenuModal() {
     const {value, handler} = useUserMenu()
@@ -49,17 +51,23 @@ export default function UserMenuModal() {
     const {showDebug, toggleShowDebug} = useShowDebug()
 
     const formValues = useForm({
-        initialValues: {
-            sn: user?.sn ?? "",
-            givenName: user?.givenName ?? "",
-            muteEmailNotifications: user?.muteEmailNotifications ?? false
-        },
+        initialValues: {},
         validate: {
             sn: isNotEmpty('Bitte gebe deinen Nachnamen ein'),
             givenName: isNotEmpty('Bitte gebe deinen Vornamen ein'),
         }
     })
 
+    useEffect(() => {
+        const values = {
+            sn: user?.sn ?? "",
+            givenName: user?.givenName ?? "",
+            muteEmailNotifications: user?.muteEmailNotifications ?? false
+        }
+        formValues.setInitialValues(values)
+        formValues.setValues(values)
+    }, [user]);
+
     const mutation = useMutation({
         mutationFn: async () => {
             if (formValues.validate().hasErrors || !user) {
@@ -71,9 +79,8 @@ export default function UserMenuModal() {
             })
         },
         onSuccess: () => {
-            showSuccessNotification("Dein Name wurde erfolgreich gespeichert")
+            showSuccessNotification("Gespeichert")
             refreshUser()
-            formValues.reset()
         }
     })
 
@@ -219,15 +226,16 @@ export default function UserMenuModal() {
                     </>
                 }
 
-                <Switch
+                <CheckboxCard
                     label={"Email Benachrichtigungen stummschalten"}
-                    description={"Hier kannst du Email Benachrichtigungen für Gruppennachrichten stummschalten. " +
-                        "Du erhältst weiterhin Benachrichtigungen für Ankündigungen."}
-                    {...formValues.getInputProps("muteEmailNotifications", {type: "checkbox"})}
+                    description={"Du erhältst keine Benachrichtigungen per Email für neu Chatnachrichten. " +
+                        "Für Ankündigungen und wichtige Informationen bekommst du weiterhin Nachrichten."
+                    }
+                    {...formValues.getInputProps("muteEmailNotifications", {type: 'checkbox'})}
                 />
 
                 <Group justify={"center"}>
-                    <Tooltip label={"Account Einstellungen"}>
+                    <Tooltip label={"Account Einstellungen speichern"}>
                         <ActionIcon
                             variant={"transparent"}
                             aria-label={"update account"}