From 62cbf92afc3bf54715bd34dd7d61f1cd4764d80c Mon Sep 17 00:00:00 2001 From: frilling Date: Tue, 8 Aug 2023 15:37:58 +0200 Subject: [PATCH 1/3] switches to fluentui - wip --- RoomieReloaded/ClientApp/package-lock.json | 353 ++++++++++++++---- RoomieReloaded/ClientApp/package.json | 2 +- .../components/bootstrap/bootstrapView.tsx | 2 +- .../components/navigation/navigationView.tsx | 9 +- .../base/item/PlannerItemComponent.tsx | 9 +- .../src/components/planner/base/planner.tsx | 2 +- .../ClientApp/src/components/toast/toast.tsx | 2 +- 7 files changed, 294 insertions(+), 85 deletions(-) diff --git a/RoomieReloaded/ClientApp/package-lock.json b/RoomieReloaded/ClientApp/package-lock.json index cbd1959..45f433f 100644 --- a/RoomieReloaded/ClientApp/package-lock.json +++ b/RoomieReloaded/ClientApp/package-lock.json @@ -8,6 +8,7 @@ "name": "roomie-reloaded", "version": "0.1.0", "dependencies": { + "@fluentui/react": "^8.110.12", "@types/history": "4.7.2", "@types/jest": "24.0.15", "@types/node": "12.6.2", @@ -19,7 +20,6 @@ "@uifabric/icons": "^7.9.5", "history": "^4.9.0", "moment": "^2.29.4", - "office-ui-fabric-react": "7.105.3", "react": "16.8.6", "react-dom": "16.8.6", "react-redux": "7.1.0", @@ -2239,6 +2239,20 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fluentui/date-time-utilities": { + "version": "8.5.13", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.5.13.tgz", + "integrity": "sha512-X3clbPKh0URkDj21QoARw6SNec7dWg7Gt7SkTlkVYFzmZUdC4ZIrYk3n36xKe3U1wcGp26EVmKjhAhB262ugpw==", + "dependencies": { + "@fluentui/set-version": "^8.2.11", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/date-time-utilities/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, "node_modules/@fluentui/dom-utilities": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-1.1.2.tgz", @@ -2248,24 +2262,235 @@ "tslib": "^1.10.0" } }, + "node_modules/@fluentui/font-icons-mdl2": { + "version": "8.5.23", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.23.tgz", + "integrity": "sha512-jZjUtfQm9/84jX34zhwwsoZME86xXXgKAgBYuMvRStKzXGdZcd7YSOlmuT8lbISmtFL/SWwUGOEal1nLCUNeNA==", + "dependencies": { + "@fluentui/set-version": "^8.2.11", + "@fluentui/style-utilities": "^8.9.16", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/font-icons-mdl2/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/foundation-legacy": { + "version": "8.2.43", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.2.43.tgz", + "integrity": "sha512-rXr71KxNcWDH2LmTsFZbP75p8HssLlVLaFAqEdLE+sKf/LNKmqkDVTNhDbHZxzxy0QnguI4aNHcyGhMZUH3MPA==", + "dependencies": { + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "@fluentui/style-utilities": "^8.9.16", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/foundation-legacy/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/keyboard-key": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.11.tgz", + "integrity": "sha512-TVB/EloWado9AVp1niChgcdDOQAHGP5B30Dinmtfe7zi8OnstwPoxwFP6dHJDdpLQ6ZEUTaEHViSzvewl7Chag==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/keyboard-key/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/merge-styles": { + "version": "8.5.12", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.5.12.tgz", + "integrity": "sha512-ZnUo0YuMP7AYi68dkknFqVxopIAgbrUnqR/MZlemmRvBYyy1SMj1WQeHcoiLFA8mF8YKn7B+jxQgJbN2bfcrRw==", + "dependencies": { + "@fluentui/set-version": "^8.2.11", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/merge-styles/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/react": { + "version": "8.110.12", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.110.12.tgz", + "integrity": "sha512-SQOUhatXtDlbfyX7Ip2aYWjUBHiCZGPk5SVnb+/jv9IhxKLcMXaxA8faps/bp2h/VlS5Fjk6RkbvQM/qoEjlvg==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.5.13", + "@fluentui/font-icons-mdl2": "^8.5.23", + "@fluentui/foundation-legacy": "^8.2.43", + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/react-focus": "^8.8.30", + "@fluentui/react-hooks": "^8.6.29", + "@fluentui/react-portal-compat-context": "^9.0.6", + "@fluentui/react-window-provider": "^2.2.15", + "@fluentui/set-version": "^8.2.11", + "@fluentui/style-utilities": "^8.9.16", + "@fluentui/theme": "^2.6.34", + "@fluentui/utilities": "^8.13.18", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "@types/react-dom": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0", + "react-dom": ">=16.8.0 <19.0.0" + } + }, "node_modules/@fluentui/react-focus": { - "version": "7.1.10", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.1.10.tgz", - "integrity": "sha512-PPCjJLAeX+aNPq0cRYbqc9aOXPEpOF8mY1EMxLXJr75IAVDP6GR0SrQW9tWaoYhUll58TlHdvNMi3nyQe/TzQw==", - "dependencies": { - "@uifabric/merge-styles": "^7.8.10", - "@uifabric/set-version": "^7.0.9", - "@uifabric/styling": "^7.11.0", - "@uifabric/utilities": "^7.15.3", - "tslib": "^1.10.0" + "version": "8.8.30", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.8.30.tgz", + "integrity": "sha512-dKQQtNTZbQOE+u/Tmh7AbtJPSpzQNI0L8o55a22y4U7s33rizUd++CIiToXsB+bPvlotcmpZswZQ8V06zM4KIw==", + "dependencies": { + "@fluentui/keyboard-key": "^0.4.11", + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "@fluentui/style-utilities": "^8.9.16", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-focus/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/react-hooks": { + "version": "8.6.29", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.29.tgz", + "integrity": "sha512-MeVevmGJtrYxdhoarrkVWE0Hs4XdzOc9A3tiOjMBIcwOvoOYOAoOELoHK/wuulPVwUn2R9Y+7JpJ6oCe4ImdJw==", + "dependencies": { + "@fluentui/react-window-provider": "^2.2.15", + "@fluentui/set-version": "^8.2.11", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-hooks/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/react-portal-compat-context": { + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.6.tgz", + "integrity": "sha512-HUt0/YXKRB4chtzlGbZ+7y7FHFyqaI0CeMFAe/QBXVOiOwA01QOr2j4Uky+30vupspIt6mjodLanuw1jMybmqQ==", + "dependencies": { + "@swc/helpers": "^0.4.14" }, "peerDependencies": { - "@types/react": ">=16.8.0 <17.0.0", - "@types/react-dom": ">=16.8.0 <17.0.0", - "react": ">=16.8.0 <17.0.0", - "react-dom": ">=16.8.0 <17.0.0" + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" } }, + "node_modules/@fluentui/react-window-provider": { + "version": "2.2.15", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.15.tgz", + "integrity": "sha512-RraWvRe7wakpPJRBX2tlCV/cybOKiqLJ1UBLPNf5xq7ZIs0T0g/hh3G3Zb5teOeipjuRnl6srkdDUT9Dy9wrBg==", + "dependencies": { + "@fluentui/set-version": "^8.2.11", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react-window-provider/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/react/node_modules/@fluentui/theme": { + "version": "2.6.34", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.34.tgz", + "integrity": "sha512-2Ssi3sX2snnbPJ4PmxbpCDCGePRE36tvGj2qKgdKiSh/fPVsg1b+Q50YlpFl9sXmbhl1uFmxjAx6WPsVGTl7vQ==", + "dependencies": { + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/react/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/set-version": { + "version": "8.2.11", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.11.tgz", + "integrity": "sha512-UI03tysau/adBO1a3q4uFZWQ3lfkiFcAWIFng4k5odWcCokfCm5IxA0urKqj5W5JRYdyoBUaq8QbcNGkFB4dCw==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/set-version/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, + "node_modules/@fluentui/style-utilities": { + "version": "8.9.16", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.9.16.tgz", + "integrity": "sha512-8hS5HscCFYvcWjAdk37frPZJZthr7f/cu5db7gjrPy+DEhf13WAZRHsropWm17+8GhJhvKt98BQf/Kzxtt34Eg==", + "dependencies": { + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "@fluentui/theme": "^2.6.34", + "@fluentui/utilities": "^8.13.18", + "@microsoft/load-themed-styles": "^1.10.26", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/style-utilities/node_modules/@fluentui/theme": { + "version": "2.6.34", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.34.tgz", + "integrity": "sha512-2Ssi3sX2snnbPJ4PmxbpCDCGePRE36tvGj2qKgdKiSh/fPVsg1b+Q50YlpFl9sXmbhl1uFmxjAx6WPsVGTl7vQ==", + "dependencies": { + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "@fluentui/utilities": "^8.13.18", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/style-utilities/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, "node_modules/@fluentui/theme": { "version": "1.7.13", "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-1.7.13.tgz", @@ -2283,6 +2508,35 @@ "react-dom": ">=16.8.0 <18.0.0" } }, + "node_modules/@fluentui/utilities": { + "version": "8.13.18", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.13.18.tgz", + "integrity": "sha512-/0rX9EzltLKwU1SS14VV7agWoOzruVTU3oagZq1QgFAvoj8qi7fNqvSX/VEeRy+0gmbsCkrEViUPkmC7drKzPg==", + "dependencies": { + "@fluentui/dom-utilities": "^2.2.11", + "@fluentui/merge-styles": "^8.5.12", + "@fluentui/set-version": "^8.2.11", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <19.0.0", + "react": ">=16.8.0 <19.0.0" + } + }, + "node_modules/@fluentui/utilities/node_modules/@fluentui/dom-utilities": { + "version": "2.2.11", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.2.11.tgz", + "integrity": "sha512-2tXfg7/9PXu9nfU72/P3o3waHEFEQtHUfQbVexUaYqNNAxMj6sOfsqpUx4vd5nPgO+grSWrl+spqlLN2yej51w==", + "dependencies": { + "@fluentui/set-version": "^8.2.11", + "tslib": "^2.1.0" + } + }, + "node_modules/@fluentui/utilities/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -3535,6 +3789,19 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@swc/helpers/node_modules/tslib": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz", + "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==" + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -4144,24 +4411,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@uifabric/foundation": { - "version": "7.5.23", - "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.5.23.tgz", - "integrity": "sha512-FIzJorSPmazXgiLauRufFnlhKd3W9X0x7iq5EbPHg8zwem6S87qzHn4IuXxBde9KE3LvAtflzlak+VNdXUsPdg==", - "dependencies": { - "@uifabric/merge-styles": "^7.8.10", - "@uifabric/set-version": "^7.0.9", - "@uifabric/styling": "^7.11.0", - "@uifabric/utilities": "^7.15.3", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <17.0.0", - "@types/react-dom": ">=16.8.0 <17.0.0", - "react": ">=16.8.0 <17.0.0", - "react-dom": ">=16.8.0 <17.0.0" - } - }, "node_modules/@uifabric/icons": { "version": "7.9.5", "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.9.5.tgz", @@ -4182,22 +4431,6 @@ "tslib": "^1.10.0" } }, - "node_modules/@uifabric/react-hooks": { - "version": "7.0.24", - "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.0.24.tgz", - "integrity": "sha512-bvvJZ7CyJpzd5U7wASnL94p6yaPOeRbScIfUb6HZiBEX++8h6wfa3jXt1H3cTJh+ZVyFDy8XP+5PelA5UGkXng==", - "dependencies": { - "@uifabric/set-version": "^7.0.9", - "@uifabric/utilities": "^7.15.3", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <17.0.0", - "@types/react-dom": ">=16.8.0 <17.0.0", - "react": ">=16.8.0 <17.0.0", - "react-dom": ">=16.8.0 <17.0.0" - } - }, "node_modules/@uifabric/set-version": { "version": "7.0.24", "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.24.tgz", @@ -12199,30 +12432,6 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, - "node_modules/office-ui-fabric-react": { - "version": "7.105.3", - "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.105.3.tgz", - "integrity": "sha512-BFOwPZFlE+1T6RgroYyKKR+xBhTun8MXjX5Rr5Gt7hHNFun8NmftNWc6M60jcf+CQ9Gt71qQysFcaUFmII/24w==", - "dependencies": { - "@fluentui/react-focus": "^7.1.10", - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/foundation": "^7.5.23", - "@uifabric/icons": "^7.3.22", - "@uifabric/merge-styles": "^7.8.10", - "@uifabric/react-hooks": "^7.0.24", - "@uifabric/set-version": "^7.0.9", - "@uifabric/styling": "^7.11.0", - "@uifabric/utilities": "^7.15.3", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - }, - "peerDependencies": { - "@types/react": ">=16.8.0 <17.0.0", - "@types/react-dom": ">=16.8.0 <17.0.0", - "react": ">=16.8.0 <17.0.0", - "react-dom": ">=16.8.0 <17.0.0" - } - }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", diff --git a/RoomieReloaded/ClientApp/package.json b/RoomieReloaded/ClientApp/package.json index e2a53f0..49ee7fb 100644 --- a/RoomieReloaded/ClientApp/package.json +++ b/RoomieReloaded/ClientApp/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fluentui/react": "^8.110.12", "@types/history": "4.7.2", "@types/jest": "24.0.15", "@types/node": "12.6.2", @@ -14,7 +15,6 @@ "@uifabric/icons": "^7.9.5", "history": "^4.9.0", "moment": "^2.29.4", - "office-ui-fabric-react": "7.105.3", "react": "16.8.6", "react-dom": "16.8.6", "react-redux": "7.1.0", diff --git a/RoomieReloaded/ClientApp/src/components/bootstrap/bootstrapView.tsx b/RoomieReloaded/ClientApp/src/components/bootstrap/bootstrapView.tsx index 1dc20e2..3239702 100644 --- a/RoomieReloaded/ClientApp/src/components/bootstrap/bootstrapView.tsx +++ b/RoomieReloaded/ClientApp/src/components/bootstrap/bootstrapView.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Action } from 'redux'; -import {MessageBar, MessageBarType, Spinner} from "office-ui-fabric-react"; +import {MessageBar, MessageBarType, Spinner} from "@fluentui/react"; import { IRequestState } from "../../actions/actions"; export interface IBootstrapProps extends React.HTMLAttributes, IRequestState { diff --git a/RoomieReloaded/ClientApp/src/components/navigation/navigationView.tsx b/RoomieReloaded/ClientApp/src/components/navigation/navigationView.tsx index c7e2120..3ef55af 100644 --- a/RoomieReloaded/ClientApp/src/components/navigation/navigationView.tsx +++ b/RoomieReloaded/ClientApp/src/components/navigation/navigationView.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import { DefaultButton, CommandBarButton } from 'office-ui-fabric-react/lib/Button'; -import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; -import { Icon } from 'office-ui-fabric-react/lib/Icon'; +import { DefaultButton, CommandBarButton } from '@fluentui/react/lib/Button'; +import { Toggle } from '@fluentui/react/lib/Toggle'; +import { Icon } from '@fluentui/react/lib/Icon'; import './navigation.css'; -import { DatePicker, DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker'; +import { DatePicker } from '@fluentui/react/lib/DatePicker'; +import { DayOfWeek } from '@fluentui/react'; import moment from 'moment'; import { CalendarType } from '../../reducers/calendarReducer'; import { VoidCreator, AnyValueCreator } from '../../actions/actions'; diff --git a/RoomieReloaded/ClientApp/src/components/planner/base/item/PlannerItemComponent.tsx b/RoomieReloaded/ClientApp/src/components/planner/base/item/PlannerItemComponent.tsx index 9129afd..1bf4b1d 100644 --- a/RoomieReloaded/ClientApp/src/components/planner/base/item/PlannerItemComponent.tsx +++ b/RoomieReloaded/ClientApp/src/components/planner/base/item/PlannerItemComponent.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import { TooltipHost, - ITooltipProps, getId, DirectionalHint -} from 'office-ui-fabric-react'; -import { FontIcon } from "office-ui-fabric-react/lib/Icon"; -import { IPoint } from 'office-ui-fabric-react/lib/utilities/positioning'; +} from '@fluentui/react'; +import { ITooltipProps } from '@fluentui/react/lib/Tooltip'; +import { FontIcon } from "@fluentui/react/lib/Icon"; import { IRenderablePlannerItem, } from '../planner'; @@ -162,7 +161,7 @@ class PlannerItemComponent extends React.Component + private getTooltipPosition = (verticalAlign:'top'|'bottom') : { x: number; y: number } | undefined => { const { widthFactor, diff --git a/RoomieReloaded/ClientApp/src/components/planner/base/planner.tsx b/RoomieReloaded/ClientApp/src/components/planner/base/planner.tsx index 10959ff..604db3f 100644 --- a/RoomieReloaded/ClientApp/src/components/planner/base/planner.tsx +++ b/RoomieReloaded/ClientApp/src/components/planner/base/planner.tsx @@ -6,7 +6,7 @@ import {IItemRenderer, ItemRenderer} from './renderer/itemRenderer'; import {isDateTimeInRange, isItemTouchingRangeStrict} from '../utility/dateRangeHelper'; import {isWeekend} from '../../../utility/dateTimeHelper'; import {IPlannerItemParentData} from './item/PlannerItemComponent'; -import {Icon, Spinner} from 'office-ui-fabric-react'; +import {Icon, Spinner} from '@fluentui/react'; import {PlannerLane} from './item/PlannerLaneComponent'; import moment from 'moment'; diff --git a/RoomieReloaded/ClientApp/src/components/toast/toast.tsx b/RoomieReloaded/ClientApp/src/components/toast/toast.tsx index 3e9a7ec..f451c28 100644 --- a/RoomieReloaded/ClientApp/src/components/toast/toast.tsx +++ b/RoomieReloaded/ClientApp/src/components/toast/toast.tsx @@ -1,4 +1,4 @@ -import { MessageBar, MessageBarType } from 'office-ui-fabric-react'; +import { MessageBar, MessageBarType } from '@fluentui/react'; import React from 'react'; import './toast.css' From 29d853f5b37cb9c49340522763101166227d9c23 Mon Sep 17 00:00:00 2001 From: frilling Date: Fri, 11 Aug 2023 12:17:05 +0200 Subject: [PATCH 2/3] fixes button allignment --- .../ClientApp/src/components/navigation/navigation.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/RoomieReloaded/ClientApp/src/components/navigation/navigation.css b/RoomieReloaded/ClientApp/src/components/navigation/navigation.css index 61d54c6..e670ac5 100644 --- a/RoomieReloaded/ClientApp/src/components/navigation/navigation.css +++ b/RoomieReloaded/ClientApp/src/components/navigation/navigation.css @@ -65,7 +65,8 @@ .ms-DatePicker.timeFrameNavigation-button.date { - width: 35px; + width: 32px; + height: 32px; } .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup From 0052b950452a79fabc7240853581491968aa07e8 Mon Sep 17 00:00:00 2001 From: frilling Date: Fri, 1 Sep 2023 10:22:07 +0200 Subject: [PATCH 3/3] Centers Icon --- .../ClientApp/src/components/navigation/navigation.css | 6 +++++- RoomieReloaded/ClientApp/src/index.css | 5 ++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/RoomieReloaded/ClientApp/src/components/navigation/navigation.css b/RoomieReloaded/ClientApp/src/components/navigation/navigation.css index e670ac5..e62151e 100644 --- a/RoomieReloaded/ClientApp/src/components/navigation/navigation.css +++ b/RoomieReloaded/ClientApp/src/components/navigation/navigation.css @@ -65,10 +65,14 @@ .ms-DatePicker.timeFrameNavigation-button.date { - width: 32px; + width: 40px; height: 32px; } +.ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup i { + right: auto; +} + .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup { background-color: transparent; diff --git a/RoomieReloaded/ClientApp/src/index.css b/RoomieReloaded/ClientApp/src/index.css index f2515bd..59a80d3 100644 --- a/RoomieReloaded/ClientApp/src/index.css +++ b/RoomieReloaded/ClientApp/src/index.css @@ -187,7 +187,7 @@ body.dark-mode .boardNavigation-button:hover.boardNavigation-button:hover { body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date { width: auto; } -body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup { +.ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup { border-radius: 0; min-width: 40px; justify-content: center; @@ -195,7 +195,6 @@ body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fiel } body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup i { color: rgba(255,255,255,0.87); - right: auto; } body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date.is-open .ms-TextField-fieldGroup, body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-fieldGroup:hover { @@ -227,7 +226,7 @@ body.dark-mode .ms-DatePicker-day.ms-DatePicker-dayBackground:hover .ms-DatePick body.dark-mode .ms-DatePicker-day.ms-DatePicker-dayBackground:active .ms-DatePicker-day-button { color: rgba(255,255,255,0.87); } -body.dark-mode .ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-field { +.ms-DatePicker.timeFrameNavigation-button.date .ms-TextField-field { display: none; } body.dark-mode .ms-Button.timeFrameNavigation-button {