redo header, icons changed
This commit is contained in:
Alex
parent
d9e58170e8
commit
37ab04c596
24 changed files with 277 additions and 1060 deletions
771
package-lock.json
generated
771
package-lock.json
generated
|
|
@ -22,7 +22,6 @@
|
|||
"@babel/core": "^7.21.4",
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@svgr/webpack": "^7.0.0",
|
||||
"babel-loader": "^9.1.2",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.3",
|
||||
|
|
@ -3454,343 +3453,6 @@
|
|||
"string.prototype.matchall": "^4.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-7.0.0.tgz",
|
||||
"integrity": "sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-7.0.0.tgz",
|
||||
"integrity": "sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-7.0.0.tgz",
|
||||
"integrity": "sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-7.0.0.tgz",
|
||||
"integrity": "sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-svg-dynamic-title": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-7.0.0.tgz",
|
||||
"integrity": "sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-7.0.0.tgz",
|
||||
"integrity": "sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-7.0.0.tgz",
|
||||
"integrity": "sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-plugin-transform-svg-component": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-7.0.0.tgz",
|
||||
"integrity": "sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/babel-preset": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-7.0.0.tgz",
|
||||
"integrity": "sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@svgr/babel-plugin-add-jsx-attribute": "^7.0.0",
|
||||
"@svgr/babel-plugin-remove-jsx-attribute": "^7.0.0",
|
||||
"@svgr/babel-plugin-remove-jsx-empty-expression": "^7.0.0",
|
||||
"@svgr/babel-plugin-replace-jsx-attribute-value": "^7.0.0",
|
||||
"@svgr/babel-plugin-svg-dynamic-title": "^7.0.0",
|
||||
"@svgr/babel-plugin-svg-em-dimensions": "^7.0.0",
|
||||
"@svgr/babel-plugin-transform-react-native-svg": "^7.0.0",
|
||||
"@svgr/babel-plugin-transform-svg-component": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/core": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-7.0.0.tgz",
|
||||
"integrity": "sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@svgr/babel-preset": "^7.0.0",
|
||||
"camelcase": "^6.2.0",
|
||||
"cosmiconfig": "^8.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/core/node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@svgr/core/node_modules/cosmiconfig": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
|
||||
"integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"import-fresh": "^3.2.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/d-fischer"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/core/node_modules/js-yaml": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
|
||||
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/hast-util-to-babel-ast": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-7.0.0.tgz",
|
||||
"integrity": "sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.21.3",
|
||||
"entities": "^4.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/plugin-jsx": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-7.0.0.tgz",
|
||||
"integrity": "sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@svgr/babel-preset": "^7.0.0",
|
||||
"@svgr/hast-util-to-babel-ast": "^7.0.0",
|
||||
"svg-parser": "^2.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/plugin-svgo": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-7.0.0.tgz",
|
||||
"integrity": "sha512-263znzlu3qTKj71/ot5G9l2vpL4CW+pr2IexBFIwwB+fRAXE9Xnw2rUFgE6P4+37N9siOuC4lKkgBfUCOLFRKQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cosmiconfig": "^8.1.3",
|
||||
"deepmerge": "^4.3.1",
|
||||
"svgo": "^3.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@svgr/core": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/plugin-svgo/node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
|
||||
"integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"import-fresh": "^3.2.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/d-fischer"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/plugin-svgo/node_modules/js-yaml": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
|
||||
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@svgr/webpack": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-7.0.0.tgz",
|
||||
"integrity": "sha512-XWzIhLTr5WYns/cNFXpXrmFy+LFf2xp60VnNUBZCpM1CGTx47FCDuUj2DQjxirMf2L6CP2jTRELK8ef01TecFQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.21.3",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.21.0",
|
||||
"@svgr/core": "^7.0.0",
|
||||
"@svgr/plugin-jsx": "^7.0.0",
|
||||
"@svgr/plugin-svgo": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz",
|
||||
|
|
@ -16012,143 +15674,6 @@
|
|||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||
},
|
||||
"node_modules/svgo": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
|
||||
"integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@trysound/sax": "0.2.0",
|
||||
"commander": "^7.2.0",
|
||||
"css-select": "^5.1.0",
|
||||
"css-tree": "^2.2.1",
|
||||
"csso": "^5.0.5",
|
||||
"picocolors": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"svgo": "bin/svgo"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/svgo"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/css-select": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
|
||||
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^6.1.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"domutils": "^3.0.1",
|
||||
"nth-check": "^2.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/csso": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
|
||||
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css-tree": "~2.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/dom-serializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"entities": "^4.2.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/domhandler": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/domutils": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
|
||||
"integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dom-serializer": "^2.0.0",
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
|
@ -20156,205 +19681,6 @@
|
|||
"string.prototype.matchall": "^4.0.6"
|
||||
}
|
||||
},
|
||||
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-7.0.0.tgz",
|
||||
"integrity": "sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-remove-jsx-attribute": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-7.0.0.tgz",
|
||||
"integrity": "sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-remove-jsx-empty-expression": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-7.0.0.tgz",
|
||||
"integrity": "sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-replace-jsx-attribute-value": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-7.0.0.tgz",
|
||||
"integrity": "sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-svg-dynamic-title": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-7.0.0.tgz",
|
||||
"integrity": "sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-svg-em-dimensions": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-7.0.0.tgz",
|
||||
"integrity": "sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-transform-react-native-svg": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-7.0.0.tgz",
|
||||
"integrity": "sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-plugin-transform-svg-component": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-7.0.0.tgz",
|
||||
"integrity": "sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"@svgr/babel-preset": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-7.0.0.tgz",
|
||||
"integrity": "sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@svgr/babel-plugin-add-jsx-attribute": "^7.0.0",
|
||||
"@svgr/babel-plugin-remove-jsx-attribute": "^7.0.0",
|
||||
"@svgr/babel-plugin-remove-jsx-empty-expression": "^7.0.0",
|
||||
"@svgr/babel-plugin-replace-jsx-attribute-value": "^7.0.0",
|
||||
"@svgr/babel-plugin-svg-dynamic-title": "^7.0.0",
|
||||
"@svgr/babel-plugin-svg-em-dimensions": "^7.0.0",
|
||||
"@svgr/babel-plugin-transform-react-native-svg": "^7.0.0",
|
||||
"@svgr/babel-plugin-transform-svg-component": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"@svgr/core": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-7.0.0.tgz",
|
||||
"integrity": "sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@svgr/babel-preset": "^7.0.0",
|
||||
"camelcase": "^6.2.0",
|
||||
"cosmiconfig": "^8.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
|
||||
"integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"import-fresh": "^3.2.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
|
||||
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^2.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@svgr/hast-util-to-babel-ast": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-7.0.0.tgz",
|
||||
"integrity": "sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.21.3",
|
||||
"entities": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@svgr/plugin-jsx": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-7.0.0.tgz",
|
||||
"integrity": "sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@svgr/babel-preset": "^7.0.0",
|
||||
"@svgr/hast-util-to-babel-ast": "^7.0.0",
|
||||
"svg-parser": "^2.0.4"
|
||||
}
|
||||
},
|
||||
"@svgr/plugin-svgo": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-7.0.0.tgz",
|
||||
"integrity": "sha512-263znzlu3qTKj71/ot5G9l2vpL4CW+pr2IexBFIwwB+fRAXE9Xnw2rUFgE6P4+37N9siOuC4lKkgBfUCOLFRKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cosmiconfig": "^8.1.3",
|
||||
"deepmerge": "^4.3.1",
|
||||
"svgo": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "8.1.3",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
|
||||
"integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"import-fresh": "^3.2.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
|
||||
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^2.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@svgr/webpack": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-7.0.0.tgz",
|
||||
"integrity": "sha512-XWzIhLTr5WYns/cNFXpXrmFy+LFf2xp60VnNUBZCpM1CGTx47FCDuUj2DQjxirMf2L6CP2jTRELK8ef01TecFQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/core": "^7.21.3",
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.21.3",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@babel/preset-typescript": "^7.21.0",
|
||||
"@svgr/core": "^7.0.0",
|
||||
"@svgr/plugin-jsx": "^7.0.0",
|
||||
"@svgr/plugin-svgo": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"@testing-library/dom": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz",
|
||||
|
|
@ -29225,103 +28551,6 @@
|
|||
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
|
||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
|
||||
},
|
||||
"svgo": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
|
||||
"integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@trysound/sax": "0.2.0",
|
||||
"commander": "^7.2.0",
|
||||
"css-select": "^5.1.0",
|
||||
"css-tree": "^2.2.1",
|
||||
"csso": "^5.0.5",
|
||||
"picocolors": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||
"dev": true
|
||||
},
|
||||
"css-select": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
|
||||
"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boolbase": "^1.0.0",
|
||||
"css-what": "^6.1.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"domutils": "^3.0.1",
|
||||
"nth-check": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"csso": {
|
||||
"version": "5.0.5",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
|
||||
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-tree": "~2.2.0"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"entities": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"domhandler": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"domelementtype": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"domutils": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
|
||||
"integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"dom-serializer": "^2.0.0",
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
|
||||
"dev": true
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
"@babel/core": "^7.21.4",
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"@babel/preset-react": "^7.18.6",
|
||||
"@svgr/webpack": "^7.0.0",
|
||||
"babel-loader": "^9.1.2",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.3",
|
||||
|
|
|
|||
|
|
@ -1,16 +1,26 @@
|
|||
import { useState } from "react";
|
||||
import AppPlug from "./components/AppPlug/AppPlug";
|
||||
import Header from "./components/Header/Header";
|
||||
import TokensTabs from "./components/TokensTabs/TokensTabs";
|
||||
import Wallet from "./components/Wallet/Wallet";
|
||||
import "./styles/App.scss";
|
||||
|
||||
function App() {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<div className="container">
|
||||
<Wallet />
|
||||
<TokensTabs />
|
||||
</div>
|
||||
{isConnected ? (
|
||||
<AppPlug />
|
||||
) : (
|
||||
<>
|
||||
<Header />
|
||||
<div className="container">
|
||||
<Wallet />
|
||||
<TokensTabs />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
12
src/app/assets/svg/arrow-shevron.svg
Normal file
12
src/app/assets/svg/arrow-shevron.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1320_4885)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M0.292893 2.29289C0.683417 1.90237 1.31658 1.90237 1.70711 2.29289L5 5.58579L8.29289 2.29289C8.68342 1.90237 9.31658 1.90237 9.70711 2.29289C10.0976 2.68342 10.0976 3.31658 9.70711 3.70711L6.41421 7C5.63317 7.78105 4.36684 7.78105 3.58579 7L0.292893 3.70711C-0.0976311 3.31658 -0.0976311 2.68342 0.292893 2.29289Z"
|
||||
fill="white" fill-opacity="0.7"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1320_4885">
|
||||
<rect width="10" height="10" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 727 B |
|
|
@ -1,8 +1,8 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M7.00009 10.7502C7.00009 8.67918 8.67902 7.00024 10.7501 7.00024H16C18.0711 7.00024 19.75 8.67918 19.75 10.7502V16.0002C19.75 18.0712 18.0711 19.7502 16 19.7502H10.7501C8.67902 19.7502 7.00009 18.0712 7.00009 16.0002V10.7502ZM10.7501 8.50024C9.50745 8.50024 8.50009 9.5076 8.50009 10.7502V16.0002C8.50009 17.2428 9.50745 18.2502 10.7501 18.2502H16C17.2427 18.2502 18.25 17.2428 18.25 16.0002V10.7502C18.25 9.5076 17.2427 8.50024 16 8.50024H10.7501Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H9.43745C11.405 0.25 12.9999 1.84498 12.9999 3.81248C12.9999 4.2267 12.6642 4.56248 12.2499 4.56248C11.8357 4.56248 11.4999 4.2267 11.4999 3.81248C11.4999 2.67341 10.5765 1.75 9.43745 1.75H4C2.75736 1.75 1.75 2.75736 1.75 4V9.43745C1.75 10.5765 2.67341 11.4999 3.81248 11.4999C4.2267 11.4999 4.56248 11.8357 4.56248 12.2499C4.56248 12.6642 4.2267 12.9999 3.81248 12.9999C1.84498 12.9999 0.25 11.405 0.25 9.43745V4Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="16.5" height="16.5" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.22184 4.22179C4.80763 3.63601 5.75737 3.63601 6.34316 4.22179L19.7782 17.6568C20.364 18.2426 20.364 19.1924 19.7782 19.7781C19.1924 20.3639 18.2427 20.3639 17.6569 19.7781L4.22184 6.34311C3.63605 5.75733 3.63605 4.80758 4.22184 4.22179Z"
|
||||
/>
|
||||
<path d="M19.7782 4.22157C20.364 4.80735 20.364 5.7571 19.7782 6.34289L6.34318 19.7779C5.75739 20.3637 4.80764 20.3637 4.22186 19.7779C3.63607 19.1921 3.63607 18.2424 4.22186 17.6566L17.6569 4.22157C18.2427 3.63578 19.1924 3.63578 19.7782 4.22157Z"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 634 B After Width: | Height: | Size: 628 B |
8
src/app/assets/svg/dots.svg
Normal file
8
src/app/assets/svg/dots.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9C11 10.1046 10.1046 11 9 11Z"
|
||||
fill="white"/>
|
||||
<path d="M9 4C7.89543 4 7 3.10457 7 2C7 0.89543 7.89543 -1.35705e-07 9 -8.74228e-08C10.1046 -3.91405e-08 11 0.895431 11 2C11 3.10457 10.1046 4 9 4Z"
|
||||
fill="white"/>
|
||||
<path d="M9 18C7.89543 18 7 17.1046 7 16C7 14.8954 7.89543 14 9 14C10.1046 14 11 14.8954 11 16C11 17.1046 10.1046 18 9 18Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 582 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="14" height="14" viewBox="0 0 18 18" fill="#fff" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 1C8 0.447716 8.44772 0 9 0C9.55228 0 10 0.447715 10 1V17C10 17.5523 9.55228 18 9 18C8.44772 18 8 17.5523 8 17V1Z"
|
||||
/>
|
||||
<path d="M1 10C0.447716 10 -1.95702e-08 9.55229 -4.37114e-08 9C-6.78525e-08 8.44772 0.447715 8 1 8L17 8C17.5523 8 18 8.44771 18 9C18 9.55228 17.5523 10 17 10L1 10Z"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 416 B |
5
src/app/assets/svg/receive-colored.svg
Normal file
5
src/app/assets/svg/receive-colored.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M0 19.712V8.274C0 3.332 3.1794 0 7.924 0H20.062C24.808 0 28 3.332 28 8.274V19.712C28 24.668 24.808 28 20.062 28H7.924C3.1794 28 0 24.668 0 19.712ZM15.05 17.1779V8.28789C15.05 7.69989 14.574 7.23789 14 7.23789C13.412 7.23789 12.95 7.69989 12.95 8.28789V17.1779L9.492 13.7059C9.296 13.5099 9.016 13.3979 8.75 13.3979C8.4854 13.3979 8.218 13.5099 8.008 13.7059C7.602 14.1119 7.602 14.7839 8.008 15.1899L13.258 20.4679C13.65 20.8599 14.35 20.8599 14.742 20.4679L19.992 15.1899C20.398 14.7839 20.398 14.1119 19.992 13.7059C19.572 13.2999 18.914 13.2999 18.494 13.7059L15.05 17.1779Z"
|
||||
fill="#16D1D6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 772 B |
|
|
@ -1,11 +1,11 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M2.33979 2.51641C3.39906 1.37881 4.90384 0.75 6.66589 0.75L15.3349 0.75C17.097 0.75 18.6016 1.37883 19.6606 2.51652C20.7121 3.64612 21.2499 5.19612 21.2499 6.916V15.084C21.2499 16.8053 20.7088 18.3551 19.6563 19.484C18.5967 20.6207 17.0927 21.25 15.3349 21.25L6.66589 21.25C4.90384 21.25 3.39906 20.6212 2.33979 19.4836C1.28802 18.354 0.749893 16.804 0.749893 15.084L0.749893 6.916C0.749893 5.19597 1.28802 3.64596 2.33979 2.51641ZM3.8035 3.87934C3.15477 4.57604 2.74989 5.60903 2.74989 6.916L2.74989 15.084C2.74989 16.391 3.15477 17.424 3.8035 18.1207C4.44473 18.8093 5.39794 19.25 6.66589 19.25L15.3349 19.25C16.5971 19.25 17.5506 18.8098 18.1934 18.1202C18.8435 17.4229 19.2499 16.3897 19.2499 15.084V6.916C19.2499 5.60889 18.8452 4.57588 18.1967 3.87923C17.5557 3.19067 16.6028 2.75 15.3349 2.75L6.66589 2.75C5.39794 2.75 4.44473 3.19069 3.8035 3.87934Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M10.9999 5.91406C11.5522 5.91406 11.9999 6.36178 11.9999 6.91406L11.9999 15.0861C11.9999 15.6383 11.5522 16.0861 10.9999 16.0861C10.4476 16.0861 9.99989 15.6383 9.99989 15.0861L9.99989 6.91406C9.99989 6.36178 10.4476 5.91406 10.9999 5.91406Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M6.54629 10.6137C6.93765 10.224 7.57081 10.2253 7.9605 10.6167L10.9999 13.669L14.0393 10.6167C14.429 10.2253 15.0621 10.224 15.4535 10.6137C15.8448 11.0033 15.8462 11.6365 15.4565 12.0279L11.7085 15.7919C11.5208 15.9803 11.2658 16.0863 10.9999 16.0863C10.7339 16.0863 10.4789 15.9803 10.2913 15.7919L6.54328 12.0279C6.15359 11.6365 6.15494 11.0033 6.54629 10.6137Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.8 KiB |
5
src/app/assets/svg/send-colored.svg
Normal file
5
src/app/assets/svg/send-colored.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M28 8.288L28 19.726C28 24.668 24.8206 28 20.076 28L7.938 28C3.192 28 2.91293e-07 24.668 7.23336e-07 19.726L1.72328e-06 8.288C2.15655e-06 3.332 3.192 -1.69195e-06 7.938 -1.27704e-06L20.076 -2.159e-07C24.8206 1.98886e-07 28 3.332 28 8.288ZM12.95 10.8219L12.95 19.7119C12.95 20.2999 13.426 20.7619 14 20.7619C14.588 20.7619 15.05 20.2999 15.05 19.7119L15.05 10.8219L18.508 14.2939C18.704 14.4899 18.984 14.6019 19.25 14.6019C19.5146 14.6019 19.782 14.4899 19.992 14.2939C20.398 13.8879 20.398 13.2159 19.992 12.8099L14.742 7.53192C14.35 7.13992 13.65 7.13992 13.258 7.53192L8.008 12.8099C7.602 13.2159 7.602 13.8879 8.008 14.2939C8.428 14.6999 9.086 14.6999 9.506 14.2939L12.95 10.8219Z"
|
||||
fill="#1F8FEB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 878 B |
|
|
@ -1,11 +1,11 @@
|
|||
<svg width="1em" height="1em" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M19.6602 19.4836C18.6009 20.6212 17.0961 21.25 15.3341 21.25L6.66509 21.25C4.90302 21.25 3.39843 20.6212 2.33939 19.4835C1.28788 18.3539 0.750094 16.8039 0.750094 15.084L0.750095 6.916C0.750095 5.19472 1.29121 3.64491 2.34364 2.51598C3.40331 1.37929 4.9073 0.749997 6.6651 0.749997L15.3341 0.749998C17.0962 0.749998 18.6009 1.37881 19.6602 2.51641C20.712 3.64596 21.2501 5.19597 21.2501 6.916L21.2501 15.084C21.2501 16.804 20.712 18.354 19.6602 19.4836ZM18.1965 18.1207C18.8452 17.424 19.2501 16.391 19.2501 15.084L19.2501 6.916C19.2501 5.60903 18.8452 4.57604 18.1965 3.87933C17.5553 3.19068 16.602 2.75 15.3341 2.75L6.6651 2.75C5.40289 2.75 4.44938 3.19021 3.80655 3.87976C3.15648 4.57708 2.75009 5.61027 2.75009 6.916L2.75009 15.084C2.75009 16.3911 3.1548 17.4241 3.8033 18.1208C4.44426 18.8093 5.39717 19.25 6.66509 19.25L15.3341 19.25C16.602 19.25 17.5553 18.8093 18.1965 18.1207Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.0001 16.0859C10.4478 16.0859 10.0001 15.6382 10.0001 15.0859L10.0001 6.91394C10.0001 6.36165 10.4478 5.91394 11.0001 5.91394C11.5524 5.91394 12.0001 6.36165 12.0001 6.91394L12.0001 15.0859C12.0001 15.6382 11.5524 16.0859 11.0001 16.0859Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M15.4537 11.3863C15.0623 11.776 14.4292 11.7747 14.0395 11.3833L11.0001 8.33097L7.96071 11.3833C7.57102 11.7747 6.93785 11.776 6.5465 11.3863C6.15514 10.9967 6.1538 10.3635 6.54349 9.97213L10.2915 6.20814C10.4791 6.01968 10.7341 5.91374 11.0001 5.91374C11.2661 5.91374 11.5211 6.01968 11.7087 6.20814L15.4567 9.97214C15.8464 10.3635 15.8451 10.9967 15.4537 11.3863Z"
|
||||
/>
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
15
src/app/components/AppPlug/AppPlug.jsx
Normal file
15
src/app/components/AppPlug/AppPlug.jsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import logo from "../../assets/svg/logo.svg"
|
||||
import s from "./AppPlug.module.scss"
|
||||
|
||||
const AppPlug = () => {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className={s.plugLogo}>
|
||||
<img src={logo} alt="zano logo"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppPlug;
|
||||
1
src/app/components/AppPlug/AppPlug.module.scss
Normal file
1
src/app/components/AppPlug/AppPlug.module.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@use "sass:math";
|
||||
|
|
@ -1,78 +1,85 @@
|
|||
import BurgerIcon from "../../assets/svg/burger.svg";
|
||||
import CrossIcon from "../../assets/svg/cross.svg";
|
||||
import GearIcon from "../../assets/svg/gear.svg";
|
||||
import InfoIcon from "../../assets/svg/info.svg";
|
||||
import LockIcon from "../../assets/svg/lock.svg";
|
||||
import Logo from "../../assets/svg/logo.svg";
|
||||
import PlusIcon from "../../assets/svg/plus.svg";
|
||||
import UsersIcon from "../../assets/svg/users.svg";
|
||||
import MyButton from "../../components/UI/MyButton/MyButton";
|
||||
import React, { useState } from "react";
|
||||
import Formatters from "../../../utils/formatters";
|
||||
import arrowIcon from "../../assets/svg/arrow-shevron.svg";
|
||||
import s from "./Header.module.scss";
|
||||
|
||||
const Header = () => {
|
||||
const [menuVisible, setMenuVisible] = useState(false);
|
||||
const wallet = {
|
||||
address: "ZxDCjt6KQaR7DCjt6KQaR7DCjt6KQaR7",
|
||||
label: "@alias",
|
||||
};
|
||||
|
||||
const toggleBurgerMenu = () => {
|
||||
if (menuVisible) {
|
||||
setMenuVisible(false);
|
||||
const walletsMap = [
|
||||
{
|
||||
address: "ZxDCjt6KQaR7DCjt6KQaR7DCjt6KQaR7",
|
||||
label: null,
|
||||
balance: 120,
|
||||
},
|
||||
{
|
||||
address: "ZxDCjt6KQaR213DCjt6KQaR7DCjt6KQaR7",
|
||||
label: "@alias",
|
||||
balance: 2415,
|
||||
},
|
||||
{
|
||||
address: "ZxDCjt623R7DCjt6KQaR7DCjt6KQaR7",
|
||||
label: null,
|
||||
balance: 52.23,
|
||||
},
|
||||
];
|
||||
|
||||
const isConnected = true;
|
||||
|
||||
const Header = () => {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
if (dropdownOpen) {
|
||||
setDropdownOpen(false);
|
||||
document.querySelector(".App").style.overflow = "auto";
|
||||
} else {
|
||||
setMenuVisible(true);
|
||||
setDropdownOpen(true);
|
||||
document.querySelector(".App").style.overflow = "hidden";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<header className={s.header}>
|
||||
<button onClick={toggleBurgerMenu} className={`${s.burger}`}>
|
||||
<img src={BurgerIcon} alt="Burger" />
|
||||
<button onClick={toggleDropdown} className={s.dropdownButton}>
|
||||
<span>
|
||||
{wallet.label
|
||||
? wallet.label
|
||||
: Formatters.walletAddress(wallet.address)}
|
||||
</span>
|
||||
<img src={arrowIcon} alt="arrow icon" />
|
||||
</button>
|
||||
|
||||
<BurgerMenu
|
||||
menuVisible={menuVisible}
|
||||
toggleBurgerMenu={toggleBurgerMenu}
|
||||
/>
|
||||
<div className={s.headerStatus}>
|
||||
{isConnected ? "online" : "offline"}
|
||||
<span
|
||||
style={{ backgroundColor: isConnected ? "#16D1D6" : "#FF6767" }}
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<div className={s.headerSelect}>Wallet Name 1</div>
|
||||
|
||||
<button className={`${s.headerInfo}`}>
|
||||
<img src={InfoIcon} alt="InfoIcon" />
|
||||
</button>
|
||||
{dropdownOpen && (
|
||||
<div onClick={toggleDropdown} className={s.dropdown}>
|
||||
<div onClick={(e) => e.stopPropagation()} className={s.dropdownList}>
|
||||
{walletsMap.map((wallet) => (
|
||||
<button key={wallet.address} className={s.dropdownTitle}>
|
||||
<div>
|
||||
{wallet.label
|
||||
? wallet.label
|
||||
: Formatters.walletAddress(wallet.address)}
|
||||
{wallet.label && (
|
||||
<span>{Formatters.walletAddress(wallet.address)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={s.dropdownBalance}>{wallet.balance} ZANO</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
||||
// Components
|
||||
const BurgerMenu = ({ menuVisible, toggleBurgerMenu }) => {
|
||||
return (
|
||||
<>
|
||||
{menuVisible && (
|
||||
<div className={s.menu} onClick={toggleBurgerMenu}>
|
||||
<div className={s.menuBody} onClick={(e) => e.stopPropagation()}>
|
||||
<div className={s.menuHeader}>
|
||||
<img src={Logo} alt="Logo" />
|
||||
<button className="round-button" onClick={toggleBurgerMenu}>
|
||||
<img src={CrossIcon} alt="CrossIcon" />
|
||||
</button>
|
||||
</div>
|
||||
<div className={s.menuLinks}>
|
||||
<a href="" className={s.menuLink}>
|
||||
<img src={PlusIcon} alt="PlusIcon" /> Add Wallet
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<img src={UsersIcon} alt="UsersIcon" /> Contacts
|
||||
</a>
|
||||
<a href="" className={s.menuLink}>
|
||||
<img src={GearIcon} alt="GearIcon" /> Settings
|
||||
</a>
|
||||
</div>
|
||||
<MyButton>
|
||||
<img src={LockIcon} alt="LockIcon" /> Lock Zano
|
||||
</MyButton>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,134 +10,96 @@
|
|||
height: 56px;
|
||||
background: #0f2055;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
column-gap: 30px;
|
||||
padding: 0 15px;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.headerInfo {
|
||||
color: $blueColor;
|
||||
// =========================================================
|
||||
.headerStatus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
span {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
flex: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.lockButton {
|
||||
display: flex;
|
||||
column-gap: 6px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px solid #1f8feb;
|
||||
border-radius: 8px;
|
||||
color: #ffffff;
|
||||
height: 47px;
|
||||
// =========================================================
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: background-color 0.2s ease 0s;
|
||||
svg {
|
||||
font-size: 15px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.burger {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $blueColor;
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.menu {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: calc(100% + 290px);
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.46);
|
||||
animation: show-menu-bg 0.2s ease;
|
||||
}
|
||||
@keyframes show-menu-bg {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
top: calc(100% + 1px);
|
||||
height: calc($appHeight - 56px);
|
||||
background-color: rgba(0, 0, 0, 0.46);
|
||||
}
|
||||
|
||||
.menuBody {
|
||||
padding: 18px 16px;
|
||||
width: 290px;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #11316b;
|
||||
animation: show-burger-menu 0.2s ease;
|
||||
@keyframes show-burger-menu {
|
||||
0% {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuHeader {
|
||||
.dropdownButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 22px;
|
||||
color: #1f8feb;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.menuLinks {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.menuLink {
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
height: 50px;
|
||||
font-weight: 600;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
font-size: 20px;
|
||||
svg {
|
||||
width: 24px;
|
||||
flex: 0 0 24px;
|
||||
line-height: math.div(21, 18);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.dropdownList {
|
||||
background-color: #0F2055;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 5px;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
svg {
|
||||
font-size: 18px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
svg {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownTitle {
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 30px;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: math.div(21, 18);
|
||||
span {
|
||||
margin-top: 6px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: math.div(17, 14);
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownBalance {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: math.div(21, 18);
|
||||
text-align: right;
|
||||
color: #1F8FEB;
|
||||
}
|
||||
|
|
@ -1,38 +1,38 @@
|
|||
import CrossIcon from "../../../assets/svg/cross.svg";
|
||||
import PlusIcon from "../../../assets/svg/plus.svg";
|
||||
import BitcoinIcon from "../../../assets/tokens-svg/bitcoin.svg";
|
||||
import CustomTokenIcon from "../../../assets/tokens-svg/custom-token.svg";
|
||||
import EthIcon from "../../../assets/tokens-svg/eth.svg";
|
||||
import ZanoIcon from "../../../assets/tokens-svg/zano.svg";
|
||||
import MyButton from "../../../components/UI/MyButton/MyButton";
|
||||
import React from "react";
|
||||
import crossIcon from "../../../assets/svg/cross.svg";
|
||||
import plusIcon from "../../../assets/svg/plus.svg";
|
||||
import bitcoinIcon from "../../../assets/tokens-svg/bitcoin.svg";
|
||||
import customTokenIcon from "../../../assets/tokens-svg/custom-token.svg";
|
||||
import ethIcon from "../../../assets/tokens-svg/eth.svg";
|
||||
import zanoIcon from "../../../assets/tokens-svg/zano.svg";
|
||||
import MyButton from "../../../components/UI/MyButton/MyButton";
|
||||
import s from "./Assets.module.scss";
|
||||
|
||||
const assetsMap = [
|
||||
{
|
||||
name: "ZANO",
|
||||
icon: <img src={ZanoIcon} alt="ZanoIcon" />,
|
||||
icon: <img src={zanoIcon} alt="ZanoIcon" />,
|
||||
balance: 120,
|
||||
ticker: "ZANO",
|
||||
value: 128.96,
|
||||
},
|
||||
{
|
||||
name: "Wrapped Bitcoin",
|
||||
icon: <img src={BitcoinIcon} alt="BitcoinIcon" />,
|
||||
icon: <img src={bitcoinIcon} alt="bitcoin icon" />,
|
||||
balance: 0.212,
|
||||
ticker: "WBTC",
|
||||
value: 4096.96,
|
||||
},
|
||||
{
|
||||
name: "Wrapped Ethereum",
|
||||
icon: <img src={EthIcon} alt="EthIcon" />,
|
||||
icon: <img src={ethIcon} alt="EthIcon" />,
|
||||
balance: 2.1,
|
||||
ticker: "WETH",
|
||||
value: 3020.12,
|
||||
},
|
||||
{
|
||||
name: "Custom Asset",
|
||||
icon: <img src={CustomTokenIcon} alt="CustomTokenIcon" />,
|
||||
icon: <img src={customTokenIcon} alt="CustomTokenIcon" />,
|
||||
balance: 15.52,
|
||||
ticker: "TSDS",
|
||||
value: 3020.12,
|
||||
|
|
@ -49,7 +49,7 @@ const Assets = () => {
|
|||
{assetsMap.map((asset) => (
|
||||
<div className={s.asset}>
|
||||
<button className={s.assetRemoveBtn} onClick={remove}>
|
||||
<img src={CrossIcon} alt="CrossIcon" />
|
||||
<img src={crossIcon} alt="CrossIcon" />
|
||||
</button>
|
||||
<button className={s.assetBody}>
|
||||
<span className={s.assetTitle}>
|
||||
|
|
@ -72,7 +72,7 @@ const Assets = () => {
|
|||
</div>
|
||||
))}
|
||||
<MyButton style={{ transform: "translateY(30%)" }}>
|
||||
<img src={PlusIcon} alt="PlusIcon" /> Add Custom Token
|
||||
<img src={plusIcon} alt="PlusIcon" /> Add Custom Token
|
||||
</MyButton>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import ArrowIcon from "../../../assets/svg/arrow-square.svg";
|
||||
import LoadingIcon from "../../../assets/svg/loading.svg";
|
||||
import React from "react";
|
||||
import LoadingIcon from "../../../assets/svg/loading.svg";
|
||||
import receiveIcon from "../../../assets/svg/receive-colored.svg";
|
||||
import sendIcon from "../../../assets/svg/send-colored.svg";
|
||||
import s from "./History.module.scss";
|
||||
|
||||
const historyMap = [
|
||||
|
|
@ -24,10 +25,7 @@ const History = () => {
|
|||
return (
|
||||
<div>
|
||||
{historyMap.map((historyItem, index) => {
|
||||
const iconClasses =
|
||||
historyItem.type === "send"
|
||||
? s.historyIcon
|
||||
: [s.historyIcon, s.receiveVariant].join(" ");
|
||||
const icon = historyItem.type === "send" ? sendIcon : receiveIcon;
|
||||
|
||||
return (
|
||||
<button key={index} className={s.historyItem}>
|
||||
|
|
@ -38,8 +36,8 @@ const History = () => {
|
|||
)}
|
||||
|
||||
<div className={s.historyTop}>
|
||||
<div className={iconClasses}>
|
||||
<img src={ArrowIcon} alt="ArrowIcon" />
|
||||
<div className={s.historyIcon}>
|
||||
<img src={icon} alt="ArrowIcon" />
|
||||
</div>
|
||||
<span>{[historyItem.value, historyItem.ticker].join(" ")}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
import CopyIcon from "../../assets/svg/copy.svg";
|
||||
import ReceiveIcon from "../../assets/svg/receive.svg";
|
||||
import SendIcon from "../../assets/svg/send.svg";
|
||||
import s from "./Wallet.module.scss";
|
||||
import copy from "copy-to-clipboard";
|
||||
import React, { useState } from "react";
|
||||
import copyIcon from "../../assets/svg/copy.svg";
|
||||
import dotsIcon from "../../assets/svg/dots.svg";
|
||||
import receiveIcon from "../../assets/svg/receive.svg";
|
||||
import sendIcon from "../../assets/svg/send.svg";
|
||||
import s from "./Wallet.module.scss";
|
||||
|
||||
const walletConnected = true;
|
||||
const percentChange = false;
|
||||
const walletAddress =
|
||||
"ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7";
|
||||
|
||||
const Wallet = () => {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const walletConnected = true;
|
||||
const percentChange = false;
|
||||
const walletAddress =
|
||||
"ZxDCjtvEPnwKFPa9Hy5frFbQoT6KQaR7EPnwKFPa9Hy5frFbQoT6KQaR7";
|
||||
|
||||
const getWalletStatusColor = () => {
|
||||
return walletConnected ? "#16D1D6" : "#FFCBCB";
|
||||
};
|
||||
|
||||
const getWalletPercentColor = () => {
|
||||
return percentChange ? "#16D1D6" : "#FFCBCB";
|
||||
};
|
||||
|
||||
const copyToClipboard = (text) => {
|
||||
copy(text);
|
||||
|
|
@ -33,21 +27,15 @@ const Wallet = () => {
|
|||
<div className={s.infoWallet}>
|
||||
<div className={s.infoTop}>
|
||||
<div>Wallet Name 1</div>
|
||||
<div
|
||||
className={s.infoWalletStatus}
|
||||
style={{ backgroundColor: getWalletStatusColor() }}
|
||||
>
|
||||
<StatusModal
|
||||
walletConnected={walletConnected}
|
||||
getWalletStatusColor={getWalletStatusColor}
|
||||
/>
|
||||
</div>
|
||||
<button className={`${s.dotsButton} round-button`}>
|
||||
<img src={dotsIcon} alt="dots icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={s.infoBalance}>
|
||||
<span>$1224.15</span>
|
||||
<span
|
||||
style={{ color: getWalletPercentColor() }}
|
||||
style={{ color: percentChange ? "#16D1D6" : "#FFCBCB" }}
|
||||
className={s.percentСhange}
|
||||
>
|
||||
-4.6%
|
||||
|
|
@ -60,17 +48,17 @@ const Wallet = () => {
|
|||
onClick={() => copyToClipboard(walletAddress)}
|
||||
className={`${s.copyButton} round-button`}
|
||||
>
|
||||
<img src={CopyIcon} alt="CopyIcon" />
|
||||
<img src={copyIcon} alt="SendIcon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={s.actionsWallet}>
|
||||
<button className={s.actionsButton}>
|
||||
<img src={SendIcon} alt="SendIcon" /> Send
|
||||
<img src={sendIcon} alt="send icon" /> Send
|
||||
</button>
|
||||
<button className={s.actionsButton}>
|
||||
<img src={ReceiveIcon} alt="ReceiveIcon" /> Receive
|
||||
<img src={receiveIcon} alt="receive icon" /> Receive
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -83,17 +71,3 @@ const Wallet = () => {
|
|||
|
||||
export default Wallet;
|
||||
|
||||
// Components
|
||||
const StatusModal = ({ walletConnected, getWalletStatusColor }) => (
|
||||
<div className={s.status}>
|
||||
<div style={{ color: getWalletStatusColor() }} className={s.statusTitle}>
|
||||
{walletConnected ? "Connected" : "Disconnected"}
|
||||
</div>
|
||||
<div className={s.statusContent}>
|
||||
<div className={s.statusAddress}>website.com</div>
|
||||
<div className={s.statusText}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dotsButton {
|
||||
transform: translate(25%, 0);
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.clipboardModal {
|
||||
position: absolute;
|
||||
|
|
@ -106,41 +110,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Status modal
|
||||
.status {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
min-width: 180px;
|
||||
top: calc(100% + 4px);
|
||||
right: 0;
|
||||
background: #11316b;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: math.div(17, 14);
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
transition: all 0.2s ease 0s;
|
||||
transition-property: opacity, visibility;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
.statusTitle {
|
||||
display: block;
|
||||
padding: 10px 12px 8px 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.statusContent {
|
||||
padding: 8px 12px 12px 12px;
|
||||
}
|
||||
.statusAddress {
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.statusText {
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// =========================================================
|
||||
.actionsWallet {
|
||||
display: grid;
|
||||
|
|
@ -161,7 +130,7 @@
|
|||
font-size: 21px;
|
||||
line-height: math.div(25, 21);
|
||||
transition: background-color 0.2s ease 0s;
|
||||
svg {
|
||||
img {
|
||||
flex: 0 0 20px;
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
overflow-y: auto;
|
||||
background-color: #0C0C3A;
|
||||
padding-top: 72px;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@ $fontSize: 19px;
|
|||
$mainColor: #ffffff;
|
||||
$blueColor: #1f8feb;
|
||||
$appWidth: 360px;
|
||||
$appHeight: 600px;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import "_variables";
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
scrollbar-width: none;
|
||||
display: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
21
src/utils/formatters.js
Normal file
21
src/utils/formatters.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export default class Formatters {
|
||||
static walletAddress(str) {
|
||||
if (str.length > 20) {
|
||||
if (window.innerWidth > 768) {
|
||||
return (
|
||||
str.substring(0, 6) +
|
||||
"..." +
|
||||
str.substring(str.length - 6, str.length)
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
str.substring(0, 5) +
|
||||
"..." +
|
||||
str.substring(str.length - 5, str.length)
|
||||
);
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Reference in a new issue