Codemods

src/app/AlignmentCard.js

@@ -279,7 +279,7 @@ function AlignmentCard({ className, alignment }) {
               aria-label="remove-alignment"
               title="Remove alignment"
             >
-              <IconButton onClick={alignment.remove}>
+              <IconButton onClick={alignment.remove} size="large">
                 <DeleteForeverIcon />
               </IconButton>
             </Tooltip>
@@ -288,7 +288,7 @@ function AlignmentCard({ className, alignment }) {
               aria-owns={anchorEl ? 'alignment-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 
@@ -394,7 +394,7 @@ function FinalAlignmentCard({ className, alignment }) {
               aria-owns={anchorEl ? 'alignment-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 

src/app/App.js

@@ -284,7 +284,7 @@ const App = () => {
               {TabItems}
             </Tabs>
             <Toolbar variant="dense" className={classes.Toolbar}>
-              <IconButton onClick={store.addRun}>
+              <IconButton onClick={store.addRun} size="large">
                 <IconAdd />
               </IconButton>
             </Toolbar>

src/app/AstralTreeCard.js

@@ -92,7 +92,7 @@ function AstralTreeCard({ className, astralTree }) {
         action={
           <div>
             <Tooltip aria-label="remove-astralTree" title="Remove input trees">
-              <IconButton onClick={astralTree.remove}>
+              <IconButton onClick={astralTree.remove} size="large">
                 <DeleteForeverIcon />
               </IconButton>
             </Tooltip>
@@ -101,7 +101,7 @@ function AstralTreeCard({ className, astralTree }) {
               aria-owns={anchorEl ? 'astralTree-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 

src/app/Model.js

@@ -79,12 +79,12 @@ const Model = ({ run }) => {
         <OptionSelect option={run.outGroup} />
         {run.haveRandomSeed ? (
           <TextField
+            variant="standard"
             helperText="Seed"
             title="Random seed"
             style={{ width: 60 }}
             value={run.randomSeed}
-            onChange={(e) => run.setRandomSeed(e.target.value)}
-          />
+            onChange={(e) => run.setRandomSeed(e.target.value)} />
         ) : null}
       </Box>
       <Box

src/app/Output.js

@@ -44,9 +44,10 @@ const Output = ({ run }) => {
   const haveResult = resultFilenames.length > 0;
 
   return (
-    <div className={classes.Output}>
+    (<div className={classes.Output}>
       <Box component="form" mt={1} mb={2} display="flex" flexDirection="column" className={classes.form} noValidate autoComplete="off">
         <TextField
+          variant="standard"
           id="output-dir"
           helperText="Select output directory"
           fullWidth
@@ -55,24 +56,25 @@ const Output = ({ run }) => {
           onClick={run.selectOutputDir}
           InputProps={{
             readOnly: true,
-          }}
-        />
+          }} />
         <TextField
+          variant="standard"
           id="output-name"
           helperText={run.outputNameNotice || "Select output name"}
           className={classes.formItem}
           value={run.outputName}
           placeholder={run.outputNamePlaceholder}
           onChange={e => run.setOutputName(e.target.value)}
-          error={!run.outputNameOk}
-        />
+          error={!run.outputNameOk} />
       </Box>
-
       <Box mt={1} display="flex" flexDirection="column" alignItems="stretch" className={classes.result}>
       { haveResult ? <Typography>Result for output id '{run.outputName}' </Typography> : null }
       { resultFilenames.map(filename =>
-        <Link key={filename} className={classes.resultFilenameRow}
-          onClick={() => run.openFile(join(run.outputDir, filename))}>
+        <Link
+          key={filename}
+          className={classes.resultFilenameRow}
+          onClick={() => run.openFile(join(run.outputDir, filename))}
+          underline="hover">
           <FileIcon/>
           <span className={classes.resultFilename}>{filename}</span>
         </Link>
@@ -83,7 +85,7 @@ const Output = ({ run }) => {
           <Button onClick={run.openOutputDir} variant="outlined">Open folder</Button>
         </Box>
       ) : null }
-    </div>
+    </div>)
   );
 };
 

src/app/PartitionEditor.js

@@ -150,7 +150,7 @@ function PartitionEditor({ alignment }) {
           />
         </form>
       </Box>
-      <Grid container spacing={1} justify="flex-end" sx={{ width: '100%' }}>
+      <Grid container spacing={1} justifyContent="flex-end" sx={{ width: '100%' }}>
         { partition.isDefault ? null : (
           <Grid item>
             <Button variant="outlined" title="Clear partition entries" onClick={partition.reset}>Reset</Button>

src/app/Raxml.js

@@ -73,22 +73,12 @@ class Raxml extends React.Component {
           <OptionSelect className={classes.formItem} option={run.binary} />
           <OptionSelect className={classes.formItem} option={run.numThreads} />
           {run.modelTestIsRunningOnAlignment ? (
-            <Button
-              size="small"
-              variant="outlined"
-              color="default"
-              onClick={run.cancelModeltestOnAlignment}
-            >
+            <Button size="small" variant="outlined" onClick={run.cancelModeltestOnAlignment}>
               Cancel modeltest
             </Button>
           ) : null}
           {run.running ? (
-            <Button
-              size="small"
-              variant="outlined"
-              color="default"
-              onClick={run.cancel}
-            >
+            <Button size="small" variant="outlined" onClick={run.cancel}>
               Cancel
             </Button>
           ) : null}
@@ -112,7 +102,7 @@ class Raxml extends React.Component {
               <IconButton
                 style={{ position: 'absolute', right: 0 }}
                 onClick={this.copyCommand}
-              >
+                size="large">
                 <FileCopyIcon />
               </IconButton>
             </Tooltip>

src/app/TreeCard.js

@@ -110,7 +110,7 @@ function TreeCard({ className, tree }) {
               aria-owns={anchorEl ? 'tree-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 

src/app/components/OptionCheck.js

@@ -11,7 +11,7 @@ const OptionCheck = observer(({ option, className }) => {
     return null;
   }
   return (
-    <FormControl title={option.hoverInfo}>
+    <FormControl variant="standard" title={option.hoverInfo}>
       <FormControlLabel
         className={className}
         control={

src/app/components/OptionSelect.js

@@ -16,6 +16,7 @@ const OptionSelect = observer(({ option, className }) => {
     // No options to change to, render as a text field instead.
     return (
       <TextField
+        variant="standard"
         id={option.title}
         helperText={option.title}
         className={className}
@@ -24,23 +25,22 @@ const OptionSelect = observer(({ option, className }) => {
         error={option.error}
         InputProps={{
           readOnly: true,
-        }}
-      />
-    )
+        }} />
+    );
   }
 
   return (
-    <FormControl className={className} title={option.hoverInfo}>
+    <FormControl variant="standard" className={className} title={option.hoverInfo}>
       <Select
+        variant="standard"
         value={option.value}
         onChange={(e) => option.setValue(e.target.value)}
         inputProps={{
           name: option.title,
           id: option.title,
         }}
         error={option.error}
-        multiple={option.multiple}
-      >
+        multiple={option.multiple}>
         {option.options.map(({ value, title }, index) => (
           <MenuItem key={index} value={value}>
             {title}

src/app/components/OptionTextField.js

@@ -9,6 +9,7 @@ const OptionTextField = observer(({ option, className }) => {
   }
   return (
     <TextField
+      variant="standard"
       id={option.title}
       helperText={option.title}
       title={option.hoverInfo}
@@ -17,8 +18,7 @@ const OptionTextField = observer(({ option, className }) => {
       value={option.value}
       placeholder={option.placeholder}
       onChange={(e) => option.setValue(e.target.value)}
-      error={option.haveError}
-    />
+      error={option.haveError} />
   );
 });
 

src/app/components/SnackbarMessage.js

@@ -73,7 +73,12 @@ function SnackbarMessage(props) {
         </span>
       }
       action={onClose ? [
-        <IconButton key="close" aria-label="close" color="inherit" onClick={onClose}>
+        <IconButton
+          key="close"
+          aria-label="close"
+          color="inherit"
+          onClick={onClose}
+          size="large">
           <CloseIcon className={classes.icon} />
         </IconButton>,
       ] : null }

src/app/theme/index.js

@@ -1,8 +1,8 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
 const darkTheme = {
   palette: {
-    type: 'dark',
+    mode: 'dark',
     primary: {
       background: 'hsl(29, 5%, 5%)',
       border: 'hsl(29, 80%, 38%)',
@@ -105,7 +105,7 @@ const darkTheme = {
 
 const lightTheme = {
   palette: {
-    type: 'light',
+    mode: 'light',
     primary: {
       background: 'hsl(29, 99%, 99%)',
       border: 'hsl(29, 80%, 87%)',
@@ -208,6 +208,6 @@ const lightTheme = {
 };
 
 export default {
-  light: createTheme(lightTheme),
-  dark: createTheme(darkTheme)
+  light: createTheme(adaptV4Theme(lightTheme)),
+  dark: createTheme(adaptV4Theme(darkTheme))
 };