diff options
| author | Anderson Shindy Oki <[email protected]> | 2024-06-07 12:00:42 +0900 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-06-06 23:00:42 -0400 |
| commit | be8f2d6d183e5206f932be1113e0da7db2a2277a (patch) | |
| tree | 1bfb7ae673c081ab865cb86b6e59fb7f6a4b88e8 /frontend | |
| parent | bb8233b599fa0bd8133b092897a4fbcfd736c8cd (diff) | |
| download | bazarr-be8f2d6d183e5206f932be1113e0da7db2a2277a.tar.gz bazarr-be8f2d6d183e5206f932be1113e0da7db2a2277a.zip | |
Upgraded mantine to v7.xv1.4.4-beta.0
Diffstat (limited to 'frontend')
106 files changed, 1187 insertions, 1241 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index bfc24c17f..f19cbab4d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,12 +9,12 @@ "version": "1.0.0", "license": "GPL-3", "dependencies": { - "@mantine/core": "^6.0.21", - "@mantine/dropzone": "^6.0.21", - "@mantine/form": "^6.0.21", - "@mantine/hooks": "^6.0.21", - "@mantine/modals": "^6.0.21", - "@mantine/notifications": "^6.0.21", + "@mantine/core": "^7.10.1", + "@mantine/dropzone": "^7.10.1", + "@mantine/form": "^7.10.1", + "@mantine/hooks": "^7.10.1", + "@mantine/modals": "^7.10.1", + "@mantine/notifications": "^7.10.1", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -49,6 +49,8 @@ "husky": "^9.0.11", "jsdom": "^24.0.0", "lodash": "^4.17.21", + "postcss-preset-mantine": "^1.14.4", + "postcss-simple-vars": "^7.0.1", "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "pretty-quick": "^4.0.0", @@ -94,6 +96,7 @@ "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==", + "dev": true, "dependencies": { "@babel/highlight": "^7.24.2", "picocolors": "^1.0.0" @@ -335,6 +338,7 @@ "version": "7.24.3", "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz", "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==", + "dev": true, "dependencies": { "@babel/types": "^7.24.0" }, @@ -456,6 +460,7 @@ "version": "7.24.1", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -464,6 +469,7 @@ "version": "7.22.20", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "dev": true, "engines": { "node": ">=6.9.0" } @@ -509,6 +515,7 @@ "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz", "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==", + "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", @@ -523,6 +530,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -534,6 +542,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -547,6 +556,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -554,12 +564,14 @@ "node_modules/@babel/highlight/node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true }, "node_modules/@babel/highlight/node_modules/escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, "engines": { "node": ">=0.8.0" } @@ -568,6 +580,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, "engines": { "node": ">=4" } @@ -576,6 +589,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -2193,6 +2207,7 @@ "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", + "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -2208,120 +2223,6 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, - "node_modules/@emotion/babel-plugin": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", - "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", - "peer": true, - "dependencies": { - "@babel/helper-module-imports": "^7.16.7", - "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/serialize": "^1.1.2", - "babel-plugin-macros": "^3.1.0", - "convert-source-map": "^1.5.0", - "escape-string-regexp": "^4.0.0", - "find-root": "^1.1.0", - "source-map": "^0.5.7", - "stylis": "4.2.0" - } - }, - "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "peer": true, - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", - "stylis": "4.2.0" - } - }, - "node_modules/@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==", - "peer": true - }, - "node_modules/@emotion/memoize": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", - "peer": true - }, - "node_modules/@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", - "peer": true, - "dependencies": { - "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.11.0", - "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", - "hoist-non-react-statics": "^3.3.1" - }, - "peerDependencies": { - "react": ">=16.8.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", - "peer": true, - "dependencies": { - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/unitless": "^0.8.1", - "@emotion/utils": "^1.2.1", - "csstype": "^3.0.2" - } - }, - "node_modules/@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==", - "peer": true - }, - "node_modules/@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", - "peer": true - }, - "node_modules/@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "peer": true, - "peerDependencies": { - "react": ">=16.8.0" - } - }, - "node_modules/@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==", - "peer": true - }, - "node_modules/@emotion/weak-memoize": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", - "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==", - "peer": true - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -2791,13 +2692,13 @@ } }, "node_modules/@floating-ui/react": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.2.tgz", - "integrity": "sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==", + "version": "0.26.12", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.12.tgz", + "integrity": "sha512-D09o62HrWdIkstF2kGekIKAC0/N/Dl6wo3CQsnLcOmO3LkW6Ik8uIb3kw8JYkwxNCcg+uJ2bpWUiIijTBep05w==", "dependencies": { - "@floating-ui/react-dom": "^1.3.0", - "aria-hidden": "^1.1.3", - "tabbable": "^6.0.1" + "@floating-ui/react-dom": "^2.0.0", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -2805,11 +2706,11 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz", - "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", "dependencies": { - "@floating-ui/dom": "^1.2.1" + "@floating-ui/dom": "^1.6.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -3034,120 +2935,107 @@ } }, "node_modules/@mantine/core": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.21.tgz", - "integrity": "sha512-Kx4RrRfv0I+cOCIcsq/UA2aWcYLyXgW3aluAuW870OdXnbII6qg7RW28D+r9D76SHPxWFKwIKwmcucAG08Divg==", + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.10.1.tgz", + "integrity": "sha512-l9ypojKN3PjwO1CSLIsqxi7mA25+7w+xc71Q+JuCCREI0tuGwkZsKbIOpuTATIJOjPh8ycLiW7QxX1LYsRTq6w==", + "license": "MIT", "dependencies": { - "@floating-ui/react": "^0.19.1", - "@mantine/styles": "6.0.21", - "@mantine/utils": "6.0.21", - "@radix-ui/react-scroll-area": "1.0.2", - "react-remove-scroll": "^2.5.5", - "react-textarea-autosize": "8.3.4" + "@floating-ui/react": "^0.26.9", + "clsx": "^2.1.1", + "react-number-format": "^5.3.1", + "react-remove-scroll": "^2.5.7", + "react-textarea-autosize": "8.5.3", + "type-fest": "^4.12.0" }, "peerDependencies": { - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/hooks": "7.10.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@mantine/core/node_modules/type-fest": { + "version": "4.15.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.15.0.tgz", + "integrity": "sha512-tB9lu0pQpX5KJq54g+oHOLumOx+pMep4RaM6liXh2PKmVRFF+/vAtUP0ZaJ0kOySfVNjF6doBWPHhBhISKdlIA==", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/@mantine/dropzone": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-6.0.21.tgz", - "integrity": "sha512-v63tL4x7R1CvBNnxJVaVPhBVnQcfROQvyOV0xK/v0ZGNAzFxjJoiCRMGdlBjxnEawM0dRhNs/46ItpBgjQIr6g==", + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-7.10.1.tgz", + "integrity": "sha512-WzOLwMf8RJtakivPzSYBy3ZLuCtsZEbkJpAXNmM5PdsA8s9MKmY3jYA1MuZis1/NStAGm1d4twofH1KjGCMphg==", + "license": "MIT", "dependencies": { - "@mantine/utils": "6.0.21", - "react-dropzone": "14.2.3" + "react-dropzone-esm": "15.0.1" }, "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/core": "7.10.1", + "@mantine/hooks": "7.10.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, "node_modules/@mantine/form": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.21.tgz", - "integrity": "sha512-d4tlxyZic7MSDnaPx/WliCX1sRFDkUd2nxx4MxxO2T4OSek0YDqTlSBCxeoveu60P+vrQQN5rbbsVsaOJBe4SQ==", + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.10.1.tgz", + "integrity": "sha512-mZwzg4GEWKEDKEIZu9FmSpGFzYYhFD2YArVOXUM0MMciUqX7yxSCon1PaPJxrV8ldc6FE+JLVI2+G2KVxJ3ZXA==", + "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3", - "klona": "^2.0.5" + "klona": "^2.0.6" }, "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@mantine/hooks": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.21.tgz", - "integrity": "sha512-sYwt5wai25W6VnqHbS5eamey30/HD5dNXaZuaVEAJ2i2bBv8C0cCiczygMDpAFiSYdXoSMRr/SZ2CrrPTzeNew==", + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.10.1.tgz", + "integrity": "sha512-0EH9WBWUdtQLGU3Ak+csQ77EtUxI6pPNfwZdRJQWcaA3f8SFOLo9h9CGxiikFExerhvuCeUlaTf3s+TB9Op/rw==", + "license": "MIT", "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@mantine/modals": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.21.tgz", - "integrity": "sha512-Gx2D/ZHMUuYF197JKMWey4K9FeGP9rxYp4lmAEXUrjXiST2fEhLZOdiD75KuOHXd1/sYAU9NcNRo9wXrlF/gUA==", - "dependencies": { - "@mantine/utils": "6.0.21" - }, + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.10.1.tgz", + "integrity": "sha512-2riQSNpVV7f0baizlqcggz9hx9/+y6SQTnW3zEkl/RIkuyK9dpeMFUG6M+M8ntwP79b7x9n7Em9PMWxRbgi28A==", + "license": "MIT", "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/core": "7.10.1", + "@mantine/hooks": "7.10.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, "node_modules/@mantine/notifications": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.21.tgz", - "integrity": "sha512-qsrqxuJHK8b67sf9Pfk+xyhvpf9jMsivW8vchfnJfjv7yz1lLvezjytMFp4fMDoYhjHnDPOEc/YFockK4muhOw==", + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.10.1.tgz", + "integrity": "sha512-cx3JR3BJzEzH6t2EF1ysrWVY/rdJk0WbSBQo/qFamJd2sbU+8XAHriI8Cx6hNo7uRGCwd8VGAj7Cf3aWK2VC5A==", + "license": "MIT", "dependencies": { - "@mantine/utils": "6.0.21", - "react-transition-group": "4.4.2" + "@mantine/store": "7.10.1", + "react-transition-group": "4.4.5" }, "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@mantine/styles": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.21.tgz", - "integrity": "sha512-PVtL7XHUiD/B5/kZ/QvZOZZQQOj12QcRs3Q6nPoqaoPcOX5+S7bMZLMH0iLtcGq5OODYk0uxlvuJkOZGoPj8Mg==", - "dependencies": { - "clsx": "1.1.1", - "csstype": "3.0.9" - }, - "peerDependencies": { - "@emotion/react": ">=11.9.0", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@mantine/styles/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" + "@mantine/core": "7.10.1", + "@mantine/hooks": "7.10.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, - "node_modules/@mantine/styles/node_modules/csstype": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", - "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" - }, - "node_modules/@mantine/utils": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.21.tgz", - "integrity": "sha512-33RVDRop5jiWFao3HKd3Yp7A9mEq4HAJxJPTuYm1NkdqX6aTKOQK7wT8v8itVodBp+sb4cJK6ZVdD1UurK/txQ==", + "node_modules/@mantine/store": { + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.10.1.tgz", + "integrity": "sha512-KrGBsSoMsfrYeLxPwf5rFv0s2Nl/4wf+AaF/U1SpQrMgPI8vYokPXx52Wp3jCmlo12NCZnCIG+/6YHAdTWH1qQ==", + "license": "MIT", "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { @@ -3222,137 +3110,6 @@ "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==", "dev": true }, - "node_modules/@radix-ui/number": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz", - "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, - "node_modules/@radix-ui/primitive": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", - "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, - "node_modules/@radix-ui/react-compose-refs": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", - "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-context": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz", - "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-direction": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz", - "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-presence": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz", - "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-primitive": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz", - "integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-scroll-area": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz", - "integrity": "sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/number": "1.0.0", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-direction": "1.0.0", - "@radix-ui/react-presence": "1.0.0", - "@radix-ui/react-primitive": "1.0.1", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz", - "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", - "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -3899,7 +3656,8 @@ "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", - "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "dev": true }, "node_modules/@types/prop-types": { "version": "15.7.12", @@ -4640,17 +4398,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "node_modules/aria-hidden": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz", - "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==", - "dependencies": { - "tslib": "^2.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/aria-query": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", @@ -4848,14 +4595,6 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, - "node_modules/attr-accept": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", - "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", - "engines": { - "node": ">=4" - } - }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -4903,6 +4642,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -5107,10 +4847,20 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, "engines": { "node": ">=6" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001607", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001607.tgz", @@ -5229,10 +4979,10 @@ } }, "node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "dev": true, + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } @@ -5286,12 +5036,6 @@ "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, - "node_modules/convert-source-map": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "peer": true - }, "node_modules/core-js-compat": { "version": "3.36.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.1.tgz", @@ -5309,6 +5053,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", + "dev": true, "dependencies": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", @@ -5324,6 +5069,7 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, "engines": { "node": ">= 6" } @@ -5348,6 +5094,18 @@ "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", "dev": true }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/cssstyle": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz", @@ -5779,6 +5537,7 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, "dependencies": { "is-arrayish": "^0.2.1" } @@ -5992,6 +5751,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, "engines": { "node": ">=10" }, @@ -6606,17 +6366,6 @@ "node": "^10.12.0 || >=12.0.0" } }, - "node_modules/file-selector": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", - "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", - "dependencies": { - "tslib": "^2.4.0" - }, - "engines": { - "node": ">= 12" - } - }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -6629,12 +6378,6 @@ "node": ">=8" } }, - "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==", - "peer": true - }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -6758,6 +6501,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -7035,6 +6779,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -7042,15 +6787,6 @@ "node": ">= 0.4" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "peer": true, - "dependencies": { - "react-is": "^16.7.0" - } - }, "node_modules/html-encoding-sniffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", @@ -7150,6 +6886,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" @@ -7243,7 +6980,8 @@ "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==" + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true }, "node_modules/is-async-function": { "version": "2.0.0", @@ -7316,6 +7054,7 @@ "version": "2.13.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "dev": true, "dependencies": { "hasown": "^2.0.0" }, @@ -7934,7 +7673,8 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -8053,7 +7793,8 @@ "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", - "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true }, "node_modules/local-pkg": { "version": "0.5.0", @@ -8621,6 +8362,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, "dependencies": { "callsites": "^3.0.0" }, @@ -8632,6 +8374,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", @@ -8686,12 +8429,14 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, "engines": { "node": ">=8" } @@ -8714,7 +8459,8 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true }, "node_modules/picomatch": { "version": "2.3.1", @@ -8776,6 +8522,108 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-mixins": { + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz", + "integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==", + "dev": true, + "dependencies": { + "fast-glob": "^3.2.11", + "postcss-js": "^4.0.0", + "postcss-simple-vars": "^7.0.0", + "sugarss": "^4.0.1" + }, + "engines": { + "node": ">=14.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-nested": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.11" + }, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-preset-mantine": { + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/postcss-preset-mantine/-/postcss-preset-mantine-1.14.4.tgz", + "integrity": "sha512-T1K3MVhU1hA9mJWfqoGvMcK5WKcHpVi4JUX6AYTbESvp78WneB/KFONUi+eXDG9Lpw62W/KNxEYl1ic3Dpm88w==", + "dev": true, + "dependencies": { + "postcss-mixins": "^9.0.4", + "postcss-nested": "^6.0.1" + }, + "peerDependencies": { + "postcss": ">=8.0.0" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-simple-vars": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz", + "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==", + "dev": true, + "engines": { + "node": ">=14.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.1" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -8967,13 +8815,11 @@ "react": "^18.2.0" } }, - "node_modules/react-dropzone": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", - "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", + "node_modules/react-dropzone-esm": { + "version": "15.0.1", + "resolved": "https://registry.npmjs.org/react-dropzone-esm/-/react-dropzone-esm-15.0.1.tgz", + "integrity": "sha512-RdeGpqwHnoV/IlDFpQji7t7pTtlC2O1i/Br0LWkRZ9hYtLyce814S71h5NolnCZXsIN5wrZId6+8eQj2EBnEzg==", "dependencies": { - "attr-accept": "^2.2.2", - "file-selector": "^0.6.0", "prop-types": "^15.8.1" }, "engines": { @@ -8988,6 +8834,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-number-format": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.4.tgz", + "integrity": "sha512-2hHN5mbLuCDUx19bv0Q8wet67QqYK6xmtLQeY5xx+h7UXiMmRtaCwqko4mMPoKXLc6xAzwRrutg8XbTRlsfjRg==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-query": { "version": "3.39.3", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", @@ -9112,22 +8970,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-smooth/node_modules/react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "dev": true, - "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/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -9164,11 +9006,11 @@ } }, "node_modules/react-textarea-autosize": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz", - "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", "dependencies": { - "@babel/runtime": "^7.10.2", + "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, @@ -9180,9 +9022,9 @@ } }, "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==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -9375,6 +9217,7 @@ "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", @@ -9391,6 +9234,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, "engines": { "node": ">=4" } @@ -9701,15 +9545,6 @@ "node": ">=10.0.0" } }, - "node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", - "peer": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -9905,11 +9740,21 @@ "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==", "dev": true }, - "node_modules/stylis": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", - "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", - "peer": true + "node_modules/sugarss": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz", + "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==", + "dev": true, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.3.3" + } }, "node_modules/supports-color": { "version": "7.2.0", @@ -9927,6 +9772,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, "engines": { "node": ">= 0.4" }, @@ -9999,6 +9845,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, "engines": { "node": ">=4" } @@ -10432,6 +10279,12 @@ } } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, "node_modules/v8-to-istanbul": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index eadb26496..971065e4d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,12 +13,12 @@ }, "private": true, "dependencies": { - "@mantine/core": "^6.0.21", - "@mantine/dropzone": "^6.0.21", - "@mantine/form": "^6.0.21", - "@mantine/hooks": "^6.0.21", - "@mantine/modals": "^6.0.21", - "@mantine/notifications": "^6.0.21", + "@mantine/core": "^7.10.1", + "@mantine/dropzone": "^7.10.1", + "@mantine/form": "^7.10.1", + "@mantine/hooks": "^7.10.1", + "@mantine/modals": "^7.10.1", + "@mantine/notifications": "^7.10.1", "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -53,6 +53,8 @@ "husky": "^9.0.11", "jsdom": "^24.0.0", "lodash": "^4.17.21", + "postcss-preset-mantine": "^1.14.4", + "postcss-simple-vars": "^7.0.1", "prettier": "^3.2.5", "prettier-plugin-organize-imports": "^3.2.4", "pretty-quick": "^4.0.0", diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs new file mode 100644 index 000000000..e817f567b --- /dev/null +++ b/frontend/postcss.config.cjs @@ -0,0 +1,14 @@ +module.exports = { + plugins: { + "postcss-preset-mantine": {}, + "postcss-simple-vars": { + variables: { + "mantine-breakpoint-xs": "36em", + "mantine-breakpoint-sm": "48em", + "mantine-breakpoint-md": "62em", + "mantine-breakpoint-lg": "75em", + "mantine-breakpoint-xl": "88em", + }, + }, + }, +}; diff --git a/frontend/src/App/Header.module.scss b/frontend/src/App/Header.module.scss new file mode 100644 index 000000000..85b3661a9 --- /dev/null +++ b/frontend/src/App/Header.module.scss @@ -0,0 +1,9 @@ +.header { + @include light { + color: var(--mantine-color-gray-0); + } + + @include dark { + color: var(--mantine-color-dark-0); + } +} diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx index c15071045..6bb47f5b1 100644 --- a/frontend/src/App/Header.tsx +++ b/frontend/src/App/Header.tsx @@ -1,6 +1,5 @@ import { useSystem, useSystemSettings } from "@/apis/hooks"; import { Action, Search } from "@/components"; -import { Layout } from "@/constants"; import { useNavbar } from "@/contexts/Navbar"; import { useIsOnline } from "@/contexts/Online"; import { Environment, useGotoHomepage } from "@/utilities"; @@ -12,27 +11,16 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Anchor, + AppShell, Avatar, Badge, Burger, Divider, Group, - Header, - MediaQuery, Menu, - createStyles, } from "@mantine/core"; import { FunctionComponent } from "react"; - -const useStyles = createStyles((theme) => { - const headerBackgroundColor = - theme.colorScheme === "light" ? theme.colors.gray[0] : theme.colors.dark[4]; - return { - header: { - backgroundColor: headerBackgroundColor, - }, - }; -}); +import styles from "./Header.module.scss"; const AppHeader: FunctionComponent = () => { const { data: settings } = useSystemSettings(); @@ -47,39 +35,28 @@ const AppHeader: FunctionComponent = () => { const goHome = useGotoHomepage(); - const { classes } = useStyles(); - return ( - <Header p="md" height={Layout.HEADER_HEIGHT} className={classes.header}> - <Group position="apart" noWrap> - <Group noWrap> - <MediaQuery - smallerThan={Layout.MOBILE_BREAKPOINT} - styles={{ display: "none" }} - > - <Anchor onClick={goHome}> - <Avatar - alt="brand" - size={32} - src={`${Environment.baseUrl}/images/logo64.png`} - ></Avatar> - </Anchor> - </MediaQuery> - <MediaQuery - largerThan={Layout.MOBILE_BREAKPOINT} - styles={{ display: "none" }} - > - <Burger - opened={showed} - onClick={() => show(!showed)} - size="sm" - ></Burger> - </MediaQuery> + <AppShell.Header p="md" className={styles.header}> + <Group justify="space-between" wrap="nowrap"> + <Group wrap="nowrap"> + <Anchor onClick={goHome} visibleFrom="sm"> + <Avatar + alt="brand" + size={32} + src={`${Environment.baseUrl}/images/logo64.png`} + ></Avatar> + </Anchor> + <Burger + opened={showed} + onClick={() => show(!showed)} + size="sm" + hiddenFrom="sm" + ></Burger> <Badge size="lg" radius="sm"> Bazarr </Badge> </Group> - <Group spacing="xs" position="right" noWrap> + <Group gap="xs" justify="right" wrap="nowrap"> <Search></Search> <Menu> <Menu.Target> @@ -95,13 +72,13 @@ const AppHeader: FunctionComponent = () => { </Menu.Target> <Menu.Dropdown> <Menu.Item - icon={<FontAwesomeIcon icon={faArrowRotateLeft} />} + leftSection={<FontAwesomeIcon icon={faArrowRotateLeft} />} onClick={() => restart()} > Restart </Menu.Item> <Menu.Item - icon={<FontAwesomeIcon icon={faPowerOff} />} + leftSection={<FontAwesomeIcon icon={faPowerOff} />} onClick={() => shutdown()} > Shutdown @@ -114,7 +91,7 @@ const AppHeader: FunctionComponent = () => { </Menu> </Group> </Group> - </Header> + </AppShell.Header> ); }; diff --git a/frontend/src/App/Navbar.module.scss b/frontend/src/App/Navbar.module.scss new file mode 100644 index 000000000..ddb444e4d --- /dev/null +++ b/frontend/src/App/Navbar.module.scss @@ -0,0 +1,56 @@ +.anchor { + border-color: var(--mantine-color-gray-5); + text-decoration: none; + + @include dark { + border-color: var(--mantine-color-dark-5); + } + + &.active { + border-left: 2px solid $color-brand-4; + background-color: var(--mantine-color-gray-1); + + @include dark { + border-left: 2px solid $color-brand-8; + background-color: var(--mantine-color-dark-8); + } + } + + &.hover { + background-color: var(--mantine-color-gray-0); + + @include dark { + background-color: var(--mantine-color-dark-7); + } + } +} + +.badge { + margin-left: auto; + text-decoration: none; + box-shadow: var(--mantine-shadow-xs); +} + +.icon { + width: 1.4rem; + margin-right: var(--mantine-spacing-xs); +} + +.nav { + background-color: var(--mantine-color-gray-2); + + @include dark { + background-color: var(--mantine-color-dark-8); + } +} + +.text { + display: inline-flex; + align-items: center; + width: 100%; + color: var(--mantine-color-gray-8); + + @include dark { + color: var(--mantine-color-gray-5); + } +} diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx index c626dc257..8254f2fc0 100644 --- a/frontend/src/App/Navbar.tsx +++ b/frontend/src/App/Navbar.tsx @@ -1,5 +1,4 @@ import { Action } from "@/components"; -import { Layout } from "@/constants"; import { useNavbar } from "@/contexts/Navbar"; import { useRouteItems } from "@/Router"; import { CustomRouteObject, Route } from "@/Router/type"; @@ -14,19 +13,19 @@ import { import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Anchor, + AppShell, Badge, Collapse, - createStyles, Divider, Group, - Navbar as MantineNavbar, Stack, Text, + useComputedColorScheme, useMantineColorScheme, } from "@mantine/core"; import { useHover } from "@mantine/hooks"; import clsx from "clsx"; -import { +import React, { createContext, FunctionComponent, useContext, @@ -35,6 +34,7 @@ import { useState, } from "react"; import { matchPath, NavLink, RouteObject, useLocation } from "react-router-dom"; +import styles from "./Navbar.module.scss"; const Selection = createContext<{ selection: string | null; @@ -97,11 +97,12 @@ function useIsActive(parent: string, route: RouteObject) { } const AppNavbar: FunctionComponent = () => { - const { showed } = useNavbar(); const [selection, select] = useState<string | null>(null); - const { colorScheme, toggleColorScheme } = useMantineColorScheme(); - const dark = colorScheme === "dark"; + const { toggleColorScheme } = useMantineColorScheme(); + const computedColorScheme = useComputedColorScheme("light"); + + const dark = computedColorScheme === "dark"; const routes = useRouteItems(); @@ -111,23 +112,10 @@ const AppNavbar: FunctionComponent = () => { }, [pathname]); return ( - <MantineNavbar - p="xs" - hiddenBreakpoint={Layout.MOBILE_BREAKPOINT} - hidden={!showed} - width={{ [Layout.MOBILE_BREAKPOINT]: Layout.NAVBAR_WIDTH }} - styles={(theme) => ({ - root: { - backgroundColor: - theme.colorScheme === "light" - ? theme.colors.gray[2] - : theme.colors.dark[6], - }, - })} - > + <AppShell.Navbar p="xs" className={styles.nav}> <Selection.Provider value={{ selection, select }}> - <MantineNavbar.Section grow> - <Stack spacing={0}> + <AppShell.Section grow> + <Stack gap={0}> {routes.map((route, idx) => ( <RouteItem key={BuildKey("nav", idx)} @@ -136,10 +124,10 @@ const AppNavbar: FunctionComponent = () => { ></RouteItem> ))} </Stack> - </MantineNavbar.Section> + </AppShell.Section> <Divider></Divider> - <MantineNavbar.Section mt="xs"> - <Group spacing="xs"> + <AppShell.Section mt="xs"> + <Group gap="xs"> <Action label="Change Theme" color={dark ? "yellow" : "indigo"} @@ -159,9 +147,9 @@ const AppNavbar: FunctionComponent = () => { ></Action> </Anchor> </Group> - </MantineNavbar.Section> + </AppShell.Section> </Selection.Provider> - </MantineNavbar> + </AppShell.Navbar> ); }; @@ -186,7 +174,7 @@ const RouteItem: FunctionComponent<{ if (children !== undefined) { const elements = ( - <Stack spacing={0}> + <Stack gap={0}> {children.map((child, idx) => ( <RouteItem parent={link} @@ -199,7 +187,7 @@ const RouteItem: FunctionComponent<{ if (name) { return ( - <Stack spacing={0}> + <Stack gap={0}> <NavbarItem primary name={name} @@ -244,53 +232,6 @@ const RouteItem: FunctionComponent<{ } }; -const useStyles = createStyles((theme) => { - const borderColor = - theme.colorScheme === "light" ? theme.colors.gray[5] : theme.colors.dark[4]; - - const activeBorderColor = - theme.colorScheme === "light" - ? theme.colors.brand[4] - : theme.colors.brand[8]; - - const activeBackgroundColor = - theme.colorScheme === "light" ? theme.colors.gray[1] : theme.colors.dark[8]; - - const hoverBackgroundColor = - theme.colorScheme === "light" ? theme.colors.gray[0] : theme.colors.dark[7]; - - const textColor = - theme.colorScheme === "light" ? theme.colors.gray[8] : theme.colors.gray[5]; - - return { - text: { - display: "inline-flex", - alignItems: "center", - width: "100%", - color: textColor, - }, - anchor: { - textDecoration: "none", - borderLeft: `2px solid ${borderColor}`, - }, - active: { - backgroundColor: activeBackgroundColor, - borderLeft: `2px solid ${activeBorderColor}`, - boxShadow: theme.shadows.xs, - }, - hover: { - backgroundColor: hoverBackgroundColor, - }, - icon: { width: "1.4rem", marginRight: theme.spacing.xs }, - badge: { - marginLeft: "auto", - textDecoration: "none", - boxShadow: theme.shadows.xs, - color: textColor, - }, - }; -}); - interface NavbarItemProps { name: string; link: string; @@ -308,8 +249,6 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({ onClick, primary = false, }) => { - const { classes } = useStyles(); - const { show } = useNavbar(); const { ref, hovered } = useHover(); @@ -335,9 +274,9 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({ }} className={({ isActive }) => clsx( - clsx(classes.anchor, { - [classes.active]: isActive, - [classes.hover]: hovered, + clsx(styles.anchor, { + [styles.active]: isActive, + [styles.hover]: hovered, }), ) } @@ -347,18 +286,19 @@ const NavbarItem: FunctionComponent<NavbarItemProps> = ({ inline p="xs" size="sm" - weight={primary ? "bold" : "normal"} - className={classes.text} + fw={primary ? "bold" : "normal"} + className={styles.text} + span > {icon && ( <FontAwesomeIcon - className={classes.icon} + className={styles.icon} icon={icon} ></FontAwesomeIcon> )} {name} - {shouldHideBadge === false && ( - <Badge className={classes.badge} radius="xs"> + {!shouldHideBadge && ( + <Badge className={styles.badge} radius="xs"> {badge} </Badge> )} diff --git a/frontend/src/App/ThemeLoader.tsx b/frontend/src/App/ThemeLoader.tsx new file mode 100644 index 000000000..2bc7e4005 --- /dev/null +++ b/frontend/src/App/ThemeLoader.tsx @@ -0,0 +1,39 @@ +import { useCallback, useEffect, useState } from "react"; +import { MantineColorScheme, useMantineColorScheme } from "@mantine/core"; +import { useSystemSettings } from "@/apis/hooks"; + +const ThemeProvider = () => { + const [localScheme, setLocalScheme] = useState<MantineColorScheme | null>( + null, + ); + const { setColorScheme } = useMantineColorScheme(); + + const settings = useSystemSettings(); + + const settingsColorScheme = settings.data?.general + .theme as MantineColorScheme; + + const setScheme = useCallback( + (colorScheme: MantineColorScheme) => { + setColorScheme(colorScheme); + }, + [setColorScheme], + ); + + useEffect(() => { + if (!settingsColorScheme) { + return; + } + + if (localScheme === settingsColorScheme) { + return; + } + + setScheme(settingsColorScheme); + setLocalScheme(settingsColorScheme); + }, [settingsColorScheme, setScheme, localScheme]); + + return <></>; +}; + +export default ThemeProvider; diff --git a/frontend/src/App/ThemeProvider.tsx b/frontend/src/App/ThemeProvider.tsx new file mode 100644 index 000000000..d3a39cdb0 --- /dev/null +++ b/frontend/src/App/ThemeProvider.tsx @@ -0,0 +1,61 @@ +import { + ActionIcon, + AppShell, + Badge, + Button, + createTheme, + MantineProvider, +} from "@mantine/core"; +import { FunctionComponent, PropsWithChildren } from "react"; +import ThemeLoader from "@/App/ThemeLoader"; +import "@mantine/core/styles.layer.css"; +import "@mantine/notifications/styles.layer.css"; +import styleVars from "@/assets/_variables.module.scss"; +import buttonClasses from "@/assets/button.module.scss"; +import actionIconClasses from "@/assets/action_icon.module.scss"; +import appShellClasses from "@/assets/app_shell.module.scss"; +import badgeClasses from "@/assets/badge.module.scss"; + +const themeProvider = createTheme({ + fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif", + colors: { + brand: [ + styleVars.colorBrand0, + styleVars.colorBrand1, + styleVars.colorBrand2, + styleVars.colorBrand3, + styleVars.colorBrand4, + styleVars.colorBrand5, + styleVars.colorBrand6, + styleVars.colorBrand7, + styleVars.colorBrand8, + styleVars.colorBrand9, + ], + }, + primaryColor: "brand", + components: { + ActionIcon: ActionIcon.extend({ + classNames: actionIconClasses, + }), + AppShell: AppShell.extend({ + classNames: appShellClasses, + }), + Badge: Badge.extend({ + classNames: badgeClasses, + }), + Button: Button.extend({ + classNames: buttonClasses, + }), + }, +}); + +const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => { + return ( + <MantineProvider theme={themeProvider} defaultColorScheme="auto"> + <ThemeLoader /> + {children} + </MantineProvider> + ); +}; + +export default ThemeProvider; diff --git a/frontend/src/App/index.tsx b/frontend/src/App/index.tsx index 4e09a97da..1b27734f4 100644 --- a/frontend/src/App/index.tsx +++ b/frontend/src/App/index.tsx @@ -1,7 +1,6 @@ import AppNavbar from "@/App/Navbar"; import { RouterNames } from "@/Router/RouterNames"; import ErrorBoundary from "@/components/ErrorBoundary"; -import { Layout } from "@/constants"; import NavbarProvider from "@/contexts/Navbar"; import OnlineProvider from "@/contexts/Online"; import { notification } from "@/modules/task"; @@ -13,6 +12,7 @@ import { showNotification } from "@mantine/notifications"; import { FunctionComponent, useEffect, useState } from "react"; import { Outlet, useNavigate } from "react-router-dom"; import AppHeader from "./Header"; +import styleVars from "@/assets/_variables.module.scss"; const App: FunctionComponent = () => { const navigate = useNavigate(); @@ -55,13 +55,19 @@ const App: FunctionComponent = () => { <NavbarProvider value={{ showed: navbar, show: setNavbar }}> <OnlineProvider value={{ online, setOnline }}> <AppShell - navbarOffsetBreakpoint={Layout.MOBILE_BREAKPOINT} - header={<AppHeader></AppHeader>} - navbar={<AppNavbar></AppNavbar>} + navbar={{ + width: styleVars.navBarWidth, + breakpoint: "sm", + collapsed: { mobile: !navbar }, + }} + header={{ height: { base: styleVars.headerHeight } }} padding={0} - fixed > - <Outlet></Outlet> + <AppHeader></AppHeader> + <AppNavbar></AppNavbar> + <AppShell.Main> + <Outlet></Outlet> + </AppShell.Main> </AppShell> </OnlineProvider> </NavbarProvider> diff --git a/frontend/src/App/theme.tsx b/frontend/src/App/theme.tsx deleted file mode 100644 index 947b4f7a8..000000000 --- a/frontend/src/App/theme.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useSystemSettings } from "@/apis/hooks"; -import { - ColorScheme, - ColorSchemeProvider, - createEmotionCache, - MantineProvider, - MantineThemeOverride, -} from "@mantine/core"; -import { useColorScheme } from "@mantine/hooks"; -import { - FunctionComponent, - PropsWithChildren, - useCallback, - useEffect, - useState, -} from "react"; - -const theme: MantineThemeOverride = { - fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif", - colors: { - brand: [ - "#F8F0FC", - "#F3D9FA", - "#EEBEFA", - "#E599F7", - "#DA77F2", - "#CC5DE8", - "#BE4BDB", - "#AE3EC9", - "#9C36B5", - "#862E9C", - ], - }, - primaryColor: "brand", -}; - -function useAutoColorScheme() { - const settings = useSystemSettings(); - const settingsColorScheme = settings.data?.general.theme; - - let preferredColorScheme: ColorScheme = useColorScheme(); - switch (settingsColorScheme) { - case "light": - preferredColorScheme = "light" as ColorScheme; - break; - case "dark": - preferredColorScheme = "dark" as ColorScheme; - break; - } - - const [colorScheme, setColorScheme] = useState(preferredColorScheme); - - // automatically switch dark/light theme - useEffect(() => { - setColorScheme(preferredColorScheme); - }, [preferredColorScheme]); - - const toggleColorScheme = useCallback((value?: ColorScheme) => { - setColorScheme((scheme) => value || (scheme === "dark" ? "light" : "dark")); - }, []); - - return { colorScheme, setColorScheme, toggleColorScheme }; -} - -const emotionCache = createEmotionCache({ key: "bazarr" }); - -const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => { - const { colorScheme, toggleColorScheme } = useAutoColorScheme(); - - return ( - <ColorSchemeProvider - colorScheme={colorScheme} - toggleColorScheme={toggleColorScheme} - > - <MantineProvider - withGlobalStyles - withNormalizeCSS - theme={{ colorScheme, ...theme }} - emotionCache={emotionCache} - > - {children} - </MantineProvider> - </ColorSchemeProvider> - ); -}; - -export default ThemeProvider; diff --git a/frontend/src/Router/index.tsx b/frontend/src/Router/index.tsx index 335cf2d75..efed2edb2 100644 --- a/frontend/src/Router/index.tsx +++ b/frontend/src/Router/index.tsx @@ -53,7 +53,9 @@ import Redirector from "./Redirector"; import { RouterNames } from "./RouterNames"; import { CustomRouteObject } from "./type"; -const HistoryStats = lazy(() => import("@/pages/History/Statistics")); +const HistoryStats = lazy( + () => import("@/pages/History/Statistics/HistoryStats"), +); const SystemStatusView = lazy(() => import("@/pages/System/Status")); function useRoutes(): CustomRouteObject[] { diff --git a/frontend/src/assets/_bazarr.scss b/frontend/src/assets/_bazarr.scss new file mode 100644 index 000000000..6c23aac1a --- /dev/null +++ b/frontend/src/assets/_bazarr.scss @@ -0,0 +1,40 @@ +$color-brand-0: #f8f0fc; +$color-brand-1: #f3d9fa; +$color-brand-2: #eebefa; +$color-brand-3: #e599f7; +$color-brand-4: #da77f2; +$color-brand-5: #cc5de8; +$color-brand-6: #be4bdb; +$color-brand-7: #ae3ec9; +$color-brand-8: #9c36b5; +$color-brand-9: #862e9c; + +$header-height: 64px; + +:global { + .table-long-break { + overflow-wrap: anywhere; + } + + .table-primary { + display: inline-block; + + font-size: var(--mantine-font-size-sm); + + @include smaller-than($mantine-breakpoint-sm) { + min-width: 12rem; + } + } + + .table-no-wrap { + white-space: nowrap; + } + + .table-select { + display: inline-block; + + @include smaller-than($mantine-breakpoint-sm) { + min-width: 10rem; + } + } +} diff --git a/frontend/src/assets/_mantine.scss b/frontend/src/assets/_mantine.scss new file mode 100644 index 000000000..93412c636 --- /dev/null +++ b/frontend/src/assets/_mantine.scss @@ -0,0 +1,61 @@ +@use "sass:math"; + +$mantine-breakpoint-xs: "36em"; +$mantine-breakpoint-sm: "48em"; +$mantine-breakpoint-md: "62em"; +$mantine-breakpoint-lg: "75em"; +$mantine-breakpoint-xl: "88em"; + +@function rem($value) { + @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem; +} + +@mixin light { + [data-mantine-color-scheme="light"] & { + @content; + } +} + +@mixin dark { + [data-mantine-color-scheme="dark"] & { + @content; + } +} + +@mixin hover { + @media (hover: hover) { + &:hover { + @content; + } + } + + @media (hover: none) { + &:active { + @content; + } + } +} + +@mixin smaller-than($breakpoint) { + @media (max-width: $breakpoint) { + @content; + } +} + +@mixin larger-than($breakpoint) { + @media (min-width: $breakpoint) { + @content; + } +} + +@mixin rtl { + [dir="rtl"] & { + @content; + } +} + +@mixin ltr { + [dir="ltr"] & { + @content; + } +} diff --git a/frontend/src/assets/_variables.module.scss b/frontend/src/assets/_variables.module.scss new file mode 100644 index 000000000..262d285b2 --- /dev/null +++ b/frontend/src/assets/_variables.module.scss @@ -0,0 +1,18 @@ +$navbar-width: 200; + +:export { + colorBrand0: $color-brand-0; + colorBrand1: $color-brand-1; + colorBrand2: $color-brand-2; + colorBrand3: $color-brand-3; + colorBrand4: $color-brand-4; + colorBrand5: $color-brand-5; + colorBrand6: $color-brand-6; + colorBrand7: $color-brand-7; + colorBrand8: $color-brand-8; + colorBrand9: $color-brand-9; + + headerHeight: $header-height; + + navBarWidth: $navbar-width; +} diff --git a/frontend/src/assets/action_icon.module.scss b/frontend/src/assets/action_icon.module.scss new file mode 100644 index 000000000..c4bf2eefa --- /dev/null +++ b/frontend/src/assets/action_icon.module.scss @@ -0,0 +1,14 @@ +@layer mantine { + .root { + &[data-variant="light"] { + color: var(--mantine-color-dark-0); + } + + @include light { + &[data-variant="light"] { + background-color: var(--mantine-color-gray-1); + color: var(--mantine-color-dark-2); + } + } + } +} diff --git a/frontend/src/assets/app_shell.module.scss b/frontend/src/assets/app_shell.module.scss new file mode 100644 index 000000000..b027c771a --- /dev/null +++ b/frontend/src/assets/app_shell.module.scss @@ -0,0 +1,5 @@ +.main { + @include dark { + background-color: rgb(26, 27, 30); + } +} diff --git a/frontend/src/assets/badge.module.scss b/frontend/src/assets/badge.module.scss new file mode 100644 index 000000000..830da2927 --- /dev/null +++ b/frontend/src/assets/badge.module.scss @@ -0,0 +1,8 @@ +.root { + background-color: var(--mantine-color-grape-light); + + @include light { + color: var(--mantine-color-dark-filled); + background-color: var(--mantine-color-grape-light); + } +} diff --git a/frontend/src/assets/button.module.scss b/frontend/src/assets/button.module.scss new file mode 100644 index 000000000..4ef306883 --- /dev/null +++ b/frontend/src/assets/button.module.scss @@ -0,0 +1,12 @@ +@layer mantine { + .root { + @include dark { + color: var(--mantine-color-dark-0); + } + + &[data-variant="danger"] { + background-color: var(--mantine-color-red-9); + color: var(--mantine-color-red-0); + } + } +} diff --git a/frontend/src/components/Search.module.scss b/frontend/src/components/Search.module.scss new file mode 100644 index 000000000..2c42098eb --- /dev/null +++ b/frontend/src/components/Search.module.scss @@ -0,0 +1,9 @@ +.result { + @include light { + color: var(--mantine-color-dark-8); + } + + @include dark { + color: var(--mantine-color-gray-1); + } +} diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx index bc4a9f8d3..75341e0a8 100644 --- a/frontend/src/components/Search.tsx +++ b/frontend/src/components/Search.tsx @@ -5,11 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Anchor, Autocomplete, - createStyles, - SelectItemProps, + ComboboxItem, + OptionsFilter, } from "@mantine/core"; -import { forwardRef, FunctionComponent, useMemo, useState } from "react"; +import { FunctionComponent, useMemo, useState } from "react"; import { Link } from "react-router-dom"; +import styles from "./Search.module.scss"; type SearchResultItem = { value: string; @@ -41,36 +42,35 @@ function useSearch(query: string) { ); } -const useStyles = createStyles((theme) => { - return { - result: { - color: - theme.colorScheme === "light" - ? theme.colors.dark[8] - : theme.colors.gray[1], - }, - }; -}); - -type ResultCompProps = SelectItemProps & SearchResultItem; - -const ResultComponent = forwardRef<HTMLDivElement, ResultCompProps>( - ({ link, value }, ref) => { - const styles = useStyles(); +const optionsFilter: OptionsFilter = ({ options, search }) => { + const lowercaseSearch = search.toLowerCase(); + const trimmedSearch = search.trim(); + return (options as ComboboxItem[]).filter((option) => { return ( - <Anchor - component={Link} - to={link} - underline={false} - className={styles.classes.result} - p="sm" - > - {value} - </Anchor> + option.value.toLowerCase().includes(lowercaseSearch) || + option.value + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + .toLowerCase() + .includes(trimmedSearch) ); - }, -); + }); +}; + +const ResultComponent = ({ name, link }: { name: string; link: string }) => { + return ( + <Anchor + component={Link} + to={link} + underline="never" + className={styles.result} + p="sm" + > + {name} + </Anchor> + ); +}; const Search: FunctionComponent = () => { const [query, setQuery] = useState(""); @@ -79,22 +79,22 @@ const Search: FunctionComponent = () => { return ( <Autocomplete - icon={<FontAwesomeIcon icon={faSearch} />} - itemComponent={ResultComponent} + leftSection={<FontAwesomeIcon icon={faSearch} />} + renderOption={(input) => ( + <ResultComponent + name={input.option.value} + link={ + results.find((a) => a.value === input.option.value)?.link || "/" + } + /> + )} placeholder="Search" size="sm" data={results} value={query} onChange={setQuery} onBlur={() => setQuery("")} - filter={(value, item) => - item.value.toLowerCase().includes(value.toLowerCase().trim()) || - item.value - .normalize("NFD") - .replace(/[\u0300-\u036f]/g, "") - .toLowerCase() - .includes(value.trim()) - } + filter={optionsFilter} ></Autocomplete> ); }; diff --git a/frontend/src/components/StateIcon.tsx b/frontend/src/components/StateIcon.tsx index f9683f63a..73700a679 100644 --- a/frontend/src/components/StateIcon.tsx +++ b/frontend/src/components/StateIcon.tsx @@ -31,7 +31,7 @@ const StateIcon: FunctionComponent<StateIconProps> = ({ return <FontAwesomeIcon icon={faListCheck} />; } else { return ( - <Text color={hasIssues ? "yellow" : "green"}> + <Text c={hasIssues ? "yellow" : "green"} span> <FontAwesomeIcon icon={hasIssues ? faExclamationCircle : faCheckCircle} /> @@ -48,9 +48,9 @@ const StateIcon: FunctionComponent<StateIconProps> = ({ </Text> </Popover.Target> <Popover.Dropdown> - <Group position="left" spacing="xl" noWrap grow> - <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto"> - <Text color="green"> + <Group justify="left" gap="xl" wrap="nowrap" grow> + <Stack align="flex-start" justify="flex-start" gap="xs" mb="auto"> + <Text c="green"> <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon> </Text> <List> @@ -59,8 +59,8 @@ const StateIcon: FunctionComponent<StateIconProps> = ({ ))} </List> </Stack> - <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto"> - <Text color="yellow"> + <Stack align="flex-start" justify="flex-start" gap="xs" mb="auto"> + <Text c="yellow"> <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon> </Text> <List> diff --git a/frontend/src/components/SubtitleToolsMenu.tsx b/frontend/src/components/SubtitleToolsMenu.tsx index e36a1e9e1..bdadb5cb4 100644 --- a/frontend/src/components/SubtitleToolsMenu.tsx +++ b/frontend/src/components/SubtitleToolsMenu.tsx @@ -148,7 +148,7 @@ const SubtitleToolsMenu: FunctionComponent<Props> = ({ <Menu.Item key={tool.key} disabled={disabledTools} - icon={<FontAwesomeIcon icon={tool.icon}></FontAwesomeIcon>} + leftSection={<FontAwesomeIcon icon={tool.icon}></FontAwesomeIcon>} onClick={() => { if (tool.modal) { modals.openContextModal(tool.modal, { selections }); @@ -164,7 +164,7 @@ const SubtitleToolsMenu: FunctionComponent<Props> = ({ <Menu.Label>Actions</Menu.Label> <Menu.Item disabled={selections.length !== 0 || onAction === undefined} - icon={<FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>} + leftSection={<FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>} onClick={() => { onAction?.("search"); }} @@ -174,7 +174,7 @@ const SubtitleToolsMenu: FunctionComponent<Props> = ({ <Menu.Item disabled={selections.length === 0 || onAction === undefined} color="red" - icon={<FontAwesomeIcon icon={faTrash}></FontAwesomeIcon>} + leftSection={<FontAwesomeIcon icon={faTrash}></FontAwesomeIcon>} onClick={() => { modals.openConfirmModal({ title: "The following subtitles will be deleted", diff --git a/frontend/src/components/bazarr/AudioList.tsx b/frontend/src/components/bazarr/AudioList.tsx index ac9cce743..b73f71331 100644 --- a/frontend/src/components/bazarr/AudioList.tsx +++ b/frontend/src/components/bazarr/AudioList.tsx @@ -13,7 +13,7 @@ const AudioList: FunctionComponent<AudioListProps> = ({ ...group }) => { return ( - <Group spacing="xs" {...group}> + <Group gap="xs" {...group}> {audios.map((audio, idx) => ( <Badge color="blue" key={BuildKey(idx, audio.code2)} {...badgeProps}> {audio.name} diff --git a/frontend/src/components/bazarr/Language.test.tsx b/frontend/src/components/bazarr/Language.test.tsx index 9e0e0fab8..e4e3b42b8 100644 --- a/frontend/src/components/bazarr/Language.test.tsx +++ b/frontend/src/components/bazarr/Language.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import { describe, it } from "vitest"; import { Language } from "."; @@ -9,13 +9,13 @@ describe("Language text", () => { }; it("should show short text", () => { - rawRender(<Language.Text value={testLanguage}></Language.Text>); + render(<Language.Text value={testLanguage}></Language.Text>); expect(screen.getByText(testLanguage.code2)).toBeDefined(); }); it("should show long text", () => { - rawRender(<Language.Text value={testLanguage} long></Language.Text>); + render(<Language.Text value={testLanguage} long></Language.Text>); expect(screen.getByText(testLanguage.name)).toBeDefined(); }); @@ -23,7 +23,7 @@ describe("Language text", () => { const testLanguageWithHi: Language.Info = { ...testLanguage, hi: true }; it("should show short text with HI", () => { - rawRender(<Language.Text value={testLanguageWithHi}></Language.Text>); + render(<Language.Text value={testLanguageWithHi}></Language.Text>); const expectedText = `${testLanguageWithHi.code2}:HI`; @@ -31,7 +31,7 @@ describe("Language text", () => { }); it("should show long text with HI", () => { - rawRender(<Language.Text value={testLanguageWithHi} long></Language.Text>); + render(<Language.Text value={testLanguageWithHi} long></Language.Text>); const expectedText = `${testLanguageWithHi.name} HI`; @@ -44,7 +44,7 @@ describe("Language text", () => { }; it("should show short text with Forced", () => { - rawRender(<Language.Text value={testLanguageWithForced}></Language.Text>); + render(<Language.Text value={testLanguageWithForced}></Language.Text>); const expectedText = `${testLanguageWithHi.code2}:Forced`; @@ -52,9 +52,7 @@ describe("Language text", () => { }); it("should show long text with Forced", () => { - rawRender( - <Language.Text value={testLanguageWithForced} long></Language.Text>, - ); + render(<Language.Text value={testLanguageWithForced} long></Language.Text>); const expectedText = `${testLanguageWithHi.name} Forced`; @@ -75,7 +73,7 @@ describe("Language list", () => { ]; it("should show all languages", () => { - rawRender(<Language.List value={elements}></Language.List>); + render(<Language.List value={elements}></Language.List>); elements.forEach((value) => { expect(screen.getByText(value.name)).toBeDefined(); diff --git a/frontend/src/components/bazarr/Language.tsx b/frontend/src/components/bazarr/Language.tsx index e5627c82e..ba1a884e6 100644 --- a/frontend/src/components/bazarr/Language.tsx +++ b/frontend/src/components/bazarr/Language.tsx @@ -49,7 +49,7 @@ type LanguageListProps = { const LanguageList: FunctionComponent<LanguageListProps> = ({ value }) => { return ( - <Group spacing="xs"> + <Group gap="xs"> {value.map((v) => ( <Badge key={BuildKey(v.code2, v.code2, v.hi)}>{v.name}</Badge> ))} diff --git a/frontend/src/components/forms/FrameRateForm.tsx b/frontend/src/components/forms/FrameRateForm.tsx index 7e7eca24c..aa1723183 100644 --- a/frontend/src/components/forms/FrameRateForm.tsx +++ b/frontend/src/components/forms/FrameRateForm.tsx @@ -55,15 +55,17 @@ const FrameRateForm: FunctionComponent<Props> = ({ selections, onSubmit }) => { })} > <Stack> - <Group spacing="xs" grow> + <Group gap="xs" grow> <NumberInput placeholder="From" - precision={2} + decimalScale={2} + fixedDecimalScale {...form.getInputProps("from")} ></NumberInput> <NumberInput placeholder="To" - precision={2} + decimalScale={2} + fixedDecimalScale {...form.getInputProps("to")} ></NumberInput> </Group> diff --git a/frontend/src/components/forms/ItemEditForm.tsx b/frontend/src/components/forms/ItemEditForm.tsx index 9f3856d54..64f87fb36 100644 --- a/frontend/src/components/forms/ItemEditForm.tsx +++ b/frontend/src/components/forms/ItemEditForm.tsx @@ -80,7 +80,7 @@ const ItemEditForm: FunctionComponent<Props> = ({ label="Languages Profile" ></Selector> <Divider></Divider> - <Group position="right"> + <Group justify="right"> <Button disabled={isOverlayVisible} onClick={() => { diff --git a/frontend/src/components/forms/MovieUploadForm.module.scss b/frontend/src/components/forms/MovieUploadForm.module.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/frontend/src/components/forms/MovieUploadForm.module.scss diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx index b51614770..1d6c64fe7 100644 --- a/frontend/src/components/forms/MovieUploadForm.tsx +++ b/frontend/src/components/forms/MovieUploadForm.tsx @@ -1,7 +1,6 @@ import { useMovieSubtitleModification } from "@/apis/hooks"; import { useModals, withModal } from "@/modules/modals"; import { TaskGroup, task } from "@/modules/task"; -import { useTableStyles } from "@/styles"; import { useArrayAction, useSelectorOptions } from "@/utilities"; import FormUtils from "@/utilities/form"; import { @@ -19,7 +18,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, Checkbox, - createStyles, Divider, MantineColor, Stack, @@ -79,21 +77,12 @@ interface Props { onComplete?: () => void; } -const useStyles = createStyles((theme) => { - return { - wrapper: { - overflowWrap: "anywhere", - }, - }; -}); - const MovieUploadForm: FunctionComponent<Props> = ({ files, movie, onComplete, }) => { const modals = useModals(); - const { classes } = useStyles(); const profile = useLanguageProfileBy(movie.profileId); @@ -187,7 +176,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({ return ( <TextPopover text={value?.messages}> - <Text color={color} inline> + <Text c={color} inline> <FontAwesomeIcon icon={icon}></FontAwesomeIcon> </Text> </TextPopover> @@ -199,9 +188,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({ id: "filename", accessor: "file", Cell: ({ value }) => { - const { classes } = useTableStyles(); - - return <Text className={classes.primary}>{value.name}</Text>; + return <Text className="table-primary">{value.name}</Text>; }, }, { @@ -236,11 +223,10 @@ const MovieUploadForm: FunctionComponent<Props> = ({ Header: "Language", accessor: "language", Cell: ({ row: { original, index }, value }) => { - const { classes } = useTableStyles(); return ( <Selector {...languageOptions} - className={classes.select} + className="table-long-break" value={value} onChange={(item) => { action.mutate(index, { ...original, language: item }); @@ -289,7 +275,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({ modals.closeSelf(); })} > - <Stack className={classes.wrapper}> + <Stack className="table-long-break"> <SimpleTable columns={columns} data={form.values.files}></SimpleTable> <Divider></Divider> <Button type="submit">Upload</Button> diff --git a/frontend/src/components/forms/ProfileEditForm.module.scss b/frontend/src/components/forms/ProfileEditForm.module.scss new file mode 100644 index 000000000..d98b850ff --- /dev/null +++ b/frontend/src/components/forms/ProfileEditForm.module.scss @@ -0,0 +1,5 @@ +.content { + @include smaller-than($mantine-breakpoint-md) { + padding: 0; + } +} diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx index eecacd73e..93f09d8b8 100644 --- a/frontend/src/components/forms/ProfileEditForm.tsx +++ b/frontend/src/components/forms/ProfileEditForm.tsx @@ -1,6 +1,5 @@ import { Action, Selector, SelectorOption, SimpleTable } from "@/components"; import { useModals, withModal } from "@/modules/modals"; -import { useTableStyles } from "@/styles"; import { useArrayAction, useSelectorOptions } from "@/utilities"; import { LOG } from "@/utilities/console"; import FormUtils from "@/utilities/form"; @@ -19,6 +18,7 @@ import { useForm } from "@mantine/form"; import { FunctionComponent, useCallback, useMemo } from "react"; import { Column } from "react-table"; import ChipInput from "../inputs/ChipInput"; +import styles from "./ProfileEditForm.module.scss"; export const anyCutoff = 65535; @@ -162,12 +162,10 @@ const ProfileEditForm: FunctionComponent<Props> = ({ [code], ); - const { classes } = useTableStyles(); - return ( <Selector {...languageOptions} - className={classes.select} + className="table-select" value={language} onChange={(value) => { if (value) { @@ -260,13 +258,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({ multiple chevronPosition="right" defaultValue={["Languages"]} - styles={(theme) => ({ - content: { - [theme.fn.smallerThan("md")]: { - padding: 0, - }, - }, - })} + className={styles.content} > <Accordion.Item value="Languages"> <Stack> @@ -275,7 +267,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({ columns={columns} data={form.values.items} ></SimpleTable> - <Button fullWidth color="light" onClick={addItem}> + <Button fullWidth onClick={addItem}> Add Language </Button> <Selector diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx index 5ce9c821a..f0e8e0d31 100644 --- a/frontend/src/components/forms/SeriesUploadForm.tsx +++ b/frontend/src/components/forms/SeriesUploadForm.tsx @@ -5,7 +5,6 @@ import { } from "@/apis/hooks"; import { useModals, withModal } from "@/modules/modals"; import { task, TaskGroup } from "@/modules/task"; -import { useTableStyles } from "@/styles"; import { useArrayAction, useSelectorOptions } from "@/utilities"; import FormUtils from "@/utilities/form"; import { @@ -23,7 +22,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Button, Checkbox, - createStyles, Divider, MantineColor, Stack, @@ -86,21 +84,12 @@ interface Props { onComplete?: VoidFunction; } -const useStyles = createStyles((theme) => { - return { - wrapper: { - overflowWrap: "anywhere", - }, - }; -}); - const SeriesUploadForm: FunctionComponent<Props> = ({ series, files, onComplete, }) => { const modals = useModals(); - const { classes } = useStyles(); const episodes = useEpisodesBySeriesId(series.sonarrSeriesId); const episodeOptions = useSelectorOptions( episodes.data ?? [], @@ -225,8 +214,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ id: "filename", accessor: "file", Cell: ({ value: { name } }) => { - const { classes } = useTableStyles(); - return <Text className={classes.primary}>{name}</Text>; + return <Text className="table-primary">{name}</Text>; }, }, { @@ -283,11 +271,10 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ ), accessor: "language", Cell: ({ row: { original, index }, value }) => { - const { classes } = useTableStyles(); return ( <Selector {...languageOptions} - className={classes.select} + className="table-select" value={value} onChange={(item) => { action.mutate(index, { ...original, language: item }); @@ -301,12 +288,11 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ Header: "Episode", accessor: "episode", Cell: ({ value, row }) => { - const { classes } = useTableStyles(); return ( <Selector {...episodeOptions} searchable - className={classes.select} + className="table-select" value={value} onChange={(item) => { action.mutate(row.index, { ...row.original, episode: item }); @@ -368,7 +354,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({ modals.closeSelf(); })} > - <Stack className={classes.wrapper}> + <Stack className="table-long-break"> <SimpleTable columns={columns} data={form.values.files}></SimpleTable> <Divider></Divider> <Button type="submit">Upload</Button> diff --git a/frontend/src/components/forms/SyncSubtitleForm.tsx b/frontend/src/components/forms/SyncSubtitleForm.tsx index b5136fc85..c2e4ae9a5 100644 --- a/frontend/src/components/forms/SyncSubtitleForm.tsx +++ b/frontend/src/components/forms/SyncSubtitleForm.tsx @@ -14,10 +14,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Alert, Button, Checkbox, Divider, Stack, Text } from "@mantine/core"; import { useForm } from "@mantine/form"; import { FunctionComponent } from "react"; -import { Selector, SelectorOption } from "../inputs"; +import { GroupedSelector, Selector } from "../inputs"; const TaskName = "Syncing Subtitle"; +interface SelectOptions { + group: string; + items: { value: string; label: string }[]; +} + function useReferencedSubtitles( mediaType: "episode" | "movie", mediaId: number, @@ -37,15 +42,21 @@ function useReferencedSubtitles( const mediaData = mediaType === "episode" ? episodeData : movieData; - const subtitles: { group: string; value: string; label: string }[] = []; + const subtitles: SelectOptions[] = []; if (!mediaData.data) { return []; } else { if (mediaData.data.audio_tracks.length > 0) { + const embeddedAudioGroup: SelectOptions = { + group: "Embedded audio tracks", + items: [], + }; + + subtitles.push(embeddedAudioGroup); + mediaData.data.audio_tracks.forEach((item) => { - subtitles.push({ - group: "Embedded audio tracks", + embeddedAudioGroup.items.push({ value: item.stream, label: `${item.name || item.language} (${item.stream})`, }); @@ -53,9 +64,15 @@ function useReferencedSubtitles( } if (mediaData.data.embedded_subtitles_tracks.length > 0) { + const embeddedSubtitlesTrackGroup: SelectOptions = { + group: "Embedded subtitles tracks", + items: [], + }; + + subtitles.push(embeddedSubtitlesTrackGroup); + mediaData.data.embedded_subtitles_tracks.forEach((item) => { - subtitles.push({ - group: "Embedded subtitles tracks", + embeddedSubtitlesTrackGroup.items.push({ value: item.stream, label: `${item.name || item.language} (${item.stream})`, }); @@ -63,10 +80,16 @@ function useReferencedSubtitles( } if (mediaData.data.external_subtitles_tracks.length > 0) { + const externalSubtitlesFilesGroup: SelectOptions = { + group: "External Subtitles files", + items: [], + }; + + subtitles.push(externalSubtitlesFilesGroup); + mediaData.data.external_subtitles_tracks.forEach((item) => { if (item) { - subtitles.push({ - group: "External Subtitles files", + externalSubtitlesFilesGroup.items.push({ value: item.path, label: item.name, }); @@ -105,7 +128,7 @@ const SyncSubtitleForm: FunctionComponent<Props> = ({ const mediaId = selections[0].id; const subtitlesPath = selections[0].path; - const subtitles: SelectorOption<string>[] = useReferencedSubtitles( + const subtitles: SelectOptions[] = useReferencedSubtitles( mediaType, mediaId, subtitlesPath, @@ -145,14 +168,14 @@ const SyncSubtitleForm: FunctionComponent<Props> = ({ > <Text size="sm">{selections.length} subtitles selected</Text> </Alert> - <Selector + <GroupedSelector clearable disabled={subtitles.length === 0 || selections.length !== 1} label="Reference" placeholder="Default: choose automatically within video file" options={subtitles} {...form.getInputProps("reference")} - ></Selector> + ></GroupedSelector> <Selector clearable label="Max Offset Seconds" diff --git a/frontend/src/components/forms/TimeOffsetForm.tsx b/frontend/src/components/forms/TimeOffsetForm.tsx index 2792d64d8..3802f3a3e 100644 --- a/frontend/src/components/forms/TimeOffsetForm.tsx +++ b/frontend/src/components/forms/TimeOffsetForm.tsx @@ -70,7 +70,7 @@ const TimeOffsetForm: FunctionComponent<Props> = ({ selections, onSubmit }) => { })} > <Stack> - <Group align="end" spacing="xs" noWrap> + <Group align="end" gap="xs" wrap="nowrap"> <Button color="gray" variant="filled" diff --git a/frontend/src/components/index.tsx b/frontend/src/components/index.tsx index c3d7b4763..5ea97cf04 100644 --- a/frontend/src/components/index.tsx +++ b/frontend/src/components/index.tsx @@ -1,4 +1,4 @@ export { default as Search } from "./Search"; export * from "./inputs"; export * from "./tables"; -export { default as Toolbox } from "./toolbox"; +export { default as Toolbox } from "./toolbox/Toolbox"; diff --git a/frontend/src/components/inputs/Action.test.tsx b/frontend/src/components/inputs/Action.test.tsx index 189aca076..80d24825b 100644 --- a/frontend/src/components/inputs/Action.test.tsx +++ b/frontend/src/components/inputs/Action.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import { faStickyNote } from "@fortawesome/free-regular-svg-icons"; import userEvent from "@testing-library/user-event"; import { describe, it, vitest } from "vitest"; @@ -9,7 +9,7 @@ const testIcon = faStickyNote; describe("Action button", () => { it("should be a button", () => { - rawRender(<Action icon={testIcon} label={testLabel}></Action>); + render(<Action icon={testIcon} label={testLabel}></Action>); const element = screen.getByRole("button", { name: testLabel }); expect(element.getAttribute("type")).toEqual("button"); @@ -17,7 +17,7 @@ describe("Action button", () => { }); it("should show icon", () => { - rawRender(<Action icon={testIcon} label={testLabel}></Action>); + render(<Action icon={testIcon} label={testLabel}></Action>); // TODO: use getBy... const element = screen.getByRole("img", { hidden: true }); @@ -27,7 +27,7 @@ describe("Action button", () => { it("should call on-click event when clicked", async () => { const onClickFn = vitest.fn(); - rawRender( + render( <Action icon={testIcon} label={testLabel} onClick={onClickFn}></Action>, ); diff --git a/frontend/src/components/inputs/ChipInput.test.tsx b/frontend/src/components/inputs/ChipInput.test.tsx index cb52ee30c..4aa29e8b7 100644 --- a/frontend/src/components/inputs/ChipInput.test.tsx +++ b/frontend/src/components/inputs/ChipInput.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import userEvent from "@testing-library/user-event"; import { describe, it, vitest } from "vitest"; import ChipInput from "./ChipInput"; @@ -8,7 +8,7 @@ describe("ChipInput", () => { // TODO: Support default value it.skip("should works with default value", () => { - rawRender(<ChipInput defaultValue={existedValues}></ChipInput>); + render(<ChipInput defaultValue={existedValues}></ChipInput>); existedValues.forEach((value) => { expect(screen.getByText(value)).toBeDefined(); @@ -16,7 +16,7 @@ describe("ChipInput", () => { }); it("should works with value", () => { - rawRender(<ChipInput value={existedValues}></ChipInput>); + render(<ChipInput value={existedValues}></ChipInput>); existedValues.forEach((value) => { expect(screen.getByText(value)).toBeDefined(); @@ -29,9 +29,7 @@ describe("ChipInput", () => { expect(values).toContain(typedValue); }); - rawRender( - <ChipInput value={existedValues} onChange={mockedFn}></ChipInput>, - ); + render(<ChipInput value={existedValues} onChange={mockedFn}></ChipInput>); const element = screen.getByRole("searchbox"); diff --git a/frontend/src/components/inputs/ChipInput.tsx b/frontend/src/components/inputs/ChipInput.tsx index 4308f7189..1fa57084c 100644 --- a/frontend/src/components/inputs/ChipInput.tsx +++ b/frontend/src/components/inputs/ChipInput.tsx @@ -1,35 +1,29 @@ -import { useSelectorOptions } from "@/utilities"; import { FunctionComponent } from "react"; -import { MultiSelector, MultiSelectorProps } from "./Selector"; +import { TagsInput } from "@mantine/core"; -export type ChipInputProps = Omit< - MultiSelectorProps<string>, - | "searchable" - | "creatable" - | "getCreateLabel" - | "onCreate" - | "options" - | "getkey" ->; - -const ChipInput: FunctionComponent<ChipInputProps> = ({ ...props }) => { - const { value, onChange } = props; - - const options = useSelectorOptions(value ?? [], (v) => v); +export interface ChipInputProps { + defaultValue?: string[] | undefined; + value?: readonly string[] | null; + label?: string; + onChange?: (value: string[]) => void; +} +const ChipInput: FunctionComponent<ChipInputProps> = ({ + defaultValue, + value, + label, + onChange, +}: ChipInputProps) => { + // TODO: Replace with our own custom implementation instead of just using the + // built-in TagsInput. https://mantine.dev/combobox/?e=MultiSelectCreatable return ( - <MultiSelector - {...props} - {...options} - creatable - searchable - getCreateLabel={(query) => `Add "${query}"`} - onCreate={(query) => { - onChange?.([...(value ?? []), query]); - return query; - }} - buildOption={(value) => value} - ></MultiSelector> + <TagsInput + defaultValue={defaultValue} + label={label} + value={value ? value?.map((v) => v) : []} + onChange={onChange} + clearable + ></TagsInput> ); }; diff --git a/frontend/src/components/inputs/DropContent.module.scss b/frontend/src/components/inputs/DropContent.module.scss new file mode 100644 index 000000000..c6c0f848a --- /dev/null +++ b/frontend/src/components/inputs/DropContent.module.scss @@ -0,0 +1,4 @@ +.container { + pointer-events: none; + min-height: 220px; +} diff --git a/frontend/src/components/inputs/DropContent.tsx b/frontend/src/components/inputs/DropContent.tsx index 38556220d..015794ead 100644 --- a/frontend/src/components/inputs/DropContent.tsx +++ b/frontend/src/components/inputs/DropContent.tsx @@ -4,24 +4,14 @@ import { faXmark, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Group, Stack, Text, createStyles } from "@mantine/core"; +import { Group, Stack, Text } from "@mantine/core"; import { Dropzone } from "@mantine/dropzone"; import { FunctionComponent } from "react"; - -const useStyle = createStyles((theme) => { - return { - container: { - pointerEvents: "none", - minHeight: 220, - }, - }; -}); +import styles from "./DropContent.module.scss"; export const DropContent: FunctionComponent = () => { - const { classes } = useStyle(); - return ( - <Group position="center" spacing="xl" className={classes.container}> + <Group justify="center" gap="xl" className={styles.container}> <Dropzone.Idle> <FontAwesomeIcon icon={faFileCirclePlus} size="2x" /> </Dropzone.Idle> @@ -31,9 +21,9 @@ export const DropContent: FunctionComponent = () => { <Dropzone.Reject> <FontAwesomeIcon icon={faXmark} size="2x" /> </Dropzone.Reject> - <Stack spacing={0}> + <Stack gap={0}> <Text size="lg">Upload Subtitles</Text> - <Text color="dimmed" size="sm"> + <Text c="dimmed" size="sm"> Attach as many files as you like, you will need to select file metadata before uploading </Text> diff --git a/frontend/src/components/inputs/FileBrowser.tsx b/frontend/src/components/inputs/FileBrowser.tsx index ce57a4938..e1a4b5c18 100644 --- a/frontend/src/components/inputs/FileBrowser.tsx +++ b/frontend/src/components/inputs/FileBrowser.tsx @@ -1,7 +1,12 @@ import { useFileSystem } from "@/apis/hooks"; import { faFolder } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Autocomplete, AutocompleteProps } from "@mantine/core"; +import { + Autocomplete, + AutocompleteProps, + ComboboxItem, + OptionsFilter, +} from "@mantine/core"; import { FunctionComponent, useEffect, useMemo, useRef, useState } from "react"; // TODO: use fortawesome icons @@ -75,24 +80,28 @@ export const FileBrowser: FunctionComponent<FileBrowserProps> = ({ const ref = useRef<HTMLInputElement>(null); + const optionsFilter: OptionsFilter = ({ options, search }) => { + return (options as ComboboxItem[]).filter((option) => { + if (search === backKey) { + return true; + } + + return option.value.includes(search); + }); + }; + return ( <Autocomplete {...props} ref={ref} - icon={<FontAwesomeIcon icon={faFolder}></FontAwesomeIcon>} + leftSection={<FontAwesomeIcon icon={faFolder}></FontAwesomeIcon>} placeholder="Click to start" data={data} value={value} // Temporary solution of infinite dropdown items, fix later limit={NaN} maxDropdownHeight={240} - filter={(value, item) => { - if (item.value === backKey) { - return true; - } else { - return item.value.includes(value); - } - }} + filter={optionsFilter} onChange={(val) => { if (val !== backKey) { setValue(val); diff --git a/frontend/src/components/inputs/Selector.test.tsx b/frontend/src/components/inputs/Selector.test.tsx index a7b6cfb85..0da13e5bf 100644 --- a/frontend/src/components/inputs/Selector.test.tsx +++ b/frontend/src/components/inputs/Selector.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import userEvent from "@testing-library/user-event"; import { describe, it, vitest } from "vitest"; import { Selector, SelectorOption } from "./Selector"; @@ -18,20 +18,17 @@ const testOptions: SelectorOption<string>[] = [ describe("Selector", () => { describe("options", () => { it("should work with the SelectorOption", () => { - rawRender( - <Selector name={selectorName} options={testOptions}></Selector>, - ); + render(<Selector name={selectorName} options={testOptions}></Selector>); - // TODO: selectorName - expect(screen.getByRole("searchbox")).toBeDefined(); + testOptions.forEach((o) => { + expect(screen.getByText(o.label)).toBeDefined(); + }); }); it("should display when clicked", async () => { - rawRender( - <Selector name={selectorName} options={testOptions}></Selector>, - ); + render(<Selector name={selectorName} options={testOptions}></Selector>); - const element = screen.getByRole("searchbox"); + const element = screen.getByTestId("input-selector"); await userEvent.click(element); @@ -44,7 +41,7 @@ describe("Selector", () => { it("shouldn't show default value", async () => { const option = testOptions[0]; - rawRender( + render( <Selector name={selectorName} options={testOptions} @@ -57,7 +54,7 @@ describe("Selector", () => { it("shouldn't show value", async () => { const option = testOptions[0]; - rawRender( + render( <Selector name={selectorName} options={testOptions} @@ -75,7 +72,7 @@ describe("Selector", () => { const mockedFn = vitest.fn((value: string | null) => { expect(value).toEqual(clickedOption.value); }); - rawRender( + render( <Selector name={selectorName} options={testOptions} @@ -83,13 +80,13 @@ describe("Selector", () => { ></Selector>, ); - const element = screen.getByRole("searchbox"); + const element = screen.getByTestId("input-selector"); await userEvent.click(element); await userEvent.click(screen.getByText(clickedOption.label)); - expect(mockedFn).toBeCalled(); + expect(mockedFn).toHaveBeenCalled(); }); }); @@ -115,7 +112,7 @@ describe("Selector", () => { const mockedFn = vitest.fn((value: { name: string } | null) => { expect(value).toEqual(clickedOption.value); }); - rawRender( + render( <Selector name={selectorName} options={objectOptions} @@ -124,20 +121,20 @@ describe("Selector", () => { ></Selector>, ); - const element = screen.getByRole("searchbox"); + const element = screen.getByTestId("input-selector"); await userEvent.click(element); await userEvent.click(screen.getByText(clickedOption.label)); - expect(mockedFn).toBeCalled(); + expect(mockedFn).toHaveBeenCalled(); }); }); describe("placeholder", () => { it("should show when no selection", () => { const placeholder = "Empty Selection"; - rawRender( + render( <Selector name={selectorName} options={testOptions} diff --git a/frontend/src/components/inputs/Selector.tsx b/frontend/src/components/inputs/Selector.tsx index 0af276fc4..6a25144f5 100644 --- a/frontend/src/components/inputs/Selector.tsx +++ b/frontend/src/components/inputs/Selector.tsx @@ -1,9 +1,10 @@ import { LOG } from "@/utilities/console"; import { + ComboboxItem, + ComboboxParsedItemGroup, MultiSelect, MultiSelectProps, Select, - SelectItem, SelectProps, } from "@mantine/core"; import { isNull, isUndefined } from "lodash"; @@ -14,10 +15,10 @@ export type SelectorOption<T> = Override< value: T; label: string; }, - SelectItem + ComboboxItem >; -type SelectItemWithPayload<T> = SelectItem & { +type SelectItemWithPayload<T> = ComboboxItem & { payload: T; }; @@ -34,6 +35,30 @@ function DefaultKeyBuilder<T>(value: T) { } } +export type GroupedSelectorProps<T> = Override< + { + options: ComboboxParsedItemGroup[]; + getkey?: (value: T) => string; + }, + Omit<SelectProps, "data"> +>; + +export function GroupedSelector<T>({ + value, + options, + getkey = DefaultKeyBuilder, + ...select +}: GroupedSelectorProps<T>) { + return ( + <Select + data-testid="input-selector" + comboboxProps={{ withinPortal: true }} + data={options} + {...select} + ></Select> + ); +} + export type SelectorProps<T> = Override< { value?: T | null; @@ -84,7 +109,7 @@ export function Selector<T>({ }, [defaultValue, keyRef]); const wrappedOnChange = useCallback( - (value: string) => { + (value: string | null) => { const payload = data.find((v) => v.value === value)?.payload ?? null; onChange?.(payload); }, @@ -93,7 +118,8 @@ export function Selector<T>({ return ( <Select - withinPortal={true} + data-testid="input-selector" + comboboxProps={{ withinPortal: true }} data={data} defaultValue={wrappedDefaultValue} value={wrappedValue} @@ -144,6 +170,7 @@ export function MultiSelector<T>({ () => value && value.map(labelRef.current), [value], ); + const wrappedDefaultValue = useMemo( () => defaultValue && defaultValue.map(labelRef.current), [defaultValue], @@ -168,6 +195,7 @@ export function MultiSelector<T>({ return ( <MultiSelect {...select} + hidePickedOptions value={wrappedValue} defaultValue={wrappedDefaultValue} onChange={wrappedOnChange} diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index 24799130d..9a9de605d 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -1,6 +1,5 @@ import { withModal } from "@/modules/modals"; import { task, TaskGroup } from "@/modules/task"; -import { useTableStyles } from "@/styles"; import { GetItemId } from "@/utilities"; import { faCaretDown, @@ -31,9 +30,7 @@ type SupportType = Item.Movie | Item.Episode; interface Props<T extends SupportType> { download: (item: T, result: SearchResultType) => Promise<void>; - query: ( - id?: number, - ) => UseQueryResult<SearchResultType[] | undefined, unknown>; + query: (id?: number) => UseQueryResult<SearchResultType[] | undefined>; item: T; } @@ -50,7 +47,8 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { const search = useCallback(() => { setSearchStarted(true); - results.refetch(); + + void results.refetch(); }, [results]); const columns = useMemo<Column<SearchResultType>[]>( @@ -59,8 +57,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { Header: "Score", accessor: "score", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}%</Text>; + return <Text className="table-no-wrap">{value}%</Text>; }, }, { @@ -84,13 +81,12 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { Header: "Provider", accessor: "provider", Cell: (row) => { - const { classes } = useTableStyles(); const value = row.value; const { url } = row.row.original; if (url) { return ( <Anchor - className={classes.noWrap} + className="table-no-wrap" href={url} target="_blank" rel="noopener noreferrer" @@ -107,7 +103,6 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { Header: "Release", accessor: "release_info", Cell: ({ value }) => { - const { classes } = useTableStyles(); const [open, setOpen] = useState(false); const items = useMemo( @@ -116,12 +111,12 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { ); if (value.length === 0) { - return <Text color="dimmed">Cannot get release info</Text>; + return <Text c="dimmed">Cannot get release info</Text>; } return ( - <Stack spacing={0} onClick={() => setOpen((o) => !o)}> - <Text className={classes.primary}> + <Stack gap={0} onClick={() => setOpen((o) => !o)}> + <Text className="table-primary" span> {value[0]} {value.length > 1 && ( <FontAwesomeIcon @@ -141,8 +136,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) { Header: "Uploader", accessor: "uploader", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value ?? "-"}</Text>; + return <Text className="table-no-wrap">{value ?? "-"}</Text>; }, }, { diff --git a/frontend/src/components/tables/BaseTable.module.scss b/frontend/src/components/tables/BaseTable.module.scss new file mode 100644 index 000000000..e1e1eff0b --- /dev/null +++ b/frontend/src/components/tables/BaseTable.module.scss @@ -0,0 +1,9 @@ +.container { + display: block; + max-width: 100%; + overflow-x: auto; +} + +.table { + border-collapse: collapse; +} diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx index 6ec49e61a..f31e9fff0 100644 --- a/frontend/src/components/tables/BaseTable.tsx +++ b/frontend/src/components/tables/BaseTable.tsx @@ -1,8 +1,9 @@ import { useIsLoading } from "@/contexts"; import { usePageSize } from "@/utilities/storage"; -import { Box, createStyles, Skeleton, Table, Text } from "@mantine/core"; +import { Box, Skeleton, Table, Text } from "@mantine/core"; import { ReactNode, useMemo } from "react"; import { HeaderGroup, Row, TableInstance } from "react-table"; +import styles from "./BaseTable.module.scss"; export type BaseTableProps<T extends object> = TableInstance<T> & { tableStyles?: TableStyleProps<T>; @@ -18,37 +19,23 @@ export interface TableStyleProps<T extends object> { rowRenderer?: (row: Row<T>) => Nullable<JSX.Element>; } -const useStyles = createStyles((theme) => { - return { - container: { - display: "block", - maxWidth: "100%", - overflowX: "auto", - }, - table: { - borderCollapse: "collapse", - }, - header: {}, - }; -}); - function DefaultHeaderRenderer<T extends object>( headers: HeaderGroup<T>[], ): JSX.Element[] { return headers.map((col) => ( - <th style={{ whiteSpace: "nowrap" }} {...col.getHeaderProps()}> + <Table.Th style={{ whiteSpace: "nowrap" }} {...col.getHeaderProps()}> {col.render("Header")} - </th> + </Table.Th> )); } function DefaultRowRenderer<T extends object>(row: Row<T>): JSX.Element | null { return ( - <tr {...row.getRowProps()}> + <Table.Tr {...row.getRowProps()}> {row.cells.map((cell) => ( - <td {...cell.getCellProps()}>{cell.render("Cell")}</td> + <Table.Td {...cell.getCellProps()}>{cell.render("Cell")}</Table.Td> ))} - </tr> + </Table.Tr> ); } @@ -66,8 +53,6 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) { const headersRenderer = tableStyles?.headersRenderer ?? DefaultHeaderRenderer; const rowRenderer = tableStyles?.rowRenderer ?? DefaultRowRenderer; - const { classes } = useStyles(); - const colCount = useMemo(() => { return headerGroups.reduce( (prev, curr) => (curr.headers.length > prev ? curr.headers.length : prev), @@ -88,19 +73,19 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) { body = Array(tableStyles?.placeholder ?? pageSize) .fill(0) .map((_, i) => ( - <tr key={i}> - <td colSpan={colCount}> + <Table.Tr key={i}> + <Table.Td colSpan={colCount}> <Skeleton height={24}></Skeleton> - </td> - </tr> + </Table.Td> + </Table.Tr> )); } else if (empty && tableStyles?.emptyText) { body = ( - <tr> - <td colSpan={colCount}> - <Text align="center">{tableStyles.emptyText}</Text> - </td> - </tr> + <Table.Tr> + <Table.Td colSpan={colCount}> + <Text ta="center">{tableStyles.emptyText}</Text> + </Table.Td> + </Table.Tr> ); } else { body = rows.map((row) => { @@ -110,20 +95,20 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) { } return ( - <Box className={classes.container}> + <Box className={styles.container}> <Table - className={classes.table} + className={styles.table} striped={tableStyles?.striped ?? true} {...getTableProps()} > - <thead className={classes.header} hidden={tableStyles?.hideHeader}> + <Table.Thead hidden={tableStyles?.hideHeader}> {headerGroups.map((headerGroup) => ( - <tr {...headerGroup.getHeaderGroupProps()}> + <Table.Tr {...headerGroup.getHeaderGroupProps()}> {headersRenderer(headerGroup.headers)} - </tr> + </Table.Tr> ))} - </thead> - <tbody {...getTableBodyProps()}>{body}</tbody> + </Table.Thead> + <Table.Tbody {...getTableBodyProps()}>{body}</Table.Tbody> </Table> </Box> ); diff --git a/frontend/src/components/tables/GroupTable.tsx b/frontend/src/components/tables/GroupTable.tsx index 3a8be3d1b..f58c868a5 100644 --- a/frontend/src/components/tables/GroupTable.tsx +++ b/frontend/src/components/tables/GroupTable.tsx @@ -1,6 +1,6 @@ import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Box, Text } from "@mantine/core"; +import { Box, Text, Table } from "@mantine/core"; import { Cell, HeaderGroup, @@ -29,8 +29,8 @@ function renderRow<T extends object>(row: Row<T>) { if (cell) { const rotation = row.isExpanded ? 90 : undefined; return ( - <tr {...row.getRowProps()}> - <td {...cell.getCellProps()} colSpan={row.cells.length}> + <Table.Tr {...row.getRowProps()}> + <Table.Td {...cell.getCellProps()} colSpan={row.cells.length}> <Text {...row.getToggleRowExpandedProps()} p={2}> {cell.render("Cell")} <Box component="span" mx={12}> @@ -40,21 +40,23 @@ function renderRow<T extends object>(row: Row<T>) { ></FontAwesomeIcon> </Box> </Text> - </td> - </tr> + </Table.Td> + </Table.Tr> ); } else { return null; } } else { return ( - <tr {...row.getRowProps()}> + <Table.Tr {...row.getRowProps()}> {row.cells .filter((cell) => !cell.isPlaceholder) .map((cell) => ( - <td {...cell.getCellProps()}>{renderCell(cell, row)}</td> + <Table.Td {...cell.getCellProps()}> + {renderCell(cell, row)} + </Table.Td> ))} - </tr> + </Table.Tr> ); } } @@ -64,7 +66,9 @@ function renderHeaders<T extends object>( ): JSX.Element[] { return headers .filter((col) => !col.isGrouped) - .map((col) => <th {...col.getHeaderProps()}>{col.render("Header")}</th>); + .map((col) => ( + <Table.Th {...col.getHeaderProps()}>{col.render("Header")}</Table.Th> + )); } type Props<T extends object> = Omit< diff --git a/frontend/src/components/tables/PageControl.tsx b/frontend/src/components/tables/PageControl.tsx index 0767593de..8cf528e31 100644 --- a/frontend/src/components/tables/PageControl.tsx +++ b/frontend/src/components/tables/PageControl.tsx @@ -28,7 +28,7 @@ const PageControl: FunctionComponent<Props> = ({ }, [total, goto]); return ( - <Group p={16} position="apart"> + <Group p={16} justify="apart"> <Text size="sm"> Show {start} to {end} of {total} entries </Text> diff --git a/frontend/src/components/toolbox/Button.tsx b/frontend/src/components/toolbox/Button.tsx index 735ef3ca1..022cf9081 100644 --- a/frontend/src/components/toolbox/Button.tsx +++ b/frontend/src/components/toolbox/Button.tsx @@ -24,7 +24,7 @@ const ToolboxButton: FunctionComponent<ToolboxButtonProps> = ({ <Button color="dark" variant="subtle" - leftIcon={<FontAwesomeIcon icon={icon}></FontAwesomeIcon>} + leftSection={<FontAwesomeIcon icon={icon}></FontAwesomeIcon>} {...props} > <Text size="xs">{children}</Text> diff --git a/frontend/src/components/toolbox/Toolbox.module.scss b/frontend/src/components/toolbox/Toolbox.module.scss new file mode 100644 index 000000000..76d90ae47 --- /dev/null +++ b/frontend/src/components/toolbox/Toolbox.module.scss @@ -0,0 +1,9 @@ +.group { + @include light { + color: var(--mantine-color-gray-3); + } + + @include dark { + color: var(--mantine-color-dark-5); + } +} diff --git a/frontend/src/components/toolbox/index.tsx b/frontend/src/components/toolbox/Toolbox.tsx index 6995e111d..fbeadbc5f 100644 --- a/frontend/src/components/toolbox/index.tsx +++ b/frontend/src/components/toolbox/Toolbox.tsx @@ -1,15 +1,7 @@ -import { createStyles, Group } from "@mantine/core"; +import { Group } from "@mantine/core"; import { FunctionComponent, PropsWithChildren } from "react"; import ToolboxButton, { ToolboxMutateButton } from "./Button"; - -const useStyles = createStyles((theme) => ({ - group: { - backgroundColor: - theme.colorScheme === "light" - ? theme.colors.gray[3] - : theme.colors.dark[5], - }, -})); +import styles from "./Toolbox.module.scss"; declare type ToolboxComp = FunctionComponent<PropsWithChildren> & { Button: typeof ToolboxButton; @@ -17,9 +9,8 @@ declare type ToolboxComp = FunctionComponent<PropsWithChildren> & { }; const Toolbox: ToolboxComp = ({ children }) => { - const { classes } = useStyles(); return ( - <Group p={12} position="apart" className={classes.group}> + <Group p={12} justify="apart" className={styles.group}> {children} </Group> ); diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts index 8defd1ad9..6320fa4f3 100644 --- a/frontend/src/constants.ts +++ b/frontend/src/constants.ts @@ -1,9 +1 @@ -import { MantineNumberSize } from "@mantine/core"; - export const GithubRepoRoot = "https://github.com/morpheus65535/bazarr"; - -export const Layout = { - NAVBAR_WIDTH: 200, - HEADER_HEIGHT: 64, - MOBILE_BREAKPOINT: "sm" as MantineNumberSize, -}; diff --git a/frontend/src/modules/socketio/reducer.ts b/frontend/src/modules/socketio/reducer.ts index 403fc0ce0..35a553de9 100644 --- a/frontend/src/modules/socketio/reducer.ts +++ b/frontend/src/modules/socketio/reducer.ts @@ -27,7 +27,7 @@ export function createDefaultReducer(): SocketIO.Reducer[] { update: (msg) => { msg .map((message) => notification.info("Notification", message)) - .forEach(showNotification); + .forEach((data) => showNotification(data)); }, }, { diff --git a/frontend/src/modules/task/index.ts b/frontend/src/modules/task/index.ts index f4dc956cd..5a33a39a3 100644 --- a/frontend/src/modules/task/index.ts +++ b/frontend/src/modules/task/index.ts @@ -133,7 +133,7 @@ class TaskDispatcher { public removeProgress(ids: string[]) { setTimeout( - () => ids.forEach(hideNotification), + () => ids.forEach((id) => hideNotification(id)), notification.PROGRESS_TIMEOUT, ); } diff --git a/frontend/src/modules/task/notification.ts b/frontend/src/modules/task/notification.ts index bb796b213..97601b452 100644 --- a/frontend/src/modules/task/notification.ts +++ b/frontend/src/modules/task/notification.ts @@ -1,7 +1,7 @@ -import { NotificationProps } from "@mantine/notifications"; +import { NotificationData } from "@mantine/notifications"; export const notification = { - info: (title: string, message: string): NotificationProps => { + info: (title: string, message: string): NotificationData => { return { title, message, @@ -9,7 +9,7 @@ export const notification = { }; }, - warn: (title: string, message: string): NotificationProps => { + warn: (title: string, message: string): NotificationData => { return { title, message, @@ -18,7 +18,7 @@ export const notification = { }; }, - error: (title: string, message: string): NotificationProps => { + error: (title: string, message: string): NotificationData => { return { title, message, @@ -33,7 +33,7 @@ export const notification = { pending: ( id: string, header: string, - ): NotificationProps & { id: string } => { + ): NotificationData & { id: string } => { return { id, title: header, @@ -48,7 +48,7 @@ export const notification = { body: string, current: number, total: number, - ): NotificationProps & { id: string } => { + ): NotificationData & { id: string } => { return { id, title: header, @@ -57,7 +57,7 @@ export const notification = { autoClose: false, }; }, - end: (id: string, header: string): NotificationProps & { id: string } => { + end: (id: string, header: string): NotificationData & { id: string } => { return { id, title: header, diff --git a/frontend/src/pages/Authentication.tsx b/frontend/src/pages/Authentication.tsx index baf21f6cd..33fda6f01 100644 --- a/frontend/src/pages/Authentication.tsx +++ b/frontend/src/pages/Authentication.tsx @@ -52,7 +52,7 @@ const Authentication: FunctionComponent = () => { {...form.getInputProps("password")} ></PasswordInput> <Divider></Divider> - <Button fullWidth uppercase type="submit"> + <Button fullWidth tt="uppercase" type="submit"> Login </Button> </Stack> diff --git a/frontend/src/pages/Blacklist/Movies/table.tsx b/frontend/src/pages/Blacklist/Movies/table.tsx index 9ab06f2ba..6609d186d 100644 --- a/frontend/src/pages/Blacklist/Movies/table.tsx +++ b/frontend/src/pages/Blacklist/Movies/table.tsx @@ -3,7 +3,6 @@ import { PageTable } from "@/components"; import MutateAction from "@/components/async/MutateAction"; import Language from "@/components/bazarr/Language"; import TextPopover from "@/components/TextPopover"; -import { useTableStyles } from "@/styles"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { Anchor, Text } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; @@ -22,9 +21,8 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => { accessor: "title", Cell: (row) => { const target = `/movies/${row.row.original.radarrId}`; - const { classes } = useTableStyles(); return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {row.value} </Anchor> ); diff --git a/frontend/src/pages/Blacklist/Series/table.tsx b/frontend/src/pages/Blacklist/Series/table.tsx index a67069717..96ea1a8a7 100644 --- a/frontend/src/pages/Blacklist/Series/table.tsx +++ b/frontend/src/pages/Blacklist/Series/table.tsx @@ -3,7 +3,6 @@ import { PageTable } from "@/components"; import MutateAction from "@/components/async/MutateAction"; import Language from "@/components/bazarr/Language"; import TextPopover from "@/components/TextPopover"; -import { useTableStyles } from "@/styles"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { Anchor, Text } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; @@ -21,10 +20,9 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => { Header: "Series", accessor: "seriesTitle", Cell: (row) => { - const { classes } = useTableStyles(); const target = `/series/${row.row.original.sonarrSeriesId}`; return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {row.value} </Anchor> ); diff --git a/frontend/src/pages/Episodes/index.tsx b/frontend/src/pages/Episodes/index.tsx index 28e375744..b016490ff 100644 --- a/frontend/src/pages/Episodes/index.tsx +++ b/frontend/src/pages/Episodes/index.tsx @@ -125,7 +125,7 @@ const SeriesEpisodesView: FunctionComponent = () => { <DropContent></DropContent> </Dropzone.FullScreen> <Toolbox> - <Group spacing="xs"> + <Group gap="xs"> <Toolbox.Button icon={faSync} disabled={!available || hasTask} @@ -160,7 +160,7 @@ const SeriesEpisodesView: FunctionComponent = () => { Search </Toolbox.Button> </Group> - <Group spacing="xs"> + <Group gap="xs"> <Toolbox.Button disabled={ series === undefined || diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx index 5a310c359..f1aa6a52e 100644 --- a/frontend/src/pages/Episodes/table.tsx +++ b/frontend/src/pages/Episodes/table.tsx @@ -6,7 +6,6 @@ import { AudioList } from "@/components/bazarr"; import { EpisodeHistoryModal } from "@/components/modals"; import { EpisodeSearchModal } from "@/components/modals/ManualSearchModal"; import { useModals } from "@/modules/modals"; -import { useTableStyles } from "@/styles"; import { BuildKey, filterSubtitleBy } from "@/utilities"; import { useProfileItemsToLanguages } from "@/utilities/languages"; import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons"; @@ -92,7 +91,7 @@ const Table: FunctionComponent<Props> = ({ { accessor: "season", Cell: (row) => { - return <Text>Season {row.value}</Text>; + return <Text span>Season {row.value}</Text>; }, }, { @@ -103,11 +102,9 @@ const Table: FunctionComponent<Props> = ({ Header: "Title", accessor: "title", Cell: ({ value, row }) => { - const { classes } = useTableStyles(); - return ( <TextPopover text={row.original.sceneName}> - <Text className={classes.primary}>{value}</Text> + <Text className="table-primary">{value}</Text> </TextPopover> ); }, @@ -156,7 +153,7 @@ const Table: FunctionComponent<Props> = ({ }, [episode, seriesId]); return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> {elements} </Group> ); @@ -168,7 +165,7 @@ const Table: FunctionComponent<Props> = ({ Cell: ({ row }) => { const modals = useModals(); return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> <Action label="Manual Search" disabled={disabled} diff --git a/frontend/src/pages/History/Movies/index.tsx b/frontend/src/pages/History/Movies/index.tsx index ee4e98df0..bdbe5966a 100644 --- a/frontend/src/pages/History/Movies/index.tsx +++ b/frontend/src/pages/History/Movies/index.tsx @@ -6,7 +6,6 @@ import Language from "@/components/bazarr/Language"; import StateIcon from "@/components/StateIcon"; import TextPopover from "@/components/TextPopover"; import HistoryView from "@/pages/views/HistoryView"; -import { useTableStyles } from "@/styles"; import { faFileExcel, faInfoCircle, @@ -29,10 +28,9 @@ const MoviesHistoryView: FunctionComponent = () => { Header: "Name", accessor: "title", Cell: ({ row, value }) => { - const { classes } = useTableStyles(); const target = `/movies/${row.original.radarrId}`; return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {value} </Anchor> ); diff --git a/frontend/src/pages/History/Series/index.tsx b/frontend/src/pages/History/Series/index.tsx index d6b1469bf..e2d2f9662 100644 --- a/frontend/src/pages/History/Series/index.tsx +++ b/frontend/src/pages/History/Series/index.tsx @@ -9,7 +9,6 @@ import Language from "@/components/bazarr/Language"; import StateIcon from "@/components/StateIcon"; import TextPopover from "@/components/TextPopover"; import HistoryView from "@/pages/views/HistoryView"; -import { useTableStyles } from "@/styles"; import { faFileExcel, faInfoCircle, @@ -32,11 +31,10 @@ const SeriesHistoryView: FunctionComponent = () => { Header: "Series", accessor: "seriesTitle", Cell: (row) => { - const { classes } = useTableStyles(); const target = `/series/${row.row.original.sonarrSeriesId}`; return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {row.value} </Anchor> ); @@ -50,8 +48,7 @@ const SeriesHistoryView: FunctionComponent = () => { Header: "Title", accessor: "episodeTitle", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}</Text>; + return <Text className="table-no-wrap">{value}</Text>; }, }, { diff --git a/frontend/src/pages/History/Statistics/HistoryStats.module.scss b/frontend/src/pages/History/Statistics/HistoryStats.module.scss new file mode 100644 index 000000000..3c7c04e10 --- /dev/null +++ b/frontend/src/pages/History/Statistics/HistoryStats.module.scss @@ -0,0 +1,9 @@ +.container { + display: flex; + flex-direction: column; + height: calc(100vh - $header-height); +} + +.chart { + height: 90%; +} diff --git a/frontend/src/pages/History/Statistics/index.tsx b/frontend/src/pages/History/Statistics/HistoryStats.tsx index 243225538..9358cac30 100644 --- a/frontend/src/pages/History/Statistics/index.tsx +++ b/frontend/src/pages/History/Statistics/HistoryStats.tsx @@ -5,16 +5,8 @@ import { } from "@/apis/hooks"; import { Selector, Toolbox } from "@/components"; import { QueryOverlay } from "@/components/async"; -import Language from "@/components/bazarr/Language"; -import { Layout } from "@/constants"; import { useSelectorOptions } from "@/utilities"; -import { - Box, - Container, - SimpleGrid, - createStyles, - useMantineTheme, -} from "@mantine/core"; +import { Box, Container, SimpleGrid, useMantineTheme } from "@mantine/core"; import { useDocumentTitle } from "@mantine/hooks"; import { merge } from "lodash"; import { FunctionComponent, useMemo, useState } from "react"; @@ -29,17 +21,7 @@ import { YAxis, } from "recharts"; import { actionOptions, timeFrameOptions } from "./options"; - -const useStyles = createStyles((theme) => ({ - container: { - display: "flex", - flexDirection: "column", - height: `calc(100vh - ${Layout.HEADER_HEIGHT}px)`, - }, - chart: { - height: "90%", - }, -})); +import styles from "./HistoryStats.module.scss"; const HistoryStats: FunctionComponent = () => { const { data: providers } = useSystemProviders(true); @@ -71,8 +53,8 @@ const HistoryStats: FunctionComponent = () => { date: v.date, series: v.count, })); - const result = merge(movies, series); - return result; + + return merge(movies, series); } else { return []; } @@ -80,20 +62,13 @@ const HistoryStats: FunctionComponent = () => { useDocumentTitle("History Statistics - Bazarr"); - const { classes } = useStyles(); const theme = useMantineTheme(); return ( - <Container fluid px={0} className={classes.container}> + <Container fluid px={0} className={styles.container}> <QueryOverlay result={stats}> <Toolbox> - <SimpleGrid - cols={4} - breakpoints={[ - { maxWidth: "sm", cols: 4 }, - { maxWidth: "xs", cols: 2 }, - ]} - > + <SimpleGrid cols={{ base: 4, xs: 2 }}> <Selector placeholder="Time..." options={timeFrameOptions} @@ -123,9 +98,9 @@ const HistoryStats: FunctionComponent = () => { ></Selector> </SimpleGrid> </Toolbox> - <Box className={classes.chart} m="xs"> + <Box className={styles.chart} m="xs"> <ResponsiveContainer> - <BarChart className={classes.chart} data={convertedData}> + <BarChart className={styles.chart} data={convertedData}> <CartesianGrid strokeDasharray="4 2"></CartesianGrid> <XAxis dataKey="date"></XAxis> <YAxis allowDecimals={false}></YAxis> diff --git a/frontend/src/pages/History/history.test.tsx b/frontend/src/pages/History/history.test.tsx index 1de1e6c5d..a348a5b91 100644 --- a/frontend/src/pages/History/history.test.tsx +++ b/frontend/src/pages/History/history.test.tsx @@ -1,7 +1,7 @@ import { renderTest, RenderTestCase } from "@/tests/render"; import MoviesHistoryView from "./Movies"; import SeriesHistoryView from "./Series"; -import HistoryStats from "./Statistics"; +import HistoryStats from "./Statistics/HistoryStats"; const cases: RenderTestCase[] = [ { diff --git a/frontend/src/pages/Movies/Details/index.tsx b/frontend/src/pages/Movies/Details/index.tsx index a6b4b0aa8..4168754f1 100644 --- a/frontend/src/pages/Movies/Details/index.tsx +++ b/frontend/src/pages/Movies/Details/index.tsx @@ -123,7 +123,7 @@ const MovieDetailView: FunctionComponent = () => { <DropContent></DropContent> </Dropzone.FullScreen> <Toolbox> - <Group spacing="xs"> + <Group gap="xs"> <Toolbox.Button icon={faSync} disabled={hasTask} @@ -168,7 +168,7 @@ const MovieDetailView: FunctionComponent = () => { Manual </Toolbox.Button> </Group> - <Group spacing="xs"> + <Group gap="xs"> <Toolbox.Button disabled={!allowEdit || movie.profileId === null || hasTask} icon={faCloudUploadAlt} @@ -205,7 +205,7 @@ const MovieDetailView: FunctionComponent = () => { </Menu.Target> <Menu.Dropdown> <Menu.Item - icon={<FontAwesomeIcon icon={faToolbox} />} + leftSection={<FontAwesomeIcon icon={faToolbox} />} onClick={() => { if (movie) { modals.openContextModal(SubtitleToolsModal, { @@ -217,7 +217,7 @@ const MovieDetailView: FunctionComponent = () => { Mass Edit </Menu.Item> <Menu.Item - icon={<FontAwesomeIcon icon={faHistory} />} + leftSection={<FontAwesomeIcon icon={faHistory} />} onClick={() => { if (movie) { modals.openContextModal(MovieHistoryModal, { movie }); diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx index 0a327b745..aa7e164cc 100644 --- a/frontend/src/pages/Movies/Details/table.tsx +++ b/frontend/src/pages/Movies/Details/table.tsx @@ -4,7 +4,6 @@ import { Action, SimpleTable } from "@/components"; import Language from "@/components/bazarr/Language"; import SubtitleToolsMenu from "@/components/SubtitleToolsMenu"; import { task, TaskGroup } from "@/modules/task"; -import { useTableStyles } from "@/styles"; import { filterSubtitleBy } from "@/utilities"; import { useProfileItemsToLanguages } from "@/utilities/languages"; import { faEllipsis, faSearch } from "@fortawesome/free-solid-svg-icons"; @@ -40,17 +39,17 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => { Header: "Subtitle Path", accessor: "path", Cell: ({ value }) => { - const { classes } = useTableStyles(); - const props: TextProps = { - className: classes.primary, + className: "table-primary", }; if (isSubtitleTrack(value)) { - return <Text {...props}>Video File Subtitle Track</Text>; + return ( + <Text className="table-primary">Video File Subtitle Track</Text> + ); } else if (isSubtitleMissing(value)) { return ( - <Text {...props} color="dimmed"> + <Text {...props} c="dimmed"> {value} </Text> ); diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx index dd9f531e1..262d56195 100644 --- a/frontend/src/pages/Movies/index.tsx +++ b/frontend/src/pages/Movies/index.tsx @@ -6,7 +6,6 @@ import LanguageProfileName from "@/components/bazarr/LanguageProfile"; import { ItemEditModal } from "@/components/forms/ItemEditForm"; import { useModals } from "@/modules/modals"; import ItemView from "@/pages/views/ItemView"; -import { useTableStyles } from "@/styles"; import { BuildKey } from "@/utilities"; import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons"; import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons"; @@ -35,10 +34,9 @@ const MovieView: FunctionComponent = () => { Header: "Name", accessor: "title", Cell: ({ row, value }) => { - const { classes } = useTableStyles(); const target = `/movies/${row.original.radarrId}`; return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {value} </Anchor> ); diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx index 66921347c..60206d34a 100644 --- a/frontend/src/pages/Series/index.tsx +++ b/frontend/src/pages/Series/index.tsx @@ -4,7 +4,6 @@ import LanguageProfileName from "@/components/bazarr/LanguageProfile"; import { ItemEditModal } from "@/components/forms/ItemEditForm"; import { useModals } from "@/modules/modals"; import ItemView from "@/pages/views/ItemView"; -import { useTableStyles } from "@/styles"; import { faBookmark as farBookmark } from "@fortawesome/free-regular-svg-icons"; import { faBookmark, faWrench } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -34,10 +33,9 @@ const SeriesView: FunctionComponent = () => { Header: "Name", accessor: "title", Cell: ({ row, value }) => { - const { classes } = useTableStyles(); const target = `/series/${row.original.sonarrSeriesId}`; return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {value} </Anchor> ); @@ -70,13 +68,14 @@ const SeriesView: FunctionComponent = () => { } return ( - <Progress - key={title} - size="xl" - color={episodeMissingCount === 0 ? "brand" : "yellow"} - value={progress} - label={label} - ></Progress> + <Progress.Root key={title} size="xl"> + <Progress.Section + value={progress} + color={episodeMissingCount === 0 ? "brand" : "yellow"} + > + <Progress.Label>{label}</Progress.Label> + </Progress.Section> + </Progress.Root> ); }, }, diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx index 8cc5ea8c3..bec3f946f 100644 --- a/frontend/src/pages/Settings/General/index.tsx +++ b/frontend/src/pages/Settings/General/index.tsx @@ -4,7 +4,7 @@ import { faClipboard, faSync, } from "@fortawesome/free-solid-svg-icons"; -import { Group as MantineGroup, Text as MantineText } from "@mantine/core"; +import { Box, Group as MantineGroup, Text as MantineText } from "@mantine/core"; import { useClipboard } from "@mantine/hooks"; import { FunctionComponent, useState } from "react"; import { @@ -54,7 +54,7 @@ const SettingsGeneralView: FunctionComponent = () => { ></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-general-base_url" settingOptions={{ onLoaded: (s) => s.general.base_url?.slice(1) ?? "", @@ -87,7 +87,7 @@ const SettingsGeneralView: FunctionComponent = () => { rightSectionWidth={95} rightSectionProps={{ style: { justifyContent: "flex-end" } }} rightSection={ - <MantineGroup spacing="xs" mx="xs" position="right"> + <MantineGroup gap="xs" mx="xs" justify="right"> { // Clipboard API is only available in secure contexts See: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#interfaces window.isSecureContext && ( @@ -204,13 +204,12 @@ const SettingsGeneralView: FunctionComponent = () => { <Number label="Retention" settingKey="settings-backup-retention" - styles={{ - rightSection: { width: "4rem", justifyContent: "flex-end" }, - }} rightSection={ - <MantineText size="xs" px="sm" color="dimmed"> - Days - </MantineText> + <Box w="4rem" style={{ justifyContent: "flex-end" }}> + <MantineText size="xs" px="sm" c="dimmed"> + Days + </MantineText> + </Box> } ></Number> </Section> diff --git a/frontend/src/pages/Settings/Languages/equals.tsx b/frontend/src/pages/Settings/Languages/equals.tsx index a4fe95eee..a417059ab 100644 --- a/frontend/src/pages/Settings/Languages/equals.tsx +++ b/frontend/src/pages/Settings/Languages/equals.tsx @@ -355,7 +355,7 @@ const EqualsTable: FunctionComponent<EqualsTableProps> = () => { return ( <> <SimpleTable data={equals} columns={columns}></SimpleTable> - <Button fullWidth disabled={!canAdd} color="light" onClick={add}> + <Button fullWidth disabled={!canAdd} onClick={add}> {canAdd ? "Add Equal" : "No Enabled Languages"} </Button> </> diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx index a1ee217e8..86a227207 100644 --- a/frontend/src/pages/Settings/Languages/table.tsx +++ b/frontend/src/pages/Settings/Languages/table.tsx @@ -70,7 +70,7 @@ const Table: FunctionComponent = () => { const items = row.value; const cutoff = row.row.original.cutoff; return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> {items.map((v) => { const isCutoff = v.id === cutoff || cutoff === anyCutoff; return ( @@ -128,7 +128,7 @@ const Table: FunctionComponent = () => { Cell: ({ row }) => { const profile = row.original; return ( - <Group spacing="xs" noWrap> + <Group gap="xs" wrap="nowrap"> <Action label="Edit Profile" icon={faWrench} @@ -163,7 +163,6 @@ const Table: FunctionComponent = () => { <Button fullWidth disabled={!canAdd} - color="light" onClick={() => { const profile = { profileId: nextProfileId, diff --git a/frontend/src/pages/Settings/Notifications/components.tsx b/frontend/src/pages/Settings/Notifications/components.tsx index 1a2b20f65..cde3f3268 100644 --- a/frontend/src/pages/Settings/Notifications/components.tsx +++ b/frontend/src/pages/Settings/Notifications/components.tsx @@ -90,7 +90,7 @@ const NotificationForm: FunctionComponent<Props> = ({ ></Textarea> </div> <Divider></Divider> - <Group position="right"> + <Group justify="right"> <MutateButton mutation={test} args={() => form.values.url}> Test </MutateButton> diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx index 91076d7de..803550ce5 100644 --- a/frontend/src/pages/Settings/Providers/components.tsx +++ b/frontend/src/pages/Settings/Providers/components.tsx @@ -9,12 +9,12 @@ import { Text as MantineText, SimpleGrid, Stack, + AutocompleteProps, } from "@mantine/core"; import { useForm } from "@mantine/form"; import { capitalize } from "lodash"; import { FunctionComponent, - forwardRef, useCallback, useMemo, useRef, @@ -50,6 +50,11 @@ interface ProviderViewProps { settingsKey: SettingsKey; } +interface ProviderSelect { + value: string; + payload: ProviderInfo; +} + export const ProviderView: FunctionComponent<ProviderViewProps> = ({ availableOptions, settingsKey, @@ -130,17 +135,16 @@ interface ProviderToolProps { settingsKey: Readonly<SettingsKey>; } -const SelectItem = forwardRef< - HTMLDivElement, - { payload: ProviderInfo; label: string } ->(({ payload: { description }, label, ...other }, ref) => { +const SelectItem: AutocompleteProps["renderOption"] = ({ option }) => { + const provider = option as ProviderSelect; + return ( - <Stack spacing={1} ref={ref} {...other}> - <MantineText size="md">{label}</MantineText> - <MantineText size="xs">{description}</MantineText> + <Stack gap={1}> + <MantineText size="md">{provider.value}</MantineText> + <MantineText size="xs">{provider.payload.description}</MantineText> </Stack> ); -}); +}; const ProviderTool: FunctionComponent<ProviderToolProps> = ({ payload, @@ -298,19 +302,19 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({ } }); - return <Stack spacing="xs">{elements}</Stack>; + return <Stack gap="xs">{elements}</Stack>; }, [info]); return ( <SettingsProvider value={settings}> <FormContext.Provider value={form}> <Stack> - <Stack spacing="xs"> + <Stack gap="xs"> <Selector data-autofocus searchable placeholder="Click to Select a Provider" - itemComponent={SelectItem} + renderOption={SelectItem} disabled={payload !== null} {...selectorOptions} value={info} @@ -323,7 +327,7 @@ const ProviderTool: FunctionComponent<ProviderToolProps> = ({ </div> </Stack> <Divider></Divider> - <Group position="right"> + <Group justify="right"> <Button hidden={!payload} color="red" onClick={deletePayload}> Delete </Button> diff --git a/frontend/src/pages/Settings/Radarr/index.tsx b/frontend/src/pages/Settings/Radarr/index.tsx index 8cd038ab8..8805aeed8 100644 --- a/frontend/src/pages/Settings/Radarr/index.tsx +++ b/frontend/src/pages/Settings/Radarr/index.tsx @@ -30,7 +30,7 @@ const SettingsRadarrView: FunctionComponent = () => { <Number label="Port" settingKey="settings-radarr-port"></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-radarr-base_url" settingOptions={{ onLoaded: (s) => s.radarr.base_url?.slice(1) ?? "", diff --git a/frontend/src/pages/Settings/Sonarr/index.tsx b/frontend/src/pages/Settings/Sonarr/index.tsx index 1d2125568..0f60d70a8 100644 --- a/frontend/src/pages/Settings/Sonarr/index.tsx +++ b/frontend/src/pages/Settings/Sonarr/index.tsx @@ -32,7 +32,7 @@ const SettingsSonarrView: FunctionComponent = () => { <Number label="Port" settingKey="settings-sonarr-port"></Number> <Text label="Base URL" - icon="/" + leftSection="/" settingKey="settings-sonarr-base_url" settingOptions={{ onLoaded: (s) => s.sonarr.base_url?.slice(1) ?? "", diff --git a/frontend/src/pages/Settings/Subtitles/index.tsx b/frontend/src/pages/Settings/Subtitles/index.tsx index f2dec69ac..c4dffd227 100644 --- a/frontend/src/pages/Settings/Subtitles/index.tsx +++ b/frontend/src/pages/Settings/Subtitles/index.tsx @@ -501,7 +501,7 @@ const SettingsSubtitlesView: FunctionComponent = () => { label="Command" settingKey="settings-general-postprocessing_cmd" ></Text> - <Table highlightOnHover fontSize="sm"> + <Table highlightOnHover fs="sm"> <tbody>{commandOptionElements}</tbody> </Table> </CollapseBox> diff --git a/frontend/src/pages/Settings/components/Card.module.scss b/frontend/src/pages/Settings/components/Card.module.scss new file mode 100644 index 000000000..746e55e65 --- /dev/null +++ b/frontend/src/pages/Settings/components/Card.module.scss @@ -0,0 +1,9 @@ +.card { + border-radius: var(--mantine-radius-sm); + border: 1px solid var(--mantine-color-gray-7); + + &:hover { + box-shadow: var(--mantine-shadow-md); + border: 1px solid $color-brand-5; + } +} diff --git a/frontend/src/pages/Settings/components/Card.tsx b/frontend/src/pages/Settings/components/Card.tsx index 4f3bd4fbf..6e4b58f47 100644 --- a/frontend/src/pages/Settings/components/Card.tsx +++ b/frontend/src/pages/Settings/components/Card.tsx @@ -1,30 +1,8 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - Center, - createStyles, - Stack, - Text, - UnstyledButton, -} from "@mantine/core"; +import { Center, Stack, Text, UnstyledButton } from "@mantine/core"; import { FunctionComponent } from "react"; - -const useCardStyles = createStyles((theme) => { - return { - card: { - borderRadius: theme.radius.sm, - border: `1px solid ${theme.colors.gray[7]}`, - - "&:hover": { - boxShadow: theme.shadows.md, - border: `1px solid ${theme.colors.brand[5]}`, - }, - }, - stack: { - height: "100%", - }, - }; -}); +import styles from "./Card.module.scss"; interface CardProps { header?: string; @@ -39,16 +17,15 @@ export const Card: FunctionComponent<CardProps> = ({ plus, onClick, }) => { - const { classes } = useCardStyles(); return ( - <UnstyledButton p="lg" onClick={onClick} className={classes.card}> + <UnstyledButton p="lg" onClick={onClick} className={styles.card}> {plus ? ( <Center> <FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon> </Center> ) : ( - <Stack className={classes.stack} spacing={0} align="flex-start"> - <Text weight="bold">{header}</Text> + <Stack h="100%" gap={0} align="flex-start"> + <Text fw="bold">{header}</Text> <Text hidden={description === undefined}>{description}</Text> </Stack> )} diff --git a/frontend/src/pages/Settings/components/Layout.tsx b/frontend/src/pages/Settings/components/Layout.tsx index b20c8092b..5fb6dbbed 100644 --- a/frontend/src/pages/Settings/components/Layout.tsx +++ b/frontend/src/pages/Settings/components/Layout.tsx @@ -73,7 +73,7 @@ const Layout: FunctionComponent<Props> = (props) => { icon={faSave} loading={isMutating} disabled={totalStagedCount === 0} - rightIcon={ + rightSection={ <Badge size="xs" radius="sm" hidden={totalStagedCount === 0}> {totalStagedCount} </Badge> diff --git a/frontend/src/pages/Settings/components/LayoutModal.tsx b/frontend/src/pages/Settings/components/LayoutModal.tsx index cb4d5a1b5..6150295e4 100644 --- a/frontend/src/pages/Settings/components/LayoutModal.tsx +++ b/frontend/src/pages/Settings/components/LayoutModal.tsx @@ -74,7 +74,7 @@ const LayoutModal: FunctionComponent<Props> = (props) => { <Space h="md" /> <Divider></Divider> <Space h="md" /> - <Group position="right"> + <Group justify="right"> <Button type="submit" disabled={totalStagedCount === 0} diff --git a/frontend/src/pages/Settings/components/Message.tsx b/frontend/src/pages/Settings/components/Message.tsx index 301df7bab..eac84131b 100644 --- a/frontend/src/pages/Settings/components/Message.tsx +++ b/frontend/src/pages/Settings/components/Message.tsx @@ -12,7 +12,7 @@ export const Message: FunctionComponent<Props> = ({ children, }) => { return ( - <Text size="sm" color={type === "info" ? "dimmed" : "yellow"} my={0}> + <Text size="sm" c={type === "info" ? "dimmed" : "yellow"} my={0}> {children} </Text> ); diff --git a/frontend/src/pages/Settings/components/Section.test.tsx b/frontend/src/pages/Settings/components/Section.test.tsx index e7f270e0d..850a47671 100644 --- a/frontend/src/pages/Settings/components/Section.test.tsx +++ b/frontend/src/pages/Settings/components/Section.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, screen } from "@/tests"; +import { render, screen } from "@/tests"; import { Text } from "@mantine/core"; import { describe, it } from "vitest"; import { Section } from "./Section"; @@ -6,7 +6,7 @@ import { Section } from "./Section"; describe("Settings section", () => { const header = "Section Header"; it("should show header", () => { - rawRender(<Section header="Section Header"></Section>); + render(<Section header="Section Header"></Section>); expect(screen.getByText(header)).toBeDefined(); expect(screen.getByRole("separator")).toBeDefined(); @@ -14,7 +14,7 @@ describe("Settings section", () => { it("should show children", () => { const text = "Section Child"; - rawRender( + render( <Section header="Section Header"> <Text>{text}</Text> </Section>, @@ -26,7 +26,7 @@ describe("Settings section", () => { it("should work with hidden", () => { const text = "Section Child"; - rawRender( + render( <Section header="Section Header" hidden> <Text>{text}</Text> </Section>, diff --git a/frontend/src/pages/Settings/components/Section.tsx b/frontend/src/pages/Settings/components/Section.tsx index 36f56ff8d..7c5727bf0 100644 --- a/frontend/src/pages/Settings/components/Section.tsx +++ b/frontend/src/pages/Settings/components/Section.tsx @@ -14,7 +14,7 @@ export const Section: FunctionComponent<Props> = ({ children, }) => { return ( - <Stack hidden={hidden} spacing="xs" my="lg"> + <Stack hidden={hidden} gap="xs" my="lg"> <Title order={4}>{header}</Title> <Divider></Divider> {children} diff --git a/frontend/src/pages/Settings/components/collapse.tsx b/frontend/src/pages/Settings/components/collapse.tsx index 1dcffbd97..c598105bd 100644 --- a/frontend/src/pages/Settings/components/collapse.tsx +++ b/frontend/src/pages/Settings/components/collapse.tsx @@ -31,7 +31,7 @@ const CollapseBox: FunctionComponent<Props> = ({ return ( <Collapse in={open} pl={indent ? "md" : undefined}> - <Stack spacing="xs">{children}</Stack> + <Stack gap="xs">{children}</Stack> </Collapse> ); }; diff --git a/frontend/src/pages/Settings/components/forms.test.tsx b/frontend/src/pages/Settings/components/forms.test.tsx index 19c66ade0..26974bad9 100644 --- a/frontend/src/pages/Settings/components/forms.test.tsx +++ b/frontend/src/pages/Settings/components/forms.test.tsx @@ -1,4 +1,4 @@ -import { rawRender, RenderOptions, screen } from "@/tests"; +import { render, RenderOptions, screen } from "@/tests"; import { useForm } from "@mantine/form"; import { FunctionComponent, PropsWithChildren, ReactElement } from "react"; import { describe, it } from "vitest"; @@ -18,7 +18,7 @@ const FormSupport: FunctionComponent<PropsWithChildren> = ({ children }) => { const formRender = ( ui: ReactElement, options?: Omit<RenderOptions, "wrapper">, -) => rawRender(ui, { wrapper: FormSupport, ...options }); +) => render(<FormSupport>{ui}</FormSupport>); describe("Settings form", () => { describe("number component", () => { diff --git a/frontend/src/pages/Settings/components/forms.tsx b/frontend/src/pages/Settings/components/forms.tsx index 3e1d3f12f..1d65b0375 100644 --- a/frontend/src/pages/Settings/components/forms.tsx +++ b/frontend/src/pages/Settings/components/forms.tsx @@ -38,6 +38,11 @@ export const Number: FunctionComponent<NumberProps> = (props) => { if (val === "") { val = 0; } + + if (typeof val === "string") { + return update(+val); + } + update(val); }} ></NumberInput> diff --git a/frontend/src/pages/Settings/components/index.tsx b/frontend/src/pages/Settings/components/index.tsx index 99d1658bc..6ac9cb86c 100644 --- a/frontend/src/pages/Settings/components/index.tsx +++ b/frontend/src/pages/Settings/components/index.tsx @@ -56,7 +56,7 @@ export const URLTestButton: FunctionComponent<{ }, [address, port, url, apikey, ssl]); return ( - <Button onClick={click} color={color} title={title}> + <Button autoContrast onClick={click} variant={color} title={title}> {title} </Button> ); @@ -107,7 +107,7 @@ export const ProviderTestButton: FunctionComponent<{ }, [testUrl]); return ( - <Button onClick={click} color={color} title={title}> + <Button onClick={click} variant={color} title={title}> {title} </Button> ); diff --git a/frontend/src/pages/Settings/components/pathMapper.tsx b/frontend/src/pages/Settings/components/pathMapper.tsx index 8bb3514b7..38fbb27e9 100644 --- a/frontend/src/pages/Settings/components/pathMapper.tsx +++ b/frontend/src/pages/Settings/components/pathMapper.tsx @@ -141,7 +141,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => { columns={columns} data={data} ></SimpleTable> - <Button fullWidth color="light" onClick={addRow}> + <Button fullWidth onClick={addRow}> Add </Button> </> diff --git a/frontend/src/pages/System/Announcements/table.tsx b/frontend/src/pages/System/Announcements/table.tsx index 74a160190..eb9b6e43c 100644 --- a/frontend/src/pages/System/Announcements/table.tsx +++ b/frontend/src/pages/System/Announcements/table.tsx @@ -1,7 +1,6 @@ import { useSystemAnnouncementsAddDismiss } from "@/apis/hooks"; import { SimpleTable } from "@/components"; import { MutateAction } from "@/components/async"; -import { useTableStyles } from "@/styles"; import { faWindowClose } from "@fortawesome/free-solid-svg-icons"; import { Anchor, Text } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; @@ -20,16 +19,14 @@ const Table: FunctionComponent<Props> = ({ announcements }) => { Header: "Since", accessor: "timestamp", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.primary}>{value}</Text>; + return <Text className="table-primary">{value}</Text>; }, }, { Header: "Announcement", accessor: "text", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.primary}>{value}</Text>; + return <Text className="table-primary">{value}</Text>; }, }, { diff --git a/frontend/src/pages/System/Backups/table.tsx b/frontend/src/pages/System/Backups/table.tsx index 4f9eeae44..42236cee5 100644 --- a/frontend/src/pages/System/Backups/table.tsx +++ b/frontend/src/pages/System/Backups/table.tsx @@ -1,7 +1,6 @@ import { useDeleteBackups, useRestoreBackups } from "@/apis/hooks"; import { Action, PageTable } from "@/components"; import { useModals } from "@/modules/modals"; -import { useTableStyles } from "@/styles"; import { Environment } from "@/utilities"; import { faHistory, faTrash } from "@fortawesome/free-solid-svg-icons"; import { Anchor, Text } from "@mantine/core"; @@ -32,16 +31,14 @@ const Table: FunctionComponent<Props> = ({ backups }) => { Header: "Size", accessor: "size", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}</Text>; + return <Text className="table-no-wrap">{value}</Text>; }, }, { Header: "Time", accessor: "date", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}</Text>; + return <Text className="table-no-wrap">{value}</Text>; }, }, { diff --git a/frontend/src/pages/System/Logs/index.tsx b/frontend/src/pages/System/Logs/index.tsx index d77e102d8..a232b8069 100644 --- a/frontend/src/pages/System/Logs/index.tsx +++ b/frontend/src/pages/System/Logs/index.tsx @@ -86,7 +86,7 @@ const SystemLogsView: FunctionComponent = () => { <Container fluid px={0}> <QueryOverlay result={logs}> <Toolbox> - <Group spacing="xs"> + <Group gap="xs"> <Toolbox.Button loading={isFetching} icon={faSync} @@ -108,7 +108,7 @@ const SystemLogsView: FunctionComponent = () => { loading={isLoading} icon={faFilter} onClick={openFilterModal} - rightIcon={ + rightSection={ suffix() !== "" ? ( <Badge size="xs" radius="sm"> {suffix()} diff --git a/frontend/src/pages/System/Releases/index.tsx b/frontend/src/pages/System/Releases/index.tsx index f205da086..66b5a1c8a 100644 --- a/frontend/src/pages/System/Releases/index.tsx +++ b/frontend/src/pages/System/Releases/index.tsx @@ -23,7 +23,7 @@ const SystemReleasesView: FunctionComponent = () => { return ( <Container size={600} py={12}> <QueryOverlay result={releases}> - <Stack spacing="lg"> + <Stack gap="lg"> {data?.map((v, idx) => ( <ReleaseCard key={BuildKey(idx, v.date)} {...v}></ReleaseCard> ))} @@ -47,7 +47,7 @@ const ReleaseCard: FunctionComponent<ReleaseInfo> = ({ return ( <Card shadow="md" p="lg"> <Group> - <Text weight="bold">{name}</Text> + <Text fw="bold">{name}</Text> <Badge color="blue">{date}</Badge> <Badge color={prerelease ? "yellow" : "green"}> {prerelease ? "Development" : "Master"} diff --git a/frontend/src/pages/System/Status/index.tsx b/frontend/src/pages/System/Status/index.tsx index 49c88ccd4..05996f7ad 100644 --- a/frontend/src/pages/System/Status/index.tsx +++ b/frontend/src/pages/System/Status/index.tsx @@ -46,7 +46,7 @@ function Row(props: InfoProps): JSX.Element { return ( <Grid columns={10}> <Grid.Col span={2}> - <Text size="sm" align="right" weight="bold"> + <Text size="sm" ta="right" fw="bold"> {title} </Text> </Grid.Col> @@ -85,9 +85,12 @@ const InfoContainer: FunctionComponent< return ( <Stack> <Divider - labelProps={{ size: "medium", weight: "bold" }} labelPosition="left" - label={title} + label={ + <Text size="md" fw="bold"> + {title} + </Text> + } ></Divider> {children} <Space /> diff --git a/frontend/src/pages/System/Status/table.tsx b/frontend/src/pages/System/Status/table.tsx index 3b8a87e8a..c139f9d93 100644 --- a/frontend/src/pages/System/Status/table.tsx +++ b/frontend/src/pages/System/Status/table.tsx @@ -1,5 +1,4 @@ import { SimpleTable } from "@/components"; -import { useTableStyles } from "@/styles"; import { Text } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; import { Column } from "react-table"; @@ -15,16 +14,14 @@ const Table: FunctionComponent<Props> = ({ health }) => { Header: "Object", accessor: "object", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}</Text>; + return <Text className="table-no-wrap">{value}</Text>; }, }, { Header: "Issue", accessor: "issue", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.primary}>{value}</Text>; + return <Text className="table-primary">{value}</Text>; }, }, ], diff --git a/frontend/src/pages/System/Tasks/table.tsx b/frontend/src/pages/System/Tasks/table.tsx index ea45af49d..064438668 100644 --- a/frontend/src/pages/System/Tasks/table.tsx +++ b/frontend/src/pages/System/Tasks/table.tsx @@ -1,7 +1,6 @@ import { useRunTask } from "@/apis/hooks"; import { SimpleTable } from "@/components"; import MutateAction from "@/components/async/MutateAction"; -import { useTableStyles } from "@/styles"; import { faPlay } from "@fortawesome/free-solid-svg-icons"; import { Text } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; @@ -18,16 +17,14 @@ const Table: FunctionComponent<Props> = ({ tasks }) => { Header: "Name", accessor: "name", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.primary}>{value}</Text>; + return <Text className="table-primary">{value}</Text>; }, }, { Header: "Interval", accessor: "interval", Cell: ({ value }) => { - const { classes } = useTableStyles(); - return <Text className={classes.noWrap}>{value}</Text>; + return <Text className="table-no-wrap">{value}</Text>; }, }, { diff --git a/frontend/src/pages/Wanted/Movies/index.tsx b/frontend/src/pages/Wanted/Movies/index.tsx index 57fb6d6ed..d62871416 100644 --- a/frontend/src/pages/Wanted/Movies/index.tsx +++ b/frontend/src/pages/Wanted/Movies/index.tsx @@ -39,7 +39,7 @@ const WantedMoviesView: FunctionComponent = () => { const { download } = useMovieSubtitleModification(); return ( - <Group spacing="sm"> + <Group gap="sm"> {value.map((item, idx) => ( <Badge color={download.isLoading ? "gray" : undefined} diff --git a/frontend/src/pages/Wanted/Series/index.tsx b/frontend/src/pages/Wanted/Series/index.tsx index 96507bccd..d5f4d8993 100644 --- a/frontend/src/pages/Wanted/Series/index.tsx +++ b/frontend/src/pages/Wanted/Series/index.tsx @@ -6,7 +6,6 @@ import { import Language from "@/components/bazarr/Language"; import { TaskGroup, task } from "@/modules/task"; import WantedView from "@/pages/views/WantedView"; -import { useTableStyles } from "@/styles"; import { BuildKey } from "@/utilities"; import { faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -23,9 +22,8 @@ const WantedSeriesView: FunctionComponent = () => { accessor: "seriesTitle", Cell: (row) => { const target = `/series/${row.row.original.sonarrSeriesId}`; - const { classes } = useTableStyles(); return ( - <Anchor className={classes.primary} component={Link} to={target}> + <Anchor className="table-primary" component={Link} to={target}> {row.value} </Anchor> ); @@ -49,7 +47,7 @@ const WantedSeriesView: FunctionComponent = () => { const { download } = useEpisodeSubtitleModification(); return ( - <Group spacing="sm"> + <Group gap="sm"> {value.map((item, idx) => ( <Badge color={download.isLoading ? "gray" : undefined} diff --git a/frontend/src/pages/errors/UIError.tsx b/frontend/src/pages/errors/UIError.tsx index 4f26d0d0c..55e0d5414 100644 --- a/frontend/src/pages/errors/UIError.tsx +++ b/frontend/src/pages/errors/UIError.tsx @@ -45,13 +45,11 @@ const UIError: FunctionComponent<Props> = ({ error }) => { <Center my="xl"> <Code>{stack}</Code> </Center> - <Group position="center"> + <Group justify="center"> <Anchor href={`${GithubRepoRoot}/issues/new/choose`} target="_blank"> <Button color="yellow">Report Issue</Button> </Anchor> - <Button onClick={Reload} color="light"> - Reload Page - </Button> + <Button onClick={Reload}>Reload Page</Button> </Group> </Container> ); diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx index d95944db3..a5224b586 100644 --- a/frontend/src/pages/views/ItemOverview.tsx +++ b/frontend/src/pages/views/ItemOverview.tsx @@ -28,11 +28,9 @@ import { HoverCard, Image, List, - MediaQuery, Stack, Text, Title, - createStyles, } from "@mantine/core"; import { FunctionComponent, useMemo } from "react"; @@ -41,25 +39,9 @@ interface Props { details?: { icon: IconDefinition; text: string }[]; } -const useStyles = createStyles((theme) => { - return { - poster: { - maxWidth: "250px", - }, - col: { - maxWidth: "100%", - }, - group: { - maxWidth: "100%", - }, - }; -}); - const ItemOverview: FunctionComponent<Props> = (props) => { const { item, details } = props; - const { classes } = useStyles(); - const detailBadges = useMemo(() => { const badges: (JSX.Element | null)[] = []; @@ -150,21 +132,19 @@ const ItemOverview: FunctionComponent<Props> = (props) => { flexWrap: "nowrap", }} > - <MediaQuery smallerThan="sm" styles={{ display: "none" }}> - <Grid.Col span={3}> - <Image - src={item?.poster} - mx="auto" - className={classes.poster} - withPlaceholder - ></Image> - </Grid.Col> - </MediaQuery> - <Grid.Col span={8} className={classes.col}> - <Stack align="flex-start" spacing="xs" mx={6}> - <Group align="flex-start" noWrap className={classes.group}> + <Grid.Col span={3} hiddenFrom="sm"> + <Image + src={item?.poster} + mx="auto" + maw="250px" + fallbackSrc="https://placehold.co/250x250?text=Placeholder" + ></Image> + </Grid.Col> + <Grid.Col span={8} maw="100%"> + <Stack align="flex-start" gap="xs" mx={6}> + <Group align="flex-start" wrap="nowrap" maw="100%"> <Title my={0}> - <Text inherit color="white"> + <Text inherit c="white"> <Box component="span" mr={12}> <FontAwesomeIcon title={item?.monitored ? "monitored" : "unmonitored"} @@ -176,10 +156,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => { </Title> <HoverCard position="bottom" withArrow> <HoverCard.Target> - <Text - hidden={item?.alternativeTitles.length === 0} - color="white" - > + <Text hidden={item?.alternativeTitles.length === 0} c="white"> <FontAwesomeIcon icon={faClone} /> </Text> </HoverCard.Target> @@ -192,16 +169,16 @@ const ItemOverview: FunctionComponent<Props> = (props) => { </HoverCard.Dropdown> </HoverCard> </Group> - <Group spacing="xs" className={classes.group}> + <Group gap="xs" maw="100%"> {detailBadges} </Group> - <Group spacing="xs" className={classes.group}> + <Group gap="xs" maw="100%"> {audioBadges} </Group> - <Group spacing="xs" className={classes.group}> + <Group gap="xs" maw="100%"> {languageBadges} </Group> - <Text size="sm" color="white"> + <Text size="sm" c="white"> {item?.overview} </Text> </Stack> diff --git a/frontend/src/pages/views/MassEditor.tsx b/frontend/src/pages/views/MassEditor.tsx index b15a55e83..ddab269bd 100644 --- a/frontend/src/pages/views/MassEditor.tsx +++ b/frontend/src/pages/views/MassEditor.tsx @@ -36,13 +36,8 @@ function MassEditor<T extends Item.Base>(props: MassEditorProps<T>) { const profileOptions = useSelectorOptions(profiles ?? [], (v) => v.name); - const profileOptionsWithAction = useMemo< - SelectorOption<Language.Profile | null>[] - >( - () => [ - { label: "Clear", value: null, group: "Action" }, - ...profileOptions.options, - ], + const profileOptionsWithAction = useMemo<SelectorOption<Language.Profile>[]>( + () => [...profileOptions.options], [profileOptions.options], ); @@ -82,6 +77,7 @@ function MassEditor<T extends Item.Base>(props: MassEditorProps<T>) { }, [selections], ); + return ( <Container fluid px={0}> <Toolbox> diff --git a/frontend/src/providers.tsx b/frontend/src/providers.tsx index 97189a23e..aa526c25b 100644 --- a/frontend/src/providers.tsx +++ b/frontend/src/providers.tsx @@ -1,4 +1,3 @@ -import ThemeProvider from "@/App/theme"; import queryClient from "@/apis/queries"; import { ModalsProvider } from "@/modules/modals"; import "@fontsource/roboto/300.css"; @@ -7,6 +6,7 @@ import { FunctionComponent, PropsWithChildren } from "react"; import { QueryClientProvider } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; import { Environment } from "./utilities"; +import ThemeProvider from "@/App/ThemeProvider"; export const AllProviders: FunctionComponent<PropsWithChildren> = ({ children, diff --git a/frontend/src/styles/index.ts b/frontend/src/styles/index.ts deleted file mode 100644 index 0e948df9e..000000000 --- a/frontend/src/styles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./table"; diff --git a/frontend/src/styles/table.ts b/frontend/src/styles/table.ts deleted file mode 100644 index 40d533401..000000000 --- a/frontend/src/styles/table.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { createStyles } from "@mantine/core"; - -export const useTableStyles = createStyles((theme) => ({ - primary: { - display: "inline-block", - [theme.fn.smallerThan("sm")]: { - minWidth: "12rem", - }, - }, - noWrap: { - whiteSpace: "nowrap", - }, - select: { - display: "inline-block", - [theme.fn.smallerThan("sm")]: { - minWidth: "10rem", - }, - }, -})); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 41fbaa7a4..e11fa90b3 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -31,6 +31,16 @@ export default defineConfig(async ({ mode, command }) => { enableBuild: false, }), ], + css: { + preprocessorOptions: { + scss: { + additionalData: ` + @import "./src/assets/_mantine"; + @import "./src/assets/_bazarr"; + `, + }, + }, + }, base: "./", resolve: { alias: { |