diff --git a/components/frontend/package-lock.json b/components/frontend/package-lock.json index e36fecd60b..b6042a0039 100644 --- a/components/frontend/package-lock.json +++ b/components/frontend/package-lock.json @@ -16,18 +16,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.2", - "semantic-ui-react": "^2.1.5", "victory": "^37.3.5" }, "devDependencies": { @@ -2486,21 +2483,6 @@ "@floating-ui/utils": "^0.2.8" } }, - "node_modules/@floating-ui/react": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.3.tgz", - "integrity": "sha512-CLHnes3ixIFFKVQDdICjel8muhFLOBdQH7fgtHNPY8UbCNqbeKZ262G7K66lGQOUQWWnYocf7ZbUsLJgGfsLHg==", - "license": "MIT", - "dependencies": { - "@floating-ui/react-dom": "^2.1.2", - "@floating-ui/utils": "^0.2.9", - "tabbable": "^6.0.0" - }, - "peerDependencies": { - "react": ">=17.0.0", - "react-dom": ">=17.0.0" - } - }, "node_modules/@floating-ui/react-dom": { "version": "2.1.2", "license": "MIT", @@ -2513,42 +2495,7 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.9", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", - "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", - "license": "MIT" - }, - "node_modules/@fluentui/react-component-event-listener": { - "version": "0.63.1", - "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz", - "integrity": "sha512-gSMdOh6tI3IJKZFqxfQwbTpskpME0CvxdxGM2tdglmf6ZPVDi0L4+KKIm+2dN8nzb8Ya1A8ZT+Ddq0KmZtwVQg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.10.4" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, - "node_modules/@fluentui/react-component-ref": { - "version": "0.63.1", - "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz", - "integrity": "sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.10.4", - "react-is": "^16.6.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, - "node_modules/@fluentui/react-component-ref/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "version": "0.2.8", "license": "MIT" }, "node_modules/@humanfs/core": { @@ -3708,20 +3655,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@semantic-ui-react/event-stack": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.3.tgz", - "integrity": "sha512-FdTmJyWvJaYinHrKRsMLDrz4tTMGdFfds299Qory53hBugiDvGC0tEJf+cHsi5igDwWb/CLOgOiChInHwq8URQ==", - "license": "MIT", - "dependencies": { - "exenv": "^1.2.2", - "prop-types": "^15.6.2" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@sinclair/typebox": { "version": "0.24.51", "dev": true, @@ -6865,6 +6798,8 @@ "node_modules/date-fns": { "version": "3.6.0", "license": "MIT", + "optional": true, + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/kossnocorp" @@ -8198,12 +8133,6 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, - "node_modules/exenv": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==", - "license": "BSD-3-Clause" - }, "node_modules/exit": { "version": "0.1.2", "dev": true, @@ -8551,15 +8480,6 @@ } } }, - "node_modules/fomantic-ui-css": { - "version": "2.9.3", - "resolved": "https://registry.npmjs.org/fomantic-ui-css/-/fomantic-ui-css-2.9.3.tgz", - "integrity": "sha512-7bM6p3QRpfZFofg7Fd3crzox2E/nBsPyyWDN+N4lnTjNMxgKltSaXJTfhLoK5xBA+wEoNtcmm6w6FQ5Drj+27A==", - "license": "MIT", - "dependencies": { - "jquery": "^3.4.0" - } - }, "node_modules/for-each": { "version": "0.3.3", "dev": true, @@ -10960,12 +10880,6 @@ "jiti": "bin/jiti.js" } }, - "node_modules/jquery": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", - "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", - "license": "MIT" - }, "node_modules/js-tokens": { "version": "4.0.0", "license": "MIT" @@ -11169,12 +11083,6 @@ "node": ">=4.0" } }, - "node_modules/keyboard-key": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz", - "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==", - "license": "MIT" - }, "node_modules/keyv": { "version": "4.5.4", "dev": true, @@ -11322,12 +11230,6 @@ "version": "4.17.21", "license": "MIT" }, - "node_modules/lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", - "license": "MIT" - }, "node_modules/lodash.debounce": { "version": "4.0.8", "dev": true, @@ -13767,21 +13669,6 @@ "node": ">=14" } }, - "node_modules/react-datepicker": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.6.0.tgz", - "integrity": "sha512-9cQH6Z/qa4LrGhzdc3XoHbhrxNcMi9MKjZmYgF/1MNNaJwvdSjv3Xd+jjvrEEbKEf71ZgCA3n7fQbdwd70qCRw==", - "license": "MIT", - "dependencies": { - "@floating-ui/react": "^0.27.0", - "clsx": "^2.1.1", - "date-fns": "^3.6.0" - }, - "peerDependencies": { - "react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc", - "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "dev": true, @@ -13903,21 +13790,6 @@ "react": "*" } }, - "node_modules/react-popper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", - "license": "MIT", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-refresh": { "version": "0.11.0", "dev": true, @@ -15209,40 +15081,6 @@ "node": ">=10" } }, - "node_modules/semantic-ui-react": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.1.5.tgz", - "integrity": "sha512-nIqmmUNpFHfovEb+RI2w3E2/maZQutd8UIWyRjf1SLse+XF51hI559xbz/sLN3O6RpLjr/echLOOXwKCirPy3Q==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.10.5", - "@fluentui/react-component-event-listener": "~0.63.0", - "@fluentui/react-component-ref": "~0.63.0", - "@popperjs/core": "^2.6.0", - "@semantic-ui-react/event-stack": "^3.1.3", - "clsx": "^1.1.1", - "keyboard-key": "^1.1.0", - "lodash": "^4.17.21", - "lodash-es": "^4.17.21", - "prop-types": "^15.7.2", - "react-is": "^16.8.6 || ^17.0.0 || ^18.0.0", - "react-popper": "^2.3.0", - "shallowequal": "^1.1.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/semantic-ui-react/node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/semver": { "version": "6.3.1", "dev": true, @@ -15422,12 +15260,6 @@ "dev": true, "license": "ISC" }, - "node_modules/shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "license": "MIT" - }, "node_modules/shebang-command": { "version": "2.0.0", "dev": true, @@ -16275,12 +16107,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/tabbable": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", - "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", - "license": "MIT" - }, "node_modules/tailwindcss": { "version": "3.4.14", "dev": true, @@ -17377,15 +17203,6 @@ "makeerror": "1.0.12" } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.2", "dev": true, diff --git a/components/frontend/package.json b/components/frontend/package.json index 7b1db0dab9..094225b024 100644 --- a/components/frontend/package.json +++ b/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.2", - "semantic-ui-react": "^2.1.5", "victory": "^37.3.5" }, "scripts": { diff --git a/components/frontend/src/App.css b/components/frontend/src/App.css index 610c057fed..95ccba6113 100644 --- a/components/frontend/src/App.css +++ b/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 */ } diff --git a/components/frontend/src/App.js b/components/frontend/src/App.js index 6ee06731d5..db92afcc38 100644 --- a/components/frontend/src/App.js +++ b/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 ( + - - - - - } - settings={settings} - setUIMode={setMode} - uiMode={mode} - /> - - - - - - -