lint(gui): use alert and typography blocks

gui/src/components/ImageHistory.tsx

@@ -1,5 +1,5 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
-import { Grid } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import { useContext } from 'react';
 import * as React from 'react';
 import { useStore } from 'zustand';
@@ -25,7 +25,7 @@ export function ImageHistory() {
     children.push(...history.map((item) => <ImageCard key={item.output.key} value={item} onDelete={removeHistory} />));
   } else {
     if (doesExist(loading) === false) {
-      children.push(<div>No results. Press Generate.</div>);
+      children.push(<Typography>No results. Press Generate.</Typography>);
     }
   }
 

gui/src/components/OnnxError.tsx

@@ -20,7 +20,6 @@ export function OnnxError(props: OnnxErrorProps) {
       <Box sx={{ my: 4 }}>
         <Stack spacing={2}>
           {props.children}
-
           <Typography variant='body1'>
             This is a web UI for running ONNX models with GPU acceleration or in software, running locally or on a
             remote machine.

gui/src/components/input/ImageInput.tsx

@@ -1,6 +1,6 @@
 import { doesExist, Maybe, mustDefault, mustExist } from '@apextoaster/js-utils';
 import { PhotoCamera } from '@mui/icons-material';
-import { Button, Stack } from '@mui/material';
+import { Button, Stack, Typography } from '@mui/material';
 import * as React from 'react';
 
 export interface ImageInputProps {
@@ -28,13 +28,13 @@ export function ImageInput(props: ImageInputProps) {
         }}
       />;
     } else {
-      return <div>Please select an image.</div>;
+      return <Typography>Please select an image.</Typography>;
     }
   }
 
   return <Stack direction='row' spacing={2}>
     <Stack>
-      <Button component='label' startIcon={<PhotoCamera />}>
+      <Button component='label' startIcon={<PhotoCamera />} variant='outlined'>
         {props.label}
         <input
           hidden

gui/src/components/input/QueryList.tsx

@@ -1,5 +1,5 @@
 import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { Alert, FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material';
 import * as React from 'react';
 import { UseQueryResult } from 'react-query';
 
@@ -42,18 +42,18 @@ export function QueryList<T>(props: QueryListProps<T>) {
 
   if (result.status === 'error') {
     if (result.error instanceof Error) {
-      return <div>Error: {result.error.message}</div>;
+      return <Alert severity='error'>Error: {result.error.message}</Alert>;
     } else {
-      return <div>Unknown Error</div>;
+      return <Alert severity='error'>Unknown Error</Alert>;
     }
   }
 
   if (result.status === 'loading') {
-    return <div>Loading...</div>;
+    return <Typography>Loading...</Typography>;
   }
 
   if (result.status === 'idle') {
-    return <div>Idle?</div>;
+    return <Typography>Idle?</Typography>;
   }
 
   // else: success