deleteModal

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
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Account löschen!"
-      >
-        <h4>wirklich löschen?</h4>
-        {/* Modal content */}
-    </Modal>
+  <ModalsProvider labels={{ confirm: 'Submit', cancel: 'Cancel' }}>   
     <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