diff --git a/package-lock.json b/package-lock.json index a5b5534b5..c2c778f34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@testing-library/user-event": "^12.1.10", "@widgetbot/react-embed": "^1.4.0", "axios": "^0.21.1", + "container-query-polyfill": "^0.1.2", "node-sass": "^7.0.0", "react": "^17.0.2", "react-canvas-draw": "^1.1.1", @@ -6201,6 +6202,14 @@ "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=", "dev": true }, + "node_modules/container-query-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/container-query-polyfill/-/container-query-polyfill-0.1.2.tgz", + "integrity": "sha512-ykkTgn/aIetWwjup4HVToXYU/c/VWtAJYw3Gp9jHWqCkCycpjZDv5FIBkad+9AmrASmj3awIwD9CfuvdPdfuPw==", + "dependencies": { + "esbuild": "^0.13.13" + } + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -7788,6 +7797,238 @@ "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", "dev": true }, + "node_modules/esbuild": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz", + "integrity": "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==", + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "optionalDependencies": { + "esbuild-android-arm64": "0.13.15", + "esbuild-darwin-64": "0.13.15", + "esbuild-darwin-arm64": "0.13.15", + "esbuild-freebsd-64": "0.13.15", + "esbuild-freebsd-arm64": "0.13.15", + "esbuild-linux-32": "0.13.15", + "esbuild-linux-64": "0.13.15", + "esbuild-linux-arm": "0.13.15", + "esbuild-linux-arm64": "0.13.15", + "esbuild-linux-mips64le": "0.13.15", + "esbuild-linux-ppc64le": "0.13.15", + "esbuild-netbsd-64": "0.13.15", + "esbuild-openbsd-64": "0.13.15", + "esbuild-sunos-64": "0.13.15", + "esbuild-windows-32": "0.13.15", + "esbuild-windows-64": "0.13.15", + "esbuild-windows-arm64": "0.13.15" + } + }, + "node_modules/esbuild-android-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz", + "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/esbuild-darwin-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz", + "integrity": "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/esbuild-darwin-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz", + "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/esbuild-freebsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz", + "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/esbuild-freebsd-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz", + "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ] + }, + "node_modules/esbuild-linux-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz", + "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-linux-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz", + "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-linux-arm": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz", + "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-linux-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz", + "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-linux-mips64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz", + "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-linux-ppc64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz", + "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/esbuild-netbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz", + "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ] + }, + "node_modules/esbuild-openbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz", + "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ] + }, + "node_modules/esbuild-sunos-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz", + "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ] + }, + "node_modules/esbuild-windows-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz", + "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/esbuild-windows-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz", + "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/esbuild-windows-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz", + "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -24554,6 +24795,14 @@ "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=", "dev": true }, + "container-query-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/container-query-polyfill/-/container-query-polyfill-0.1.2.tgz", + "integrity": "sha512-ykkTgn/aIetWwjup4HVToXYU/c/VWtAJYw3Gp9jHWqCkCycpjZDv5FIBkad+9AmrASmj3awIwD9CfuvdPdfuPw==", + "requires": { + "esbuild": "^0.13.13" + } + }, "content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -25732,6 +25981,132 @@ "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", "dev": true }, + "esbuild": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz", + "integrity": "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==", + "requires": { + "esbuild-android-arm64": "0.13.15", + "esbuild-darwin-64": "0.13.15", + "esbuild-darwin-arm64": "0.13.15", + "esbuild-freebsd-64": "0.13.15", + "esbuild-freebsd-arm64": "0.13.15", + "esbuild-linux-32": "0.13.15", + "esbuild-linux-64": "0.13.15", + "esbuild-linux-arm": "0.13.15", + "esbuild-linux-arm64": "0.13.15", + "esbuild-linux-mips64le": "0.13.15", + "esbuild-linux-ppc64le": "0.13.15", + "esbuild-netbsd-64": "0.13.15", + "esbuild-openbsd-64": "0.13.15", + "esbuild-sunos-64": "0.13.15", + "esbuild-windows-32": "0.13.15", + "esbuild-windows-64": "0.13.15", + "esbuild-windows-arm64": "0.13.15" + } + }, + "esbuild-android-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz", + "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==", + "optional": true + }, + "esbuild-darwin-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz", + "integrity": "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==", + "optional": true + }, + "esbuild-darwin-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz", + "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==", + "optional": true + }, + "esbuild-freebsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz", + "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==", + "optional": true + }, + "esbuild-freebsd-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz", + "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==", + "optional": true + }, + "esbuild-linux-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz", + "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==", + "optional": true + }, + "esbuild-linux-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz", + "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==", + "optional": true + }, + "esbuild-linux-arm": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz", + "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==", + "optional": true + }, + "esbuild-linux-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz", + "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==", + "optional": true + }, + "esbuild-linux-mips64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz", + "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==", + "optional": true + }, + "esbuild-linux-ppc64le": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz", + "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==", + "optional": true + }, + "esbuild-netbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz", + "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==", + "optional": true + }, + "esbuild-openbsd-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz", + "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==", + "optional": true + }, + "esbuild-sunos-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz", + "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==", + "optional": true + }, + "esbuild-windows-32": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz", + "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==", + "optional": true + }, + "esbuild-windows-64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz", + "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==", + "optional": true + }, + "esbuild-windows-arm64": { + "version": "0.13.15", + "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz", + "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==", + "optional": true + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", diff --git a/package.json b/package.json index d59420e44..2f515e00d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@testing-library/user-event": "^12.1.10", "@widgetbot/react-embed": "^1.4.0", "axios": "^0.21.1", + "container-query-polyfill": "^0.1.2", "node-sass": "^7.0.0", "react": "^17.0.2", "react-canvas-draw": "^1.1.1", diff --git a/public/img/icon/settings/Accessibility.webp b/public/img/icon/settings/Accessibility.webp new file mode 100644 index 000000000..e086fa419 Binary files /dev/null and b/public/img/icon/settings/Accessibility.webp differ diff --git a/public/img/icon/settings/Accounts.webp b/public/img/icon/settings/Accounts.webp new file mode 100644 index 000000000..1f3f4852f Binary files /dev/null and b/public/img/icon/settings/Accounts.webp differ diff --git a/public/img/icon/settings/Apps.webp b/public/img/icon/settings/Apps.webp new file mode 100644 index 000000000..7f3a3e2b9 Binary files /dev/null and b/public/img/icon/settings/Apps.webp differ diff --git a/public/img/icon/settings/Bluetooth & devices.webp b/public/img/icon/settings/Bluetooth & devices.webp new file mode 100644 index 000000000..8c627156b Binary files /dev/null and b/public/img/icon/settings/Bluetooth & devices.webp differ diff --git a/public/img/icon/settings/Gaming.webp b/public/img/icon/settings/Gaming.webp new file mode 100644 index 000000000..b96f9df12 Binary files /dev/null and b/public/img/icon/settings/Gaming.webp differ diff --git a/public/img/icon/settings/Network & internet.webp b/public/img/icon/settings/Network & internet.webp new file mode 100644 index 000000000..165356961 Binary files /dev/null and b/public/img/icon/settings/Network & internet.webp differ diff --git a/public/img/icon/settings/Personalisation.webp b/public/img/icon/settings/Personalisation.webp new file mode 100644 index 000000000..8aae6f66e Binary files /dev/null and b/public/img/icon/settings/Personalisation.webp differ diff --git a/public/img/icon/settings/Privacy & security.webp b/public/img/icon/settings/Privacy & security.webp new file mode 100644 index 000000000..9e106cfae Binary files /dev/null and b/public/img/icon/settings/Privacy & security.webp differ diff --git a/public/img/icon/settings/System.webp b/public/img/icon/settings/System.webp new file mode 100644 index 000000000..58b12dd38 Binary files /dev/null and b/public/img/icon/settings/System.webp differ diff --git a/public/img/icon/settings/Time & language.webp b/public/img/icon/settings/Time & language.webp new file mode 100644 index 000000000..a5d4ccca4 Binary files /dev/null and b/public/img/icon/settings/Time & language.webp differ diff --git a/public/img/icon/settings/Windows Update.webp b/public/img/icon/settings/Windows Update.webp new file mode 100644 index 000000000..750b1a661 Binary files /dev/null and b/public/img/icon/settings/Windows Update.webp differ diff --git a/public/img/icon/settings/defAccount.webp b/public/img/icon/settings/defAccount.webp new file mode 100644 index 000000000..ad6f2c66e Binary files /dev/null and b/public/img/icon/settings/defAccount.webp differ diff --git a/src/containers/applications/apps/assets/SettingsIcons.woff2 b/src/containers/applications/apps/assets/SettingsIcons.woff2 new file mode 100644 index 000000000..61fdc3418 Binary files /dev/null and b/src/containers/applications/apps/assets/SettingsIcons.woff2 differ diff --git a/src/containers/applications/apps/assets/settings.scss b/src/containers/applications/apps/assets/settings.scss new file mode 100644 index 000000000..ac7292533 --- /dev/null +++ b/src/containers/applications/apps/assets/settings.scss @@ -0,0 +1,342 @@ +.settingsApp .restWindow { + --bg: #eff4f9; + --txt_clr-rgb: 0 0 0; + --clr_prm: #0067c0; + --scroll: rgb(255 255 255 / 80%); + + container: inline-size / appWrapper; + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background: var(--bg); + color: rgb(var(--txt_clr-rgb)); + font-size: 14px; + } + + nav { + position: absolute; + left: 0; + width: 300px; + height: 100%; + + .nav_top { + .account { + border-radius: 4px; + display: flex; + align-items: center; + gap: 16px; + padding: 8px; + margin: 8px; + + &:hover { + background: rgb(var(--txt_clr-rgb) / 3.33%); + } + + div p { + &:first-child { + font-weight: 500; + } + &:last-child { + font-size: smaller; + } + } + } + + .search { + background: white; + height: 32px; + width: calc(300px - 32px); + border: 0; + border-bottom: 1px solid var(--clr_prm); + border-radius: 4px; + padding: 8px; + margin: 8px 16px 20px; + + &:hover { + background: rgb(255 255 255 / 33%); + } + &:focus { + border-bottom: 2px solid var(--clr_prm); + } + &:focus-visible { + outline: none; + } + + &::placeholder { + color: rgb(var(--txt_clr-rgb) / 66%); + } + } + } + + .nav_bottom { + display: flex; + flex-direction: column; + overflow: overlay; + position: relative; + + .navLink { + position: relative; + overflow: hidden; + height: 36px; + padding-left: 7px; + margin: 2px 16px; + border-radius: 4px; + display: flex; + align-items: center; + flex-shrink: 0; + + &:hover, + &.active { + background: rgb(var(--txt_clr-rgb) / 3.33%); + } + + img { + margin: 0 10.5px 0 7px; + } + } + + .marker { + position: absolute; + background: var(--clr_prm); + height: 16px; + width: 3px; + border-radius: 3px; + top: 12px; + left: 16px; + transition: top 300ms cubic-bezier(1, 0, 0, 1); + } + + @for $i from 1 to 12 { + .navLink:nth-child(#{$i}).active ~ .marker { + top: ((40 * ($i - 1)) + 12) + px; + } + } + } + } + + main { + margin-left: 300px; + overflow: hidden; + + .sysTop { + width: min(100%, 1000px); + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + padding: 8px 0 14px; + gap: 8px; + + .left { + display: flex; + align-items: center; + + .device_img { + height: 70px; + border: 5px solid black; + border-radius: 4px; + } + .column_device { + margin-left: 16px; + + .device_name { + font-size: 18px; + font-weight: 500; + } + .device_model { + color: rgb(var(--txt_clr-rgb) / 90%); + } + .device_rename { + color: var(--clr_prm); + } + } + } + + .right { + display: flex; + + .column { + display: flex; + align-items: center; + border-radius: 4px; + padding: 8px; + &:hover { + background: rgb(var(--txt_clr-rgb) / 5%); + } + + p { + font-weight: 500; + padding: 0 12px; + + .column_lower { + color: rgb(var(--txt_clr-rgb) / 60%); + font-size: 13px; + font-weight: 400; + } + } + } + } + } + + h1 { + padding: 14px 24px; + font-weight: 500; + font-size: 28px; + } + + .tilesCont { + padding: 0 24px 44px; + overflow-y: overlay; + display: flex; + flex-direction: column; + gap: 4px; + animation: slideUp 0.2s; + + .tile { + width: min(100%, 1000px); + min-height: 67px; + display: flex; + align-items: center; + background: rgb(255 255 255 / 67%); + border-radius: 4px; + padding: 7px 42px 7px 0; + border: 1px solid rgb(0 0 0 / 10%); + position: relative; + + &:hover { + background: rgb(255 255 255 / 33%); + } + &::after { + content: ">"; + transform: scaleY(2); + position: absolute; + right: 16px; + } + span { + font-size: 20px; + margin: 0 21px 0 17.5px; + font-family: SettingsIcons; + } + .tile_desc { + color: rgb(var(--txt_clr-rgb) / 66%); + font-size: 12.33px; + } + + &.square { + width: 220px; + height: 220px; + flex-direction: column; + align-items: center; + justify-content: center; + flex-shrink: 0; + padding: 0; + font-weight: 500; + + span { + font-size: 48px; + } + } + + &.thin-blue { + min-height: unset; + height: unset; + color: var(--clr_prm); + justify-content: center; + margin: 4px 0; + } + + &.thin-blue::after, + &.square::after { + display: none; + } + } + + .subHeading { + font-weight: 500; + height: 45px; + display: flex; + align-items: center; + flex-shrink: 0; + } + + .spacer { + padding: 8px; + } + } + } + + .navMenuBtn { + display: none; + } + + @container appWrapper size(max-width: 800px) { + .navMenuBtn { + display: flex; + position: absolute; + top: 8px; + right: 8px; + padding: 12px; + border-radius: 6px; + + &:hover { + background: rgb(var(--txt_clr-rgb) / 5%); + } + + svg { + transition: all 0.1s; + } + &:active svg { + transform: scaleX(0.67); + } + } + + main { + margin-left: 0; + } + nav { + background: var(--bg); + z-index: 999; + transform: translateX(-100%); + transition: all 0.2s cubic-bezier(0, 0, 0, 1); + + &.open { + transform: translateX(0); + } + } + } + + @keyframes slideUp { + from { + transform: translateY(70px); + } + to { + transform: translateY(0); + } + } +} +body[data-theme="dark"] .settingsApp .restWindow { + --bg: #202020; + --txt_clr-rgb: 255 255 255; + --clr_prm: #4cc2ff; + --scroll: rgb(44 44 44 / 80%); + + nav .nav_top .search { + background: rgb(255 255 255 / 3.33%); + + &:hover { + background: rgb(255 255 255 / 5%); + } + } + + main .tilesCont .tile { + background: rgb(255 255 255 / 5%); + + &:hover { + background: rgb(255 255 255 / 10%); + } + } +} diff --git a/src/containers/applications/apps/assets/settingsData.json b/src/containers/applications/apps/assets/settingsData.json index 27d017916..b05a513c8 100644 --- a/src/containers/applications/apps/assets/settingsData.json +++ b/src/containers/applications/apps/assets/settingsData.json @@ -1,5 +1,6 @@ { "System": [ + { "type": "sysTop" }, { "type": "tile", "name": "Display", @@ -166,6 +167,7 @@ } ], "Network & internet": [ + { "type": "netTop" }, { "type": "tile", "name": "WiFi", @@ -210,10 +212,7 @@ } ], "Personalisation": [ - { - "type": "subHeading", - "name": "Select a theme to apply" - }, + { "type": "personaliseTop" }, { "type": "tile", "name": "Background", @@ -314,6 +313,7 @@ } ], "Accounts": [ + { "type": "accountsTop" }, { "type": "tile", "name": "Your Microsoft account", @@ -701,10 +701,7 @@ } ], "Windows Update": [ - { - "type": "subHeading", - "name": "More options" - }, + { "type": "updateTop" }, { "type": "tile", "name": "Pause updates", diff --git a/src/containers/applications/apps/settings.js b/src/containers/applications/apps/settings.js index b8451bcea..c9ac5df30 100644 --- a/src/containers/applications/apps/settings.js +++ b/src/containers/applications/apps/settings.js @@ -1,14 +1,21 @@ import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { Icon, Image, ToolBar } from "../../../utils/general"; +import "./assets/settings.scss"; import data from "./assets/settingsData.json"; +const supportsContainerQueries = "container" in document.documentElement.style; +if (!supportsContainerQueries) { + import("container-query-polyfill"); +} + export const Settings = () => { const apps = useSelector((state) => state.apps); const wnapp = useSelector((state) => state.apps.settings); const [dpath, setPath] = useState(""); const dispatch = useDispatch(); + const [page, setPage] = useState("System"); return (
{
-
Coming soon
+ + + {Object.keys(data).map((e) => { + return ( + page === e && ( +
+

{e}

+
+ {data[e].map((e) => { + switch (e.type) { + case "sysTop": + return ( +
+
+ +
+

Liber-V

+

NS14A8

+

Rename

+
+
+
+
+ +

+ Microsoft 365 +
+ View benefits +

+
+
setPage("Windows Update")}> + +

+ Windows Update +
+ Last checked: {Math.ceil(Math.random() * 12)} hours ago +

+
+
+
+ ); + case "subHeading": + case "spacer": + return
{e.name}
; + case "tile": + case "tile square": + case "tile thin-blue": + return ( +
+ {e.icon} +
+

{e.name}

+

{e.desc}

+
+
+ ); + default: + return console.log(`error - type ${e.type} not found`); + } + })} +
+
+ ) + ); + })} + +
document.querySelector("nav").classList.toggle("open")}> + + + +
diff --git a/src/containers/applications/wnapp.scss b/src/containers/applications/wnapp.scss index e8e5cf1b6..0c3eb6de8 100644 --- a/src/containers/applications/wnapp.scss +++ b/src/containers/applications/wnapp.scss @@ -3,8 +3,12 @@ */ @font-face { font-family: "Spotify"; - src: url("./apps/assets/spotify.woff2") format("woff2"), - url("./apps/assets/spotify.ttf") format("truetype"); + src: url("./apps/assets/spotify.woff2") format("woff2"), url("./apps/assets/spotify.ttf") format("truetype"); +} + +@font-face { + font-family: SettingsIcons; + src: url("./apps/assets/SettingsIcons.woff2") format("woff2"); } body {