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,24 +22,27 @@ const Dialog: Component<{
       PaperProps={{ sx: { minWidth: '300px' } }}
       fullScreen={props.fullScreen}
     >
-      <DialogTitle
+      <Show when={props.title}>
-        sx={{
+        <DialogTitle
-          backgroundColor: 'rgba(14, 116, 144, 0.7)',
+          sx={{
-          color: 'white',
+            backgroundColor: 'rgba(14, 116, 144, 0.7)',
-          clear: 'both',
+            color: 'white',
-          margin: '0',
+            clear: 'both',
-          paddingLeft: '0',
+            margin: '0',
-        }}
+            paddingLeft: '0',
-      >
+          }}
-        <IconButton onClick={props.closeHandler}>
+        >
-          <CloseIcon />
+          <IconButton onClick={props.closeHandler}>
-        </IconButton>
+            <CloseIcon />
-        {props.title}
+          </IconButton>
-      </DialogTitle>
+          {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,34 +83,34 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
           </For>
         }
       />
-      <Show when={confirmDelete()}>
+      <Alert
-        <Alert
+        open={confirmDelete}
-          severity='warning'
+        closeHandler={cancelDeleteHandler}
-          icon={<QuestionMarkIcon />}
+        severity='warning'
-          action={
+        icon={<QuestionMarkIcon />}
-            <>
+        action={
-              <Button
+          <>
-                color='error'
+            <Button
-                variant='contained'
+              color='error'
-                size='small'
+              variant='contained'
-                onClick={deleteHandler}
+              size='small'
-              >
+              onClick={deleteHandler}
-                YES
+            >
-              </Button>
+              YES
-              <Button
+            </Button>
-                color='primary'
+            <Button
-                variant='outlined'
+              color='primary'
-                size='small'
+              variant='outlined'
-                onclick={cancelDeleteHandler}
+              size='small'
-              >
+              onclick={cancelDeleteHandler}
-                NO
+            >
-              </Button>
+              NO
-            </>
+            </Button>
-          }
+          </>
-        >
+        }
-          Delete this track ?
+      >
-        </Alert>
+        Delete this track ?
-      </Show>
+      </Alert>
     </>
   );
 };