account loeschen angefangen

src/App.css

@@ -12,11 +12,6 @@
     justify-content: center;
 }
 
-.margin
-{
-  margin: 10px;
-}
-
 .prevUplImg
 {
   display: flex;

src/components/DogNavbar.tsx

@@ -1,6 +1,6 @@
-import { Navbar, Text } from '@mantine/core'
+import { Navbar, Text, Modal } from '@mantine/core'
 import * as Icons from 'react-feather';
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
 
 
@@ -22,7 +22,17 @@ const Divider = () => <hr className="sidebar-hr" />;
 
 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>
     <Navbar className="fixed top-11 left-0 w-16 h-[90%] flex flex-col
     bg-orange-500"
     
@@ -57,14 +67,15 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
       <Divider/>
       <Navbar.Section className='InputForm' >
       {hasUser && 
-        <div onClick={(e)=>{onLogout()}}>
+        <div onClick={() => setOpened(true)}>
           <NaveBarIcon icon={<Icons.UserMinus size={32}/>} href={''} text={'Account löschen'}/>
         </div>
       }
       </Navbar.Section>
       <Divider/>
       <Navbar.Section><Text className='text-xs' component={Link} variant='link' to='/impressum'>Impressum</Text></Navbar.Section>    
-    </Navbar>  )
+    </Navbar>
+    </>  )
 }
 
 export default DogNavbar

src/components/Profil.tsx

@@ -175,11 +175,11 @@ function Profil()
             <div className='frameCenter'>
             <div className='frame'>
             <div className='neben'>
-                <div className='margin'>
+                <div className='m-2'>
                     {data.data && <Img pth={data.data.picture} className=''/>}
                     <Link to={'/upload'}>Bild ändern</Link>
                 </div>
-                <div className='margin'>
+                <div className='m-2'>
                     <Link to={'/' + data.data.qr_id}>{WWW_ROOT + data.data.qr_id}</Link>
                     {data.data && <Img pth={data.data.qr_code} className=''/>}
                     <button onClick={qr_refresh}>QR aktualisieren</button>