From fb902c1ae17b9a23cfa418e0ac3f2c66322dfd83 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 18 Feb 2023 11:45:22 +0000 Subject: [PATCH] fix: gradient ui, switch on dark theme --- pnpm-lock.yaml | 268 +++++++++++------- .../scss/settings/modules/_material-ui.scss | 10 +- ...-picker-gradient-picker-custom-styles.scss | 31 +- .../settings/sections/background/Colour.jsx | 8 +- 4 files changed, 204 insertions(+), 113 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0028c195..437a1011 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,9 +10,9 @@ specifiers: '@floating-ui/react-dom': ^1.0.1 '@fontsource/lexend-deca': 4.5.12 '@fontsource/montserrat': 4.5.13 - '@mui/material': 5.11.6 + '@mui/material': 5.11.9 '@sentry/react': ^7.21.1 - '@vitejs/plugin-react': 3.0.1 + '@vitejs/plugin-react': 3.1.0 embla-carousel-autoplay: ^7.0.5 embla-carousel-react: ^7.0.5 eslint: ^8.30.0 @@ -22,7 +22,7 @@ specifiers: image-conversion: ^2.1.1 prettier: ^2.8.1 react: ^18.2.0 - react-clock: 4.0.0 + react-clock: 4.1.0 react-color-gradient-picker: 0.1.2 react-dom: ^18.2.0 react-icons: ^4.6.0 @@ -30,10 +30,10 @@ specifiers: react-sortable-hoc: 2.0.0 react-toastify: 9.1.1 sass: ^1.57.1 - stylelint: ^14.16.0 + stylelint: ^15.0.0 stylelint-config-prettier-scss: ^0.0.1 - stylelint-config-standard-scss: ^6.1.0 - vite: 4.0.4 + stylelint-config-standard-scss: ^7.0.0 + vite: 4.1.1 dependencies: '@eartharoid/i18n': 1.2.1 @@ -42,14 +42,14 @@ dependencies: '@floating-ui/react-dom': 1.1.2_biqbaboplfbrettd7655fr4n2y '@fontsource/lexend-deca': 4.5.12 '@fontsource/montserrat': 4.5.13 - '@mui/material': 5.11.6_5rzy53przelm5jchjmb5vr6dxy + '@mui/material': 5.11.9_5rzy53przelm5jchjmb5vr6dxy '@sentry/react': 7.29.0_react@18.2.0 embla-carousel-autoplay: 7.0.5 embla-carousel-react: 7.0.5_react@18.2.0 fast-blurhash: 1.1.2 image-conversion: 2.1.1 react: 18.2.0 - react-clock: 4.0.0_biqbaboplfbrettd7655fr4n2y + react-clock: 4.1.0_biqbaboplfbrettd7655fr4n2y react-color-gradient-picker: 0.1.2_biqbaboplfbrettd7655fr4n2y react-dom: 18.2.0_react@18.2.0 react-icons: 4.7.1_react@18.2.0 @@ -61,16 +61,16 @@ devDependencies: '@commitlint/cli': 17.4.1 '@commitlint/config-conventional': 17.4.0 '@eartharoid/deep-merge': 0.0.2 - '@vitejs/plugin-react': 3.0.1_vite@4.0.4 + '@vitejs/plugin-react': 3.1.0_vite@4.1.1 eslint: 8.31.0 eslint-config-react-app: 7.0.1_eslint@8.31.0 husky: 8.0.3 prettier: 2.8.2 sass: 1.57.1 - stylelint: 14.16.1 - stylelint-config-prettier-scss: 0.0.1_stylelint@14.16.1 - stylelint-config-standard-scss: 6.1.0_stylelint@14.16.1 - vite: 4.0.4_sass@1.57.1 + stylelint: 15.1.0 + stylelint-config-prettier-scss: 0.0.1_stylelint@15.1.0 + stylelint-config-standard-scss: 7.0.1_stylelint@15.1.0 + vite: 4.1.1_sass@1.57.1 packages: @@ -1397,6 +1397,13 @@ packages: regenerator-runtime: 0.13.11 dev: true + /@babel/runtime/7.20.13: + resolution: {integrity: sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==} + engines: {node: '>=6.9.0'} + dependencies: + regenerator-runtime: 0.13.11 + dev: false + /@babel/runtime/7.20.7: resolution: {integrity: sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==} engines: {node: '>=6.9.0'} @@ -1613,11 +1620,36 @@ packages: '@jridgewell/trace-mapping': 0.3.9 dev: true - /@csstools/selector-specificity/2.0.2_wajs5nedgkikc5pcuwett7legi: - resolution: {integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==} - engines: {node: ^12 || ^14 || >=16} + /@csstools/css-parser-algorithms/2.0.1_xu4ijqbgbw3jz65fprqzqcck3y: + resolution: {integrity: sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==} + engines: {node: ^14 || ^16 || >=18} peerDependencies: - postcss: ^8.2 + '@csstools/css-tokenizer': ^2.0.0 + dependencies: + '@csstools/css-tokenizer': 2.0.2 + dev: true + + /@csstools/css-tokenizer/2.0.2: + resolution: {integrity: sha512-prUTipz0NZH7Lc5wyBUy93NFy3QYDMVEQgSeZzNdpMbKRd6V2bgRFyJ+O0S0Dw0MXWuE/H9WXlJk3kzMZRHZ/g==} + engines: {node: ^14 || ^16 || >=18} + dev: true + + /@csstools/media-query-list-parser/2.0.1_3cwabixgovb7jwtbsdb6ktsak4: + resolution: {integrity: sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + '@csstools/css-parser-algorithms': ^2.0.0 + '@csstools/css-tokenizer': ^2.0.0 + dependencies: + '@csstools/css-parser-algorithms': 2.0.1_xu4ijqbgbw3jz65fprqzqcck3y + '@csstools/css-tokenizer': 2.0.2 + dev: true + + /@csstools/selector-specificity/2.1.1_wajs5nedgkikc5pcuwett7legi: + resolution: {integrity: sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==} + engines: {node: ^14 || ^16 || >=18} + peerDependencies: + postcss: ^8.4 postcss-selector-parser: ^6.0.10 dependencies: postcss: 8.4.21 @@ -2064,8 +2096,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.14 dev: true - /@mui/base/5.0.0-alpha.115_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-OGQ84whT/yNYd6xKCGGS6MxqEfjVjk5esXM7HP6bB2Rim7QICUapxZt4nm8q39fpT08rNDkv3xPVqDDwRdRg1g==} + /@mui/base/5.0.0-alpha.118_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2075,10 +2107,10 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 '@emotion/is-prop-valid': 1.2.0 '@mui/types': 7.2.3 - '@mui/utils': 5.11.2_react@18.2.0 + '@mui/utils': 5.11.9_react@18.2.0 '@popperjs/core': 2.11.6 clsx: 1.2.1 prop-types: 15.8.1 @@ -2087,12 +2119,12 @@ packages: react-is: 18.2.0 dev: false - /@mui/core-downloads-tracker/5.11.6: - resolution: {integrity: sha512-lbD3qdafBOf2dlqKhOcVRxaPAujX+9UlPC6v8iMugMeAXe0TCgU3QbGXY3zrJsu6ex64WYDpH4y1+WOOBmWMuA==} + /@mui/core-downloads-tracker/5.11.9: + resolution: {integrity: sha512-YGEtucQ/Nl91VZkzYaLad47Cdui51n/hW+OQm4210g4N3/nZzBxmGeKfubEalf+ShKH4aYDS86XTO6q/TpZnjQ==} dev: false - /@mui/material/5.11.6_5rzy53przelm5jchjmb5vr6dxy: - resolution: {integrity: sha512-MzkkL5KC2PCkFiv8cLpkzgLUPXSrAtnvJBR0emV7mLVWbkwV3n5832vjBx154B6R032fHjFTziTh7YEb50nK6Q==} + /@mui/material/5.11.9_5rzy53przelm5jchjmb5vr6dxy: + resolution: {integrity: sha512-Wb3WzjzYyi/WKSl/XlF7aC8kk2NE21IoHMF7hNQMkPb0GslbWwR4OUjlBpxtG+RSZn44wMZkEDNB9Hw0TDsd8g==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2108,14 +2140,14 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 '@emotion/react': 11.10.5_react@18.2.0 '@emotion/styled': 11.10.5_hp5f5nkljdiwilp4rgxyefcplu - '@mui/base': 5.0.0-alpha.115_biqbaboplfbrettd7655fr4n2y - '@mui/core-downloads-tracker': 5.11.6 - '@mui/system': 5.11.5_dovxhg2tvkkxkdnqyoum6wzcxm + '@mui/base': 5.0.0-alpha.118_biqbaboplfbrettd7655fr4n2y + '@mui/core-downloads-tracker': 5.11.9 + '@mui/system': 5.11.9_dovxhg2tvkkxkdnqyoum6wzcxm '@mui/types': 7.2.3 - '@mui/utils': 5.11.2_react@18.2.0 + '@mui/utils': 5.11.9_react@18.2.0 '@types/react-transition-group': 4.4.5 clsx: 1.2.1 csstype: 3.1.1 @@ -2126,8 +2158,8 @@ packages: react-transition-group: 4.4.5_biqbaboplfbrettd7655fr4n2y dev: false - /@mui/private-theming/5.11.2_react@18.2.0: - resolution: {integrity: sha512-qZwMaqRFPwlYmqwVKblKBGKtIjJRAj3nsvX93pOmatsXyorW7N/0IPE/swPgz1VwChXhHO75DwBEx8tB+aRMNg==} + /@mui/private-theming/5.11.9_react@18.2.0: + resolution: {integrity: sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==} engines: {node: '>=12.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 @@ -2136,14 +2168,14 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.20.7 - '@mui/utils': 5.11.2_react@18.2.0 + '@babel/runtime': 7.20.13 + '@mui/utils': 5.11.9_react@18.2.0 prop-types: 15.8.1 react: 18.2.0 dev: false - /@mui/styled-engine/5.11.0_dovxhg2tvkkxkdnqyoum6wzcxm: - resolution: {integrity: sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==} + /@mui/styled-engine/5.11.9_dovxhg2tvkkxkdnqyoum6wzcxm: + resolution: {integrity: sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.4.1 @@ -2155,7 +2187,7 @@ packages: '@emotion/styled': optional: true dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 '@emotion/cache': 11.10.5 '@emotion/react': 11.10.5_react@18.2.0 '@emotion/styled': 11.10.5_hp5f5nkljdiwilp4rgxyefcplu @@ -2164,8 +2196,8 @@ packages: react: 18.2.0 dev: false - /@mui/system/5.11.5_dovxhg2tvkkxkdnqyoum6wzcxm: - resolution: {integrity: sha512-KNVsJ0sgRRp2XBqhh4wPS5aacteqjwxgiYTVwVnll2fgkgunZKo3DsDiGMrFlCg25ZHA3Ax58txWGE9w58zp0w==} + /@mui/system/5.11.9_dovxhg2tvkkxkdnqyoum6wzcxm: + resolution: {integrity: sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==} engines: {node: '>=12.0.0'} peerDependencies: '@emotion/react': ^11.5.0 @@ -2180,13 +2212,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 '@emotion/react': 11.10.5_react@18.2.0 '@emotion/styled': 11.10.5_hp5f5nkljdiwilp4rgxyefcplu - '@mui/private-theming': 5.11.2_react@18.2.0 - '@mui/styled-engine': 5.11.0_dovxhg2tvkkxkdnqyoum6wzcxm + '@mui/private-theming': 5.11.9_react@18.2.0 + '@mui/styled-engine': 5.11.9_dovxhg2tvkkxkdnqyoum6wzcxm '@mui/types': 7.2.3 - '@mui/utils': 5.11.2_react@18.2.0 + '@mui/utils': 5.11.9_react@18.2.0 clsx: 1.2.1 csstype: 3.1.1 prop-types: 15.8.1 @@ -2202,13 +2234,13 @@ packages: optional: true dev: false - /@mui/utils/5.11.2_react@18.2.0: - resolution: {integrity: sha512-AyizuHHlGdAtH5hOOXBW3kriuIwUIKUIgg0P7LzMvzf6jPhoQbENYqY6zJqfoZ7fAWMNNYT8mgN5EftNGzwE2w==} + /@mui/utils/5.11.9_react@18.2.0: + resolution: {integrity: sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==} engines: {node: '>=12.0.0'} peerDependencies: react: ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 '@types/prop-types': 15.7.5 '@types/react-is': 17.0.3 prop-types: 15.8.1 @@ -2334,6 +2366,16 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/lodash.memoize/4.1.7: + resolution: {integrity: sha512-lGN7WeO4vO6sICVpf041Q7BX/9k1Y24Zo3FY0aUezr1QlKznpjzsDk3T3wvH8ofYzoK0QupN9TWcFAFZlyPwQQ==} + dependencies: + '@types/lodash': 4.14.191 + dev: false + + /@types/lodash/4.14.191: + resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==} + dev: false + /@types/minimist/1.2.2: resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==} dev: true @@ -2519,24 +2561,24 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@vitejs/plugin-react/3.0.1_vite@4.0.4: - resolution: {integrity: sha512-mx+QvYwIbbpOIJw+hypjnW1lAbKDHtWK5ibkF/V1/oMBu8HU/chb+SnqJDAsLq1+7rGqjktCEomMTM5KShzUKQ==} + /@vitejs/plugin-react/3.1.0_vite@4.1.1: + resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: - vite: ^4.0.0 + vite: ^4.1.0-beta.0 dependencies: '@babel/core': 7.20.12 '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.12 '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12 magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 4.0.4_sass@1.57.1 + vite: 4.1.1_sass@1.57.1 transitivePeerDependencies: - supports-color dev: true - /@wojtekmaj/date-utils/1.0.3: - resolution: {integrity: sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==} + /@wojtekmaj/date-utils/1.1.2: + resolution: {integrity: sha512-06PQad/6pyYDjInBW2ih4Oy30EAg0mtXTCz+b/fGwzN2JB2X2Zsa4QtHl4I8M+IaCKN8bwj61OW3XAWxh+D9hA==} dev: false /JSONStream/1.3.5: @@ -3023,6 +3065,14 @@ packages: engines: {node: '>=12.22'} dev: true + /css-tree/2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.0.2 + dev: true + /cssesc/3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -3130,7 +3180,7 @@ packages: /dom-helpers/5.2.1: resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 csstype: 3.1.1 dev: false @@ -3787,9 +3837,10 @@ packages: get-intrinsic: 1.1.3 dev: true - /get-user-locale/1.5.1: - resolution: {integrity: sha512-WiNpoFRcHn1qxP9VabQljzGwkAQDrcpqUtaP0rNBEkFxJdh4f3tik6MfZsMYZc+UgQJdGCxWEjL9wnCUlRQXag==} + /get-user-locale/2.1.3: + resolution: {integrity: sha512-2mvzWs9z6qKjw8uvuo2ivpBKg5nHdTe4BERpv+A2POAcfEFaaTkagFKKG9A2tAQjn6NfTVO5V1pTqQbA6AGyog==} dependencies: + '@types/lodash.memoize': 4.1.7 lodash.memoize: 4.1.2 dev: false @@ -4429,6 +4480,10 @@ packages: resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} dev: true + /mdn-data/2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + dev: true + /meow/8.1.2: resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==} engines: {node: '>=10'} @@ -4814,15 +4869,16 @@ packages: engines: {node: '>=8'} dev: true - /react-clock/4.0.0_biqbaboplfbrettd7655fr4n2y: - resolution: {integrity: sha512-CBevN5B40TDUegSWzXk6bSwXhYzyerL9JGTme8GMAY0zO4FiEhVTGN1uzgC0rn/oSAMJw3M5wSf/OJpp9vcN2Q==} + /react-clock/4.1.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-1BxIDxH8PcEBEUZDIXXS2njK5Gb84U5egTKXZDimF4aKO1bq+/bdX+chMNouLmaOSYB1of3DriLb0WhLOr8lAA==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@wojtekmaj/date-utils': 1.0.3 + '@types/react': 18.0.26 + '@wojtekmaj/date-utils': 1.1.2 clsx: 1.2.1 - get-user-locale: 1.5.1 + get-user-locale: 2.1.3 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -4917,7 +4973,7 @@ packages: react: '>=16.6.0' react-dom: '>=16.6.0' dependencies: - '@babel/runtime': 7.20.7 + '@babel/runtime': 7.20.13 dom-helpers: 5.2.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -5087,8 +5143,8 @@ packages: glob: 7.2.3 dev: true - /rollup/3.9.1: - resolution: {integrity: sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==} + /rollup/3.17.0: + resolution: {integrity: sha512-0zZQ0J4p0ZtTla6l8sheDTUyNfGZQDpU5h0nPHf6xtUXIzKK70LmB2IRR0wLnzaL8a02fjmsJy+XCncbSwOpjg==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} hasBin: true optionalDependencies: @@ -5304,96 +5360,100 @@ packages: resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} dev: true - /stylelint-config-prettier-scss/0.0.1_stylelint@14.16.1: + /stylelint-config-prettier-scss/0.0.1_stylelint@15.1.0: resolution: {integrity: sha512-lBAYG9xYOh2LeWEPC/64xeUxwOTnQ8nDyBijQoWoJb10/bMGrUwnokpt8jegGck2Vbtxh6XGwH63z5qBcVHreQ==} engines: {node: '>= 12'} hasBin: true peerDependencies: stylelint: '>=11.0.0' dependencies: - stylelint: 14.16.1 - stylelint-config-prettier: 9.0.4_stylelint@14.16.1 + stylelint: 15.1.0 + stylelint-config-prettier: 9.0.4_stylelint@15.1.0 dev: true - /stylelint-config-prettier/9.0.4_stylelint@14.16.1: + /stylelint-config-prettier/9.0.4_stylelint@15.1.0: resolution: {integrity: sha512-38nIGTGpFOiK5LjJ8Ma1yUgpKENxoKSOhbDNSemY7Ep0VsJoXIW9Iq/2hSt699oB9tReynfWicTAoIHiq8Rvbg==} engines: {node: '>= 12'} hasBin: true peerDependencies: stylelint: '>=11.0.0' dependencies: - stylelint: 14.16.1 + stylelint: 15.1.0 dev: true - /stylelint-config-recommended-scss/8.0.0_stylelint@14.16.1: - resolution: {integrity: sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ==} + /stylelint-config-recommended-scss/9.0.1_stylelint@15.1.0: + resolution: {integrity: sha512-qAmz/TdrqslwiMTuLM3QXeISUkfEDUXGMfRBCHm/xrkCJNnQefv+mzG2mWTsWkqcVk8HAyUkug10dwAcYp2fCQ==} peerDependencies: postcss: ^8.3.3 - stylelint: ^14.10.0 + stylelint: ^15.0.0 peerDependenciesMeta: postcss: optional: true dependencies: postcss-scss: 4.0.6 - stylelint: 14.16.1 - stylelint-config-recommended: 9.0.0_stylelint@14.16.1 - stylelint-scss: 4.3.0_stylelint@14.16.1 + stylelint: 15.1.0 + stylelint-config-recommended: 10.0.1_stylelint@15.1.0 + stylelint-scss: 4.4.0_stylelint@15.1.0 dev: true - /stylelint-config-recommended/9.0.0_stylelint@14.16.1: - resolution: {integrity: sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ==} + /stylelint-config-recommended/10.0.1_stylelint@15.1.0: + resolution: {integrity: sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==} peerDependencies: - stylelint: ^14.10.0 + stylelint: ^15.0.0 dependencies: - stylelint: 14.16.1 + stylelint: 15.1.0 dev: true - /stylelint-config-standard-scss/6.1.0_stylelint@14.16.1: - resolution: {integrity: sha512-iZ2B5kQT2G3rUzx+437cEpdcnFOQkwnwqXuY8Z0QUwIHQVE8mnYChGAquyKFUKZRZ0pRnrciARlPaR1RBtPb0Q==} + /stylelint-config-standard-scss/7.0.1_stylelint@15.1.0: + resolution: {integrity: sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==} peerDependencies: postcss: ^8.3.3 - stylelint: ^14.14.0 + stylelint: ^15.0.0 peerDependenciesMeta: postcss: optional: true dependencies: - stylelint: 14.16.1 - stylelint-config-recommended-scss: 8.0.0_stylelint@14.16.1 - stylelint-config-standard: 29.0.0_stylelint@14.16.1 + stylelint: 15.1.0 + stylelint-config-recommended-scss: 9.0.1_stylelint@15.1.0 + stylelint-config-standard: 30.0.1_stylelint@15.1.0 dev: true - /stylelint-config-standard/29.0.0_stylelint@14.16.1: - resolution: {integrity: sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg==} + /stylelint-config-standard/30.0.1_stylelint@15.1.0: + resolution: {integrity: sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==} peerDependencies: - stylelint: ^14.14.0 + stylelint: ^15.0.0 dependencies: - stylelint: 14.16.1 - stylelint-config-recommended: 9.0.0_stylelint@14.16.1 + stylelint: 15.1.0 + stylelint-config-recommended: 10.0.1_stylelint@15.1.0 dev: true - /stylelint-scss/4.3.0_stylelint@14.16.1: - resolution: {integrity: sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==} + /stylelint-scss/4.4.0_stylelint@15.1.0: + resolution: {integrity: sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==} peerDependencies: - stylelint: ^14.5.1 + stylelint: ^14.5.1 || ^15.0.0 dependencies: lodash: 4.17.21 postcss-media-query-parser: 0.2.3 postcss-resolve-nested-selector: 0.1.1 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 - stylelint: 14.16.1 + stylelint: 15.1.0 dev: true - /stylelint/14.16.1: - resolution: {integrity: sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==} - engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + /stylelint/15.1.0: + resolution: {integrity: sha512-Tw8OyIiYhxnIHUzgoLlCyWgCUKsPYiP3TDgs7M1VbayS+q5qZly2yxABg+YPe/hFRWiu0cOtptCtpyrn1CrnYw==} + engines: {node: ^14.13.1 || >=16.0.0} hasBin: true dependencies: - '@csstools/selector-specificity': 2.0.2_wajs5nedgkikc5pcuwett7legi + '@csstools/css-parser-algorithms': 2.0.1_xu4ijqbgbw3jz65fprqzqcck3y + '@csstools/css-tokenizer': 2.0.2 + '@csstools/media-query-list-parser': 2.0.1_3cwabixgovb7jwtbsdb6ktsak4 + '@csstools/selector-specificity': 2.1.1_wajs5nedgkikc5pcuwett7legi balanced-match: 2.0.0 colord: 2.9.3 - cosmiconfig: 7.1.0 + cosmiconfig: 8.0.0 css-functions-list: 3.1.0 + css-tree: 2.3.1 debug: 4.3.4 fast-glob: 3.2.12 fastest-levenshtein: 1.0.16 @@ -5426,7 +5486,7 @@ packages: svg-tags: 1.0.0 table: 6.8.1 v8-compile-cache: 2.3.0 - write-file-atomic: 4.0.2 + write-file-atomic: 5.0.0 transitivePeerDependencies: - supports-color dev: true @@ -5676,8 +5736,8 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /vite/4.0.4_sass@1.57.1: - resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==} + /vite/4.1.1_sass@1.57.1: + resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -5704,7 +5764,7 @@ packages: esbuild: 0.16.16 postcss: 8.4.21 resolve: 1.22.1 - rollup: 3.9.1 + rollup: 3.17.0 sass: 1.57.1 optionalDependencies: fsevents: 2.3.2 @@ -5771,9 +5831,9 @@ packages: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true - /write-file-atomic/4.0.2: - resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==} - engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + /write-file-atomic/5.0.0: + resolution: {integrity: sha512-R7NYMnHSlV42K54lwY9lvW6MnSm1HSJqZL3xiSgi9E7//FYaI74r2G0rd+/X6VAMkHEdzxQaU5HUOXWUz5kA/w==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dependencies: imurmurhash: 0.1.4 signal-exit: 3.0.7 diff --git a/src/components/modals/main/scss/settings/modules/_material-ui.scss b/src/components/modals/main/scss/settings/modules/_material-ui.scss index 558c5f95..875fef07 100644 --- a/src/components/modals/main/scss/settings/modules/_material-ui.scss +++ b/src/components/modals/main/scss/settings/modules/_material-ui.scss @@ -22,7 +22,15 @@ legend { } .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { - background: darkgray !important; + @include themed() { + background-color: t($subColor) !important; + } +} + +.MuiSwitch-track { + @include themed() { + background-color: t($subColor) !important; + } } .MuiIconButton-label > svg.MuiSvgIcon-root { 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 51751f66..c39362a0 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 @@ -1,3 +1,4 @@ +@import 'scss/variables'; // The following CSS is to work around some assumptions made by the react-color-gradient-picker * { // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11 @@ -10,8 +11,12 @@ div.color-preview-area > div > div:nth-child(5) { } .ui-color-picker { - margin: 8px -12px; - background-color: var(--background) !important; + padding: 10px; + @include themed() { + background: t($modal-secondaryColour); + border-radius: t($borderRadius); + box-shadow: t($boxShadow); + } } .input-field .label { @@ -34,14 +39,30 @@ div.color-preview-area > div > div:nth-child(5) { .text-input, .number-input { - background-color: var(--sidebar) !important; - color: var(--modal-text) !important; + @include themed() { + background-color: t($modal-secondaryColour) !important; + color: t($color) !important; + } } .colourInput { display: flex; - width: 100%; justify-content: space-between; align-items: center; flex-flow: row-reverse; } +.gradient-controls { + margin-bottom: 10px !important; + width: auto !important; +} + +.colourReset { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.input-field .input-container .input { + text-align: center; +} diff --git a/src/components/modals/main/settings/sections/background/Colour.jsx b/src/components/modals/main/settings/sections/background/Colour.jsx index 9c9accc9..c89bd91f 100644 --- a/src/components/modals/main/settings/sections/background/Colour.jsx +++ b/src/components/modals/main/settings/sections/background/Colour.jsx @@ -226,10 +226,12 @@ export default class ColourSettings extends PureComponent { )} final={true} > - this.resetColour()}> - {variables.getMessage('modals.main.settings.buttons.reset')} - {colourSettings} +
+ this.resetColour()}> + {variables.getMessage('modals.main.settings.buttons.reset')} + +
);