Using a dialog for confirm delete alert.

src/components/alert/Alert.tsx

@@ -0,0 +1,33 @@
+import { Component, JSXElement } from 'solid-js';
+
+import { Alert as MuiAlert } from '@suid/material';
+import { AlertColor } from '@suid/material/Alert';
+import Dialog from '../dialog';
+
+interface Props {
+  open: boolean;
+  closeHandler: (event: any, reason?: string) => void;
+  severity?: AlertColor;
+  icon?: JSXElement;
+  action?: JSXElement;
+  children?: JSXElement;
+}
+
+const Alert: Component<Props> = ({
+  open,
+  closeHandler,
+  severity,
+  icon,
+  action,
+  children,
+}) => {
+  return (
+    <Dialog open={open()} closeHandler={closeHandler} maxWidth={false}>
+      <MuiAlert severity={severity} icon={icon} action={action}>
+        {children}
+      </MuiAlert>
+    </Dialog>
+  );
+};
+
+export default Alert;

src/components/alert/index.ts

@@ -0,0 +1 @@
+export { default } from './Alert';

src/components/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { Component, JSXElement } from 'solid-js';
+import { Component, JSXElement, Show } from 'solid-js';
 import {
   Dialog as MuiDialog,
   DialogContent,
@@ -10,7 +10,8 @@ import CloseIcon from '@suid/icons-material/Close';
 const Dialog: Component<{
   open: boolean;
   fullScreen?: boolean;
-  title: JSXElement;
+  maxWidth?: boolean;
+  title?: JSXElement;
   closeHandler: (event: any, reason?: string) => void;
   children: JSXElement;
 }> = (props) => {
@@ -21,6 +22,7 @@ const Dialog: Component<{
       PaperProps={{ sx: { minWidth: '300px' } }}
       fullScreen={props.fullScreen}
     >
+      <Show when={props.title}>
         <DialogTitle
           sx={{
             backgroundColor: 'rgba(14, 116, 144, 0.7)',
@@ -35,10 +37,12 @@ const Dialog: Component<{
           </IconButton>
           {props.title}
         </DialogTitle>
+      </Show>
       <DialogContent
         sx={{
           width: 'calc(100% - 60px)',
-          paddingBottom: '2000px',
+          paddingBottom:
+            props.maxWidth === undefined || props.maxWidth ? '2000px' : '2px',
         }}
       >
         {props.children}

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,8 +83,9 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
           </For>
         }
       />
-      <Show when={confirmDelete()}>
       <Alert
+        open={confirmDelete}
+        closeHandler={cancelDeleteHandler}
         severity='warning'
         icon={<QuestionMarkIcon />}
         action={
@@ -109,7 +111,6 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
       >
         Delete this track ?
       </Alert>
-      </Show>
     </>
   );
 };