Using a dialog for confirm delete alert.

src/components/trk/TrkViewer.tsx

@@ -3,10 +3,11 @@ import { peekCachedSignal } from '../../workers/cached-signals';
 import Tree from '../tree';
 import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
 import { TrksegViewer } from '../trkseg';
-import { Alert, Button, IconButton } from '@suid/material';
+import { Button, IconButton } from '@suid/material';
 import DeleteIcon from '@suid/icons-material/Delete';
 import QuestionMarkIcon from '@suid/icons-material/QuestionMark';
 import dispatch from '../../workers/dispatcher-main';
+import Alert from '../alert';
 
 interface Props {
   trkId: string;
@@ -64,7 +65,7 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
             </div>
             <div>
               <IconButton onClick={confirmDeleteHandler}>
-                <DeleteIcon />
+                <DeleteIcon fill='white' />
               </IconButton>
             </div>
           </>
@@ -82,34 +83,34 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
           </For>
         }
       />
-      <Show when={confirmDelete()}>
-        <Alert
-          severity='warning'
-          icon={<QuestionMarkIcon />}
-          action={
-            <>
-              <Button
-                color='error'
-                variant='contained'
-                size='small'
-                onClick={deleteHandler}
-              >
-                YES
-              </Button>
-              <Button
-                color='primary'
-                variant='outlined'
-                size='small'
-                onclick={cancelDeleteHandler}
-              >
-                NO
-              </Button>
-            </>
-          }
-        >
-          Delete this track ?
-        </Alert>
-      </Show>
+      <Alert
+        open={confirmDelete}
+        closeHandler={cancelDeleteHandler}
+        severity='warning'
+        icon={<QuestionMarkIcon />}
+        action={
+          <>
+            <Button
+              color='error'
+              variant='contained'
+              size='small'
+              onClick={deleteHandler}
+            >
+              YES
+            </Button>
+            <Button
+              color='primary'
+              variant='outlined'
+              size='small'
+              onclick={cancelDeleteHandler}
+            >
+              NO
+            </Button>
+          </>
+        }
+      >
+        Delete this track ?
+      </Alert>
     </>
   );
 };