diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6fcbc2661954f35e964ab490d9ee773c949580f4..325d64e6f80587c92840eeeaa24f782a2d8a7b8b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,12 @@
"name": "greg",
"version": "0.1.0",
"dependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "@mui/icons-material": "^5.0.1",
+ "@mui/material": "^5.0.1",
+ "@mui/system": "^5.0.1",
+ "@mui/utils": "^5.0.1",
"@navikt/fnrvalidator": "^1.1.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
@@ -16,7 +22,6 @@
"@types/node": "^12.20.24",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
- "@types/styled-components": "^5.1.14",
"date-fns": "^2.24.0",
"http-proxy-middleware": "^2.0.1",
"i18next": "^20.6.0",
@@ -30,7 +35,6 @@
"react-i18next": "^11.11.4",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
- "styled-components": "^5.3.1",
"typeface-roboto": "^1.1.13",
"typescript": "^4.4.2",
"web-vitals": "^1.1.2"
@@ -1798,29 +1802,190 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
- "node_modules/@emotion/is-prop-valid": {
- "version": "0.8.8",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
- "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "node_modules/@emotion/babel-plugin": {
+ "version": "11.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
+ "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==",
"dependencies": {
- "@emotion/memoize": "0.7.4"
+ "@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.3"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
}
},
+ "node_modules/@emotion/babel-plugin/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+ "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+ },
+ "node_modules/@emotion/babel-plugin/node_modules/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==",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/@emotion/cache": {
+ "version": "11.4.0",
+ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+ "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+ "dependencies": {
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/sheet": "^1.0.0",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "stylis": "^4.0.3"
+ }
+ },
+ "node_modules/@emotion/hash": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+ "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+ },
"node_modules/@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
- "node_modules/@emotion/stylis": {
- "version": "0.8.5",
- "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
- "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ "node_modules/@emotion/react": {
+ "version": "11.4.1",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+ "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@emotion/cache": "^11.4.0",
+ "@emotion/serialize": "^1.0.2",
+ "@emotion/sheet": "^1.0.2",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "hoist-non-react-statics": "^3.3.1"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0",
+ "react": ">=16.8.0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@emotion/react/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@emotion/serialize": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+ "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+ "dependencies": {
+ "@emotion/hash": "^0.8.0",
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/unitless": "^0.7.5",
+ "@emotion/utils": "^1.0.0",
+ "csstype": "^3.0.2"
+ }
+ },
+ "node_modules/@emotion/sheet": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+ "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+ },
+ "node_modules/@emotion/styled": {
+ "version": "11.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
+ "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@emotion/babel-plugin": "^11.3.0",
+ "@emotion/is-prop-valid": "^1.1.0",
+ "@emotion/serialize": "^1.0.2",
+ "@emotion/utils": "^1.0.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0",
+ "@emotion/react": "^11.0.0-rc.0",
+ "react": ">=16.8.0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@emotion/styled/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+ "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+ "dependencies": {
+ "@emotion/memoize": "^0.7.4"
+ }
},
"node_modules/@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
+ "node_modules/@emotion/utils": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+ "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+ },
+ "node_modules/@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=="
+ },
"node_modules/@eslint/eslintrc": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -2646,6 +2811,309 @@
"node": ">=8"
}
},
+ "node_modules/@mui/core": {
+ "version": "5.0.0-alpha.48",
+ "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz",
+ "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@emotion/is-prop-valid": "^1.1.0",
+ "@mui/utils": "^5.0.1",
+ "clsx": "^1.1.1",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/core/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/core/node_modules/@emotion/is-prop-valid": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+ "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+ "dependencies": {
+ "@emotion/memoize": "^0.7.4"
+ }
+ },
+ "node_modules/@mui/icons-material": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.1.tgz",
+ "integrity": "sha512-AZehR/Uvi9VodsNPk9ae1lENKrf1evqx9suiP6VIqu7NxjZOlw/m/yA2gRAMmLEmIGr7EChfi/wcXuq6BpM9vw==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "peerDependencies": {
+ "@mui/material": "^5.0.0-rc.0",
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/icons-material/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/material": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
+ "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/core": "5.0.0-alpha.48",
+ "@mui/system": "^5.0.1",
+ "@mui/types": "^7.0.0",
+ "@mui/utils": "^5.0.1",
+ "@popperjs/core": "^2.4.4",
+ "@types/react-transition-group": "^4.4.3",
+ "clsx": "^1.1.1",
+ "csstype": "^3.0.9",
+ "hoist-non-react-statics": "^3.3.2",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2",
+ "react-transition-group": "^4.4.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/material/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/private-theming": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz",
+ "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/utils": "^5.0.1",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/private-theming/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/styled-engine": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.1.tgz",
+ "integrity": "sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@emotion/cache": "^11.4.0",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "react": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/styled-engine/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/system": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.1.tgz",
+ "integrity": "sha512-pGNKUpjK5hm4apZAUZu7LugemBPoZnNvNNCI2miI/BXxqyx41mL9+iT9p6Qe9uDOh8Z6GUbLIzvOjSTP+ECRZw==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/private-theming": "^5.0.1",
+ "@mui/styled-engine": "^5.0.1",
+ "@mui/types": "^7.0.0",
+ "@mui/utils": "^5.0.1",
+ "clsx": "^1.1.1",
+ "csstype": "^3.0.9",
+ "prop-types": "^15.7.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/material-ui"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "@types/react": "^16.8.6 || ^17.0.0",
+ "react": "^17.0.2"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/react": {
+ "optional": true
+ },
+ "@emotion/styled": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/system/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@mui/types": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz",
+ "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==",
+ "peerDependencies": {
+ "@types/react": "*"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@mui/utils": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz",
+ "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@types/prop-types": "^15.7.4",
+ "@types/react-is": "^16.7.1 || ^17.0.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "peerDependencies": {
+ "react": "^17.0.2"
+ }
+ },
+ "node_modules/@mui/utils/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
"node_modules/@navikt/fnrvalidator": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@navikt/fnrvalidator/-/fnrvalidator-1.1.4.tgz",
@@ -3559,15 +4027,6 @@
"integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
"dev": true
},
- "node_modules/@types/hoist-non-react-statics": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
- "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
- "dependencies": {
- "@types/react": "*",
- "hoist-non-react-statics": "^3.3.0"
- }
- },
"node_modules/@types/html-minifier-terser": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -3695,6 +4154,14 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-is": {
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-2+L0ilcAEG8udkDnvx8B0upwXFBbNnVwOsSCTxW3SDOkmar9NyEeLG0ZLa3uOEw9zyYf/fQapcnfXAVmDKlyHw==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/react-router": {
"version": "5.1.16",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
@@ -3716,6 +4183,14 @@
"@types/react-router": "*"
}
},
+ "node_modules/@types/react-transition-group": {
+ "version": "4.4.3",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
+ "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -3739,16 +4214,6 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
},
- "node_modules/@types/styled-components": {
- "version": "5.1.14",
- "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.14.tgz",
- "integrity": "sha512-d6P1/tyNytqKwam3cQXq7a9uPtovc/mdAs7dBiz1YbDdNIT3X4WmuFU78YdSYh84TXVuhOwezZ3EeKuNBhwsHQ==",
- "dependencies": {
- "@types/hoist-non-react-statics": "*",
- "@types/react": "*",
- "csstype": "^3.0.2"
- }
- },
"node_modules/@types/tapable": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -4933,25 +5398,6 @@
"@babel/core": "^7.0.0-0"
}
},
- "node_modules/babel-plugin-styled-components": {
- "version": "1.13.2",
- "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz",
- "integrity": "sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==",
- "dependencies": {
- "@babel/helper-annotate-as-pure": "^7.0.0",
- "@babel/helper-module-imports": "^7.0.0",
- "babel-plugin-syntax-jsx": "^6.18.0",
- "lodash": "^4.17.11"
- },
- "peerDependencies": {
- "styled-components": ">= 2"
- }
- },
- "node_modules/babel-plugin-syntax-jsx": {
- "version": "6.18.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
- "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
- },
"node_modules/babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -5771,11 +6217,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/camelize": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
- "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
- },
"node_modules/caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6029,6 +6470,14 @@
"wrap-ansi": "^6.2.0"
}
},
+ "node_modules/clsx": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+ "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6479,14 +6928,6 @@
"node": ">=6.0.0"
}
},
- "node_modules/css-color-keywords": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
- "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=",
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -6609,16 +7050,6 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
- "node_modules/css-to-react-native": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
- "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
- "dependencies": {
- "camelize": "^1.0.0",
- "css-color-keywords": "^1.0.0",
- "postcss-value-parser": "^4.0.2"
- }
- },
"node_modules/css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6872,9 +7303,9 @@
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
},
"node_modules/csstype": {
- "version": "3.0.8",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
- "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+ "version": "3.0.9",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/cyclist": {
"version": "1.0.1",
@@ -7356,6 +7787,15 @@
"utila": "~0.4"
}
},
+ "node_modules/dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "dependencies": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"node_modules/dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -9263,6 +9703,11 @@
"node": ">=6"
}
},
+ "node_modules/find-root": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+ },
"node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -17000,6 +17445,21 @@
"react": "^16.3.0 || ^17.0.0"
}
},
+ "node_modules/react-transition-group": {
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+ "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+ "dependencies": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.6.0",
+ "react-dom": ">=16.6.0"
+ }
+ },
"node_modules/read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -18270,11 +18730,6 @@
"sha.js": "bin.js"
}
},
- "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=="
- },
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -19147,35 +19602,6 @@
"webpack": "^4.0.0 || ^5.0.0"
}
},
- "node_modules/styled-components": {
- "version": "5.3.1",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz",
- "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==",
- "dependencies": {
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/traverse": "^7.4.5",
- "@emotion/is-prop-valid": "^0.8.8",
- "@emotion/stylis": "^0.8.4",
- "@emotion/unitless": "^0.7.4",
- "babel-plugin-styled-components": ">= 1.12.0",
- "css-to-react-native": "^3.0.0",
- "hoist-non-react-statics": "^3.0.0",
- "shallowequal": "^1.1.0",
- "supports-color": "^5.5.0"
- },
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/styled-components"
- },
- "peerDependencies": {
- "react": ">= 16.8.0",
- "react-dom": ">= 16.8.0",
- "react-is": ">= 16.8.0"
- }
- },
"node_modules/stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -19202,6 +19628,11 @@
"node": ">=8"
}
},
+ "node_modules/stylis": {
+ "version": "4.0.10",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+ "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+ },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -23371,29 +23802,153 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
- "@emotion/is-prop-valid": {
- "version": "0.8.8",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
- "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "@emotion/babel-plugin": {
+ "version": "11.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
+ "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==",
"requires": {
- "@emotion/memoize": "0.7.4"
+ "@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.3"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+ "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+ },
+ "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=="
+ }
}
},
+ "@emotion/cache": {
+ "version": "11.4.0",
+ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+ "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+ "requires": {
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/sheet": "^1.0.0",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "stylis": "^4.0.3"
+ }
+ },
+ "@emotion/hash": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+ "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+ },
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
- "@emotion/stylis": {
- "version": "0.8.5",
- "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
- "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ "@emotion/react": {
+ "version": "11.4.1",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+ "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+ "requires": {
+ "@babel/runtime": "^7.13.10",
+ "@emotion/cache": "^11.4.0",
+ "@emotion/serialize": "^1.0.2",
+ "@emotion/sheet": "^1.0.2",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "hoist-non-react-statics": "^3.3.1"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@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.0.2",
+ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+ "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+ },
+ "@emotion/styled": {
+ "version": "11.3.0",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
+ "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
+ "requires": {
+ "@babel/runtime": "^7.13.10",
+ "@emotion/babel-plugin": "^11.3.0",
+ "@emotion/is-prop-valid": "^1.1.0",
+ "@emotion/serialize": "^1.0.2",
+ "@emotion/utils": "^1.0.0"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "@emotion/is-prop-valid": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+ "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+ "requires": {
+ "@emotion/memoize": "^0.7.4"
+ }
+ }
+ }
},
"@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.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+ "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+ },
+ "@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": "0.4.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -24022,6 +24577,178 @@
}
}
},
+ "@mui/core": {
+ "version": "5.0.0-alpha.48",
+ "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz",
+ "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@emotion/is-prop-valid": "^1.1.0",
+ "@mui/utils": "^5.0.1",
+ "clsx": "^1.1.1",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "@emotion/is-prop-valid": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+ "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+ "requires": {
+ "@emotion/memoize": "^0.7.4"
+ }
+ }
+ }
+ },
+ "@mui/icons-material": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.0.1.tgz",
+ "integrity": "sha512-AZehR/Uvi9VodsNPk9ae1lENKrf1evqx9suiP6VIqu7NxjZOlw/m/yA2gRAMmLEmIGr7EChfi/wcXuq6BpM9vw==",
+ "requires": {
+ "@babel/runtime": "^7.15.4"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@mui/material": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
+ "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/core": "5.0.0-alpha.48",
+ "@mui/system": "^5.0.1",
+ "@mui/types": "^7.0.0",
+ "@mui/utils": "^5.0.1",
+ "@popperjs/core": "^2.4.4",
+ "@types/react-transition-group": "^4.4.3",
+ "clsx": "^1.1.1",
+ "csstype": "^3.0.9",
+ "hoist-non-react-statics": "^3.3.2",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2",
+ "react-transition-group": "^4.4.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@mui/private-theming": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz",
+ "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/utils": "^5.0.1",
+ "prop-types": "^15.7.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@mui/styled-engine": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.1.tgz",
+ "integrity": "sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@emotion/cache": "^11.4.0",
+ "prop-types": "^15.7.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@mui/system": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.1.tgz",
+ "integrity": "sha512-pGNKUpjK5hm4apZAUZu7LugemBPoZnNvNNCI2miI/BXxqyx41mL9+iT9p6Qe9uDOh8Z6GUbLIzvOjSTP+ECRZw==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@mui/private-theming": "^5.0.1",
+ "@mui/styled-engine": "^5.0.1",
+ "@mui/types": "^7.0.0",
+ "@mui/utils": "^5.0.1",
+ "clsx": "^1.1.1",
+ "csstype": "^3.0.9",
+ "prop-types": "^15.7.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "@mui/types": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz",
+ "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==",
+ "requires": {}
+ },
+ "@mui/utils": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz",
+ "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@types/prop-types": "^15.7.4",
+ "@types/react-is": "^16.7.1 || ^17.0.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
"@navikt/fnrvalidator": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@navikt/fnrvalidator/-/fnrvalidator-1.1.4.tgz",
@@ -24664,15 +25391,6 @@
"integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
"dev": true
},
- "@types/hoist-non-react-statics": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
- "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
- "requires": {
- "@types/react": "*",
- "hoist-non-react-statics": "^3.3.0"
- }
- },
"@types/html-minifier-terser": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
@@ -24800,6 +25518,14 @@
"@types/react": "*"
}
},
+ "@types/react-is": {
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-2+L0ilcAEG8udkDnvx8B0upwXFBbNnVwOsSCTxW3SDOkmar9NyEeLG0ZLa3uOEw9zyYf/fQapcnfXAVmDKlyHw==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/react-router": {
"version": "5.1.16",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
@@ -24821,6 +25547,14 @@
"@types/react-router": "*"
}
},
+ "@types/react-transition-group": {
+ "version": "4.4.3",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
+ "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/resolve": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -24844,16 +25578,6 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
},
- "@types/styled-components": {
- "version": "5.1.14",
- "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.14.tgz",
- "integrity": "sha512-d6P1/tyNytqKwam3cQXq7a9uPtovc/mdAs7dBiz1YbDdNIT3X4WmuFU78YdSYh84TXVuhOwezZ3EeKuNBhwsHQ==",
- "requires": {
- "@types/hoist-non-react-statics": "*",
- "@types/react": "*",
- "csstype": "^3.0.2"
- }
- },
"@types/tapable": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@@ -25766,22 +26490,6 @@
"@babel/helper-define-polyfill-provider": "^0.2.2"
}
},
- "babel-plugin-styled-components": {
- "version": "1.13.2",
- "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz",
- "integrity": "sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==",
- "requires": {
- "@babel/helper-annotate-as-pure": "^7.0.0",
- "@babel/helper-module-imports": "^7.0.0",
- "babel-plugin-syntax-jsx": "^6.18.0",
- "lodash": "^4.17.11"
- }
- },
- "babel-plugin-syntax-jsx": {
- "version": "6.18.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
- "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
- },
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -26453,11 +27161,6 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
"integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
},
- "camelize": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
- "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
- },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -26659,6 +27362,11 @@
"wrap-ansi": "^6.2.0"
}
},
+ "clsx": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+ "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+ },
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -27043,11 +27751,6 @@
"postcss": "^7.0.5"
}
},
- "css-color-keywords": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
- "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
- },
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -27132,16 +27835,6 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
- "css-to-react-native": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
- "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
- "requires": {
- "camelize": "^1.0.0",
- "css-color-keywords": "^1.0.0",
- "postcss-value-parser": "^4.0.2"
- }
- },
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -27335,9 +28028,9 @@
}
},
"csstype": {
- "version": "3.0.8",
- "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
- "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+ "version": "3.0.9",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz",
+ "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"cyclist": {
"version": "1.0.1",
@@ -27717,6 +28410,15 @@
"utila": "~0.4"
}
},
+ "dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "requires": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -29137,6 +29839,11 @@
}
}
},
+ "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": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -35071,6 +35778,17 @@
"integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
"requires": {}
},
+ "react-transition-group": {
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+ "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -36074,11 +36792,6 @@
"safe-buffer": "^5.0.1"
}
},
- "shallowequal": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
- "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
- },
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -36786,23 +37499,6 @@
"schema-utils": "^2.7.0"
}
},
- "styled-components": {
- "version": "5.3.1",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.1.tgz",
- "integrity": "sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==",
- "requires": {
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/traverse": "^7.4.5",
- "@emotion/is-prop-valid": "^0.8.8",
- "@emotion/stylis": "^0.8.4",
- "@emotion/unitless": "^0.7.4",
- "babel-plugin-styled-components": ">= 1.12.0",
- "css-to-react-native": "^3.0.0",
- "hoist-non-react-statics": "^3.0.0",
- "shallowequal": "^1.1.0",
- "supports-color": "^5.5.0"
- }
- },
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -36825,6 +37521,11 @@
}
}
},
+ "stylis": {
+ "version": "4.0.10",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+ "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 841ab6456b7f37d7a94ce193ebe588ba1f5ee287..f850a8e850ad9b553bcfc3065db974e9c5a0d0ec 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/styled": "^11.3.0",
+ "@mui/icons-material": "^5.0.1",
+ "@mui/material": "^5.0.1",
+ "@mui/system": "^5.0.1",
+ "@mui/utils": "^5.0.1",
"@navikt/fnrvalidator": "^1.1.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
@@ -11,7 +17,6 @@
"@types/node": "^12.20.24",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
- "@types/styled-components": "^5.1.14",
"date-fns": "^2.24.0",
"http-proxy-middleware": "^2.0.1",
"i18next": "^20.6.0",
@@ -25,7 +30,6 @@
"react-i18next": "^11.11.4",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
- "styled-components": "^5.3.1",
"typeface-roboto": "^1.1.13",
"typescript": "^4.4.2",
"web-vitals": "^1.1.2"
diff --git a/frontend/src/components/animations/spinner.tsx b/frontend/src/components/animations/spinner.tsx
index 71632321645f416e6b7fb4b551f3047fcd35e566..62c74b1a44e5e89f5ee9f23cd10343c916c8581b 100644
--- a/frontend/src/components/animations/spinner.tsx
+++ b/frontend/src/components/animations/spinner.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
const Spinner = styled.div`
position: relative;
diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx
deleted file mode 100644
index 3ec8e21776bb70d7c9423bd82c79ffd46c61bb18..0000000000000000000000000000000000000000
--- a/frontend/src/components/button/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components/macro'
-
-export const Button = styled.a`
- display: inline-block;
- cursor: pointer;
- padding: 0.6rem 0.8rem;
- background: ${({ theme }) => theme.colors.main};
- color: white;
- border-radius: 0.5rem;
- border: 2px solid white;
- font-weight: 500;
- font-size: 1rem;
-`
-export default Button
diff --git a/frontend/src/components/debug/index.tsx b/frontend/src/components/debug/index.tsx
index 51f894357d626b1961d9f7feb1e75e053365cfdd..f38c93bd92ce791f9a38ed4d2eca58a6b8c254b6 100644
--- a/frontend/src/components/debug/index.tsx
+++ b/frontend/src/components/debug/index.tsx
@@ -1,8 +1,25 @@
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
+import CheckIcon from '@mui/icons-material/Check'
+import ClearIcon from '@mui/icons-material/Clear'
+
+import {
+ Box,
+ Button,
+ Table,
+ TableBody,
+ TableRow,
+ TableCell,
+ Stack,
+ Divider,
+} from '@mui/material'
+
import { appTheme, appTimezone, appVersion, appInst } from 'appConfig'
+const Yes = () => <CheckIcon color="success" />
+const No = () => <ClearIcon color="error" />
+
export const Debug = () => {
const [apiHealth, setApiHealth] = useState('not yet')
const [didContactApi, setDidContactApi] = useState(false)
@@ -111,34 +128,43 @@ export const Debug = () => {
['Language', i18n.language],
['Theme', appTheme],
['Institution', appInst],
- ['API reachable?', apiHealth],
- ['Csrf', csrf],
- ['Authenticated?', isAuthenticated ? 'Authenticated' : 'Not Authenticated'],
- ['username', username],
+ ['API reachable?', apiHealth === 'yes' ? <Yes /> : apiHealth],
+ ['Authenticated?', isAuthenticated ? <Yes /> : <No />],
+ ['Username', username],
+ ['CSRF', csrf],
]
return (
- <table>
- <thead>
- <strong>Debug</strong>
- </thead>
- <button type="button" onClick={() => getSession()}>
- AM I AUTHENTICATED?
- </button>
- <button type="button" onClick={() => whoami()}>
- WHO AM I?
- </button>
- <button type="button" onClick={() => logout()}>
- LOGOUT
- </button>
- <tbody>
- {d.map(([key, value]) => (
- <tr>
- <td>{key}</td>
- <td>{value}</td>
- </tr>
- ))}
- </tbody>
- </table>
+ <Box>
+ <h3>Debug</h3>
+
+ <Stack
+ direction="row"
+ spacing={1}
+ divider={<Divider orientation="vertical" />}
+ >
+ <Button type="button" onClick={() => getSession()}>
+ AM I AUTHENTICATED?
+ </Button>
+ <Button type="button" onClick={() => whoami()}>
+ WHO AM I?
+ </Button>
+ <Button type="button" onClick={() => logout()}>
+ LOGOUT
+ </Button>
+ </Stack>
+ <Box sx={{ maxWidth: '30rem' }}>
+ <Table>
+ <TableBody>
+ {d.map(([key, value]) => (
+ <TableRow>
+ <TableCell>{key}</TableCell>
+ <TableCell>{value}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </Box>
+ </Box>
)
}
diff --git a/frontend/src/components/dropdownmenu/index.tsx b/frontend/src/components/dropdownmenu/index.tsx
index fbdbd36feb4135114f5c8be6d5260d3ad8c68013..3d7fd88a55615d71bd5a21be5383552c059f1687 100644
--- a/frontend/src/components/dropdownmenu/index.tsx
+++ b/frontend/src/components/dropdownmenu/index.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react'
-import styled from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
const DropDownMenu = styled.div`
@@ -22,7 +22,6 @@ const DropDownList = styled.ul`
min-width: 10rem;
max-height: 50rem;
z-index: 100;
- background: ${({ theme }) => theme.colors.dropDownMenuBackground};
`
interface IDropDownOption {
diff --git a/frontend/src/components/form/error.tsx b/frontend/src/components/form/error.tsx
index 9e9d4a96c15b8500509dbbaff55ee9eafcee3c1a..cba24612fde18d6089b5cb108e2c5dd4fdbbd491 100644
--- a/frontend/src/components/form/error.tsx
+++ b/frontend/src/components/form/error.tsx
@@ -1,8 +1,8 @@
-import styled from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
const StyledValidationError = styled.span`
- color: ${({ theme }) => theme.colors.errorMessage};
+ color: "red"
`
export default StyledValidationError
\ No newline at end of file
diff --git a/frontend/src/components/form/input.tsx b/frontend/src/components/form/input.tsx
index 665c1d2025d119ec177f288a5e21b626aa6c701f..4d589d2682b2f7d23945ef150c747bef24c759c0 100644
--- a/frontend/src/components/form/input.tsx
+++ b/frontend/src/components/form/input.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import styled from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
import { UseFormReturn } from 'react-hook-form'
interface InputProps
diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx
index f701b98cccd9dd2e504642548ed4607c520db7f5..6631dc9107520b7ca3cc8b8098f2d78dc0f0b6f2 100644
--- a/frontend/src/components/link/index.tsx
+++ b/frontend/src/components/link/index.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import styled, { css } from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
interface IStyledLink {
external?: boolean
@@ -9,28 +9,25 @@ interface IStyledLink {
noUnderline?: boolean
}
-
interface ILink {
- to: string
- external?: boolean
- children?: React.ReactNode
- marginRight?: boolean
- noExternalIcon?: boolean
- mail?: boolean
- inheritColor?: boolean
- underline?: boolean
- noUnderline?: boolean
+ to: string
+ external?: boolean
+ children?: React.ReactNode
+ marginRight?: boolean
+ noExternalIcon?: boolean
+ mail?: boolean
+ inheritColor?: boolean
+ underline?: boolean
+ noUnderline?: boolean
}
const externalLinkIcon = (
- <svg width="15.3" height="12.6" viewBox="0 0 17 14">
- <g fill="#0F748D" fillRule="evenodd">
- <path
- d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z"/>
- <path
- d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z"/>
- </g>
- </svg>
+ <svg width="15.3" height="12.6" viewBox="0 0 17 14">
+ <g fill="#0F748D" fillRule="evenodd">
+ <path d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z" />
+ <path d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z" />
+ </g>
+ </svg>
)
const ExternalIcon = styled.span`
@@ -40,23 +37,9 @@ const ExternalIcon = styled.span`
z-index: -1;
`
-const baseInputStyles = css<IStyledLink>`
+const StyledLink = styled.a<IStyledLink>`
display: inline-flex;
align-items: center;
-
- color: ${(props) =>
- props.external
- ? props.theme.linkExternalColor
- : props.theme.linkInternalColor};
-
- ${(props) => (props.marginRight ? 'margin-right: 3rem;' : '')}
- ${(props) => (props.inheritColor ? 'color: inherit;' : '')}
- ${(props) => (props.underline ? 'text-decoration: underline;' : '')}
- ${(props) => (props.noUnderline ? ':hover { text-decoration: none };' : '')}
-`
-
-const StyledLink = styled.a<IStyledLink>`
- ${baseInputStyles}
`
// TODO Put back when routes are set up
// const StyledRouterLink = styled(RouterLink)`
@@ -64,16 +47,28 @@ const StyledLink = styled.a<IStyledLink>`
// `
function Link(props: ILink) {
- const { children, external, to, noExternalIcon, mail, underline, marginRight, inheritColor, noUnderline } = props
+ const {
+ children,
+ external,
+ to,
+ noExternalIcon,
+ mail,
+ underline,
+ marginRight,
+ inheritColor,
+ noUnderline,
+ } = props
if (mail) {
return (
- <StyledLink href={`mailto:${to}`}
- external={external}
- underline={underline}
- marginRight={marginRight}
- inheritColor={inheritColor}
- noUnderline={noUnderline}>
+ <StyledLink
+ href={`mailto:${to}`}
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}
+ >
{children}
</StyledLink>
)
@@ -86,8 +81,8 @@ function Link(props: ILink) {
return (
<StyledLink
href={href}
- target='_blank'
- rel='noopener noreferrer'
+ target="_blank"
+ rel="noopener noreferrer"
external={external}
underline={underline}
marginRight={marginRight}
@@ -107,13 +102,17 @@ function Link(props: ILink) {
// </StyledRouterLink>
// )
- return <StyledLink
- external={external}
- underline={underline}
- marginRight={marginRight}
- inheritColor={inheritColor}
- noUnderline={noUnderline}>
- {children}</StyledLink>
+ return (
+ <StyledLink
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}
+ >
+ {children}
+ </StyledLink>
+ )
}
Link.defaultProps = {
diff --git a/frontend/src/components/loading/index.tsx b/frontend/src/components/loading/index.tsx
index 85f733d45cc6ac89de056e2877a7db50e95d6955..28bcc838c7425082fd1097089e50d9ad83f0be42 100644
--- a/frontend/src/components/loading/index.tsx
+++ b/frontend/src/components/loading/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import Spinner from 'components/animations/spinner'
-import styled from 'styled-components/macro'
+import styled from '@emotion/styled/macro'
const SpinnerWrapper = styled.div`
display: flex;
diff --git a/frontend/src/components/logobars/UiB.tsx b/frontend/src/components/logobars/UiB.tsx
index 059ac0d05a1f779ac73565cfba4937b26d3d246c..c5f00bc9638b4e9ef1a0ab29752281b4531801da 100644
--- a/frontend/src/components/logobars/UiB.tsx
+++ b/frontend/src/components/logobars/UiB.tsx
@@ -1,24 +1,22 @@
import React from 'react'
-import styled from 'styled-components/macro'
-
-
-const LogoBarWrapper = styled.div`
- background-color: ${(props) => props.theme.colors.secondary});
-`
-
-const LogoBar = styled.div`
- margin: 0 auto;
- max-width: ${({ theme }) => theme.appMaxWidth});
- padding: 0 ${({ theme }) => theme.horizontalMdPadding});
-`
+import Box from '@mui/material/Box'
function UiBLogoBar() {
return (
- <LogoBarWrapper>
- <LogoBar>
+ <Box
+ sx={{
+ backgroundColor: 'palette.secondary',
+ }}
+ >
+ <Box
+ sx={{
+ margin: '0 auto',
+ maxWidth: 'greg.appMaxWidth',
+ }}
+ >
Insert UiB logo here
- </LogoBar>
- </LogoBarWrapper>
+ </Box>
+ </Box>
)
}
diff --git a/frontend/src/components/logobars/UiO.tsx b/frontend/src/components/logobars/UiO.tsx
index 8796ac584d1d430e2be16ad14e6a10c0b8f32dc3..a75a58bd0bbbcb3ef27dc4ceaa6ef90266bd4fb9 100644
--- a/frontend/src/components/logobars/UiO.tsx
+++ b/frontend/src/components/logobars/UiO.tsx
@@ -1,32 +1,35 @@
import React from 'react'
-import styled from 'styled-components/macro'
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
import { useTranslation } from 'react-i18next'
-
-const LogoBarWrapper = styled.div`
- display: flex;
- justify-content: center;
- background-color: ${({ theme }) => theme.page.headerBackgroundColor};
-`
-
type Language = {
language: string
}
-const Logo = styled.div<Language>`
- background: ${props => props.language === 'en' ? 'url("/uio/uio-app-logo-en.png") left center no-repeat' : 'url("/uio/uio-app-logo-nb.png") left center no-repeat'};
- min-width: 20rem;
- height: 2rem;
-`
+const Logo = styled('div')<Language>(({ language }) => ({
+ background:
+ language === 'en'
+ ? 'url("/uio/uio-app-logo-en.png") left center no-repeat'
+ : 'url("/uio/uio-app-logo-nb.png") left center no-repeat',
+ minWidth: '20rem',
+ height: '2rem',
+}))
function UiOLogoBar() {
const { i18n } = useTranslation(['common', 'footer'])
return (
- <LogoBarWrapper>
+ <Box
+ sx={{
+ backgroundColor: (theme) => theme.greg.headerBackgroundColor,
+ display: 'flex',
+ justifyContent: 'center',
+ }}
+ >
<Logo language={i18n.language} />
- </LogoBarWrapper>
+ </Box>
)
}
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index f6043811aafc92892e62bffaaea9b34f6031011b..87c4e34502427d890366c9cb3d176707984a98cc 100644
--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -2,25 +2,15 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { useTranslation } from 'react-i18next'
-import styled from 'styled-components/macro'
+import { styled } from '@mui/material/styles'
+import { Container } from '@mui/material'
-const StyledPage = styled.main`
- display: block;
- justify-content: space-between;
- margin: 0 auto;
- min-width: ${(props) => props.theme.appMinWidth};
- max-width: ${(props) => props.theme.appMaxWidth};
- padding: ${(props) =>
- `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
-`
-
-const StyledPageHeader = styled.h2`
- color: ${({ theme }) => theme.page.headerColor};
- font-size: 3rem;
- font-weight: bold;
- margin: 0rem ${({ theme }) => theme.page.horizontalPadding} 0
- ${({ theme }) => theme.page.horizontalPadding};
-`
+const StyledPageHeader = styled('h2')(({ theme }) => ({
+ color: theme.greg.headerTextColor,
+ fontSize: '3rem',
+ fontWeight: 'bold',
+ margin: '0 6.5rem 0 6.5rem',
+}))
interface IPage {
children: React.ReactNode
@@ -38,10 +28,10 @@ export default function Page(props: IPage) {
<html lang={i18n.language} />
<title>{header}</title>
</Helmet>
- <StyledPage>
+ <Container>
<StyledPageHeader>{header}</StyledPageHeader>
{children}
- </StyledPage>
+ </Container>
</>
)
}
diff --git a/frontend/src/globalStyles.ts b/frontend/src/globalStyles.ts
deleted file mode 100644
index d9e2d8f2c47221a4b3f4b425c3374bcccb8a5b91..0000000000000000000000000000000000000000
--- a/frontend/src/globalStyles.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createGlobalStyle } from 'styled-components/macro'
-import 'typeface-roboto'
-
-const GlobalStyle = createGlobalStyle`
- html {
- font-size: clamp(24px, calc(24px * 1vw), 36px);
- }
-
- body {
- margin: 0;
- min-height: 100vh;
- font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
- }
-
- #root {
- min-height: 100vh;
- }
-`
-
-export default GlobalStyle
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 4237ac3faad693edf181048c19b300c16adc68ab..1920848f6b0b4826cbc363ca16fc3f206e781492 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,12 +1,11 @@
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
-import { ThemeProvider } from 'styled-components/macro'
+import { ThemeProvider } from '@mui/material/styles'
import { BrowserRouter as Router } from 'react-router-dom'
import 'i18n'
import getTheme from 'themes'
-import GlobalStyle from 'globalStyles'
import App from 'routes'
import Loading from 'components/loading'
import reportWebVitals from './reportWebVitals'
@@ -15,7 +14,6 @@ function appRoot() {
return (
<React.StrictMode>
<Router>
- <GlobalStyle />
<Suspense fallback={<Loading />}>
<ThemeProvider theme={getTheme()}>
<App />
diff --git a/frontend/src/routes/components/footer.tsx b/frontend/src/routes/components/footer.tsx
index f6821a56c801a7ae8588bbb35b3c1dc9c8f0306d..d6e0abc0c3c3749e4ce4f635034febf456e611c5 100644
--- a/frontend/src/routes/components/footer.tsx
+++ b/frontend/src/routes/components/footer.tsx
@@ -1,47 +1,45 @@
import React from 'react'
-import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
+import { styled } from '@mui/material/styles'
+
import {
appStagingWarning,
appTechnicalSupportLink,
- reponsibleOrganization, responsibleOrganizationLink,
-} from '../../appConfig'
-import Link from '../../components/link'
-
-
-const FooterWrapper = styled.footer`
- background: ${({ theme }) => theme.footer.backgroundColor};
- height: fit-content;
- padding: 0rem ${({ theme }) => theme.horizontalPadding};
- margin-top: auto;
-`
+ reponsibleOrganization,
+ responsibleOrganizationLink,
+} from 'appConfig'
+import Link from 'components/link'
-const FooterSection = styled.section`
- header {
- margin-bottom: 0.5rem;
- font-size: 1.5rem;
- }
+const FooterWrapper = styled('footer')(({ theme }) => ({
+ background: theme.greg.footerBackgroundColor,
+ height: 'fit-content',
+ padding: '0rem 6.5rem',
+ marginTop: 'auto',
+}))
- padding-left: 1rem;
-`
+const FooterSection = styled('section')({
+ header: {
+ marginBottom: '0.5rem',
+ fontSize: '1.5rem',
+ },
+ paddingLeft: '1rem',
+})
-const FooterSectionContent = styled.div`
- font-size: 1rem;
- padding-left: 0.3rem;
-`
+const FooterSectionContent = styled('div')({
+ fontSize: '1rem',
+ paddingLeft: '0.3rem',
+})
-const ContentContainer = styled.div`
- width: fit-content;
- color: ${({ theme }) => theme.footerTextColor};
- display: flex;
- flex-wrap: nowrap;
- justify-content: space-between;
- margin: auto;
- padding-top: 1rem;
- padding-right: 1rem;
- padding-bottom: 1rem;
-`
+const ContentContainer = styled('div')(({ theme }) => ({
+ width: 'fit-content',
+ color: theme.greg.footerTextColor,
+ display: 'flex',
+ flexWrap: 'nowrap',
+ justifyContent: 'space-between',
+ margin: 'auto',
+ padding: '1rem 1rem 1rem 0',
+}))
const Footer: React.FunctionComponent = () => {
const { t } = useTranslation(['common', 'footer'])
@@ -79,11 +77,7 @@ const Footer: React.FunctionComponent = () => {
</FooterSection>
</ContentContainer>
</FooterWrapper>
- {appStagingWarning && (
- <div className='alert'>
- {t('staging')}
- </div>
- )}
+ {appStagingWarning && <div className="alert">{t('staging')}</div>}
</>
)
}
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index fe2c6f83aaea76af11c1866cd62447f63a9d9a7e..e9e521c743bc7efef046d55d24100a3367133862 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -1,59 +1,41 @@
import React from 'react'
import { Link } from 'react-router-dom'
-import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
-import LogoBar from '../../components/logobars/LogoBar'
-import LanguageSelector from '../../components/languageselector'
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
-const MainWrapper = styled.div`
- color: ${({ theme }) => theme.page.headerColor};
- background-color: ${({ theme }) => theme.page.headerBackgroundColor};
+import LogoBar from 'components/logobars/LogoBar'
+import LanguageSelector from 'components/languageselector'
- a {
- text-decoration: none;
+const MainWrapper = styled('div')(({ theme }) => ({
+ color: theme.greg.headerTextColor,
+ backgroundColor: theme.greg.headerBackgroundColor,
- &:hover,
- &:focus {
- text-decoration: underline;
- }
- }
-`
+ a: {
+ textDecoration: 'none',
-const Main = styled.div`
- display: flex;
- justify-content: space-between;
- margin: 0 auto;
- max-width: ${(props) => props.theme.appMaxWidth};
- padding: ${(props) =>
- `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
-`
+ '&:hover, &:focus': {
+ textDecoration: 'underline',
+ },
+ },
+}))
-const Menu = styled.ul`
- list-style-type: none;
-`
+const Main = styled('div')(({ theme }) => ({
+ display: 'flex',
+ justifyContent: 'space-between',
+ margin: '0 auto',
+ maxWidth: theme.greg.appMaxWidth,
+ padding: '0.5rem 6.5rem 1rem 6.5rem',
+}))
-const MenuItem = styled.div`
- font-size: 1rem;
- display: inline;
-`
+const Menu = styled('ul')({
+ listStyleType: 'none',
+})
-const TitleBox = styled.div`
- display: flex;
- flex-direction: column;
- padding-left: 3rem;
-`
-
-const Title = styled.div`
- color: white;
- white-space: nowrap;
- text-decoration: none;
- font-size: 2rem;
- font-weight: bold;
-`
-
-const Description = styled.div`
- font-size: 1rem;
-`
+const MenuItem = styled('div')({
+ fontSize: '1rem',
+ display: 'inline',
+})
const Header = () => {
const { t } = useTranslation('common')
@@ -63,12 +45,30 @@ const Header = () => {
<LogoBar />
<MainWrapper>
<Main>
- <TitleBox>
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ paddingLeft: '3rem',
+ }}
+ >
<Link to="/">
- <Title>{t('header.applicationTitle')}</Title>
+ <Box
+ sx={{
+ color: 'white',
+ whiteSpace: 'nowrap',
+ textDecoration: 'none',
+ fontSize: '2rem',
+ fontWeight: 'bold',
+ }}
+ >
+ {t('header.applicationTitle')}
+ </Box>
</Link>
- <Description>{t('header.applicationDescription')}</Description>
- </TitleBox>
+ <Box sx={{ fontSize: '1rem' }}>
+ {t('header.applicationDescription')}
+ </Box>
+ </Box>
<Menu>
<MenuItem>
<LanguageSelector />
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index e9f0a2eb8980232e9808948635b02a838660da1e..6ed118f53ded8d5d1d4a5eb5ca848259cc8799de 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,7 +1,8 @@
import React from 'react'
import { Switch, Route } from 'react-router-dom'
-import styled from 'styled-components/macro'
+import { styled } from '@mui/system'
+import { CssBaseline } from '@mui/material'
import Sponsor from 'routes/sponsor'
import Register from 'routes/register'
@@ -11,33 +12,36 @@ import Footer from 'routes/components/footer'
import Header from 'routes/components/header'
import NotFound from 'routes/components/notFound'
-const AppWrapper = styled.div`
- display: flex;
- flex-direction: column;
- font-size: 1.6rem;
- min-height: 100vh;
- margin-top: auto;
-`
+const AppWrapper = styled('div')({
+ display: 'flex',
+ flexDirection: 'column',
+ fontSize: '1.6rem',
+ minHeight: '100vh',
+ marginTop: 'auto',
+})
export default function App() {
return (
- <AppWrapper>
- <Header />
- <Switch>
- <Route exact path="/">
- <FrontPage />
- </Route>
- <Route path="/sponsor">
- <Sponsor />
- </Route>
- <Route path="/register">
- <Register />
- </Route>
- <Route>
- <NotFound />
- </Route>
- </Switch>
- <Footer />
- </AppWrapper>
+ <>
+ <CssBaseline />
+ <AppWrapper>
+ <Header />
+ <Switch>
+ <Route exact path="/">
+ <FrontPage />
+ </Route>
+ <Route path="/sponsor">
+ <Sponsor />
+ </Route>
+ <Route path="/register">
+ <Register />
+ </Route>
+ <Route>
+ <NotFound />
+ </Route>
+ </Switch>
+ <Footer />
+ </AppWrapper>
+ </>
)
}
diff --git a/frontend/src/routes/register/index.test.tsx b/frontend/src/routes/register/index.test.tsx
index ea1b509e1beefa02c2944cc9f21a2d72c06eaa4e..4928e1073c106d45821200cc192a1702ce733476 100644
--- a/frontend/src/routes/register/index.test.tsx
+++ b/frontend/src/routes/register/index.test.tsx
@@ -1,12 +1,12 @@
import React from 'react'
-import { render, waitFor, screen } from '@testing-library/react'
+import { render, waitFor, screen } from 'test-utils'
import i18n from 'i18next'
-import { ThemeProvider } from 'styled-components/macro'
import { initReactI18next } from 'react-i18next'
import userEvent from '@testing-library/user-event'
import Register from './index'
-import mainTheme from '../../themes/main'
+// TODO: can this be initialized in 'test-utils'? should we stub it?
+// see https://react.i18next.com/misc/testing
i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
@@ -21,11 +21,7 @@ i18n.use(initReactI18next).init({
})
test('Validation message showing if last name is missing', async () => {
- render(
- <ThemeProvider theme={mainTheme}>
- <Register />
- </ThemeProvider>
- )
+ render(<Register />)
const firstNameLabel = i18n.t('common:firstName').toString()
const firstNameComponent = screen.getByLabelText(firstNameLabel)
@@ -34,7 +30,7 @@ test('Validation message showing if last name is missing', async () => {
userEvent.type(firstNameComponent, 'Test')
// Try to submit the form and check that the validation message is showing
- const submitButton = screen.getByRole('button')
+ const submitButton = screen.getByTestId('register-submit')
userEvent.click(submitButton)
const validationLastName = i18n
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 9b2b8134bf121460583a57f228d675206d61a76c..4f96375791de8ee23190b08e245aed5d3c8feb39 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,14 +1,13 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
+import { useForm, Controller, SubmitHandler } from 'react-hook-form'
-import { StyledInput, StyledLabel } from 'components/form/input'
+import { Box, Button, Stack, TextField } from '@mui/material'
import DateInput from 'components/dateinput'
-import Button from 'components/button'
import Page from 'components/page'
-import { useForm, Controller, SubmitHandler } from 'react-hook-form'
+
import format from 'date-fns/format'
import { isValidFnr, postJsonOpts } from 'utils'
-import StyledValidationError from '../../components/form/error'
type RegisterFormData = {
first_name: string
@@ -49,61 +48,71 @@ export default function Register() {
return (
<Page header="Register as a guest">
- <form onSubmit={onSubmit}>
- <StyledLabel htmlFor="firstName">{t('common:firstName')}</StyledLabel>
- <StyledInput id="firstName" {...register(`first_name`)} />
- <StyledLabel htmlFor="lastName">{t('common:lastName')}</StyledLabel>
- <StyledInput
- id="lastName"
- {...register(`last_name`, {
- required: t('common:validation.lastNameRequired').toString(),
- })}
- />
- {errors.last_name && (
- <StyledValidationError>
- {errors.last_name.message}
- </StyledValidationError>
- )}
- <StyledLabel htmlFor="dateOfBirth">
- {t('common:dateOfBirth')}
- </StyledLabel>
- <Controller
- name="date_of_birth"
- control={control}
- render={({ field }) => (
- <DateInput
- id="dateOfBirth"
- customInput={<StyledInput />}
- onChange={(date) => field.onChange(date)}
- selected={field.value}
+ <Box sx={{ maxWidth: '30rem' }}>
+ <form onSubmit={onSubmit}>
+ <Stack spacing={2}>
+ <TextField
+ id="firstName"
+ label={t('common:firstName')}
+ {...register(`first_name`)}
+ />
+ <TextField
+ id="lastName"
+ label={t('common:lastName')}
+ error={!!errors.last_name}
+ helperText={errors.last_name && errors.last_name.message}
+ {...register(`last_name`, {
+ required: t('common:validation.lastNameRequired').toString(),
+ })}
/>
- )}
- />
- <StyledLabel htmlFor="nationalIdNumber">
- {t('nationalIdNumber')}
- </StyledLabel>
- <StyledInput
- id="nationalIdNumber"
- {...register('national_id_number', {
- required: t(
- 'common:validation.nationalIdNumberRequired'
- ).toString(),
- validate: isValidFnr,
- })}
- />
- {errors.national_id_number && (
- <StyledValidationError>
- {errors.national_id_number.message}
- </StyledValidationError>
- )}
- {/* <Select name="gender" options={['female', 'male', 'other']} />
+ {/* TODO: replace with MUI datepicker? */}
+ <Controller
+ name="date_of_birth"
+ control={control}
+ render={({ field }) => (
+ <DateInput
+ id="dateOfBirth"
+ customInput={
+ <TextField
+ label={t('common:dateOfBirth')}
+ sx={{ display: 'flex' }}
+ />
+ }
+ onChange={(date) => field.onChange(date)}
+ selected={field.value}
+ />
+ )}
+ />
+
+ <TextField
+ id="nationalIdNumber"
+ label={t('nationalIdNumber')}
+ error={!!errors.national_id_number}
+ helperText={
+ errors.national_id_number && errors.national_id_number.message
+ }
+ {...register('national_id_number', {
+ required: t(
+ 'common:validation.nationalIdNumberRequired'
+ ).toString(),
+ validate: isValidFnr,
+ })}
+ />
+
+ {/* <Select name="gender" options={['female', 'male', 'other']} />
<Fnr name={t('common:fnr')} /> */}
- <br />
- <Button as="button" type="submit">
- Submit
- </Button>
- </form>
+
+ <Button
+ type="submit"
+ data-testid="register-submit"
+ variant="outlined"
+ >
+ Submit
+ </Button>
+ </Stack>
+ </form>
+ </Box>
</Page>
)
}
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
deleted file mode 100644
index ec784c0509484cee447a50d34ca8896931236043..0000000000000000000000000000000000000000
--- a/frontend/src/styled.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import 'styled-components/macro'
-
-declare module 'styled-components' {
- export interface DefaultTheme {
- appMinWidth: string
- appMaxWidth: string
- borderRadius: string
- colors: {
- main: string
- secondary: string
- dropDownMenuBackground: string
- errorMessage: string
- }
- footer: {
- backgroundColor: string
- }
- header: {
- height: string
- }
- horizontalPadding: string
- linkExternalColor: string
- linkInternalColor: string
- footerBackgroundColor: string
- footerTextColor: string
- footerJustifyContent: string
- horizontalMdPadding: string
- maxWidth: string
- page: {
- headerColor: string
- headerBackgroundColor: string
- horizontalPadding: string
- }
- }
-}
diff --git a/frontend/src/test-utils.tsx b/frontend/src/test-utils.tsx
index 10782331e89c522f61684182381cdedda326771f..f4012f6a3f6d6dc48946b7217aa54fd61416d737 100644
--- a/frontend/src/test-utils.tsx
+++ b/frontend/src/test-utils.tsx
@@ -1,11 +1,13 @@
import React from 'react'
import { render } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components/macro'
+import { ThemeProvider } from '@mui/material/styles'
-import mainTheme from 'themes/main'
+import { defaultTheme } from 'themes'
// Providers used in test rendering
-const AllTheProviders = ({ children }: any) => <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
+const AllTheProviders = ({ children }: any) => (
+ <ThemeProvider theme={defaultTheme}> {children} </ThemeProvider>
+)
// Custom testing-library/react renderer using our providers.
const customRender = (ui: React.ReactElement, options?: any) =>
diff --git a/frontend/src/themes/color.ts b/frontend/src/themes/color.ts
deleted file mode 100644
index d13e0f21856f5fa36dce9942881c5289cf1d0b45..0000000000000000000000000000000000000000
--- a/frontend/src/themes/color.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-
-export module Color {
- export const white = '#FFFFFF'
- export const hotPink = '#FF69B4'
- export const blueish = '#2771bb'
- export const lightOliveGreen = '#91BD60'
- export const black = '#000000'
- export const darkGray = '#2D2D2E'
- export const lighterBlack = '#282c34'
-}
diff --git a/frontend/src/themes/index.ts b/frontend/src/themes/index.ts
index 9a43490ceded8be0f70c610531ff61a51d780933..789075341d396f6e1ee3aae9d6c6155215fdf2aa 100644
--- a/frontend/src/themes/index.ts
+++ b/frontend/src/themes/index.ts
@@ -1,19 +1,48 @@
+import { createTheme } from '@mui/material/styles'
+import { deepmerge } from '@mui/utils'
+
import uibTheme from 'themes/uib'
import uioTheme from 'themes/uio'
-import mainTheme from 'themes/main'
+import mainTheme from 'themes/main'
import { appTheme } from 'appConfig'
+declare module '@mui/material/styles' {
+ interface Theme {
+ greg: {
+ appMinWidth: string
+ appMaxWidth: string
+ headerBackgroundColor: string
+ headerTextColor: string
+ footerBackgroundColor: string
+ footerTextColor: string
+ }
+ }
+ // allow configuration using `createTheme`
+ interface ThemeOptions {
+ greg?: {
+ appMinWidth?: string
+ appMaxWidth?: string
+ headerBackgroundColor?: string
+ headerTextColor?: string
+ footerBackgroundColor?: string
+ footerTextColor?: string
+ }
+ }
+}
+
+export const defaultTheme = createTheme(mainTheme)
+
function getTheme() {
switch (appTheme) {
case 'uib':
- return { ...mainTheme, ...uibTheme }
+ return createTheme(deepmerge(defaultTheme, uibTheme))
case 'uio':
- return { ...mainTheme, ...uioTheme }
+ return createTheme(deepmerge(defaultTheme, uioTheme))
case 'default':
- return mainTheme
+ return defaultTheme
default:
- return mainTheme
+ return defaultTheme
}
}
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 6c2d360143d1640c6c9df70dd60fa396e86b2837..ba00327c14f681bdfa02560b0617c3b378bd625e 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -1,33 +1,32 @@
-import { DefaultTheme } from 'styled-components/macro'
+import { ThemeOptions } from '@mui/material'
-const mainTheme: DefaultTheme = {
- appMinWidth: '60rem',
- appMaxWidth: '110rem',
- borderRadius: '9px',
- colors: {
- main: 'black',
- secondary: 'white',
- dropDownMenuBackground: 'grey',
- errorMessage: 'red'
- },
- footer: {
- backgroundColor: 'black',
+// Note that a few global styles are set by CssBaseline in 'routes/index.tsx
+
+const mainTheme: ThemeOptions = {
+ greg: {
+ appMinWidth: '60rem',
+ appMaxWidth: '110rem',
+ headerBackgroundColor: 'black',
+ headerTextColor: 'white',
+ footerBackgroundColor: 'black',
+ footerTextColor: 'white',
},
- header: {
- height: '5rem',
+ palette: {
+ primary: {
+ main: '#ba000d',
+ },
},
- horizontalPadding: '2rem',
- linkInternalColor: 'white',
- linkExternalColor: 'blueish',
- maxWidth: '110rem',
- footerBackgroundColor: 'green',
- footerTextColor: 'white',
- footerJustifyContent: 'flex-end',
- horizontalMdPadding: '6.5rem',
- page: {
- headerColor: 'white',
- headerBackgroundColor: 'black',
- horizontalPadding: '0rem',
+ components: {
+ MuiTextField: {
+ defaultProps: {
+ size: 'small',
+ },
+ },
+ MuiButton: {
+ defaultProps: {
+ variant: 'outlined',
+ },
+ },
},
}
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index d65b7e9793238aaa769139be6c07b5779f42b499..52effe433e5e53ca3fae94e8a219f9f571630f7a 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -1,9 +1,10 @@
-const uibTheme = {
- colors: {
- main: 'hotPink',
- secondary: 'black',
- dropDownMenuBackground: 'grey',
- errorMessage: 'red'
+import { ThemeOptions } from "@mui/material"
+
+const uibTheme: ThemeOptions = {
+ palette: {
+ primary: {
+ main: "#ba000d"
+ }
},
}
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index b036ca431a74c12420127079e0188f9f3dadbd7d..6cc692871b3c3e2ca4051563be09a701b636fb56 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -1,9 +1,10 @@
-const uioTheme = {
- colors: {
- main: '#18191C',
- secondary: 'white',
- dropDownMenuBackground: 'grey',
- errorMessage: 'red'
+import { ThemeOptions } from "@mui/material"
+
+const uioTheme: ThemeOptions = {
+ palette: {
+ primary: {
+ main: "#4977af"
+ }
},
}