deleteModal

package-lock.json

@@ -10,14 +10,15 @@
       "dependencies": {
         "@craco/craco": "^7.0.0",
         "@dnd-kit/core": "^6.0.7",
-        "@emotion/react": "^11.10.5",
+        "@emotion/react": "^11.10.6",
         "@ionic/cli": "^6.20.8",
         "@ionic/react": "^6.5.4",
-        "@mantine/core": "^5.10.3",
+        "@mantine/core": "^5.10.5",
-        "@mantine/dropzone": "^5.10.3",
+        "@mantine/dropzone": "^5.10.5",
         "@mantine/form": "^5.10.3",
-        "@mantine/hooks": "^5.10.3",
+        "@mantine/hooks": "^5.10.5",
-        "@mantine/notifications": "^5.10.3",
+        "@mantine/modals": "^5.10.5",
+        "@mantine/notifications": "^5.10.5",
         "@radix-ui/react-icons": "^1.1.1",
         "@tabler/icons": "^2.4.0",
         "@testing-library/jest-dom": "^5.16.5",
@@ -2228,12 +2229,11 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.10.5",
+      "version": "11.10.6",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
-      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -2244,9 +2244,6 @@
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
         "stylis": "4.1.3"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
@@ -2291,12 +2288,12 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.5",
+      "version": "11.10.6",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
-      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/cache": "^11.10.5",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -2305,13 +2302,9 @@
         "hoist-non-react-statics": "^3.3.1"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0",
         "react": ">=16.8.0"
       },
       "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
         "@types/react": {
           "optional": true
         }
@@ -3639,33 +3632,33 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mantine/core": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-5.10.5.tgz",
-      "integrity": "sha512-kBb8l085vg+MjAVxEDyI/koT/l2hXTBVdg6pkSJlFlMtUlhBGkp8fzqaaUiJ7C1oU//NnHAogPymHw0tjpPBgA==",
+      "integrity": "sha512-F4tqHSEVM9D6/iSqHfPda+Xl5XgSEPHAAkT01Zwzj4Jnbd10qGrlqr/SFUop2CIcuKYnmra9XltUahUPXBC2BQ==",
       "dependencies": {
         "@floating-ui/react": "^0.19.1",
-        "@mantine/styles": "5.10.3",
+        "@mantine/styles": "5.10.5",
-        "@mantine/utils": "5.10.3",
+        "@mantine/utils": "5.10.5",
         "@radix-ui/react-scroll-area": "1.0.2",
         "react-textarea-autosize": "8.3.4"
       },
       "peerDependencies": {
-        "@mantine/hooks": "5.10.3",
+        "@mantine/hooks": "5.10.5",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/dropzone": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-5.10.5.tgz",
-      "integrity": "sha512-XQKV6K/vkBqdMk9RYeyRu9UwdGmxSs0otxB+dpt8nAiWy0Ja4ORdXTPc38Xi7sq2gIJrIkwbS0XAvBiJflbrLQ==",
+      "integrity": "sha512-tBPBuQvlvesEApECTfmYFQXbS26sAQo8VaYIebTqBy9VIUoVAM9VCKHBLqa3KMKtq+/HjKCJpaa8+Cjn9riqqQ==",
       "dependencies": {
-        "@mantine/utils": "5.10.3",
+        "@mantine/utils": "5.10.5",
         "react-dropzone": "14.2.3"
       },
       "peerDependencies": {
-        "@mantine/core": "5.10.3",
+        "@mantine/core": "5.10.5",
-        "@mantine/hooks": "5.10.3",
+        "@mantine/hooks": "5.10.5",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
@@ -3683,32 +3676,46 @@
       }
     },
     "node_modules/@mantine/hooks": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-5.10.5.tgz",
-      "integrity": "sha512-fFDXF0A596z10QKeWAGtTZJ4QotsMxhhbjfWWRHMogY/hXHQ2S+7+GFotpF2JbzefYztpawHEJevy3eYF8cQmQ==",
+      "integrity": "sha512-hFQp71QZDfivPzfIUOQZfMKLiOL/Cn2EnzacRlbUr55myteTfzYN8YMt+nzniE/6c4IRopFHEAdbKEtfyQc6kg==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
     },
