extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor(marketplace): Use button component

This commit is contained in:
alexsparkes 2024-02-11 10:45:40 +00:00
parent c9fb5109c9
commit 53d649e04a
7 changed files with 184 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
pnpm-lock.yaml
View File

@ -2423,104 +2423,104 @@ packages:
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
dev: false dev: false
/@rollup/rollup-android-arm-eabi@4.9.6: /@rollup/rollup-android-arm-eabi@4.10.0:
resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==} resolution: {integrity: sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-android-arm64@4.9.6: /@rollup/rollup-android-arm64@4.10.0:
resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==} resolution: {integrity: sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-darwin-arm64@4.9.6: /@rollup/rollup-darwin-arm64@4.10.0:
resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==} resolution: {integrity: sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-darwin-x64@4.9.6: /@rollup/rollup-darwin-x64@4.10.0:
resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==} resolution: {integrity: sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.9.6: /@rollup/rollup-linux-arm-gnueabihf@4.10.0:
resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==} resolution: {integrity: sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-gnu@4.9.6: /@rollup/rollup-linux-arm64-gnu@4.10.0:
resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==} resolution: {integrity: sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-musl@4.9.6: /@rollup/rollup-linux-arm64-musl@4.10.0:
resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==} resolution: {integrity: sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-riscv64-gnu@4.9.6: /@rollup/rollup-linux-riscv64-gnu@4.10.0:
resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==} resolution: {integrity: sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-gnu@4.9.6: /@rollup/rollup-linux-x64-gnu@4.10.0:
resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==} resolution: {integrity: sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-musl@4.9.6: /@rollup/rollup-linux-x64-musl@4.10.0:
resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==} resolution: {integrity: sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-arm64-msvc@4.9.6: /@rollup/rollup-win32-arm64-msvc@4.10.0:
resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==} resolution: {integrity: sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-ia32-msvc@4.9.6: /@rollup/rollup-win32-ia32-msvc@4.10.0:
resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==} resolution: {integrity: sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-x64-msvc@4.9.6: /@rollup/rollup-win32-x64-msvc@4.10.0:
resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==} resolution: {integrity: sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
@ -3302,7 +3302,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001585 caniuse-lite: 1.0.30001585
electron-to-chromium: 1.4.664 electron-to-chromium: 1.4.665
node-releases: 2.0.14 node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.22.3) update-browserslist-db: 1.0.13(browserslist@4.22.3)
dev: true dev: true
@ -3661,8 +3661,8 @@ packages:
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
dev: true dev: true
/electron-to-chromium@1.4.664: /electron-to-chromium@1.4.665:
resolution: {integrity: sha512-k9VKKSkOSNPvSckZgDDl/IQx45E1quMjX8QfLzUsAs/zve8AyFDK+ByRynSP/OfEfryiKHpQeMf00z0leLCc3A==} resolution: {integrity: sha512-UpyCWObBoD+nSZgOC2ToaIdZB0r9GhqT2WahPKiSki6ckkSuKhQNso8V2PrFcHBMleI/eqbKgVQgVC4Wni4ilw==}
dev: true dev: true
/embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22): /embla-carousel-autoplay@8.0.0-rc22(embla-carousel@8.0.0-rc22):
@ -3731,7 +3731,7 @@ packages:
has-property-descriptors: 1.0.1 has-property-descriptors: 1.0.1
has-proto: 1.0.1 has-proto: 1.0.1
has-symbols: 1.0.3 has-symbols: 1.0.3
hasown: 2.0.0 hasown: 2.0.1
internal-slot: 1.0.7 internal-slot: 1.0.7
is-array-buffer: 3.0.4 is-array-buffer: 3.0.4
is-callable: 1.2.7 is-callable: 1.2.7
@ -3767,13 +3767,15 @@ packages:
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dev: true dev: true
/es-iterator-helpers@1.0.15: /es-iterator-helpers@1.0.16:
resolution: {integrity: sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==} resolution: {integrity: sha512-CREG2A9Vq7bpDRnldhFcMKuKArvkZtsH6Y0DHOHVg49qhf+LD8uEdUM3OkOAICv0EziGtDEnQtqY2/mfBILpFw==}
engines: {node: '>= 0.4'}
dependencies: dependencies:
asynciterator.prototype: 1.0.0 asynciterator.prototype: 1.0.0
call-bind: 1.0.6 call-bind: 1.0.6
define-properties: 1.2.1 define-properties: 1.2.1
es-abstract: 1.22.3 es-abstract: 1.22.3
es-errors: 1.3.0
es-set-tostringtag: 2.0.2 es-set-tostringtag: 2.0.2
function-bind: 1.1.2 function-bind: 1.1.2
get-intrinsic: 1.2.4 get-intrinsic: 1.2.4
@ -3792,13 +3794,13 @@ packages:
dependencies: dependencies:
get-intrinsic: 1.2.4 get-intrinsic: 1.2.4
has-tostringtag: 1.0.2 has-tostringtag: 1.0.2
hasown: 2.0.0 hasown: 2.0.1
dev: true dev: true
/es-shim-unscopables@1.0.2: /es-shim-unscopables@1.0.2:
resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==} resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
dependencies: dependencies:
hasown: 2.0.0 hasown: 2.0.1
dev: true dev: true
/es-to-primitive@1.2.1: /es-to-primitive@1.2.1:
@ -3972,7 +3974,7 @@ packages:
eslint: 8.56.0 eslint: 8.56.0
eslint-import-resolver-node: 0.3.9 eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0) eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.56.0)
hasown: 2.0.0 hasown: 2.0.1
is-core-module: 2.13.1 is-core-module: 2.13.1
is-glob: 4.0.3 is-glob: 4.0.3
minimatch: 3.1.2 minimatch: 3.1.2
@ -4023,9 +4025,9 @@ packages:
axobject-query: 3.2.1 axobject-query: 3.2.1
damerau-levenshtein: 1.0.8 damerau-levenshtein: 1.0.8
emoji-regex: 9.2.2 emoji-regex: 9.2.2
es-iterator-helpers: 1.0.15 es-iterator-helpers: 1.0.16
eslint: 8.56.0 eslint: 8.56.0
hasown: 2.0.0 hasown: 2.0.1
jsx-ast-utils: 3.3.5 jsx-ast-utils: 3.3.5
language-tags: 1.0.9 language-tags: 1.0.9
minimatch: 3.1.2 minimatch: 3.1.2
@ -4052,7 +4054,7 @@ packages:
array.prototype.flatmap: 1.3.2 array.prototype.flatmap: 1.3.2
array.prototype.tosorted: 1.1.3 array.prototype.tosorted: 1.1.3
doctrine: 2.1.0 doctrine: 2.1.0
es-iterator-helpers: 1.0.15 es-iterator-helpers: 1.0.16
eslint: 8.56.0 eslint: 8.56.0
estraverse: 5.3.0 estraverse: 5.3.0
jsx-ast-utils: 3.3.5 jsx-ast-utils: 3.3.5
@ -4372,7 +4374,7 @@ packages:
function-bind: 1.1.2 function-bind: 1.1.2
has-proto: 1.0.1 has-proto: 1.0.1
has-symbols: 1.0.3 has-symbols: 1.0.3
hasown: 2.0.0 hasown: 2.0.1
dev: true dev: true
/get-stream@6.0.1: /get-stream@6.0.1:
@ -4554,8 +4556,8 @@ packages:
has-symbols: 1.0.3 has-symbols: 1.0.3
dev: true dev: true
/hasown@2.0.0: /hasown@2.0.1:
resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==} resolution: {integrity: sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dependencies: dependencies:
function-bind: 1.1.2 function-bind: 1.1.2
@ -4643,7 +4645,7 @@ packages:
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dependencies: dependencies:
es-errors: 1.3.0 es-errors: 1.3.0
hasown: 2.0.0 hasown: 2.0.1
side-channel: 1.0.5 side-channel: 1.0.5
dev: true dev: true
@ -4700,7 +4702,7 @@ packages:
/is-core-module@2.13.1: /is-core-module@2.13.1:
resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
dependencies: dependencies:
hasown: 2.0.0 hasown: 2.0.1
/is-date-object@1.0.5: /is-date-object@1.0.5:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@ -5769,26 +5771,26 @@ packages:
glob: 10.3.10 glob: 10.3.10
dev: true dev: true
/rollup@4.9.6: /rollup@4.10.0:
resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==} resolution: {integrity: sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:
'@types/estree': 1.0.5 '@types/estree': 1.0.5
optionalDependencies: optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.9.6 '@rollup/rollup-android-arm-eabi': 4.10.0
'@rollup/rollup-android-arm64': 4.9.6 '@rollup/rollup-android-arm64': 4.10.0
'@rollup/rollup-darwin-arm64': 4.9.6 '@rollup/rollup-darwin-arm64': 4.10.0
'@rollup/rollup-darwin-x64': 4.9.6 '@rollup/rollup-darwin-x64': 4.10.0
'@rollup/rollup-linux-arm-gnueabihf': 4.9.6 '@rollup/rollup-linux-arm-gnueabihf': 4.10.0
'@rollup/rollup-linux-arm64-gnu': 4.9.6 '@rollup/rollup-linux-arm64-gnu': 4.10.0
'@rollup/rollup-linux-arm64-musl': 4.9.6 '@rollup/rollup-linux-arm64-musl': 4.10.0
'@rollup/rollup-linux-riscv64-gnu': 4.9.6 '@rollup/rollup-linux-riscv64-gnu': 4.10.0
'@rollup/rollup-linux-x64-gnu': 4.9.6 '@rollup/rollup-linux-x64-gnu': 4.10.0
'@rollup/rollup-linux-x64-musl': 4.9.6 '@rollup/rollup-linux-x64-musl': 4.10.0
'@rollup/rollup-win32-arm64-msvc': 4.9.6 '@rollup/rollup-win32-arm64-msvc': 4.10.0
'@rollup/rollup-win32-ia32-msvc': 4.9.6 '@rollup/rollup-win32-ia32-msvc': 4.10.0
'@rollup/rollup-win32-x64-msvc': 4.9.6 '@rollup/rollup-win32-x64-msvc': 4.10.0
fsevents: 2.3.3 fsevents: 2.3.3
dev: true dev: true
@ -6469,7 +6471,7 @@ packages:
'@types/node': 20.11.17 '@types/node': 20.11.17
esbuild: 0.19.12 esbuild: 0.19.12
postcss: 8.4.35 postcss: 8.4.35
rollup: 4.9.6 rollup: 4.10.0
sass: 1.70.0 sass: 1.70.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3

38
src/components/modals/main/marketplace/Item.jsx
View File

@ -18,6 +18,7 @@ import {
import Modal from 'react-modal'; import Modal from 'react-modal';
import Header from '../settings/Header'; import Header from '../settings/Header';
import Button from '../settings/Button';
import { install, uninstall } from 'modules/helpers/marketplace'; import { install, uninstall } from 'modules/helpers/marketplace';
@ -271,27 +272,22 @@ class Item extends PureComponent {
/> />
{this.props.button} {this.props.button}
<div className="iconButtons"> <div className="iconButtons">
<Tooltip title={variables.getMessage('widgets.quote.share')} key="share"> <Button
<button onClick={() => this.setState({ shareModal: true })}> type="icon"
<MdIosShare /> onClick={() => this.setState({ shareModal: true })}
</button> icon={<MdIosShare />}
</Tooltip> tooltipTitle={variables.getMessage('widgets.quote.share')}
<Tooltip tooltipKey="share"
title={variables.getMessage('modals.main.marketplace.product.buttons.report')} />
key="report" <Button
> type="icon"
<button onClick={() => this.setState({ shareModal: true })}
onClick={() => icon={<MdFlag />}
window.open( tooltipTitle={variables.getMessage(
variables.constants.REPORT_ITEM + 'modals.main.marketplace.product.buttons.report',
this.props.data.display_name.split(' ').join('+'), )}
'_blank', tooltipKey="report"
) />
}
>
<MdFlag />
</button>
</Tooltip>
</div> </div>
{this.props.data.data.collection && ( {this.props.data.data.collection && (
<div className="inCollection"> <div className="inCollection">

45
src/components/modals/main/marketplace/sections/Marketplace.jsx
View File

@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
import { import {
MdWifiOff, MdWifiOff,
MdLocalMall, MdLocalMall,
MdOutlineKeyboardArrowRight, MdClose,
MdSearch, MdSearch,
MdOutlineArrowForward, MdOutlineArrowForward,
MdLibraryAdd, MdLibraryAdd,
@ -14,6 +14,7 @@ import Item from '../Item';
import Items from '../Items'; import Items from '../Items';
import Dropdown from '../../settings/Dropdown'; import Dropdown from '../../settings/Dropdown';
import Header from '../../settings/Header'; import Header from '../../settings/Header';
import Button from '../../settings/Button';
import { install, urlParser, uninstall } from 'modules/helpers/marketplace'; import { install, urlParser, uninstall } from 'modules/helpers/marketplace';
@ -30,15 +31,20 @@ class Marketplace extends PureComponent {
}; };
this.buttons = { this.buttons = {
uninstall: ( uninstall: (
<button onClick={() => this.manage('uninstall')}> <Button
{variables.getMessage('modals.main.marketplace.product.buttons.remove')} type="settings"
</button> onClick={() => this.manage('uninstall')}
icon={<MdClose />}
label={variables.getMessage('modals.main.marketplace.product.buttons.remove')}
/>
), ),
install: ( install: (
<button onClick={() => this.manage('install')}> <Button
{variables.getMessage('modals.main.marketplace.product.buttons.addtomue')} type="settings"
<MdLibraryAdd /> onClick={() => this.manage('install')}
</button> icon={<MdLibraryAdd />}
label={variables.getMessage('modals.main.marketplace.product.buttons.addtomue')}
/>
), ),
}; };
this.controller = new AbortController(); this.controller = new AbortController();
@ -346,14 +352,13 @@ class Marketplace extends PureComponent {
<span className="subtitle">{this.state.collectionDescription}</span> <span className="subtitle">{this.state.collectionDescription}</span>
</div> </div>
<button <Button
className="addAllButton" type="collection"
onClick={() => this.installCollection()} onClick={() => this.installCollection()}
disabled={this.state.busy} disabled={this.state.busy}
> icon={<MdLibraryAdd />}
{variables.getMessage('modals.main.marketplace.add_all')} label={variables.getMessage('modals.main.marketplace.add_all')}
<MdLibraryAdd /> />
</button>
</div> </div>
</> </>
) : ( ) : (
@ -408,13 +413,13 @@ class Marketplace extends PureComponent {
<span className="title">{item.display_name}</span> <span className="title">{item.display_name}</span>
<span className="subtitle">{item.description}</span> <span className="subtitle">{item.description}</span>
</div> </div>
<button <Button
className="collectionButton" type="collection"
onClick={() => this.toggle('collection', item.name)} onClick={() => this.toggle('collection', item.name)}
> icon={<MdOutlineArrowForward />}
<MdOutlineArrowForward />{' '} label={variables.getMessage('modals.main.marketplace.explore_collection')}
{variables.getMessage('modals.main.marketplace.explore_collection')} iconPlacement="right"
</button> />
</div> </div>
) : null} ) : null}
</> </>

18
src/components/modals/main/scss/marketplace/_main.scss
View File

@ -358,24 +358,6 @@ p.author {
color: #ccc !important; color: #ccc !important;
} }
} }
.addAllButton {
margin: 0.5rem;
display: flex;
align-items: center;
gap: 15px;
padding: 1px 12px;
backdrop-filter: blur(16px) saturate(180%) !important;
background-color: rgb(255 255 255 / 10%) !important;
border: 1px solid rgb(209 213 219 / 30%) !important;
color: #fff !important;
&:hover {
backdrop-filter: blur(16px) saturate(180%) !important;
background-color: rgb(17 25 40 / 20%) !important;
border: 1px solid rgb(255 255 255 / 12.5%) !important;
}
}
} }
.collection { .collection {

62
src/components/modals/main/scss/marketplace/modules/_buttons.scss
View File

@ -1,29 +1,3 @@
%storeButton {
cursor: pointer;
font-size: 18px;
display: block;
padding: 5px 30px;
background: none;
border-radius: 24px;
transition: ease 0.33s;
border: 2px solid black;
&:hover {
background: #2d3436;
color: map-get($theme-colours, 'main');
}
}
.dark %storeButton {
border: 2px solid map-get($theme-colours, 'main');
color: map-get($theme-colours, 'main');
&:hover {
background: map-get($theme-colours, 'main');
color: #2d3436;
}
}
.updateCheck { .updateCheck {
flex-flow: row !important; flex-flow: row !important;
} }
@ -93,11 +67,43 @@
border: 1px solid rgb(209 213 219 / 30%); border: 1px solid rgb(209 213 219 / 30%);
color: #fff; color: #fff;
border-radius: 12px;
height: 40px;
font-size: 1rem;
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
gap: 20px;
transition: 0.5s;
cursor: pointer;
&:hover { &:hover {
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
background-color: rgb(17 25 40 / 20%); background-color: rgb(17 25 40 / 20%);
border: 1px solid rgb(255 255 255 / 12.5%); border: 1px solid rgb(255 255 255 / 12.5%);
} }
&:active {
@include themed() {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
}
&:focus {
@include themed() {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
}
&:disabled {
@include themed() {
background: t($modal-sidebarActive);
cursor: not-allowed;
}
}
} }
a.btn-collection { a.btn-collection {
@ -112,3 +118,7 @@ a.btn-collection {
.flowReverse { .flowReverse {
flex-flow: row-reverse !important; flex-flow: row-reverse !important;
} }
.btn-icon {
@include modal-button(standard);
}

4
src/components/modals/main/scss/modules/_tab-content.scss
View File

@ -3,9 +3,9 @@
.tab-content { .tab-content {
width: 100% !important; width: 100% !important;
button { /* button {
@include modal-button(standard); @include modal-button(standard);
} }*/
@include themed { @include themed {
padding: 1rem 3rem 3rem; padding: 1rem 3rem 3rem;

75
src/components/modals/main/settings/Button.jsx
View File

@ -1,42 +1,53 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import Tooltip from '../../../helpers/tooltip/Tooltip'; import Tooltip from '../../../helpers/tooltip/Tooltip';
const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, active }, ref) => { const Button = forwardRef(
let className; (
{ icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
ref,
) => {
let className;
switch (type) { switch (type) {
case 'settings': case 'settings':
className = 'btn-settings'; className = 'btn-settings';
break; break;
case 'icon': case 'icon':
className = 'btn-icon'; className = 'btn-icon';
break; break;
case 'navigation': case 'navigation':
className = 'btn-navigation'; className = 'btn-navigation';
break; break;
case 'collection': case 'collection':
className = 'btn-collection'; className = 'btn-collection';
break; break;
default: default:
className = 'btn-default'; className = 'btn-default';
} }
if (iconPlacement === 'right') { if (iconPlacement === 'right') {
className += ' flowReverse'; className += ' flowReverse';
} }
if (active) { if (active) {
className += ` ${className}-active`; className += ` ${className}-active`;
} }
const button = ( const button = (
<button className={className} onClick={onClick} ref={ref}> <button className={className} onClick={onClick} ref={ref} disabled={disabled}>
{icon} {icon}
{label} {label}
</button> </button>
); );
return type === 'icon' ? <Tooltip>{button}</Tooltip> : button; return type === 'icon' ? (
}); <Tooltip title={tooltipTitle} key={tooltipKey}>
{button}
</Tooltip>
) : (
button
);
},
);
export default Button; export default Button;