diff --git a/.gitignore b/.gitignore index c6e8c984..1fac51a3 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ dist/ # Files package-lock.json +.stylelintcache yarn-error.log .eslintcache stats.json diff --git a/.stylelintrc.json b/.stylelintrc.json index 45e0377f..c1263d80 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,8 +1,6 @@ { - "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"], - "formatter": "stylelint-checkstyle-formatter", + "extends": ["stylelint-config-standard-scss"], "plugins": ["stylelint-scss"], - "customSyntax": "postcss-scss", "rules": { "selector-class-pattern": null, "no-descending-specificity": null diff --git a/package.json b/package.json index 27a021a2..5f3ec564 100644 --- a/package.json +++ b/package.json @@ -42,15 +42,14 @@ "eslint-config-prettier": "^8.7.0", "eslint-config-react-app": "^7.0.1", "husky": "^8.0.3", - "postcss-scss": "^4.0.6", "prettier": "^2.8.4", "sass": "^1.59.2", "stylelint": "^15.2.0", - "stylelint-checkstyle-formatter": "^0.1.2", - "stylelint-config-prettier-scss": "^0.0.1", "stylelint-config-standard-scss": "^7.0.1", "stylelint-scss": "^4.4.0", - "vite": "4.1.4" + "vite": "4.1.4", + "vite-plugin-checker": "^0.5.6", + "vite-plugin-progress": "^0.0.6" }, "scripts": { "dev": "vite", @@ -58,8 +57,8 @@ "translations": "cd scripts && node updatetranslations.js", "build": "vite build", "pretty": "prettier --write \"./**/*.{js,jsx,json,scss,css}\"", - "lint": "eslint --ext .js,.jsx src/** && stylelint \"**/*.scss\"", - "lint:fix": "eslint --ext .js,.jsx src/** --fix && stylelint \"**/*.scss\" --fix", + "lint": "eslint \"./src/**/*.{js,jsx}\" && stylelint \"./src/**/*.{scss,css}\"", + "lint:fix": "eslint \"./src/**/*.{js,jsx}\" --fix && stylelint \"./src/**/*.{scss,css}\" --fix", "postinstall": "husky install" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b2aa3a4..2b151c0e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,7 +22,6 @@ specifiers: fast-blurhash: ^1.1.2 husky: ^8.0.3 image-conversion: ^2.1.1 - postcss-scss: ^4.0.6 prettier: ^2.8.4 react: ^18.2.0 react-clock: 4.1.0 @@ -34,11 +33,11 @@ specifiers: react-toastify: 9.1.1 sass: ^1.59.2 stylelint: ^15.2.0 - stylelint-checkstyle-formatter: ^0.1.2 - stylelint-config-prettier-scss: ^0.0.1 stylelint-config-standard-scss: ^7.0.1 stylelint-scss: ^4.4.0 vite: 4.1.4 + vite-plugin-checker: ^0.5.6 + vite-plugin-progress: ^0.0.6 dependencies: '@eartharoid/i18n': 1.2.1 @@ -72,15 +71,14 @@ devDependencies: eslint-config-prettier: 8.7.0_eslint@8.36.0 eslint-config-react-app: 7.0.1_eslint@8.36.0 husky: 8.0.3 - postcss-scss: 4.0.6 prettier: 2.8.4 sass: 1.59.2 stylelint: 15.2.0 - stylelint-checkstyle-formatter: 0.1.2 - stylelint-config-prettier-scss: 0.0.1_stylelint@15.2.0 stylelint-config-standard-scss: 7.0.1_stylelint@15.2.0 stylelint-scss: 4.4.0_stylelint@15.2.0 vite: 4.1.4_sass@1.59.2 + vite-plugin-checker: 0.5.6_rzude4b3lxomcvk3ztmusddici + vite-plugin-progress: 0.0.6_vite@4.1.4 packages: @@ -2547,6 +2545,10 @@ packages: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true + /@types/node/10.17.60: + resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==} + dev: true + /@types/node/18.11.18: resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==} dev: true @@ -2792,6 +2794,13 @@ packages: uri-js: 4.4.1 dev: true + /ansi-escapes/4.3.2: + resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==} + engines: {node: '>=8'} + dependencies: + type-fest: 0.21.3 + dev: true + /ansi-regex/5.0.1: resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} engines: {node: '>=8'} @@ -3141,6 +3150,11 @@ packages: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} dev: true + /commander/8.3.0: + resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} + engines: {node: '>= 12'} + dev: true + /compare-func/2.0.0: resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==} dependencies: @@ -4659,6 +4673,10 @@ packages: resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==} dev: true + /lodash.pick/4.4.0: + resolution: {integrity: sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q==} + dev: true + /lodash.snakecase/4.1.1: resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==} dev: true @@ -5083,6 +5101,11 @@ packages: hasBin: true dev: true + /progress/2.0.3: + resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==} + engines: {node: '>=0.4.0'} + dev: true + /prop-types/15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} dependencies: @@ -5109,6 +5132,12 @@ packages: engines: {node: '>=8'} dev: true + /rd/2.0.1: + resolution: {integrity: sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==} + dependencies: + '@types/node': 10.17.60 + dev: true + /react-clock/4.1.0_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-1BxIDxH8PcEBEUZDIXXS2njK5Gb84U5egTKXZDimF4aKO1bq+/bdX+chMNouLmaOSYB1of3DriLb0WhLOr8lAA==} peerDependencies: @@ -5602,33 +5631,6 @@ packages: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} dev: true - /stylelint-checkstyle-formatter/0.1.2: - resolution: {integrity: sha512-bePbF16ei9dCza2SlExRCGYMLVWsw0uQ2WJ5bakuL7lyprlENWz5/3qCZpneRMsFJkq+qtYuvomMoY/VI3AbPw==} - dependencies: - lodash: 4.17.21 - dev: true - - /stylelint-config-prettier-scss/0.0.1_stylelint@15.2.0: - resolution: {integrity: sha512-lBAYG9xYOh2LeWEPC/64xeUxwOTnQ8nDyBijQoWoJb10/bMGrUwnokpt8jegGck2Vbtxh6XGwH63z5qBcVHreQ==} - engines: {node: '>= 12'} - hasBin: true - peerDependencies: - stylelint: '>=11.0.0' - dependencies: - stylelint: 15.2.0 - stylelint-config-prettier: 9.0.4_stylelint@15.2.0 - dev: true - - /stylelint-config-prettier/9.0.4_stylelint@15.2.0: - resolution: {integrity: sha512-38nIGTGpFOiK5LjJ8Ma1yUgpKENxoKSOhbDNSemY7Ep0VsJoXIW9Iq/2hSt699oB9tReynfWicTAoIHiq8Rvbg==} - engines: {node: '>= 12'} - hasBin: true - peerDependencies: - stylelint: '>=11.0.0' - dependencies: - stylelint: 15.2.0 - dev: true - /stylelint-config-recommended-scss/9.0.1_stylelint@15.2.0: resolution: {integrity: sha512-qAmz/TdrqslwiMTuLM3QXeISUkfEDUXGMfRBCHm/xrkCJNnQefv+mzG2mWTsWkqcVk8HAyUkug10dwAcYp2fCQ==} peerDependencies: @@ -5802,6 +5804,10 @@ packages: readable-stream: 3.6.0 dev: true + /tiny-invariant/1.3.1: + resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} + dev: true + /to-fast-properties/2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -5887,6 +5893,11 @@ packages: engines: {node: '>=10'} dev: true + /type-fest/0.21.3: + resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==} + engines: {node: '>=10'} + dev: true + /type-fest/0.6.0: resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==} engines: {node: '>=8'} @@ -5995,6 +6006,70 @@ packages: spdx-expression-parse: 3.0.1 dev: true + /vite-plugin-checker/0.5.6_rzude4b3lxomcvk3ztmusddici: + resolution: {integrity: sha512-ftRyON0gORUHDxcDt2BErmsikKSkfvl1i2DoP6Jt2zDO9InfvM6tqO1RkXhSjkaXEhKPea6YOnhFaZxW3BzudQ==} + engines: {node: '>=14.16'} + peerDependencies: + eslint: '>=7' + meow: ^9.0.0 + optionator: ^0.9.1 + stylelint: '>=13' + typescript: '*' + vite: '>=2.0.0' + vls: '*' + vti: '*' + vue-tsc: '*' + peerDependenciesMeta: + eslint: + optional: true + meow: + optional: true + optionator: + optional: true + stylelint: + optional: true + typescript: + optional: true + vls: + optional: true + vti: + optional: true + vue-tsc: + optional: true + dependencies: + '@babel/code-frame': 7.18.6 + ansi-escapes: 4.3.2 + chalk: 4.1.2 + chokidar: 3.5.3 + commander: 8.3.0 + eslint: 8.36.0 + fast-glob: 3.2.12 + fs-extra: 11.1.0 + lodash.debounce: 4.0.8 + lodash.pick: 4.4.0 + npm-run-path: 4.0.1 + strip-ansi: 6.0.1 + stylelint: 15.2.0 + tiny-invariant: 1.3.1 + vite: 4.1.4_sass@1.59.2 + vscode-languageclient: 7.0.0 + vscode-languageserver: 7.0.0 + vscode-languageserver-textdocument: 1.0.8 + vscode-uri: 3.0.7 + dev: true + + /vite-plugin-progress/0.0.6_vite@4.1.4: + resolution: {integrity: sha512-pIK2TVEY4XFGrz10CQDdEufBBCDaV0geRHfXV3abGTBr+OF9O0Zmd3ZDrHJXDv4Rl3qAQP4BTCuPYQ3XqstmqA==} + engines: {node: '>=14', pnpm: '>=7.0.0'} + peerDependencies: + vite: '>2.0.0-0' + dependencies: + picocolors: 1.0.0 + progress: 2.0.3 + rd: 2.0.1 + vite: 4.1.4_sass@1.59.2 + dev: true + /vite/4.1.4_sass@1.59.2: resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==} engines: {node: ^14.18.0 || >=16.0.0} @@ -6029,6 +6104,46 @@ packages: fsevents: 2.3.2 dev: true + /vscode-jsonrpc/6.0.0: + resolution: {integrity: sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==} + engines: {node: '>=8.0.0 || >=10.0.0'} + dev: true + + /vscode-languageclient/7.0.0: + resolution: {integrity: sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==} + engines: {vscode: ^1.52.0} + dependencies: + minimatch: 3.1.2 + semver: 7.3.8 + vscode-languageserver-protocol: 3.16.0 + dev: true + + /vscode-languageserver-protocol/3.16.0: + resolution: {integrity: sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==} + dependencies: + vscode-jsonrpc: 6.0.0 + vscode-languageserver-types: 3.16.0 + dev: true + + /vscode-languageserver-textdocument/1.0.8: + resolution: {integrity: sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==} + dev: true + + /vscode-languageserver-types/3.16.0: + resolution: {integrity: sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==} + dev: true + + /vscode-languageserver/7.0.0: + resolution: {integrity: sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==} + hasBin: true + dependencies: + vscode-languageserver-protocol: 3.16.0 + dev: true + + /vscode-uri/3.0.7: + resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==} + dev: true + /warning/4.0.3: resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} dependencies: diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 9361eff3..00000000 --- a/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: {}, -}; diff --git a/src/components/helpers/sharemodal/sharemodal.scss b/src/components/helpers/sharemodal/sharemodal.scss index a2afb884..dbd6b212 100644 --- a/src/components/helpers/sharemodal/sharemodal.scss +++ b/src/components/helpers/sharemodal/sharemodal.scss @@ -8,6 +8,7 @@ gap: 15px; padding: 15px; width: 320px; + @include themed { background: t($modal-secondaryColour); } @@ -48,6 +49,7 @@ button { place-items: center; display: grid; + @include basicIconButton(11px, 1.3rem, modal); } diff --git a/src/components/helpers/tooltip/tooltip.scss b/src/components/helpers/tooltip/tooltip.scss index 398850bc..fbcedae7 100644 --- a/src/components/helpers/tooltip/tooltip.scss +++ b/src/components/helpers/tooltip/tooltip.scss @@ -110,6 +110,7 @@ justify-content: center; flex-flow: column; gap: 10px; + @include themed { background-color: t($modal-background); border-radius: t($borderRadius); diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index a9f55006..a9b6acb2 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -1,13 +1,10 @@ @import 'scss/variables'; - @import 'modules/sidebar'; @import 'modules/navbar'; @import 'modules/tab-content'; @import 'modules/links'; @import 'modules/scrollbars'; - @import 'settings/main'; - @import 'marketplace/main'; .Overlay { @@ -84,6 +81,7 @@ #modal { height: 80vh; width: clamp(60vw, 1200px, 90vw); + @include themed { background-color: t($modal-background); } @@ -120,6 +118,7 @@ h5 { display: inline-block; width: 50px; height: 50px; + @include themed { border: 3px solid t($modal-sidebar); border-radius: 50%; @@ -134,6 +133,7 @@ h5 { transform: rotate(360deg); } } + @keyframes spin { to { transform: rotate(360deg); @@ -188,6 +188,7 @@ h5 { flex-direction: row-reverse; justify-content: space-between; padding: 5px 5px 5px 20px; + @include themed { background: t($modal-sidebar); border-radius: t($borderRadius); @@ -222,6 +223,7 @@ h5 { padding: 25px; margin-top: 20px; transition: 0.5s; + @include themed { background: t($modal-sidebar); border-radius: t($borderRadius); @@ -263,6 +265,7 @@ h5 { bottom: 0; padding: 15px; gap: 15px; + @include themed { background-color: t($modal-secondaryColour); border-radius: t($borderRadius); @@ -284,6 +287,7 @@ h5 { svg { margin: 0 !important; } + @extend %tabText; } @@ -321,6 +325,7 @@ h5 { place-items: center; } } + @include themed { background-color: t($modal-sidebarActive); border-radius: t($borderRadius); @@ -350,6 +355,7 @@ h5 { border-radius: 100%; display: grid; place-items: center; + @include themed { background-color: t($modal-sidebarActive); } diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index c2663016..f2763b5e 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -87,6 +87,7 @@ margin-top: 8px; font-size: 12px; font-weight: bolder; + @include themed { color: t($subColor); } @@ -148,6 +149,7 @@ box-sizing: border-box !important; border-radius: 12px 12px 0 0; backdrop-filter: blur(40px) saturate(150%) brightness(75%); + @include themed { background-image: linear-gradient(to bottom, transparent, t($modal-background)); } @@ -196,6 +198,7 @@ font-size: 12px; display: grid; place-items: center; + @include themed { background: t($modal-sidebar); box-shadow: 0 0 0 3px t($modal-sidebarActive); @@ -519,6 +522,7 @@ p.author { a.collectionButton { height: 40px; text-decoration: none; + @include themed { border-radius: t($borderRadius); } @@ -562,6 +566,7 @@ a.collectionButton { padding: 10px 30px; border-radius: 10px; font-size: 18px; + @include themed { box-shadow: 0 0 0 3px t($modal-sidebarActive); background: t($modal-sidebar); @@ -570,6 +575,7 @@ a.collectionButton { input { all: unset; } + @include themed { &:focus-within { background: t($modal-sidebarActive); diff --git a/src/components/modals/main/scss/modules/_navbar.scss b/src/components/modals/main/scss/modules/_navbar.scss index cd872e6d..bd1c9c58 100644 --- a/src/components/modals/main/scss/modules/_navbar.scss +++ b/src/components/modals/main/scss/modules/_navbar.scss @@ -1,6 +1,7 @@ .navbar-item { flex-flow: row !important; padding: 0 15px; + @include themed { background: t($modal-secondaryColour) !important; border-radius: t($borderRadius) !important; diff --git a/src/components/modals/main/scss/modules/_scrollbars.scss b/src/components/modals/main/scss/modules/_scrollbars.scss index 500e876e..626bdb87 100644 --- a/src/components/modals/main/scss/modules/_scrollbars.scss +++ b/src/components/modals/main/scss/modules/_scrollbars.scss @@ -4,6 +4,7 @@ width: 6px; height: 6px; border-radius: 12px; + @include themed { background: t($modal-sidebar); } diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss index 338e4a45..4f064d0f 100644 --- a/src/components/modals/main/scss/modules/_tab-content.scss +++ b/src/components/modals/main/scss/modules/_tab-content.scss @@ -4,12 +4,14 @@ button { @include modal-button(standard); } + @include themed { padding: 1rem 3rem 3rem; display: flex; flex-direction: column; width: 100%; background: t($modal-background); + @extend %tabText; hr { @@ -73,6 +75,7 @@ table { border-collapse: separate; + @include themed { border-radius: t($borderRadius); margin-top: 20px; @@ -149,6 +152,7 @@ table { place-items: center; padding: 15px; font-size: 25px; + @include themed { background: t($modal-sidebarActive); } @@ -176,6 +180,7 @@ table { .messageAction { float: right; } + @include themed { background: t($modal-sidebar); border-radius: t($borderRadius); diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index 1a6179dc..46d3fdc9 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -1,7 +1,6 @@ @import 'modules/resetmodal'; @import 'scss/variables'; @import 'modules/material-ui'; - @import 'modules/tabs/about'; @import 'modules/tabs/changelog'; @import 'modules/tabs/order'; @@ -17,6 +16,7 @@ input { appearance: none; vertical-align: middle; background: none; + @include themed { border: t($modal-sidebarActive) 1px solid; } @@ -55,6 +55,7 @@ input { /* date picker */ &[type='date'] { width: 260px; + @include themed { background: t($modal-sidebar); border: 3px solid t($modal-sidebarActive); @@ -108,6 +109,7 @@ h4 { svg { font-size: 30px; + @include themed { color: t($subColor); } @@ -210,6 +212,7 @@ h4 { display: flex; flex-flow: row !important; align-items: center; + @include themed { background: t($modal-sidebarActive); border-radius: t($borderRadius); @@ -220,6 +223,7 @@ h4 { font-size: 20px !important; padding: 15px; border-radius: 100%; + @include themed { background: t($modal-sidebar); } @@ -228,6 +232,7 @@ h4 { .statSection.rightPanel { padding: 25px; + @include themed { border-radius: t($borderRadius); background: t($modal-sidebar); diff --git a/src/components/modals/main/scss/settings/modules/tabs/_about.scss b/src/components/modals/main/scss/settings/modules/tabs/_about.scss index 62de7191..33a1ab4d 100644 --- a/src/components/modals/main/scss/settings/modules/tabs/_about.scss +++ b/src/components/modals/main/scss/settings/modules/tabs/_about.scss @@ -29,6 +29,7 @@ img { width: 75px; height: auto; + @include themed { border-radius: t($borderRadius); } @@ -37,6 +38,7 @@ .subtitle-photographers { font-size: 16px; + @include themed { color: t($color); diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss index c6f71437..3db78f97 100644 --- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss +++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss @@ -48,6 +48,7 @@ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); padding: 20px; grid-gap: 20px; + @include themed { div { border-radius: t($borderRadius); @@ -87,6 +88,7 @@ .iconButton { width: calc(100% - 22px); margin-top: 10px; + @include basicIconButton(11px, 1.3rem, modal); } } @@ -105,6 +107,7 @@ align-items: center; justify-content: center; margin-top: 16px; + @include themed { background: t($modal-secondaryColour); border-radius: t($borderRadius); @@ -122,6 +125,7 @@ .quotediv .author-holder .author .author-content .title { font-size: 1em !important; + @include themed { color: t($color) !important; } diff --git a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss index d0a51d27..d3dd4672 100644 --- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss +++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss @@ -13,6 +13,7 @@ div.color-preview-area > div > div:nth-child(5) { .ui-color-picker { padding: 10px; + @include themed { background: t($modal-secondaryColour); border-radius: t($borderRadius); diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss index 4ff95ca3..7f2003b9 100644 --- a/src/components/modals/welcome/welcome.scss +++ b/src/components/modals/welcome/welcome.scss @@ -15,6 +15,7 @@ .MuiFormControlLabel-root { margin-right: 0; } + @extend %tabText; height: 80vh; @@ -28,6 +29,7 @@ display: flex; align-items: center; justify-content: center; + @include themed { background-color: t($modal-sidebar); } @@ -163,6 +165,7 @@ display: flex; flex-flow: column; align-items: center; + @include themed { background: t($modal-sidebar); color: t($color); @@ -196,6 +199,7 @@ a.privacy { .examples { img { width: 60%; + @include themed { border-radius: t($borderRadius); } @@ -272,6 +276,7 @@ a.privacy { text-decoration: none; margin-left: auto; padding: 0 20px; + @include modal-button(standard); } } diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 247d56eb..ae6fdfa3 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -29,6 +29,7 @@ display: flex; padding-top: 5px; gap: 20px; + @include themed { color: t($subColor); } @@ -53,6 +54,7 @@ a { text-decoration: none; + @include themed { color: t($subColor); } @@ -232,6 +234,7 @@ .link { text-decoration: none; cursor: pointer; + @include themed { color: t($link); } @@ -262,6 +265,7 @@ .stats { display: flex; gap: 15px; + @include themed { color: t($subColor); } @@ -286,6 +290,7 @@ a { text-decoration: none; + @include themed { color: t($subColor); } @@ -332,6 +337,7 @@ .credit { font-size: 1.4em; + @include themed { color: t($subColor); } diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index 35c94ff5..7dd4c7ee 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -66,6 +66,7 @@ textarea { max-height: 65vh !important; overflow-y: visible !important; + @extend %basic; border: none; diff --git a/src/components/widgets/navbar/scss/_todo.scss b/src/components/widgets/navbar/scss/_todo.scss index 4cba71cf..745eabfd 100644 --- a/src/components/widgets/navbar/scss/_todo.scss +++ b/src/components/widgets/navbar/scss/_todo.scss @@ -29,12 +29,14 @@ flex-flow: row; align-items: center; margin: 15px 5px; + @include themed { color: t($color) !important; } textarea { width: 120px; + @include themed { color: t($color) !important; } diff --git a/src/components/widgets/quicklinks/quicklinks.scss b/src/components/widgets/quicklinks/quicklinks.scss index 88a4217f..1fc71a8f 100644 --- a/src/components/widgets/quicklinks/quicklinks.scss +++ b/src/components/widgets/quicklinks/quicklinks.scss @@ -166,6 +166,7 @@ button.quicklinks { padding-left: 5px; color: #e74c3c; } + @include themed { textarea { background: t($modal-sidebar); @@ -203,6 +204,7 @@ button.quicklinks { transition: 0.8s; text-align: left; padding: 20px 40px; + @include themed { &:hover { background: t($btn-backgroundHover); @@ -218,6 +220,7 @@ button.quicklinks { .quicklinknostyle { text-decoration: none; font-size: 14px; + @include themed { color: t($subColor); } diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index f08099d5..6a57e258 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -53,6 +53,7 @@ h1.quoteauthor { .author-knownfor { font-size: clamp(13px, 2.5vw, 0.4em); + @include themed { color: t($subColor); } @@ -60,6 +61,7 @@ h1.quoteauthor { .author-license { font-size: clamp(8px, 2.5vw, 0.1em); + @include themed { color: t($subColor); } @@ -141,6 +143,7 @@ h1.quoteauthor { .deleteButton { height: auto !important; + @include basicIconButton(11px, 1.3rem, modal); padding: 10px 20px; diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 5b2ae4e3..68ffadff 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -32,6 +32,7 @@ @each $theme, $map in $themes { .#{$theme} & { $theme-map: () !global; + @each $key, $submap in $map { $value: map-get(map-get($themes, $theme), '#{$key}'); $theme-map: map-merge( diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 2520e5ec..b2856322 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -127,6 +127,7 @@ $themes: ( .backTitle { cursor: pointer; + @include themed { color: t($subColor); diff --git a/vite.config.js b/vite.config.js index acd08036..841ce274 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,6 +4,8 @@ import path from 'path'; import fs from 'fs'; import ADMZip from 'adm-zip'; import * as pkg from './package.json'; +import progress from 'vite-plugin-progress'; +import checker from 'vite-plugin-checker'; const isProd = process.env.NODE_ENV === 'production'; @@ -59,15 +61,42 @@ const prepareBuilds = () => ({ }); export default defineConfig({ - plugins: [react(), prepareBuilds()], + plugins: [ + react(), + prepareBuilds(), + progress(), + checker({ + eslint: { + lintCommand: 'eslint ./src/**/*.{js,jsx} --fix' + }, + stylelint: { + lintCommand: 'stylelint ./src/**/*.{scss,css} --fix', + } + }), + ], server: { + open: true, hmr: { protocol: 'ws', host: 'localhost', }, }, build: { - minify: isProd, + minify: isProd ? 'esbuild' : false, + sourcemap: !isProd, + rollupOptions: { + output: { + manualChunks(id) { + if (id.includes('node_modules')) { + if (id.includes('@mui')) { + return 'vendor_mui'; + } + + return 'vendor'; + } + }, + }, + }, }, resolve: { extensions: ['.js', '.jsx'],