-    "node_modules/@mantine/notifications": {
+    "node_modules/@mantine/modals": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-5.10.5.tgz",
-      "integrity": "sha512-Gi/7LVonBkaz7VW8HboFBSrvliuQOopMyocrucXwVEYTSyTpws/fderdw04hyGczrReb6IhJX5eOr6qHFaNlWA==",
+      "integrity": "sha512-q3BCqAxulcIZCL48vUrwSaXDhxDng/2daVky8K1mTPYNlcm9iN1mqVTUC4uFWhn4b2UmPu4UdbNePEgLuhK4Mw==",
       "dependencies": {
-        "@mantine/utils": "5.10.3",
+        "@mantine/utils": "5.10.5"
+      },
+      "peerDependencies": {
+        "@mantine/core": "5.10.5",
+        "@mantine/hooks": "5.10.5",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@mantine/notifications": {
+      "version": "5.10.5",
+      "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-5.10.5.tgz",
+      "integrity": "sha512-IzTAXA7Zb9DcI94Mv5O2OinhLmI7fvs/VutDw9uCpp6OHtLuF/XN1d262jrsGhMZT0c4nuUsotSLFZF3GWZwXg==",
+      "dependencies": {
+        "@mantine/utils": "5.10.5",
         "react-transition-group": "4.4.2"
       },
       "peerDependencies": {
-        "@mantine/core": "5.10.3",
+        "@mantine/core": "5.10.5",
-        "@mantine/hooks": "5.10.3",
+        "@mantine/hooks": "5.10.5",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@mantine/styles": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-5.10.5.tgz",
-      "integrity": "sha512-OpKY207BgkJd59wSNuNaZILAUbNh1b87iY5bZOVm9u49X5cOo/n4nrkaUMw2FCZIKi6psyobtW7XYCuoldrI4w==",
+      "integrity": "sha512-0NXk8c/XGzuTUkZc6KceF2NaTCMEu5mHR4ru0x+ttb9DGnLpHuGWduTHjSfr4hl6eAJgedD0zauO+VAhDzO9zA==",
       "dependencies": {
         "clsx": "1.1.1",
         "csstype": "3.0.9"
@@ -3725,9 +3732,9 @@
       "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
     },
     "node_modules/@mantine/utils": {
-      "version": "5.10.3",
+      "version": "5.10.5",
-      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-5.10.5.tgz",
-      "integrity": "sha512-ZfR1wouA/rz3xTOb2wBnrQpIiyjLcCLLvbUo7rzaG3LhFy7UoGjZ6uqIW9qDrzs7SR4tETRfMxedYagjcoCiEg==",
+      "integrity": "sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA==",
       "peerDependencies": {
         "react": ">=16.8.0"
       }

package.json

@@ -5,14 +5,15 @@
   "dependencies": {
     "@craco/craco": "^7.0.0",
     "@dnd-kit/core": "^6.0.7",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@ionic/cli": "^6.20.8",
     "@ionic/react": "^6.5.4",
-    "@mantine/core": "^5.10.3",
+    "@mantine/core": "^5.10.5",
-    "@mantine/dropzone": "^5.10.3",
+    "@mantine/dropzone": "^5.10.5",
     "@mantine/form": "^5.10.3",
-    "@mantine/hooks": "^5.10.3",
+    "@mantine/hooks": "^5.10.5",
-    "@mantine/notifications": "^5.10.3",
+    "@mantine/modals": "^5.10.5",
+    "@mantine/notifications": "^5.10.5",
     "@radix-ui/react-icons": "^1.1.1",
     "@tabler/icons": "^2.4.0",
     "@testing-library/jest-dom": "^5.16.5",

src/App.tsx

@@ -27,6 +27,7 @@ import
   Burger,
   Stack
 } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
 import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
 import DogNavbar from './components/DogNavbar';
@@ -76,7 +77,7 @@ const App: React.FC = () =>
   
   return (
     <MantineProvider withNormalizeCSS withGlobalStyles>
-      <NotificationsProvider position="top-center" >       
+      <NotificationsProvider position="top-center" >    
         <div className="App">
           <Stack>
             <div className='h-11'></div>       {/* dummy header */}

src/components/DogNavbar.css

@@ -0,0 +1,4 @@
+button.mantine-8nr514
+{
+    background-color: red;
+}

src/components/DogNavbar.tsx

@@ -1,8 +1,9 @@
-import { Navbar, Text, Modal } from '@mantine/core'
+import { Navbar, Text } from '@mantine/core'
 import * as Icons from 'react-feather';
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-
+import { ModalsProvider, openConfirmModal } from '@mantine/modals';
+import './DogNavbar.css';
 
 const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, href: string, text: string}) => 
 (
@@ -19,20 +20,26 @@ const NaveBarIcon = ({ icon, href, text = 'tooltip 💡'}: {icon: JSX.Element, h
 
 const Divider = () => <hr className="sidebar-hr" />;
 
+const openDeleteModal = () =>
+    openConfirmModal({
+      title: 'Account löschen!',
+      centered: true,
+      children: (
+        <Text size="sm">
+          Are you sure you want to delete your profile? This action is destructive and you will have
+          to contact support to restore your data.
+        </Text>
+      ),
+      labels: { confirm: 'Account löschen', cancel: "Behalten, nicht löschen" },
+      onCancel: () => console.log('Cancel'),
+      onConfirm: () => console.log('Confirmed')
+    });
 
 function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolean, onLogout: () => void}) 
 {
-  const [opened, setOpened] = useState(false);
   return (
 <>
-    <Modal
+  <ModalsProvider labels={{ confirm: 'Submit', cancel: 'Cancel' }}>   
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Account löschen!"
-      >
-        <h4>wirklich löschen?</h4>
-        {/* Modal content */}
-    </Modal>
     <Navbar className="fixed top-11 left-0 w-16 h-[90%] flex flex-col
     bg-orange-500"
     
@@ -67,7 +74,7 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
       <Divider/>
       <Navbar.Section className='InputForm' >
       {hasUser && 
-        <div onClick={() => setOpened(true)}>
+        <div onClick={openDeleteModal}>
           <NaveBarIcon icon={<Icons.UserMinus size={32}/>} href={''} text={'Account löschen'}/>
         </div>
       }
@@ -75,7 +82,8 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
       <Divider/>
       <Navbar.Section><Text className='text-xs' component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
     </Navbar>
-    </>  )
+  </ModalsProvider>
+</>  )
 }
 
 export default DogNavbar