diff --git a/webclient/package-lock.json b/webclient/package-lock.json index 67c26ab5..bbc17c53 100644 --- a/webclient/package-lock.json +++ b/webclient/package-lock.json @@ -1354,11 +1354,147 @@ "postcss-value-parser": "^4.2.0" } }, + "@emotion/babel-plugin": { + "version": "11.7.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz", + "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "dependencies": { + "babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "requires": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + } + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, + "@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "@emotion/is-prop-valid": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz", + "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/react": { + "version": "11.8.2", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.8.2.tgz", + "integrity": "sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" + }, + "@emotion/styled": { + "version": "11.8.1", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz", + "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/is-prop-valid": "^1.1.2", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.1.0" + } + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@eslint/eslintrc": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.0.tgz", @@ -1823,92 +1959,142 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, - "@material-ui/core": { - "version": "4.12.3", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz", - "integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==", + "@mui/base": { + "version": "5.0.0-alpha.72", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.72.tgz", + "integrity": "sha512-WCAooa9eqbsC68LhyKtDBRumH4hV1eRZ0A3SDKFHSwYG9fCOdsFv/H1dIYRJM0rwD45bMnuDiG3Qmx7YsTiptw==", "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.4", - "@material-ui/system": "^4.12.1", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.2", - "@types/react-transition-group": "^4.2.0", - "clsx": "^1.0.4", + "@babel/runtime": "^7.17.2", + "@emotion/is-prop-valid": "^1.1.2", + "@mui/utils": "^5.4.4", + "@popperjs/core": "^2.11.3", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + } + }, + "@mui/icons-material": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.5.1.tgz", + "integrity": "sha512-40f68p5+Yhq3dCn3QYHqQt5RETPyR3AkDw+fma8PtcjqvZ+d+jF84kFmT6NqwA3he7TlwluEtkyAmPzUE4uPdA==", + "requires": { + "@babel/runtime": "^7.17.2" + } + }, + "@mui/material": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.5.1.tgz", + "integrity": "sha512-bJSYgymgSZ7btPTNnWFrr2EmGoVQc4A/0WLfP/ESY2dxnhnbFDwt7twiOKmJp3u84YXriEDt5v9EZQLf7A+y0Q==", + "requires": { + "@babel/runtime": "^7.17.2", + "@mui/base": "5.0.0-alpha.72", + "@mui/system": "^5.5.1", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.4.4", + "@types/react-transition-group": "^4.4.4", + "clsx": "^1.1.1", + "csstype": "^3.0.11", "hoist-non-react-statics": "^3.3.2", - "popper.js": "1.16.1-lts", "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0", - "react-transition-group": "^4.4.0" + "react-is": "^17.0.2", + "react-transition-group": "^4.4.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + } } }, - "@material-ui/icons": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", - "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "@mui/private-theming": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.4.4.tgz", + "integrity": "sha512-V/gxttr6736yJoU9q+4xxXsa0K/w9Hn9pg99zsOHt7i/O904w2CX5NHh5WqDXtoUzVcayLF0RB17yr6l79CE+A==", "requires": { - "@babel/runtime": "^7.4.4" + "@babel/runtime": "^7.17.2", + "@mui/utils": "^5.4.4", + "prop-types": "^15.7.2" } }, - "@material-ui/lab": { - "version": "4.0.0-alpha.60", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz", - "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==", + "@mui/styled-engine": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.4.4.tgz", + "integrity": "sha512-AKx3rSgB6dmt5f7iP4K18mLFlE5/9EfJe/5EH9Pyqez8J/CPkTgYhJ/Va6qtlrcunzpui+uG/vfuf04yAZekSg==", "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.2", - "clsx": "^1.0.4", - "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" + "@babel/runtime": "^7.17.2", + "@emotion/cache": "^11.7.1", + "prop-types": "^15.7.2" } }, - "@material-ui/styles": { - "version": "4.11.4", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", - "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==", + "@mui/styles": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.5.1.tgz", + "integrity": "sha512-mxwfjwTwPE+r7/U4Nn/QKPzJ2cIqmRuK3xu44Us613D5jqPeB/ftOsAy0OpCYAwpkUxmQIrRQiilQ8zE+f4rBQ==", "requires": { - "@babel/runtime": "^7.4.4", + "@babel/runtime": "^7.17.2", "@emotion/hash": "^0.8.0", - "@material-ui/types": "5.1.0", - "@material-ui/utils": "^4.11.2", - "clsx": "^1.0.4", - "csstype": "^2.5.2", + "@mui/private-theming": "^5.4.4", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.4.4", + "clsx": "^1.1.1", + "csstype": "^3.0.11", "hoist-non-react-statics": "^3.3.2", - "jss": "^10.5.1", - "jss-plugin-camel-case": "^10.5.1", - "jss-plugin-default-unit": "^10.5.1", - "jss-plugin-global": "^10.5.1", - "jss-plugin-nested": "^10.5.1", - "jss-plugin-props-sort": "^10.5.1", - "jss-plugin-rule-value-function": "^10.5.1", - "jss-plugin-vendor-prefixer": "^10.5.1", + "jss": "^10.8.2", + "jss-plugin-camel-case": "^10.8.2", + "jss-plugin-default-unit": "^10.8.2", + "jss-plugin-global": "^10.8.2", + "jss-plugin-nested": "^10.8.2", + "jss-plugin-props-sort": "^10.8.2", + "jss-plugin-rule-value-function": "^10.8.2", + "jss-plugin-vendor-prefixer": "^10.8.2", "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + } } }, - "@material-ui/system": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz", - "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==", + "@mui/system": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.5.1.tgz", + "integrity": "sha512-2hynI4hN8304hOCT8sc4knJviwUUYJ7XK3mXwQ0nagVGOPnWSOad/nYADm7K0vdlCeUXLIbDbe7oNN3Kaiu2kA==", "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.11.2", - "csstype": "^2.5.2", + "@babel/runtime": "^7.17.2", + "@mui/private-theming": "^5.4.4", + "@mui/styled-engine": "^5.4.4", + "@mui/types": "^7.1.3", + "@mui/utils": "^5.4.4", + "clsx": "^1.1.1", + "csstype": "^3.0.11", "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" + } } }, - "@material-ui/types": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", - "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + "@mui/types": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz", + "integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==" }, - "@material-ui/utils": { - "version": "4.11.2", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", - "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "@mui/utils": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.4.4.tgz", + "integrity": "sha512-hfYIXEuhc2mXMGN5nUPis8beH6uE/zl3uMWJcyHX0/LN/+QxO9zhYuV6l8AsAaphHFyS/fBv0SW3Nid7jw5hKQ==", "requires": { - "@babel/runtime": "^7.4.4", + "@babel/runtime": "^7.17.2", + "@types/prop-types": "^15.7.4", + "@types/react-is": "^16.7.1 || ^17.0.0", "prop-types": "^15.7.2", - "react-is": "^16.8.0 || ^17.0.0" + "react-is": "^17.0.2" } }, "@nodelib/fs.scandir": { @@ -1957,6 +2143,11 @@ } } }, + "@popperjs/core": { + "version": "2.11.4", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz", + "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==" + }, "@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -2478,16 +2669,6 @@ "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz", "integrity": "sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==" }, - "@types/material-ui": { - "version": "0.21.12", - "resolved": "https://registry.npmjs.org/@types/material-ui/-/material-ui-0.21.12.tgz", - "integrity": "sha512-rBY3iOr5LISKDLAYo3229R79xIPPKSOL2c7FzAFn5dUj38Oe7rQldYedHWsYmkJUeboE9Ipad7ppyJwBzXxrMw==", - "dev": true, - "requires": { - "@types/react": "*", - "@types/react-addons-linked-state-mixin": "*" - } - }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -2545,15 +2726,6 @@ } } }, - "@types/react-addons-linked-state-mixin": { - "version": "0.14.22", - "resolved": "https://registry.npmjs.org/@types/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-0.14.22.tgz", - "integrity": "sha512-DF9utM6VjuIaY388R6XWWDs7CIDTH7on1k1yR+hqaL/T4/OqSCW5uij28APq9KI82CZf0/qtBJI+pjvXcOh0kQ==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/react-dom": { "version": "17.0.13", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.13.tgz", @@ -2562,6 +2734,14 @@ "@types/react": "*" } }, + "@types/react-is": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz", + "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-redux": { "version": "7.1.23", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.23.tgz", @@ -4364,9 +4544,9 @@ } }, "csstype": { - "version": "2.6.20", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", - "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz", + "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==" }, "damerau-levenshtein": { "version": "1.0.8", @@ -5630,6 +5810,11 @@ "pkg-dir": "^4.1.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -8308,11 +8493,6 @@ } } }, - "popper.js": { - "version": "1.16.1-lts", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", - "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" - }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -10274,6 +10454,11 @@ "postcss-selector-parser": "^6.0.4" } }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/webclient/package.json b/webclient/package.json index 198c6323..a637d26b 100644 --- a/webclient/package.json +++ b/webclient/package.json @@ -3,10 +3,11 @@ "version": "1.0.0", "private": true, "dependencies": { - "@material-ui/core": "^4.12.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/lab": "^4.0.0-alpha.60", - "@material-ui/styles": "^4.11.4", + "@emotion/react": "^11.8.2", + "@emotion/styled": "^11.8.1", + "@mui/icons-material": "^5.5.1", + "@mui/material": "^5.5.1", + "@mui/styles": "^5.5.1", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "crypto-js": "^4.1.1", @@ -71,10 +72,10 @@ }, "devDependencies": { "@babel/core": "^7.17.5", + "@mui/types": "^7.1.3", "@types/jest": "27.4.1", "@types/jquery": "^3.5.14", "@types/lodash": "^4.14.179", - "@types/material-ui": "^0.21.12", "@types/node": "17.0.21", "@types/prop-types": "^15.7.4", "@types/react": "17.0.39", diff --git a/webclient/prebuild.js b/webclient/prebuild.js index 79e37de4..de47b4ea 100644 --- a/webclient/prebuild.js +++ b/webclient/prebuild.js @@ -79,12 +79,11 @@ async function createI18NDefault() { if (acc[key]) { throw new Error(`i18n key collision: ${key}\n${JSON.stringify(json)}`); } + + acc[key] = json[key]; }); - return { - ...acc, - ...json, - }; + return acc; }, {}); fse.outputFile(i18nDefaultFile, JSON.stringify(rollup)); diff --git a/webclient/src/components/CheckboxField/CheckboxField.tsx b/webclient/src/components/CheckboxField/CheckboxField.tsx index 62846706..56268748 100644 --- a/webclient/src/components/CheckboxField/CheckboxField.tsx +++ b/webclient/src/components/CheckboxField/CheckboxField.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Checkbox from '@material-ui/core/Checkbox'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; const CheckboxField = (props) => { const { input: { value, onChange }, label, ...args } = props; diff --git a/webclient/src/components/CountryDropdown/CountryDropdown.tsx b/webclient/src/components/CountryDropdown/CountryDropdown.tsx index 9ac6c37f..09b1cf71 100644 --- a/webclient/src/components/CountryDropdown/CountryDropdown.tsx +++ b/webclient/src/components/CountryDropdown/CountryDropdown.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; -import { Select, MenuItem } from '@material-ui/core'; -import FormControl from '@material-ui/core/FormControl'; -import InputLabel from '@material-ui/core/InputLabel'; +import { Select, MenuItem } from '@mui/material'; +import FormControl from '@mui/material/FormControl'; +import InputLabel from '@mui/material/InputLabel'; import { useTranslation } from 'react-i18next'; import { useLocaleSort } from 'hooks'; @@ -21,7 +21,7 @@ const CountryDropdown = ({ input: { onChange } }) => { const sortedCountries = useLocaleSort(countryCodes, translateCountry); return ( - + Country { {this.props.bottom} - + {this.props.side} diff --git a/webclient/src/components/Toast/Toast.tsx b/webclient/src/components/Toast/Toast.tsx index e4bb6eb5..4ef8a3ca 100644 --- a/webclient/src/components/Toast/Toast.tsx +++ b/webclient/src/components/Toast/Toast.tsx @@ -1,10 +1,10 @@ import * as React from 'react' import ReactDOM from 'react-dom' -import Alert, { AlertProps } from '@material-ui/lab/Alert'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import Slide, { SlideProps } from '@material-ui/core/Slide'; -import Snackbar from '@material-ui/core/Snackbar'; +import Alert, { AlertProps } from '@mui/material/Alert'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import Slide, { SlideProps } from '@mui/material/Slide'; +import Snackbar from '@mui/material/Snackbar'; const iconMapping = { success: diff --git a/webclient/src/components/UserDisplay/UserDisplay.tsx b/webclient/src/components/UserDisplay/UserDisplay.tsx index c0d965f9..9c45a0f5 100644 --- a/webclient/src/components/UserDisplay/UserDisplay.tsx +++ b/webclient/src/components/UserDisplay/UserDisplay.tsx @@ -3,8 +3,8 @@ import React, { Component } from "react"; import { connect } from 'react-redux'; import { NavLink, generatePath } from 'react-router-dom'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; import { Images } from 'images/Images'; import { SessionService } from 'api'; diff --git a/webclient/src/containers/Account/Account.tsx b/webclient/src/containers/Account/Account.tsx index 395b10d5..dde2fabe 100644 --- a/webclient/src/containers/Account/Account.tsx +++ b/webclient/src/containers/Account/Account.tsx @@ -3,9 +3,9 @@ import React, { Component } from "react"; import { useTranslation } from 'react-i18next'; import { connect } from 'react-redux'; -import Button from '@material-ui/core/Button'; -import ListItem from '@material-ui/core/ListItem'; -import Paper from '@material-ui/core/Paper'; +import Button from '@mui/material/Button'; +import ListItem from '@mui/material/ListItem'; +import Paper from '@mui/material/Paper'; import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'components'; import { AuthenticationService, SessionService } from 'api'; diff --git a/webclient/src/containers/App/AppShell.tsx b/webclient/src/containers/App/AppShell.tsx index beec032e..3e9916c9 100644 --- a/webclient/src/containers/App/AppShell.tsx +++ b/webclient/src/containers/App/AppShell.tsx @@ -1,7 +1,7 @@ import { Component, Suspense } from 'react'; import { Provider } from 'react-redux'; import { MemoryRouter as Router } from 'react-router-dom'; -import CssBaseline from '@material-ui/core/CssBaseline'; +import CssBaseline from '@mui/material/CssBaseline'; import { store } from 'store'; import { Header } from 'components'; import Routes from './AppShellRoutes'; diff --git a/webclient/src/containers/Initialize/Initialize.tsx b/webclient/src/containers/Initialize/Initialize.tsx index 0eb44b05..5760e06c 100644 --- a/webclient/src/containers/Initialize/Initialize.tsx +++ b/webclient/src/containers/Initialize/Initialize.tsx @@ -2,8 +2,8 @@ import { useState } from 'react'; import { useTranslation, Trans } from 'react-i18next'; import { connect } from 'react-redux'; import { Navigate } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; +import makeStyles from '@mui/styles/makeStyles'; +import Typography from '@mui/material/Typography'; import { Images } from 'images'; import { ServerSelectors } from 'store'; diff --git a/webclient/src/containers/Login/Login.tsx b/webclient/src/containers/Login/Login.tsx index 613a228f..6f255358 100644 --- a/webclient/src/containers/Login/Login.tsx +++ b/webclient/src/containers/Login/Login.tsx @@ -2,10 +2,10 @@ import { useState, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { connect } from 'react-redux'; import { Navigate } from 'react-router-dom'; -import { makeStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; +import makeStyles from '@mui/styles/makeStyles'; +import Button from '@mui/material/Button'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; import { AuthenticationService } from 'api'; import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from 'dialogs'; diff --git a/webclient/src/containers/Logs/LogResults.tsx b/webclient/src/containers/Logs/LogResults.tsx index 84e4ce45..06abdbce 100644 --- a/webclient/src/containers/Logs/LogResults.tsx +++ b/webclient/src/containers/Logs/LogResults.tsx @@ -1,17 +1,17 @@ import React from 'react'; import * as _ from 'lodash'; -import AppBar from '@material-ui/core/AppBar'; -import Box from '@material-ui/core/Box'; -import Paper from '@material-ui/core/Paper'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import Tab from '@material-ui/core/Tab'; -import Tabs from '@material-ui/core/Tabs'; -import Typography from '@material-ui/core/Typography'; +import AppBar from '@mui/material/AppBar'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Tab from '@mui/material/Tab'; +import Tabs from '@mui/material/Tabs'; +import Typography from '@mui/material/Typography'; import './LogResults.css'; diff --git a/webclient/src/containers/Room/Games.tsx b/webclient/src/containers/Room/Games.tsx index f5c643e0..67a9239d 100644 --- a/webclient/src/containers/Room/Games.tsx +++ b/webclient/src/containers/Room/Games.tsx @@ -3,13 +3,13 @@ import React, { Component } from "react"; import { connect } from 'react-redux'; import * as _ from 'lodash'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Tooltip from '@material-ui/core/Tooltip'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Tooltip from '@mui/material/Tooltip'; // import { RoomsService } from "AppShell/common/services"; diff --git a/webclient/src/containers/Room/OpenGames.tsx b/webclient/src/containers/Room/OpenGames.tsx index be134ecb..49d4d250 100644 --- a/webclient/src/containers/Room/OpenGames.tsx +++ b/webclient/src/containers/Room/OpenGames.tsx @@ -3,13 +3,13 @@ import React, { Component } from "react"; import { connect } from 'react-redux'; import * as _ from 'lodash'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Tooltip from '@material-ui/core/Tooltip'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import TableSortLabel from '@mui/material/TableSortLabel'; +import Tooltip from '@mui/material/Tooltip'; // import { RoomsService } from "AppShell/common/services"; diff --git a/webclient/src/containers/Room/Room.tsx b/webclient/src/containers/Room/Room.tsx index 6a1a71c8..a0c81703 100644 --- a/webclient/src/containers/Room/Room.tsx +++ b/webclient/src/containers/Room/Room.tsx @@ -2,8 +2,8 @@ import React, { useEffect } from 'react'; import { connect } from 'react-redux'; import { useNavigate, useParams, generatePath } from 'react-router-dom'; -import ListItem from '@material-ui/core/ListItem'; -import Paper from '@material-ui/core/Paper'; +import ListItem from '@mui/material/ListItem'; +import Paper from '@mui/material/Paper'; import { RoomsService } from 'api'; import { ScrollToBottomOnChanges, ThreePaneLayout, UserDisplay, VirtualList, AuthGuard } from 'components'; diff --git a/webclient/src/containers/Server/Rooms.tsx b/webclient/src/containers/Server/Rooms.tsx index 26f4eacc..517f2438 100644 --- a/webclient/src/containers/Server/Rooms.tsx +++ b/webclient/src/containers/Server/Rooms.tsx @@ -3,12 +3,12 @@ import React from "react"; import { generatePath, useNavigate } from 'react-router-dom'; import * as _ from 'lodash'; -import Button from '@material-ui/core/Button'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; +import Button from '@mui/material/Button'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; import { RoomsService } from 'api'; diff --git a/webclient/src/containers/Server/Server.tsx b/webclient/src/containers/Server/Server.tsx index 6db35fe8..88a7b74e 100644 --- a/webclient/src/containers/Server/Server.tsx +++ b/webclient/src/containers/Server/Server.tsx @@ -3,8 +3,8 @@ import React, { Component } from "react"; import { connect } from 'react-redux'; import { generatePath, useNavigate } from 'react-router-dom'; -import ListItem from '@material-ui/core/ListItem'; -import Paper from '@material-ui/core/Paper'; +import ListItem from '@mui/material/ListItem'; +import Paper from '@mui/material/Paper'; import { AuthGuard, ThreePaneLayout, UserDisplay, VirtualList } from 'components'; import { useReduxEffect } from 'hooks'; diff --git a/webclient/src/containers/Unsupported/Unsupported.tsx b/webclient/src/containers/Unsupported/Unsupported.tsx index ba456c6d..7e979a9d 100644 --- a/webclient/src/containers/Unsupported/Unsupported.tsx +++ b/webclient/src/containers/Unsupported/Unsupported.tsx @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { useTranslation } from 'react-i18next'; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; import './Unsupported.css'; diff --git a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx index 87cde690..cb523961 100644 --- a/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx +++ b/webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { useTranslation } from 'react-i18next'; import { AccountActivationForm } from 'forms'; @@ -20,11 +20,11 @@ const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any return ( - + { t('AccountActivationDialog.title') } {handleOnClose ? ( - + ) : null} diff --git a/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx b/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx index 57e7d75d..8011d317 100644 --- a/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx +++ b/webclient/src/dialogs/CardImportDialog/CardImportDialog.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { CardImportForm } from 'forms'; @@ -17,11 +17,11 @@ const CardImportDialog = ({ classes, handleClose, isOpen }: any) => { return ( - + Import Cards {handleOnClose ? ( - + ) : null} diff --git a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx index 3195e8c8..36212b0d 100644 --- a/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx +++ b/webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import makeStyles from '@mui/styles/makeStyles'; +import AddIcon from '@mui/icons-material/Add'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { useTranslation } from 'react-i18next'; import { KnownHostForm } from 'forms'; @@ -35,12 +35,12 @@ const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any) return ( - +
{ t('KnownHostDialog.title', { mode }) } {handleClose ? ( - + ) : null} diff --git a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx index 0106d925..2388dddb 100644 --- a/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx +++ b/webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { useTranslation } from 'react-i18next'; import { RegisterForm } from 'forms'; @@ -20,11 +20,11 @@ const RegistrationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) => return ( - + { t('RegistrationDialog.title') } {handleOnClose ? ( - + ) : null} diff --git a/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx index f550fc0c..be2032a0 100644 --- a/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx +++ b/webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { useTranslation } from 'react-i18next'; import { RequestPasswordResetForm } from 'forms'; @@ -20,11 +20,11 @@ const RequestPasswordResetDialog = ({ classes, handleClose, isOpen, onSubmit, sk return ( - + { t('RequestPasswordResetDialog.title') } {handleOnClose ? ( - + ) : null} diff --git a/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx index a3cc3f09..877c8729 100644 --- a/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx +++ b/webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Dialog from '@material-ui/core/Dialog'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogTitle from '@material-ui/core/DialogTitle'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogTitle from '@mui/material/DialogTitle'; +import IconButton from '@mui/material/IconButton'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; import { useTranslation } from 'react-i18next'; import { ResetPasswordForm } from 'forms'; @@ -20,11 +20,11 @@ const ResetPasswordDialog = ({ classes, handleClose, isOpen, onSubmit, userName return ( - + {t('ResetPasswordDialog.title')} {handleOnClose ? ( - + ) : null} diff --git a/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx b/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx index eb4308ab..61b20f9a 100644 --- a/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx +++ b/webclient/src/forms/AccountActivationForm/AccountActivationForm.tsx @@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form'; import { OnChange } from 'react-final-form-listeners'; import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { InputField, KnownHosts } from 'components'; import { FormKey } from 'types'; diff --git a/webclient/src/forms/CardImportForm/CardImportForm.tsx b/webclient/src/forms/CardImportForm/CardImportForm.tsx index 8ac34c38..b9745f31 100644 --- a/webclient/src/forms/CardImportForm/CardImportForm.tsx +++ b/webclient/src/forms/CardImportForm/CardImportForm.tsx @@ -3,11 +3,11 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { Form, Field, reduxForm } from 'redux-form' -import Button from '@material-ui/core/Button'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; -import CircularProgress from '@material-ui/core/CircularProgress'; +import Button from '@mui/material/Button'; +import Stepper from '@mui/material/Stepper'; +import Step from '@mui/material/Step'; +import StepLabel from '@mui/material/StepLabel'; +import CircularProgress from '@mui/material/CircularProgress'; import { InputField, VirtualList } from 'components'; import { cardImporterService, CardDTO, SetDTO, TokenDTO } from 'services'; diff --git a/webclient/src/forms/KnownHostForm/KnownHostForm.tsx b/webclient/src/forms/KnownHostForm/KnownHostForm.tsx index ded91157..1241336f 100644 --- a/webclient/src/forms/KnownHostForm/KnownHostForm.tsx +++ b/webclient/src/forms/KnownHostForm/KnownHostForm.tsx @@ -4,8 +4,8 @@ import { connect } from 'react-redux'; import { Form, Field } from 'react-final-form' import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; -import AnchorLink from '@material-ui/core/Link'; +import Button from '@mui/material/Button'; +import AnchorLink from '@mui/material/Link'; import { InputField } from 'components'; diff --git a/webclient/src/forms/LoginForm/LoginForm.tsx b/webclient/src/forms/LoginForm/LoginForm.tsx index 9e08bbca..e3b6b511 100644 --- a/webclient/src/forms/LoginForm/LoginForm.tsx +++ b/webclient/src/forms/LoginForm/LoginForm.tsx @@ -3,7 +3,7 @@ import { Form, Field } from 'react-final-form'; import { OnChange } from 'react-final-form-listeners'; import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; import { AuthenticationService } from 'api'; import { CheckboxField, InputField, KnownHosts } from 'components'; diff --git a/webclient/src/forms/RegisterForm/RegisterForm.tsx b/webclient/src/forms/RegisterForm/RegisterForm.tsx index dcfb87a9..f5f4d917 100644 --- a/webclient/src/forms/RegisterForm/RegisterForm.tsx +++ b/webclient/src/forms/RegisterForm/RegisterForm.tsx @@ -4,8 +4,8 @@ import { OnChange } from 'react-final-form-listeners'; import setFieldTouched from 'final-form-set-field-touched'; import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { CountryDropdown, InputField, KnownHosts } from 'components'; import { useReduxEffect } from 'hooks'; diff --git a/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx b/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx index be2e4956..01d4a295 100644 --- a/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx +++ b/webclient/src/forms/RequestPasswordResetForm/RequestPasswordResetForm.tsx @@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form'; import { OnChange } from 'react-final-form-listeners'; import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { InputField, KnownHosts } from 'components'; import { FormKey } from 'types'; diff --git a/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx b/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx index 71fb667c..8b56f4b6 100644 --- a/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx +++ b/webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx @@ -5,8 +5,8 @@ import { Form, Field } from 'react-final-form' import { OnChange } from 'react-final-form-listeners'; import { useTranslation } from 'react-i18next'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; import { InputField, KnownHosts } from 'components'; import { FormKey } from 'types'; diff --git a/webclient/src/forms/SearchForm/SearchForm.tsx b/webclient/src/forms/SearchForm/SearchForm.tsx index 3c92e71a..79354308 100644 --- a/webclient/src/forms/SearchForm/SearchForm.tsx +++ b/webclient/src/forms/SearchForm/SearchForm.tsx @@ -3,9 +3,9 @@ import React, { Component } from "react"; import { connect } from 'react-redux'; import { Form, Field, reduxForm } from 'redux-form' -import Button from '@material-ui/core/Button'; -import Divider from '@material-ui/core/Divider'; -import Paper from '@material-ui/core/Paper'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import Paper from '@mui/material/Paper'; import { InputField, CheckboxField } from 'components'; import { FormKey } from 'types'; diff --git a/webclient/src/index.css b/webclient/src/index.css index c5f9b923..205b9e7c 100644 --- a/webclient/src/index.css +++ b/webclient/src/index.css @@ -17,6 +17,7 @@ body, body { margin: 0; + line-height: 1.4; font-family: -apple-system, BlinkMacSystemFont, diff --git a/webclient/src/index.tsx b/webclient/src/index.tsx index 8cf04158..0e448323 100644 --- a/webclient/src/index.tsx +++ b/webclient/src/index.tsx @@ -1,8 +1,8 @@ -import { ThemeProvider } from '@material-ui/styles'; +import { Theme, StyledEngineProvider } from '@mui/material'; +import { ThemeProvider } from '@mui/material/styles'; import React from 'react'; import ReactDOM from 'react-dom'; - import { AppShell } from 'containers'; import { materialTheme } from './material-theme'; @@ -10,10 +10,17 @@ import './i18n'; import './index.css'; -const appWithMaterialTheme = () => ( - - - +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + interface DefaultTheme extends Theme {} +} + +const AppWithMaterialTheme = () => ( + + + + + ); -ReactDOM.render(appWithMaterialTheme(), document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); diff --git a/webclient/src/material-theme.ts b/webclient/src/material-theme.ts index c2f78498..286dee94 100644 --- a/webclient/src/material-theme.ts +++ b/webclient/src/material-theme.ts @@ -1,6 +1,11 @@ -import { createTheme } from '@material-ui/core/styles'; +import { PaletteMode } from '@mui/material'; +import { createTheme } from '@mui/material/styles'; + +const mode: PaletteMode = 'light'; const palette = { + mode, + background: { default: 'rgb(35, 35, 35)', paper: '#FFFFFF', @@ -62,112 +67,123 @@ const palette = { export const materialTheme = createTheme({ palette, - overrides: { - // MuiCssBaseline: { - // '@global': { - // '@font-face': [], - // }, - // }, - MuiButton: { - root: { - fontWeight: 'bold', - textTransform: 'none', - - '&.rounded': { - // 'border-radius': '50px', + components: { + MuiCssBaseline: { + styleOverrides: { + '@global': { + '@font-face': [], }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + fontWeight: 'bold', + textTransform: 'none', - '&.tall': { - 'height': '40px', + '&.rounded': { + // 'border-radius': '50px', + }, + + '&.tall': { + 'height': '40px', + }, }, }, }, MuiCheckbox: { - root: { - '& .MuiSvgIcon-root': { - width: '.75em', - height: '.75em', + styleOverrides: { + root: { + '& .MuiSvgIcon-root': { + width: '.75em', + height: '.75em', + }, }, }, }, MuiFormControlLabel: { - label: { - fontSize: 12, - fontWeight: 'bold', - color: palette.primary.main, - - }, - }, - - MuiInputLabel: { - outlined: { - transform: 'translate(1em, 1em) scale(1)', + styleOverrides: { + label: { + fontSize: 12, + fontWeight: 'bold', + color: palette.primary.main, + }, }, }, MuiLink: { - root: { - fontWeight: 'bold', + styleOverrides: { + root: { + fontWeight: 'bold', + }, }, }, MuiList: { - root: { - padding: '8px', + styleOverrides: { + root: { + padding: '8px', - '&.MuiList-padding': { - paddingBottom: '4px', - }, + '&.MuiList-padding': { + paddingBottom: '4px', + }, - '& .MuiButton-root': { - width: '100%', - }, + '& .MuiButton-root': { + width: '100%', + }, - '& > .MuiButtonBase-root': { - padding: '8px 16px', - marginBottom: '4px', - borderRadius: 0, - justifyContent: 'space-between', - }, + '& > .MuiButtonBase-root': { + padding: '8px 16px', + marginBottom: '4px', + borderRadius: 0, + justifyContent: 'space-between', + }, - '& .MuiButtonBase-root.Mui-selected': { - background: 'none', - fontWeight: 'bold', - }, + '& .MuiButtonBase-root.Mui-selected, & .MuiButtonBase-root.Mui-selected:focus': { + background: 'none', + fontWeight: 'bold', + }, - ['& .MuiButtonBase-root:hover, & .MuiButtonBase-root.Mui-selected:hover']: { - background: palette.primary.light + ['& .MuiButtonBase-root:hover, & .MuiButtonBase-root.Mui-selected:hover']: { + background: palette.primary.light + }, }, }, }, MuiListItem: { - root: { - }, + styleOverrides: { + root: { + }, + } }, MuiInputBase: { - formControl: { - '& .MuiSelect-root svg': { - display: 'none', + styleOverrides: { + formControl: { + '& .MuiSelect-root svg': { + display: 'none', + }, }, }, }, MuiOutlinedInput: { - root: { - '&.Mui-focused .MuiOutlinedInput-notchedOutline': { - borderWidth: '1px', - }, + styleOverrides: { + root: { + '&.Mui-focused .MuiOutlinedInput-notchedOutline': { + borderWidth: '1px', + }, - '.rounded &': { - // 'border-radius': '50px', - }, + '.rounded &': { + // 'border-radius': '50px', + }, - '.tall &': { - height: '40px', + '.tall &': { + height: '40px', + }, }, }, }, diff --git a/webclient/src/types/server.tsx b/webclient/src/types/server.tsx index b2ea881a..fa9f4109 100644 --- a/webclient/src/types/server.tsx +++ b/webclient/src/types/server.tsx @@ -54,6 +54,13 @@ export class Host { } export const DefaultHosts: Host[] = [ + { + name: 'Chickatrice', + host: 'mtg.chickatrice.net', + port: '443', + localPort: '4748', + editable: false, + }, { name: 'Rooster', host: 'server.cockatrice.us/servatrice',