Migrate SUIR components to MUI.

components/frontend/package.json

@@ -12,18 +12,15 @@
         "@mui/x-date-pickers": "^7.23.6",
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.13",
-        "fomantic-ui-css": "^2.9.3",
         "history": "^5.3.0",
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
-        "react-datepicker": "^7.6.0",
         "react-dom": "^18.3.1",
         "react-grid-layout": "^1.5.0",
         "react-hash-link": "1.0.2",
         "react-is": "^18.3.1",
         "react-timeago": "^7.2.0",
         "react-toastify": "^11.0.3",
-        "semantic-ui-react": "^2.1.5",
         "victory": "^37.3.6"
     },
     "scripts": {

components/frontend/src/App.css

@@ -1,21 +1,3 @@
-.MainContainer {
-    flex: 1;
-    margin-top: 6em;
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-@media print {
-    .MainContainer {
-        margin-top: 0em;
-    }
-}
-
 html {
-    scroll-padding-top: 163px; /* height of sticky header */
-}
-
-:root {
-    --inverted-menu-background-color: #1b1c1d;
-    --selection-color: #2185d0;
+    scroll-padding-top: 176px; /* height of sticky header */
 }

components/frontend/src/App.js

@@ -1,6 +1,7 @@
 import "./App.css"
 
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { CssBaseline } from "@mui/material"
+import { ThemeProvider } from "@mui/material/styles"
 import { Action } from "history"
 import history from "history/browser"
 import { Component } from "react"
@@ -11,16 +12,10 @@ import { nr_measurements_api } from "./api/measurement"
 import { get_report, get_reports_overview } from "./api/report"
 import { AppUI } from "./AppUI"
 import { registeredURLSearchParams } from "./hooks/url_search_query"
+import { theme } from "./theme"
 import { isValidDate_YYYYMMDD, toISODateStringInCurrentTZ } from "./utils"
 import { showConnectionMessage, showMessage } from "./widgets/toast"
 
-const theme = createTheme({
-    colorSchemes: {
-        dark: true, // Add a dark theme (light theme is available by default)
-    },
-    components: { MuiTooltip: { defaultProps: { arrow: true }, styleOverrides: { tooltip: { fontSize: "1em" } } } },
-})
-
 class App extends Component {
     constructor(props) {
         super(props)
@@ -245,6 +240,7 @@ class App extends Component {
     render() {
         return (
             <ThemeProvider theme={theme}>
+                <CssBaseline enableColorScheme />
                 <AppUI
                     changed_fields={this.changed_fields}
                     dataModel={this.state.dataModel}