removed mui v4

react/shared/elements/data-table.css

@@ -48,4 +48,9 @@
     margin-left: 4px;
     margin-right: 4px;
     cursor: pointer;
+}
+
+.data-table-button-bar button {
+    margin-right: 8px;
+    margin-top: 8px;
 }

react/shared/elements/data-table.js

@@ -1,14 +1,11 @@
-import {Table, TableBody, TableCell, TableHead, TableRow} from "@material-ui/core";
-import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
-import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import React, {useCallback, useContext, useEffect, useState} from "react";
 import "./data-table.css";
 import {LocaleContext} from "../locale";
 import clsx from "clsx";
-import {Box, IconButton, Select, TextField} from "@mui/material";
+import {Box, Button, Select, TextField, Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
 import {formatDate, formatDateTime} from "../util";
-import CachedIcon from "@material-ui/icons/Cached";
 import {isNumber} from "chart.js/helpers";
+import {ArrowUpward, ArrowDownward, Refresh} from "@mui/icons-material";
 
 
 export function DataTable(props) {
@@ -18,7 +15,8 @@ export function DataTable(props) {
         fetchData, onClick, onFilter,
         defaultSortColumn, defaultSortOrder,
         forceReload,
-        title, ...other } = props;
+        buttons,
+        ...other } = props;
 
     const {translate: L} = useContext(LocaleContext);
 
@@ -84,7 +82,7 @@ export function DataTable(props) {
                                       onClick={() => onChangeSort(index, column)}
                                       align={column.align}>
                 {sortColumn === index ?
-                    (sortAscending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />) :
+                    (sortAscending ? <ArrowUpward /> : <ArrowDownward />) :
                     <></>
                 }
                 {column.renderHead(index)}
@@ -124,17 +122,13 @@ export function DataTable(props) {
     }
 
     return <Box position={"relative"}>
-            {title ?
-                <h3>
-                    {fetchData ?
-                        <IconButton onClick={() => onFetchData(true)} title={L("general.reload")}>
-                            <CachedIcon/>&nbsp;
-                        </IconButton>
-                        : <></>
-                    }
-                    {title}
-                </h3> : <></>
-            }
+            <Box textAlign={"left"} mb={1} className={"data-table-button-bar"}>
+                <Button startIcon={<Refresh />} size={"small"} variant={"outlined"}
+                    onClick={() => onFetchData(true)}>
+                    {L("general.reload")}
+                </Button>
+                {(buttons || []).map(b => <Button size={"small"} variant={"outlined"} {...b} />)}
+            </Box>
             <Table className={clsx("data-table", className)} size="small" {...other}>
                 <TableHead>
                     <TableRow>

react/shared/elements/language-selection.js

@@ -1,8 +1,8 @@
 import React, {useCallback, useContext, useState} from 'react';
-import {Box} from "@material-ui/core";
-import {makeStyles} from "@material-ui/core/styles";
+import {Box, Button} from "@mui/material";
 import {LocaleContext} from "shared/locale";
 
+/*
 const useStyles = makeStyles((theme) => ({
     languageFlag: {
         margin: theme.spacing(0.2),
@@ -10,11 +10,11 @@ const useStyles = makeStyles((theme) => ({
         border: 0,
     }
 }));
+*/
 
 export default function LanguageSelection(props) {
 
     const api = props.api;
-    const classes = useStyles();
     const [languages, setLanguages] = useState(null);
     const {translate: L, setLanguageByCode} = useContext(LocaleContext);
 
@@ -39,10 +39,10 @@ export default function LanguageSelection(props) {
     } else {
         for (const language of Object.values(languages)) {
             let key = `lang-${language.code}`;
-            flags.push(<button type={"button"} title={language.name} onClick={() => onSetLanguage(language.code)}
-                               key={key} className={classes.languageFlag} >
+            flags.push(<Button type={"button"} title={language.name} onClick={() => onSetLanguage(language.code)}
+                               key={key} >
                 <img alt={key} src={`/img/icons/lang/${language.code}.gif`} />
-            </button>);
+            </Button>);
         }
     }