delete confirmation popup

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -9,6 +9,7 @@ import { useHasUserPermission } from "../../hooks/usePermissions";
 import { useAuth } from "../../../Auth";
 import { getValue } from "../../../../Utils/GetValue";
 import { useAssetApi } from '../../../AppShell/hooks/useAssets'
+import DialogModal from "../../../Templates/DialogModal";
 
 
 
@@ -18,6 +19,9 @@ export function HeaderView({ item, setItemFormPopup }: {
   setItemFormPopup?: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>
 }) {
 
+
+  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
+
   const [loading, setLoading] = React.useState<boolean>(false);
   const removeItem = useRemoveItem();
 
@@ -49,7 +53,12 @@ export function HeaderView({ item, setItemFormPopup }: {
     }
     setLoading(false);
     map.closePopup();
+    window.history.pushState({}, "", "/");
+    event.stopPropagation();
+  }
 
+  const openDeleteModal = async (event: React.MouseEvent<HTMLElement>) => {
+    setModalOpen(true);
     event.stopPropagation();
   }
 
@@ -62,6 +71,7 @@ export function HeaderView({ item, setItemFormPopup }: {
 
 
   return (
+    <>
     <div className='tw-grid tw-grid-cols-6 tw-pb-2'>
       <div className='tw-col-span-5'>
         <div className="tw-flex tw-flex-row">{
@@ -96,7 +106,7 @@ export function HeaderView({ item, setItemFormPopup }: {
               </li>}
 
               {item.layer.api.deleteItem && hasUserPermission(item.layer.api?.collectionName!, "delete") && <li>
-                <a className=' !tw-text-error' onClick={removeItemFromMap}>
+                <a className=' !tw-text-error' onClick={openDeleteModal}>
                   {loading ? <span className="tw-loading tw-loading-spinner tw-loading-sm"></span>
                     :
                     <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -108,5 +118,15 @@ export function HeaderView({ item, setItemFormPopup }: {
           </div>}
       </div>
     </div>
+    <DialogModal isOpened={modalOpen} title="Are you sure?" showCloseButton={false} onClose={ () => (setModalOpen(false)) }>
+      <span>Do you want to delte <b>{item.name}</b>?</span>
+      <div className="tw-grid">
+        <div className="tw-flex tw-justify-between">
+                <label className="tw-btn tw-mt-4 tw-btn-error" onClick={removeItemFromMap}>Yes</label>
+                <label className="tw-btn tw-mt-4" onClick={() => setModalOpen(false)}>No</label>
+                </div>
+            </div>
+    </DialogModal>
+    </>
   )
 }

src/Components/Map/UtopiaMap.tsx

@@ -58,7 +58,7 @@ function UtopiaMap({
                     props.setItemFormPopup({ layer: props.selectNewItemPosition, position: e.latlng })
                     props.setSelectNewItemPosition(null)
                 }
-            },
+            }
         })
         return null
     }

src/Components/Profile/ProfileSettings.tsx

@@ -212,7 +212,7 @@ export function ProfileSettings() {
         <ReactCrop crop={crop} onChange={(c) => setCrop(c)} aspect={1} >
           <img src={image} ref={imgRef} onLoad={onImageLoad} />
         </ReactCrop>
-        <button className={`tw-btn `} onClick={() => {
+        <button className={`tw-btn tw-btn-primary`} onClick={() => {
           setCropping(true);
           setCropModalOpen(false);
           renderCrop();

src/Components/Templates/DialogModal.tsx

@@ -18,6 +18,7 @@ type Props = {
   isOpened: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  showCloseButton?: boolean
 };
 
 const DialogModal = ({
@@ -25,6 +26,7 @@ const DialogModal = ({
   isOpened,
   onClose,
   children,
+  showCloseButton = true
 }: Props) => {
   
   const ref = useRef<HTMLDialogElement>(null);
@@ -43,7 +45,7 @@ const DialogModal = ({
 
 
   return (
-    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4 tw-max-w-xl'
+    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4 tw-max-w-xl tw-bg-base-100'
     
       ref={ref}
       onCancel={onClose}
@@ -56,7 +58,7 @@ const DialogModal = ({
      <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>{title}</h2>
 
       {children}
-      <button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={onClose}>✕</button>
+     {showCloseButton && <button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2" onClick={onClose}>✕</button>}
 
       </div>
     </dialog>