Add titleNode prop to @jbrowse/core/ui/Dialog (#5039)

Author: cmdcolin

packages/core/ui/Dialog.tsx

@@ -27,33 +27,40 @@ const useStyles = makeStyles()(theme => ({
     top: theme.spacing(1),
     color: theme.palette.grey[500],
   },
+  errorBox: {
+    width: 800,
+    margin: 40,
+  },
 }))
 
 function DialogError({ error }: { error: unknown }) {
+  const { classes } = useStyles()
   return (
-    <div style={{ width: 800, margin: 40 }}>
+    <div className={classes.errorBox}>
       <ErrorMessage error={error} />
     </div>
   )
 }
 
 interface Props extends DialogProps {
   header?: React.ReactNode
+  titleNode?: React.ReactNode
 }
 
 const Dialog = observer(function (props: Props) {
   const { classes } = useStyles()
-  const { title, header, children, onClose } = props
+  const { titleNode, ...rest } = props
+  const { title, header, children, onClose } = rest
   const theme = useTheme()
 
   return (
-    <MUIDialog {...props}>
+    <MUIDialog {...rest}>
       <ScopedCssBaseline>
         {isValidElement(header) ? (
           header
         ) : (
           <DialogTitle>
-            <SanitizedHTML html={title || ''} />
+            {titleNode || <SanitizedHTML html={title || ''} />}
             {onClose ? (
               <IconButton
                 className={classes.closeButton}