partial: last batch of components
This commit is contained in:
Rafael Taranto
parent
f75477ac34
commit
7fbd51cb7e
43 changed files with 855 additions and 1148 deletions
237
new-lamassu-admin/package-lock.json
generated
237
new-lamassu-admin/package-lock.json
generated
|
|
@ -15,7 +15,6 @@
|
||||||
"@lamassu/coins": "v1.6.1",
|
"@lamassu/coins": "v1.6.1",
|
||||||
"@mui/icons-material": "^5.17.1",
|
"@mui/icons-material": "^5.17.1",
|
||||||
"@mui/material": "^5.17.1",
|
"@mui/material": "^5.17.1",
|
||||||
"@mui/styles": "^5.17.1",
|
|
||||||
"@simplewebauthn/browser": "^3.0.0",
|
"@simplewebauthn/browser": "^3.0.0",
|
||||||
"apollo-upload-client": "^18.0.0",
|
"apollo-upload-client": "^18.0.0",
|
||||||
"bignumber.js": "9.0.0",
|
"bignumber.js": "9.0.0",
|
||||||
|
|
@ -503,12 +502,6 @@
|
||||||
"stylis": "4.2.0"
|
"stylis": "4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
|
|
||||||
"version": "0.9.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
|
|
||||||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
|
"node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
|
||||||
"version": "1.9.0",
|
"version": "1.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
|
||||||
|
|
@ -528,6 +521,12 @@
|
||||||
"stylis": "4.2.0"
|
"stylis": "4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@emotion/hash": {
|
||||||
|
"version": "0.9.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
|
||||||
|
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@emotion/is-prop-valid": {
|
"node_modules/@emotion/is-prop-valid": {
|
||||||
"version": "1.3.1",
|
"version": "1.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
|
||||||
|
|
@ -580,18 +579,6 @@
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@emotion/serialize/node_modules/@emotion/hash": {
|
|
||||||
"version": "0.9.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
|
|
||||||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@emotion/serialize/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@emotion/sheet": {
|
"node_modules/@emotion/sheet": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
|
||||||
|
|
@ -1491,18 +1478,6 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/material/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/material/node_modules/react-is": {
|
|
||||||
"version": "19.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
|
|
||||||
"integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/private-theming": {
|
"node_modules/@mui/private-theming": {
|
||||||
"version": "5.17.1",
|
"version": "5.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz",
|
||||||
|
|
@ -1562,75 +1537,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/styled-engine/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/styles": {
|
|
||||||
"version": "5.17.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.17.1.tgz",
|
|
||||||
"integrity": "sha512-GxNtcD1jXjj1i81vyuaeNxCpph/ApxSxgJ+G8A2jUY5/bMOxXSmgUdupbB0JLexsDIqmaSqTePVN0jnMZc1iZQ==",
|
|
||||||
"deprecated": "Deprecated, check the migration instruction in https://mui.com/material-ui/migration/migrating-from-jss/",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.23.9",
|
|
||||||
"@emotion/hash": "^0.9.1",
|
|
||||||
"@mui/private-theming": "^5.17.1",
|
|
||||||
"@mui/types": "~7.2.15",
|
|
||||||
"@mui/utils": "^5.17.1",
|
|
||||||
"clsx": "^2.1.0",
|
|
||||||
"csstype": "^3.1.3",
|
|
||||||
"hoist-non-react-statics": "^3.3.2",
|
|
||||||
"jss": "^10.10.0",
|
|
||||||
"jss-plugin-camel-case": "^10.10.0",
|
|
||||||
"jss-plugin-default-unit": "^10.10.0",
|
|
||||||
"jss-plugin-global": "^10.10.0",
|
|
||||||
"jss-plugin-nested": "^10.10.0",
|
|
||||||
"jss-plugin-props-sort": "^10.10.0",
|
|
||||||
"jss-plugin-rule-value-function": "^10.10.0",
|
|
||||||
"jss-plugin-vendor-prefixer": "^10.10.0",
|
|
||||||
"prop-types": "^15.8.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"type": "opencollective",
|
|
||||||
"url": "https://opencollective.com/mui-org"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
||||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
||||||
},
|
|
||||||
"peerDependenciesMeta": {
|
|
||||||
"@types/react": {
|
|
||||||
"optional": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@mui/styles/node_modules/@emotion/hash": {
|
|
||||||
"version": "0.9.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
|
|
||||||
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/styles/node_modules/clsx": {
|
|
||||||
"version": "2.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
|
||||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@mui/styles/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/system": {
|
"node_modules/@mui/system": {
|
||||||
"version": "5.17.1",
|
"version": "5.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.17.1.tgz",
|
||||||
|
|
@ -1680,12 +1586,6 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/system/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@mui/types": {
|
"node_modules/@mui/types": {
|
||||||
"version": "7.2.24",
|
"version": "7.2.24",
|
||||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
|
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
|
||||||
|
|
@ -1739,12 +1639,6 @@
|
||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@mui/utils/node_modules/react-is": {
|
|
||||||
"version": "19.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
|
|
||||||
"integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@parcel/watcher": {
|
"node_modules/@parcel/watcher": {
|
||||||
"version": "2.5.1",
|
"version": "2.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||||
|
|
@ -3177,13 +3071,6 @@
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/react/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/@types/scheduler": {
|
"node_modules/@types/scheduler": {
|
||||||
"version": "0.16.8",
|
"version": "0.16.8",
|
||||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||||
|
|
@ -4281,15 +4168,11 @@
|
||||||
"integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==",
|
"integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/css-vendor": {
|
"node_modules/csstype": {
|
||||||
"version": "2.0.8",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.8.3",
|
|
||||||
"is-in-browser": "^1.0.2"
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"node_modules/d3": {
|
"node_modules/d3": {
|
||||||
"version": "6.7.0",
|
"version": "6.7.0",
|
||||||
|
|
@ -4791,12 +4674,6 @@
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/dom-helpers/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/dot-case": {
|
"node_modules/dot-case": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
|
||||||
|
|
@ -6162,12 +6039,6 @@
|
||||||
"node": ">=16.17.0"
|
"node": ">=16.17.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/hyphenate-style-name": {
|
|
||||||
"version": "1.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
|
|
||||||
"integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
|
|
||||||
"license": "BSD-3-Clause"
|
|
||||||
},
|
|
||||||
"node_modules/iconv-lite": {
|
"node_modules/iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
|
|
@ -6851,27 +6722,6 @@
|
||||||
"url": "https://opencollective.com/jss"
|
"url": "https://opencollective.com/jss"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/jss-plugin-camel-case": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"hyphenate-style-name": "^1.0.3",
|
|
||||||
"jss": "10.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-default-unit": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"jss": "10.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-extend": {
|
"node_modules/jss-plugin-extend": {
|
||||||
"version": "10.10.0",
|
"version": "10.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz",
|
"resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz",
|
||||||
|
|
@ -6883,65 +6733,6 @@
|
||||||
"tiny-warning": "^1.0.2"
|
"tiny-warning": "^1.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/jss-plugin-global": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"jss": "10.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-nested": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"jss": "10.10.0",
|
|
||||||
"tiny-warning": "^1.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-props-sort": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"jss": "10.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-rule-value-function": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"jss": "10.10.0",
|
|
||||||
"tiny-warning": "^1.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss-plugin-vendor-prefixer": {
|
|
||||||
"version": "10.10.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
|
|
||||||
"integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/runtime": "^7.3.1",
|
|
||||||
"css-vendor": "^2.0.8",
|
|
||||||
"jss": "10.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/jss/node_modules/csstype": {
|
|
||||||
"version": "3.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/jsx-ast-utils": {
|
"node_modules/jsx-ast-utils": {
|
||||||
"version": "3.3.5",
|
"version": "3.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
|
||||||
|
|
@ -8326,6 +8117,12 @@
|
||||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/react-is": {
|
||||||
|
"version": "19.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
|
||||||
|
"integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/react-lifecycles-compat": {
|
"node_modules/react-lifecycles-compat": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
"@lamassu/coins": "v1.6.1",
|
"@lamassu/coins": "v1.6.1",
|
||||||
"@mui/icons-material": "^5.17.1",
|
"@mui/icons-material": "^5.17.1",
|
||||||
"@mui/material": "^5.17.1",
|
"@mui/material": "^5.17.1",
|
||||||
"@mui/styles": "^5.17.1",
|
|
||||||
"@simplewebauthn/browser": "^3.0.0",
|
"@simplewebauthn/browser": "^3.0.0",
|
||||||
"apollo-upload-client": "^18.0.0",
|
"apollo-upload-client": "^18.0.0",
|
||||||
"bignumber.js": "9.0.0",
|
"bignumber.js": "9.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
import CssBaseline from '@mui/material/CssBaseline'
|
import CssBaseline from '@mui/material/CssBaseline'
|
||||||
import { StylesProvider, jssPreset } from '@mui/styles'
|
|
||||||
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
|
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
|
||||||
import { create } from 'jss'
|
|
||||||
import extendJss from 'jss-plugin-extend'
|
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import { BrowserRouter as Router } from 'react-router-dom'
|
import { BrowserRouter as Router } from 'react-router-dom'
|
||||||
import ApolloProvider from 'src/utils/apollo'
|
import ApolloProvider from 'src/utils/apollo'
|
||||||
|
|
@ -13,10 +10,6 @@ import theme from 'src/styling/theme'
|
||||||
import Main from './Main'
|
import Main from './Main'
|
||||||
import './styling/global/global.css'
|
import './styling/global/global.css'
|
||||||
|
|
||||||
const jss = create({
|
|
||||||
plugins: [extendJss(), ...jssPreset().plugins]
|
|
||||||
})
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [wizardTested, setWizardTested] = useState(false)
|
const [wizardTested, setWizardTested] = useState(false)
|
||||||
const [userData, setUserData] = useState(null)
|
const [userData, setUserData] = useState(null)
|
||||||
|
|
@ -32,14 +25,12 @@ const App = () => {
|
||||||
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
|
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
|
||||||
<Router>
|
<Router>
|
||||||
<ApolloProvider>
|
<ApolloProvider>
|
||||||
<StylesProvider jss={jss}>
|
<StyledEngineProvider injectFirst>
|
||||||
<StyledEngineProvider injectFirst>
|
<ThemeProvider theme={theme}>
|
||||||
<ThemeProvider theme={theme}>
|
<CssBaseline />
|
||||||
<CssBaseline />
|
<Main />
|
||||||
<Main />
|
</ThemeProvider>
|
||||||
</ThemeProvider>
|
</StyledEngineProvider>
|
||||||
</StyledEngineProvider>
|
|
||||||
</StylesProvider>
|
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
</Router>
|
</Router>
|
||||||
</AppContext.Provider>
|
</AppContext.Provider>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,31 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
|
|
||||||
import styles from './ActionButton.styles'
|
import moduleStyles from './ActionButton.module.css'
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const ActionButton = memo(
|
const ActionButton = memo(
|
||||||
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
|
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
|
||||||
const classes = useStyles()
|
|
||||||
const classNames = {
|
const classNames = {
|
||||||
[classes.actionButton]: true,
|
[moduleStyles.actionButton]: true,
|
||||||
[classes.primary]: color === 'primary',
|
[moduleStyles.primary]: color === 'primary',
|
||||||
[classes.secondary]: color === 'secondary',
|
[moduleStyles.secondary]: color === 'secondary',
|
||||||
[classes.spring]: color === 'spring',
|
[moduleStyles.spring]: color === 'spring',
|
||||||
[classes.tomato]: color === 'tomato',
|
[moduleStyles.tomato]: color === 'tomato',
|
||||||
[classes.center]: center
|
[moduleStyles.center]: center
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button className={classnames(classNames, className)} {...props}>
|
<button className={classnames(classNames, className)} {...props}>
|
||||||
{Icon && (
|
{Icon && (
|
||||||
<div className={classes.actionButtonIcon}>
|
<div className={moduleStyles.actionButtonIcon}>
|
||||||
<Icon />
|
<Icon />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{InverseIcon && (
|
{InverseIcon && (
|
||||||
<div
|
<div
|
||||||
className={classnames(
|
className={classnames(
|
||||||
classes.actionButtonIcon,
|
moduleStyles.actionButtonIcon,
|
||||||
classes.actionButtonIconActive
|
moduleStyles.actionButtonIconActive
|
||||||
)}>
|
)}>
|
||||||
<InverseIcon />
|
<InverseIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
143
new-lamassu-admin/src/components/buttons/ActionButton.module.css
Normal file
143
new-lamassu-admin/src/components/buttons/ActionButton.module.css
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
.actionButton {
|
||||||
|
composes: p from '../typography/typography.module.css';
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
height: 28px;
|
||||||
|
outline: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/*TODO important is a hack while we don't have a better way of handling overrides of 'composes'*/
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
background-color: var(--zircon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:hover {
|
||||||
|
background-color: var(--zircon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary .actionButtonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active .actionButtonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active .actionButtonIconActive {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover {
|
||||||
|
background-color: var(--comet2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active {
|
||||||
|
background-color: var(--comet3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary .actionButtonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary .actionButtonIconActive {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active .actionButtonIcon {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active .actionButtonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring {
|
||||||
|
background-color: var(--spring2);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring:hover {
|
||||||
|
background-color: var(--spring);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring:active {
|
||||||
|
background-color: var(--spring4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring .actionButtonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring .actionButtonIconActive {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring:active .actionButtonIcon {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spring:active .actionButtonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato {
|
||||||
|
background-color: var(--tomato);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato:hover {
|
||||||
|
background-color: var(--tomato);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato:active {
|
||||||
|
background-color: var(--tomato);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato .actionButtonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato .actionButtonIconActive {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato:active .actionButtonIcon {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tomato:active .actionButtonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButtonIcon {
|
||||||
|
display: flex;
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButtonIcon svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionButtonIconActive {
|
||||||
|
}
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import {
|
|
||||||
white,
|
|
||||||
subheaderColor,
|
|
||||||
subheaderDarkColor,
|
|
||||||
offColor,
|
|
||||||
offDarkColor,
|
|
||||||
offDarkerColor,
|
|
||||||
secondaryColor,
|
|
||||||
secondaryColorDark,
|
|
||||||
secondaryColorDarker,
|
|
||||||
errorColor,
|
|
||||||
errorColorDark,
|
|
||||||
errorColorDarker
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { p } = typographyStyles
|
|
||||||
|
|
||||||
const colors = (color1, color2, color3) => {
|
|
||||||
return {
|
|
||||||
backgroundColor: color1,
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: color2
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
backgroundColor: color3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
actionButton: {
|
|
||||||
extend: p,
|
|
||||||
cursor: 'pointer',
|
|
||||||
border: 'none',
|
|
||||||
height: 28,
|
|
||||||
outline: 0,
|
|
||||||
borderRadius: 6,
|
|
||||||
padding: '0 8px',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
extend: colors(subheaderColor, subheaderDarkColor, offColor),
|
|
||||||
'&:active': {
|
|
||||||
color: white,
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'none'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'flex'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
extend: colors(offColor, offDarkColor, offDarkerColor),
|
|
||||||
color: white,
|
|
||||||
'&:active': {
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'flex'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'none'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'flex'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
spring: {
|
|
||||||
extend: colors(secondaryColorDark, secondaryColor, secondaryColorDarker),
|
|
||||||
color: white,
|
|
||||||
'&:active': {
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'flex'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'none'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'flex'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tomato: {
|
|
||||||
extend: colors(errorColorDark, errorColor, errorColorDarker),
|
|
||||||
color: white,
|
|
||||||
'&:active': {
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'flex'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& $actionButtonIcon': {
|
|
||||||
display: 'none'
|
|
||||||
},
|
|
||||||
'& $actionButtonIconActive': {
|
|
||||||
display: 'flex'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actionButtonIcon: {
|
|
||||||
display: 'flex',
|
|
||||||
paddingRight: 7,
|
|
||||||
'@global': {
|
|
||||||
svg: {
|
|
||||||
width: 14,
|
|
||||||
height: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
center: {
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center'
|
|
||||||
},
|
|
||||||
actionButtonIconActive: {}
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +1,10 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
|
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
import classes from './AddButton.module.css'
|
||||||
import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { p } = typographyStyles
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
button: {
|
|
||||||
extend: p,
|
|
||||||
border: 'none',
|
|
||||||
backgroundColor: zircon,
|
|
||||||
cursor: 'pointer',
|
|
||||||
outline: 0,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: 167,
|
|
||||||
height: 48,
|
|
||||||
color: fontColor,
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: zircon2
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
backgroundColor: comet,
|
|
||||||
color: white,
|
|
||||||
'& svg g *': {
|
|
||||||
stroke: white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& svg': {
|
|
||||||
marginRight: 8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const SimpleButton = memo(({ className, children, ...props }) => {
|
const SimpleButton = memo(({ className, children, ...props }) => {
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button className={classnames(classes.button, className)} {...props}>
|
<button className={classnames(classes.button, className)} {...props}>
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
.button {
|
||||||
|
composes: p from '../typography/typography.module.css';
|
||||||
|
border: none;
|
||||||
|
background-color: var(--zircon);
|
||||||
|
cursor: pointer;
|
||||||
|
outline: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 167px;
|
||||||
|
height: 48px;
|
||||||
|
color: var(--zodiac);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--zircon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active svg g * {
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button svg {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
@ -1,25 +1,37 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
|
|
||||||
import styles from './Button.styles'
|
import moduleStyles from './Button.module.css'
|
||||||
|
import { spacer } from '../../styling/variables.js'
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
const pickSize = size => {
|
||||||
|
switch (size) {
|
||||||
|
case 'xl':
|
||||||
|
return spacer * 7.625
|
||||||
|
case 'sm':
|
||||||
|
return spacer * 4
|
||||||
|
case 'lg':
|
||||||
|
default:
|
||||||
|
return spacer * 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const ActionButton = memo(
|
const ActionButton = memo(
|
||||||
({
|
({ size = 'lg', children, className, buttonClassName, ...props }) => {
|
||||||
size = 'lg',
|
const height = pickSize(size)
|
||||||
children,
|
|
||||||
className,
|
|
||||||
buttonClassName,
|
|
||||||
backgroundColor,
|
|
||||||
...props
|
|
||||||
}) => {
|
|
||||||
const classes = useStyles({ size, backgroundColor })
|
|
||||||
return (
|
return (
|
||||||
<div className={classnames(className, classes.wrapper)}>
|
<div className={className} style={{ height: height + height / 12 }}>
|
||||||
<button
|
<button
|
||||||
className={classnames(buttonClassName, classes.button)}
|
className={classnames(
|
||||||
|
buttonClassName,
|
||||||
|
moduleStyles.button,
|
||||||
|
'text-white',
|
||||||
|
{
|
||||||
|
[moduleStyles.buttonSm]: size === 'sm',
|
||||||
|
[moduleStyles.buttonXl]: size === 'xl'
|
||||||
|
}
|
||||||
|
)}
|
||||||
{...props}>
|
{...props}>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
49
new-lamassu-admin/src/components/buttons/Button.module.css
Normal file
49
new-lamassu-admin/src/components/buttons/Button.module.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.button {
|
||||||
|
composes: h3 from '../typography/typography.module.css';
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: 0;
|
||||||
|
font-weight: 900;
|
||||||
|
background-color: var(--spring);
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 3px var(--spring4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonXl {
|
||||||
|
composes: h1 from '../typography/typography.module.css';
|
||||||
|
height: 61px;
|
||||||
|
border-radius: 15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonSm {
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-radius: 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled {
|
||||||
|
background-color: var(--dust);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled:hover {
|
||||||
|
background-color: var(--dust);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled:active {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--spring2);
|
||||||
|
box-shadow: 0 3px var(--spring4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
margin-top: 2px;
|
||||||
|
background-color: var(--spring2);
|
||||||
|
box-shadow: 0 2px var(--spring4);
|
||||||
|
}
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import {
|
|
||||||
white,
|
|
||||||
disabledColor,
|
|
||||||
secondaryColor,
|
|
||||||
secondaryColorDark,
|
|
||||||
secondaryColorDarker,
|
|
||||||
offColor,
|
|
||||||
offDarkColor,
|
|
||||||
offDarkerColor,
|
|
||||||
spacer
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { h1, h3 } = typographyStyles
|
|
||||||
|
|
||||||
const pickSize = size => {
|
|
||||||
switch (size) {
|
|
||||||
case 'xl':
|
|
||||||
return spacer * 7.625
|
|
||||||
case 'sm':
|
|
||||||
return spacer * 4
|
|
||||||
case 'lg':
|
|
||||||
default:
|
|
||||||
return spacer * 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
wrapper: ({ size }) => {
|
|
||||||
const height = pickSize(size)
|
|
||||||
const shadowSize = height / 12
|
|
||||||
return { height: height + shadowSize / 2 }
|
|
||||||
},
|
|
||||||
button: ({ size, backgroundColor }) => {
|
|
||||||
const height = pickSize(size)
|
|
||||||
const shadowSize = size === 'xl' ? 3 : height / 12
|
|
||||||
const padding = size === 'xl' ? 20 : height / 2
|
|
||||||
const isGrey = backgroundColor === 'grey'
|
|
||||||
|
|
||||||
return {
|
|
||||||
extend: size === 'xl' ? h1 : h3,
|
|
||||||
border: 'none',
|
|
||||||
color: white,
|
|
||||||
cursor: 'pointer',
|
|
||||||
fontWeight: 900,
|
|
||||||
outline: 0,
|
|
||||||
backgroundColor: isGrey ? offDarkColor : secondaryColor,
|
|
||||||
'&:disabled': {
|
|
||||||
backgroundColor: disabledColor,
|
|
||||||
boxShadow: 'none',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: disabledColor,
|
|
||||||
boxShadow: 'none'
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
marginTop: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
shadowSize,
|
|
||||||
height,
|
|
||||||
padding: `0 ${padding}px`,
|
|
||||||
borderRadius: height / 4,
|
|
||||||
boxShadow: `0 ${shadowSize}px ${isGrey ? offColor : secondaryColorDark}`,
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: isGrey ? offColor : secondaryColorDark,
|
|
||||||
boxShadow: `0 ${shadowSize}px ${
|
|
||||||
isGrey ? offDarkerColor : secondaryColorDarker
|
|
||||||
}`
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
marginTop: shadowSize / 2,
|
|
||||||
backgroundColor: isGrey ? offDarkColor : secondaryColorDark,
|
|
||||||
boxShadow: `0 ${shadowSize / 2}px ${
|
|
||||||
isGrey ? offDarkerColor : secondaryColorDarker
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
|
||||||
import React, { memo } from 'react'
|
|
||||||
import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
|
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { p } = typographyStyles
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
button: {
|
|
||||||
extend: p,
|
|
||||||
border: 'none',
|
|
||||||
backgroundColor: zircon,
|
|
||||||
cursor: 'pointer',
|
|
||||||
outline: 0,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: 167,
|
|
||||||
height: 48,
|
|
||||||
color: fontColor,
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: zircon2
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
backgroundColor: comet,
|
|
||||||
color: white,
|
|
||||||
'& svg g *': {
|
|
||||||
stroke: white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& svg': {
|
|
||||||
marginRight: 8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const SimpleButton = memo(({ className, children, ...props }) => {
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button className={classnames(classes.button, className)} {...props}>
|
|
||||||
<DeleteIcon />
|
|
||||||
{children}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
export default SimpleButton
|
|
||||||
|
|
@ -1,47 +1,19 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
|
|
||||||
import baseButtonStyles from './BaseButton.styles'
|
import classes from './FeatureButton.module.css'
|
||||||
|
|
||||||
const { baseButton, primary } = baseButtonStyles
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
featureButton: {
|
|
||||||
extend: baseButton,
|
|
||||||
width: baseButton.height,
|
|
||||||
borderRadius: baseButton.height / 2,
|
|
||||||
display: 'flex',
|
|
||||||
padding: 0
|
|
||||||
},
|
|
||||||
primary,
|
|
||||||
buttonIcon: {
|
|
||||||
margin: 'auto',
|
|
||||||
'& svg': {
|
|
||||||
width: 16,
|
|
||||||
height: 16,
|
|
||||||
overflow: 'visible',
|
|
||||||
'& g': {
|
|
||||||
strokeWidth: 1.8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
buttonIconActive: {} // required to extend primary
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const FeatureButton = memo(
|
const FeatureButton = memo(
|
||||||
({ className, Icon, InverseIcon, children, ...props }) => {
|
({ className, Icon, InverseIcon, children, ...props }) => {
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const classNames = {
|
|
||||||
[classes.featureButton]: true,
|
|
||||||
[classes.primary]: true
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button className={classnames(classNames, className)} {...props}>
|
<button
|
||||||
|
className={classnames(
|
||||||
|
classes.baseButton,
|
||||||
|
classes.roundButton,
|
||||||
|
classes.primary,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}>
|
||||||
{Icon && (
|
{Icon && (
|
||||||
<div className={classes.buttonIcon}>
|
<div className={classes.buttonIcon}>
|
||||||
<Icon />
|
<Icon />
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
.baseButton {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
height: 32px;
|
||||||
|
color: var(--zodiac);
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundButton {
|
||||||
|
width: 32px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundButton .buttonIcon {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundButton .buttonIcon svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roundButton .buttonIcon svg g {
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseButton:active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
background-color: var(--zircon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:hover {
|
||||||
|
background-color: var(--zircon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary .buttonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active .buttonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:active .buttonIconActive {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover {
|
||||||
|
background-color: var(--comet2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active {
|
||||||
|
background-color: white;
|
||||||
|
color: var(--zodiac);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary .buttonIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary .buttonIconActive {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active .buttonIcon {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:active .buttonIconActive {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -1,68 +1,9 @@
|
||||||
import ClickAwayListener from '@mui/material/ClickAwayListener'
|
import ClickAwayListener from '@mui/material/ClickAwayListener'
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { useState, memo } from 'react'
|
import React, { useState, memo } from 'react'
|
||||||
import Popover from 'src/components/Popper'
|
import Popover from 'src/components/Popper'
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
import classes from './IDButton.module.css'
|
||||||
import {
|
|
||||||
subheaderColor,
|
|
||||||
subheaderDarkColor,
|
|
||||||
offColor
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { info2 } = typographyStyles
|
|
||||||
|
|
||||||
const colors = (color1, color2, color3) => {
|
|
||||||
return {
|
|
||||||
backgroundColor: color1,
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: color2
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
backgroundColor: color3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
idButton: {
|
|
||||||
width: 34,
|
|
||||||
height: 28,
|
|
||||||
display: 'flex',
|
|
||||||
borderRadius: 4,
|
|
||||||
padding: 0,
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer'
|
|
||||||
},
|
|
||||||
buttonIcon: {
|
|
||||||
margin: 'auto',
|
|
||||||
lineHeight: 1,
|
|
||||||
'& svg': {
|
|
||||||
overflow: 'visible'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closed: {
|
|
||||||
extend: colors(subheaderColor, subheaderDarkColor, offColor)
|
|
||||||
},
|
|
||||||
open: {
|
|
||||||
extend: colors(offColor, offColor, offColor)
|
|
||||||
},
|
|
||||||
popoverContent: {
|
|
||||||
extend: info2,
|
|
||||||
padding: 8,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderRadius: 4,
|
|
||||||
'& img': {
|
|
||||||
height: 145,
|
|
||||||
minWidth: 200
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const IDButton = memo(
|
const IDButton = memo(
|
||||||
({
|
({
|
||||||
|
|
@ -77,8 +18,6 @@ const IDButton = memo(
|
||||||
}) => {
|
}) => {
|
||||||
const [anchorEl, setAnchorEl] = useState(null)
|
const [anchorEl, setAnchorEl] = useState(null)
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const open = Boolean(anchorEl)
|
const open = Boolean(anchorEl)
|
||||||
const id = open ? `simple-popper-${name}` : undefined
|
const id = open ? `simple-popper-${name}` : undefined
|
||||||
|
|
||||||
|
|
|
||||||
58
new-lamassu-admin/src/components/buttons/IDButton.module.css
Normal file
58
new-lamassu-admin/src/components/buttons/IDButton.module.css
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
.idButton {
|
||||||
|
width: 34px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIcon {
|
||||||
|
margin: auto;
|
||||||
|
line-height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIcon svg {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closed {
|
||||||
|
background-color: var(--zircon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.closed:hover {
|
||||||
|
background-color: var(--zircon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.closed:active {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open {
|
||||||
|
background-color: var(--comet);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open:hover {
|
||||||
|
background-color: var(--comet2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.open:active {
|
||||||
|
background-color: var(--comet3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popoverContent {
|
||||||
|
composes: info2 from '../typography/typography.module.css';
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popoverContent img {
|
||||||
|
height: 145px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,10 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
|
|
||||||
import styles from './Link.styles'
|
import classes from './Link.module.css'
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const Link = memo(
|
const Link = memo(
|
||||||
({ submit, className, children, color = 'primary', ...props }) => {
|
({ submit, className, children, color = 'primary', ...props }) => {
|
||||||
const classes = useStyles()
|
|
||||||
const classNames = {
|
const classNames = {
|
||||||
[classes.link]: true,
|
[classes.link]: true,
|
||||||
[classes.primary]: color === 'primary',
|
[classes.primary]: color === 'primary',
|
||||||
|
|
|
||||||
47
new-lamassu-admin/src/components/buttons/Link.module.css
Normal file
47
new-lamassu-admin/src/components/buttons/Link.module.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
.link {
|
||||||
|
composes: h4 from '../typography/typography.module.css';
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: rgba(72, 246, 148, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
box-shadow: inset 0 -4px 0 0 rgba(255, 88, 74, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: rgba(255, 88, 74, 0.8);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noColor {
|
||||||
|
box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.noColor:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
box-shadow: inset 0 -4px 0 0 rgba(72, 246, 148, 0.8);
|
||||||
|
color: var(--zircon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: rgba(72, 246, 148, 0.8);
|
||||||
|
}
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import { alpha } from '@mui/material/styles'
|
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import {
|
|
||||||
white,
|
|
||||||
linkPrimaryColor,
|
|
||||||
linkSecondaryColor,
|
|
||||||
zircon
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { h4 } = typographyStyles
|
|
||||||
|
|
||||||
const color = color => ({
|
|
||||||
boxShadow: `inset 0 -4px 0 0 ${alpha(color, 0.8)}`,
|
|
||||||
'&:hover': {
|
|
||||||
boxShadow: 'none',
|
|
||||||
backgroundColor: alpha(color, 0.8)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default {
|
|
||||||
link: {
|
|
||||||
extend: h4,
|
|
||||||
textDecoration: 'none',
|
|
||||||
border: 'none',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
cursor: 'pointer',
|
|
||||||
padding: '0',
|
|
||||||
height: '100%'
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
extend: color(linkPrimaryColor)
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
extend: color(linkSecondaryColor),
|
|
||||||
'&:hover': {
|
|
||||||
color: white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
noColor: {
|
|
||||||
extend: color(white)
|
|
||||||
},
|
|
||||||
action: {
|
|
||||||
extend: color(linkPrimaryColor),
|
|
||||||
color: zircon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,9 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo, useState } from 'react'
|
import React, { memo, useState } from 'react'
|
||||||
import { H4 } from 'src/components/typography'
|
import { H4 } from 'src/components/typography'
|
||||||
import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
|
import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
|
||||||
|
|
||||||
import subpageButtonStyles from './SubpageButton.styles'
|
import classes from './SubpageButton.module.css'
|
||||||
|
|
||||||
const useStyles = makeStyles(subpageButtonStyles)
|
|
||||||
|
|
||||||
const SubpageButton = memo(
|
const SubpageButton = memo(
|
||||||
({
|
({
|
||||||
|
|
@ -19,11 +16,10 @@ const SubpageButton = memo(
|
||||||
}) => {
|
}) => {
|
||||||
const [active, setActive] = useState(false)
|
const [active, setActive] = useState(false)
|
||||||
const isActive = forceDisable ? false : active
|
const isActive = forceDisable ? false : active
|
||||||
const classes = useStyles()
|
|
||||||
const classNames = {
|
const classNames = {
|
||||||
[classes.button]: true,
|
[classes.button]: true,
|
||||||
[classes.normalButton]: !isActive,
|
[classes.normal]: !isActive,
|
||||||
[classes.activeButton]: isActive
|
[classes.active]: isActive
|
||||||
}
|
}
|
||||||
|
|
||||||
const normalButton = <Icon className={classes.buttonIcon} />
|
const normalButton = <Icon className={classes.buttonIcon} />
|
||||||
|
|
@ -36,7 +32,7 @@ const SubpageButton = memo(
|
||||||
classes.buttonIconActiveLeft
|
classes.buttonIconActiveLeft
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<H4 className={classes.white}>{children}</H4>
|
<H4 className="text-white">{children}</H4>
|
||||||
<CancelIconInverse
|
<CancelIconInverse
|
||||||
className={classnames(
|
className={classnames(
|
||||||
classes.buttonIcon,
|
classes.buttonIcon,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
.button {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0;
|
||||||
|
color: white;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: var(--zircon);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: var(--zircon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
background-color: var(--comet);
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active:hover {
|
||||||
|
background-color: var(--comet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIcon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIcon g {
|
||||||
|
stroke-width: 1.8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIconActiveLeft {
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonIconActiveRight {
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
import ActionButton from './ActionButton'
|
import ActionButton from './ActionButton'
|
||||||
import AddButton from './AddButton'
|
import AddButton from './AddButton'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import DeleteButton from './DeleteButton'
|
|
||||||
import FeatureButton from './FeatureButton'
|
import FeatureButton from './FeatureButton'
|
||||||
import IDButton from './IDButton'
|
import IDButton from './IDButton'
|
||||||
import Link from './Link'
|
import Link from './Link'
|
||||||
|
|
@ -16,6 +15,5 @@ export {
|
||||||
IDButton,
|
IDButton,
|
||||||
AddButton,
|
AddButton,
|
||||||
SupportLinkButton,
|
SupportLinkButton,
|
||||||
SubpageButton,
|
SubpageButton
|
||||||
DeleteButton
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import {
|
import {
|
||||||
add,
|
add,
|
||||||
differenceInMonths,
|
differenceInMonths,
|
||||||
|
|
@ -18,77 +17,12 @@ import React, { useState } from 'react'
|
||||||
import Arrow from 'src/styling/icons/arrow/month_change.svg?react'
|
import Arrow from 'src/styling/icons/arrow/month_change.svg?react'
|
||||||
import RightArrow from 'src/styling/icons/arrow/month_change_right.svg?react'
|
import RightArrow from 'src/styling/icons/arrow/month_change_right.svg?react'
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import { primaryColor, zircon } from 'src/styling/variables'
|
|
||||||
|
|
||||||
import Tile from './Tile'
|
import Tile from './Tile'
|
||||||
|
import classes from './Calendar.module.css'
|
||||||
const { p, label2 } = typographyStyles
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
wrapper: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
outline: 'none'
|
|
||||||
},
|
|
||||||
navbar: {
|
|
||||||
extend: p,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
padding: [[15, 15]],
|
|
||||||
color: primaryColor,
|
|
||||||
'& button': {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 0,
|
|
||||||
border: 'none',
|
|
||||||
backgroundColor: zircon,
|
|
||||||
cursor: 'pointer',
|
|
||||||
borderRadius: '50%',
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
position: 'relative',
|
|
||||||
overflow: 'hidden',
|
|
||||||
'& svg': {
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
width: '100%',
|
|
||||||
color: primaryColor,
|
|
||||||
'& tr': {
|
|
||||||
'&:first-child': {
|
|
||||||
paddingLeft: 5
|
|
||||||
},
|
|
||||||
'&:last-child': {
|
|
||||||
paddingRight: 5
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'& th, & td': {
|
|
||||||
margin: 0,
|
|
||||||
padding: [[3, 0, 3, 0]]
|
|
||||||
},
|
|
||||||
'& th': {
|
|
||||||
extend: label2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
|
const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
|
||||||
const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
|
const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const weekdays = Array.from(Array(7)).map((_, i) =>
|
const weekdays = Array.from(Array(7)).map((_, i) =>
|
||||||
format('EEEEE', add({ days: i }, startOfWeek(new Date())))
|
format('EEEEE', add({ days: i }, startOfWeek(new Date())))
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: var(--museo);
|
||||||
|
font-weight: 500;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 15px;
|
||||||
|
color: var(--zodiac);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background-color: var(--zircon);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar button svg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--zodiac);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tr:first-child {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tr:last-child {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th,
|
||||||
|
.table td {
|
||||||
|
margin: 0;
|
||||||
|
padding: 3px 0 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table th {
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--museo);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
@ -1,76 +1,15 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
import classes from './Tile.module.css'
|
||||||
import {
|
|
||||||
primaryColor,
|
|
||||||
spring2,
|
|
||||||
spring3,
|
|
||||||
disabledColor
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { label1 } = typographyStyles
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
wrapper: {
|
|
||||||
height: 26,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'relative',
|
|
||||||
overflow: 'hidden'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
outline: 'none',
|
|
||||||
extend: label1,
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
color: primaryColor,
|
|
||||||
zIndex: 2
|
|
||||||
},
|
|
||||||
lowerBound: {
|
|
||||||
left: '50%'
|
|
||||||
},
|
|
||||||
upperBound: {
|
|
||||||
right: '50%'
|
|
||||||
},
|
|
||||||
selected: {
|
|
||||||
width: 26,
|
|
||||||
height: 26,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
backgroundColor: spring2,
|
|
||||||
borderRadius: '50%',
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: 1
|
|
||||||
},
|
|
||||||
between: {
|
|
||||||
position: 'absolute',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
zIndex: 0,
|
|
||||||
backgroundColor: spring3
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
color: disabledColor,
|
|
||||||
cursor: 'default'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const Tile = ({
|
const Tile = ({
|
||||||
isLowerBound,
|
isLowerBound,
|
||||||
isUpperBound,
|
isUpperBound,
|
||||||
isBetween,
|
isBetween,
|
||||||
isDisabled,
|
isDisabled,
|
||||||
children,
|
children
|
||||||
...props
|
|
||||||
}) => {
|
}) => {
|
||||||
const classes = useStyles()
|
|
||||||
const selected = isLowerBound || isUpperBound
|
const selected = isLowerBound || isUpperBound
|
||||||
|
|
||||||
const rangeClasses = {
|
const rangeClasses = {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
.wrapper {
|
||||||
|
height: 26px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
outline: none;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: var(--museo);
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--zodiac);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lowerBound {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upperBound {
|
||||||
|
right: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--spring2);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.between {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
background-color: var(--spring3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: var(--dust);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import Switch from '@mui/material/Switch'
|
import Switch from '@mui/material/Switch'
|
||||||
import IconButton from '@mui/material/IconButton'
|
import IconButton from '@mui/material/IconButton'
|
||||||
import SvgIcon from '@mui/material/SvgIcon'
|
import SvgIcon from '@mui/material/SvgIcon'
|
||||||
|
|
@ -18,12 +17,9 @@ import StripesSvg from 'src/styling/icons/stripes.svg?react'
|
||||||
import { Link } from 'src/components/buttons'
|
import { Link } from 'src/components/buttons'
|
||||||
|
|
||||||
import TableCtx from './Context'
|
import TableCtx from './Context'
|
||||||
import styles from './Row.styles'
|
import moduleStyles from './Row.module.css'
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const ActionCol = ({ disabled, editing }) => {
|
const ActionCol = ({ disabled, editing }) => {
|
||||||
const classes = useStyles()
|
|
||||||
const { values, submitForm, resetForm } = useFormikContext()
|
const { values, submitForm, resetForm } = useFormikContext()
|
||||||
const {
|
const {
|
||||||
editWidth,
|
editWidth,
|
||||||
|
|
@ -61,7 +57,7 @@ const ActionCol = ({ disabled, editing }) => {
|
||||||
{editing && (
|
{editing && (
|
||||||
<Td textAlign="center" width={actionColSize}>
|
<Td textAlign="center" width={actionColSize}>
|
||||||
<Link
|
<Link
|
||||||
className={classes.saveButton}
|
className={moduleStyles.saveButton}
|
||||||
type="submit"
|
type="submit"
|
||||||
color="primary"
|
color="primary"
|
||||||
onClick={submitForm}>
|
onClick={submitForm}>
|
||||||
|
|
@ -78,8 +74,8 @@ const ActionCol = ({ disabled, editing }) => {
|
||||||
<Td textAlign="center" width={editWidth}>
|
<Td textAlign="center" width={editWidth}>
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={disableEdit}
|
disabled={disableEdit}
|
||||||
className={classes.editButton}
|
onClick={() => onEdit && onEdit(values.id)}
|
||||||
onClick={() => onEdit && onEdit(values.id)}>
|
size="small">
|
||||||
<SvgIcon>
|
<SvgIcon>
|
||||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||||
</SvgIcon>
|
</SvgIcon>
|
||||||
|
|
@ -92,7 +88,8 @@ const ActionCol = ({ disabled, editing }) => {
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setDeleteDialog(true)
|
setDeleteDialog(true)
|
||||||
}}>
|
}}
|
||||||
|
size="small">
|
||||||
<SvgIcon>
|
<SvgIcon>
|
||||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||||
</SvgIcon>
|
</SvgIcon>
|
||||||
|
|
@ -155,11 +152,6 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||||
const isEditing = editing && isEditable(editable)
|
const isEditing = editing && isEditable(editable)
|
||||||
const isField = !bypassField
|
const isField = !bypassField
|
||||||
|
|
||||||
const classes = useStyles({
|
|
||||||
textAlign: isEditing ? editingAlign : textAlign,
|
|
||||||
size
|
|
||||||
})
|
|
||||||
|
|
||||||
const innerProps = {
|
const innerProps = {
|
||||||
fullWidth: true,
|
fullWidth: true,
|
||||||
autoFocus: focus,
|
autoFocus: focus,
|
||||||
|
|
@ -169,16 +161,20 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||||
...inputProps
|
...inputProps
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const newAlign = isEditing ? editingAlign : textAlign
|
||||||
|
const justifyContent = newAlign === 'right' ? 'flex-end' : newAlign
|
||||||
|
const style = suffix || prefix ? { justifyContent } : {}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.fields}>
|
<div className={moduleStyles.fields}>
|
||||||
{fields.map((f, idx) => (
|
{fields.map((f, idx) => (
|
||||||
<Td
|
<Td
|
||||||
|
style={style}
|
||||||
key={idx}
|
key={idx}
|
||||||
className={{
|
className={{
|
||||||
[classes.extraPaddingRight]: extraPaddingRight,
|
[moduleStyles.extraPaddingRight]: extraPaddingRight,
|
||||||
[classes.extraPadding]: extraPadding,
|
[moduleStyles.extraPadding]: extraPadding,
|
||||||
[classes.withSuffix]: suffix,
|
'flex items-center': suffix || prefix
|
||||||
[classes.withPrefix]: prefix
|
|
||||||
}}
|
}}
|
||||||
width={width}
|
width={width}
|
||||||
size={size}
|
size={size}
|
||||||
|
|
@ -186,7 +182,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||||
textAlign={textAlign}>
|
textAlign={textAlign}>
|
||||||
{prefix && !isHidden(values) && (
|
{prefix && !isHidden(values) && (
|
||||||
<PrefixComponent
|
<PrefixComponent
|
||||||
className={classes.prefix}
|
className={moduleStyles.prefix}
|
||||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||||
{typeof prefix === 'function' ? prefix(f) : prefix}
|
{typeof prefix === 'function' ? prefix(f) : prefix}
|
||||||
</PrefixComponent>
|
</PrefixComponent>
|
||||||
|
|
@ -204,7 +200,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
||||||
)}
|
)}
|
||||||
{suffix && !isHidden(values) && (
|
{suffix && !isHidden(values) && (
|
||||||
<SuffixComponent
|
<SuffixComponent
|
||||||
className={classes.suffix}
|
className={moduleStyles.suffix}
|
||||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||||
{suffix}
|
{suffix}
|
||||||
</SuffixComponent>
|
</SuffixComponent>
|
||||||
|
|
@ -245,8 +241,6 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
|
||||||
stripeWhen
|
stripeWhen
|
||||||
} = useContext(TableCtx)
|
} = useContext(TableCtx)
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
|
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
|
||||||
|
|
||||||
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
||||||
|
|
@ -265,7 +259,7 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
|
||||||
)
|
)
|
||||||
|
|
||||||
const classNames = {
|
const classNames = {
|
||||||
[classes.lastOfGroup]: lastOfGroup
|
[moduleStyles.lastOfGroup]: lastOfGroup
|
||||||
}
|
}
|
||||||
|
|
||||||
const touchedErrors = R.pick(R.keys(touched), errors)
|
const touchedErrors = R.pick(R.keys(touched), errors)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
.saveButton {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lastOfGroup {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extraPadding {
|
||||||
|
padding-left: 35px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extraPaddingRight {
|
||||||
|
padding-right: 39px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suffix {
|
||||||
|
margin: 0 0 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefix {
|
||||||
|
margin: 0 7px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import { bySize, bold } from 'src/styling/helpers'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
saveButton: {
|
|
||||||
marginRight: 20
|
|
||||||
},
|
|
||||||
lastOfGroup: {
|
|
||||||
marginBottom: 24
|
|
||||||
},
|
|
||||||
extraPadding: {
|
|
||||||
paddingLeft: 35,
|
|
||||||
paddingRight: 30
|
|
||||||
},
|
|
||||||
extraPaddingRight: {
|
|
||||||
paddingRight: 39
|
|
||||||
},
|
|
||||||
withSuffix: ({ textAlign }) => {
|
|
||||||
const justifyContent = textAlign === 'right' ? 'flex-end' : textAlign
|
|
||||||
return {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent
|
|
||||||
}
|
|
||||||
},
|
|
||||||
suffix: {
|
|
||||||
margin: [[0, 0, 0, 7]]
|
|
||||||
},
|
|
||||||
withPrefix: ({ textAlign }) => {
|
|
||||||
const justifyContent = textAlign === 'right' ? 'flex-end' : textAlign
|
|
||||||
return {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent
|
|
||||||
}
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
margin: [[0, 7, 0, 0]]
|
|
||||||
},
|
|
||||||
size: ({ size }) => bySize(size),
|
|
||||||
bold,
|
|
||||||
fields: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import { Form, Formik } from 'formik'
|
import { Form, Formik } from 'formik'
|
||||||
import * as R from 'ramda'
|
import * as R from 'ramda'
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
|
|
@ -13,13 +12,11 @@ import { AddButton } from 'src/components/buttons/index'
|
||||||
import TableCtx from './Context'
|
import TableCtx from './Context'
|
||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
import ERow from './Row'
|
import ERow from './Row'
|
||||||
import styles from './Table.styles'
|
import classes from './Table.module.css'
|
||||||
|
|
||||||
const ACTION_COL_SIZE = 87
|
const ACTION_COL_SIZE = 87
|
||||||
const DEFAULT_COL_SIZE = 100
|
const DEFAULT_COL_SIZE = 100
|
||||||
|
|
||||||
const useStyles = makeStyles(styles)
|
|
||||||
|
|
||||||
const getWidth = R.compose(
|
const getWidth = R.compose(
|
||||||
R.reduce(R.add)(0),
|
R.reduce(R.add)(0),
|
||||||
R.map(it => it.width ?? DEFAULT_COL_SIZE)
|
R.map(it => it.width ?? DEFAULT_COL_SIZE)
|
||||||
|
|
@ -129,8 +126,6 @@ const ETable = ({
|
||||||
|
|
||||||
const width = getWidth(elements) + actionColSize
|
const width = getWidth(elements) + actionColSize
|
||||||
|
|
||||||
const classes = useStyles({ width })
|
|
||||||
|
|
||||||
const showButtonOnEmpty = !data.length && enableCreate && !adding
|
const showButtonOnEmpty = !data.length && enableCreate && !adding
|
||||||
const canAdd = !forceDisable && !editingId && !disableAdd && !adding
|
const canAdd = !forceDisable && !editingId && !disableAdd && !adding
|
||||||
const showTable = adding || data.length !== 0
|
const showTable = adding || data.length !== 0
|
||||||
|
|
@ -162,7 +157,7 @@ const ETable = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableCtx.Provider value={ctxValue}>
|
<TableCtx.Provider value={ctxValue}>
|
||||||
<div className={classes.wrapper}>
|
<div style={{ width }}>
|
||||||
{showButtonOnEmpty && canAdd && (
|
{showButtonOnEmpty && canAdd && (
|
||||||
<AddButton onClick={addField}>{createText}</AddButton>
|
<AddButton onClick={addField}>{createText}</AddButton>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
.addLink {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--comet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outerHeader {
|
||||||
|
min-height: 16px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { offColor } from 'src/styling/variables'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
wrapper: ({ width }) => ({
|
|
||||||
width: width
|
|
||||||
}),
|
|
||||||
addLink: {
|
|
||||||
marginLeft: 'auto'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
margin: 0,
|
|
||||||
color: offColor
|
|
||||||
},
|
|
||||||
outerHeader: {
|
|
||||||
minHeight: 16,
|
|
||||||
marginBottom: 24,
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -27,6 +27,7 @@ const TBody = ({ children, className }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Td = ({
|
const Td = ({
|
||||||
|
style = {},
|
||||||
children,
|
children,
|
||||||
header,
|
header,
|
||||||
className,
|
className,
|
||||||
|
|
@ -37,17 +38,17 @@ const Td = ({
|
||||||
action
|
action
|
||||||
}) => {
|
}) => {
|
||||||
const inlineStyle = {
|
const inlineStyle = {
|
||||||
|
...style,
|
||||||
width,
|
width,
|
||||||
textAlign
|
textAlign,
|
||||||
|
fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const cssClasses = {
|
const cssClasses = {
|
||||||
[styles.td]: !header,
|
[styles.td]: !header,
|
||||||
[styles.tdHeader]: header,
|
[styles.tdHeader]: header,
|
||||||
[styles.bold]: !header && bold,
|
'font-bold': !header && (bold || size === 'lg'),
|
||||||
[styles.actionCol]: action,
|
[styles.actionCol]: action
|
||||||
[styles.sizeSm]: !header && size === 'sm',
|
|
||||||
[styles.sizeLg]: !header && size === 'lg'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -73,7 +74,7 @@ const ThDoubleLevel = ({ title, children, className, width }) => {
|
||||||
<div
|
<div
|
||||||
className={classnames(className, styles.thDoubleLevel)}
|
className={classnames(className, styles.thDoubleLevel)}
|
||||||
style={{ width }}>
|
style={{ width }}>
|
||||||
<div>{title}</div>
|
<div className={styles.thDoubleLevelFirst}>{title}</div>
|
||||||
<div>{children}</div>
|
<div>{children}</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -89,6 +90,9 @@ const Tr = ({
|
||||||
size,
|
size,
|
||||||
newRow
|
newRow
|
||||||
}) => {
|
}) => {
|
||||||
|
const inlineStyle = {
|
||||||
|
minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px'
|
||||||
|
}
|
||||||
const cardClasses = {
|
const cardClasses = {
|
||||||
[styles.card]: true,
|
[styles.card]: true,
|
||||||
[styles.trError]: error,
|
[styles.trError]: error,
|
||||||
|
|
@ -105,7 +109,9 @@ const Tr = ({
|
||||||
<>
|
<>
|
||||||
<Card className={classnames(className, cardClasses)} onClick={onClick}>
|
<Card className={classnames(className, cardClasses)} onClick={onClick}>
|
||||||
<CardContent className={styles.cardContentRoot}>
|
<CardContent className={styles.cardContentRoot}>
|
||||||
<div className={classnames(mainContentClasses)}>{children}</div>
|
<div className={classnames(mainContentClasses)} style={inlineStyle}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
{error && shouldShowError && (
|
{error && shouldShowError && (
|
||||||
<div className={styles.errorContent}>{errorMessage}</div>
|
<div className={styles.errorContent}>{errorMessage}</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,33 @@
|
||||||
.bold {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
composes: tl2 from '../typography/typography.module.css';
|
||||||
background-color: var(--zodiac);
|
background-color: var(--zodiac);
|
||||||
height: 32px;
|
height: 32px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.doubleHeader {
|
.doubleHeader {
|
||||||
|
composes: tl2 from '../typography/typography.module.css';
|
||||||
background-color: var(--zodiac);
|
background-color: var(--zodiac);
|
||||||
height: 64px;
|
height: 64px;
|
||||||
color: white;
|
color: white;
|
||||||
display: table-row;
|
display: table-row;
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.thDoubleLevel {
|
.thDoubleLevel {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thDoubleLevel > :first-child {
|
.thDoubleLevelFirst {
|
||||||
|
composes: label1 from '../typography/typography.module.css';
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
font-size: 13px;
|
font-weight: 700;
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--zodiac);
|
background-color: var(--comet);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 0 0 8px 8px;
|
border-radius: 0 0 8px 8px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
|
|
@ -84,7 +78,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
font-size: 14px;
|
composes: p from '../typography/typography.module.css';
|
||||||
margin: 4px 0 0 0;
|
margin: 4px 0 0 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
|
||||||
|
|
|
||||||
|
|
@ -27,14 +27,17 @@ const TextInput = memo(
|
||||||
const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
|
const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
|
||||||
const filled = isPasswordFilled || isTextFilled
|
const filled = isPasswordFilled || isTextFilled
|
||||||
|
|
||||||
// Set CSS variables for dynamic styles
|
const style = {
|
||||||
const rootStyle = {
|
width: width,
|
||||||
'--input-width': width,
|
textAlign: textAlign
|
||||||
'--input-text-align': textAlign
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine size class based on size prop
|
const sizeClass =
|
||||||
const sizeClass = size === 'sm' ? styles.sizeSm : size === 'lg' ? styles.sizeLg : styles.size
|
size === 'sm'
|
||||||
|
? styles.sizeSm
|
||||||
|
: size === 'lg'
|
||||||
|
? styles.sizeLg
|
||||||
|
: styles.size
|
||||||
|
|
||||||
const divClass = {
|
const divClass = {
|
||||||
[styles.bold]: bold
|
[styles.bold]: bold
|
||||||
|
|
@ -48,9 +51,9 @@ const TextInput = memo(
|
||||||
onBlur={onBlur}
|
onBlur={onBlur}
|
||||||
error={error}
|
error={error}
|
||||||
value={value}
|
value={value}
|
||||||
classes={{ root: styles.root }}
|
|
||||||
className={className}
|
className={className}
|
||||||
style={rootStyle}
|
style={style}
|
||||||
|
inputProps={{ style: { textAlign } }}
|
||||||
InputProps={{
|
InputProps={{
|
||||||
className: classnames(divClass),
|
className: classnames(divClass),
|
||||||
classes: {
|
classes: {
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,21 @@
|
||||||
.size {
|
.size {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-size: var(--input-font-size, 16px);
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sizeSm {
|
.sizeSm {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-size: var(--input-font-size-sm, 14px);
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sizeLg {
|
.sizeLg {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: var(--input-font-size-lg, 24px);
|
font-size: 24px;
|
||||||
font-weight: var(--input-font-weight-bold, 700);
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: var(--input-font-weight-bold, 700);
|
font-weight: 700;
|
||||||
}
|
|
||||||
|
|
||||||
.root {
|
|
||||||
width: var(--input-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.root input {
|
|
||||||
text-align: var(--input-text-align, left);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.underline:before {
|
.underline:before {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import Chip from '@mui/material/Chip'
|
import Chip from '@mui/material/Chip'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
@ -6,49 +5,55 @@ import { Info2, Label1, Label2 } from 'src/components/typography'
|
||||||
|
|
||||||
import { numberToFiatAmount } from 'src/utils/number'
|
import { numberToFiatAmount } from 'src/utils/number'
|
||||||
|
|
||||||
import { cashboxStyles, gridStyles } from './Cashbox.styles'
|
import classes from './Cashbox.module.css'
|
||||||
|
import { primaryColor as zodiac, tomato } from '../../../styling/variables.js'
|
||||||
|
|
||||||
const cashboxClasses = makeStyles(cashboxStyles)
|
const colors = {
|
||||||
const gridClasses = makeStyles(gridStyles)
|
cashOut: {
|
||||||
|
empty: tomato,
|
||||||
|
full: zodiac
|
||||||
|
},
|
||||||
|
cashIn: {
|
||||||
|
empty: zodiac,
|
||||||
|
full: tomato
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const Cashbox = ({
|
const Cashbox = ({
|
||||||
percent = 0,
|
percent = 0,
|
||||||
cashOut = false,
|
cashOut = false,
|
||||||
width,
|
width = 80,
|
||||||
height,
|
height = 118,
|
||||||
className,
|
className,
|
||||||
emptyPartClassName,
|
emptyPartClassName,
|
||||||
labelClassName,
|
labelClassName,
|
||||||
applyColorVariant,
|
|
||||||
applyFiatBalanceAlertsStyling,
|
|
||||||
omitInnerPercentage,
|
omitInnerPercentage,
|
||||||
isLow
|
isLow
|
||||||
}) => {
|
}) => {
|
||||||
const classes = cashboxClasses({
|
|
||||||
percent,
|
|
||||||
cashOut,
|
|
||||||
width,
|
|
||||||
height,
|
|
||||||
applyColorVariant,
|
|
||||||
isLow
|
|
||||||
})
|
|
||||||
const ltHalf = percent <= 51
|
const ltHalf = percent <= 51
|
||||||
|
const color =
|
||||||
const showCashBox = {
|
colors[cashOut ? 'cashOut' : 'cashIn'][!isLow ? 'full' : 'empty']
|
||||||
[classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
|
|
||||||
[classes.cashbox]: !applyFiatBalanceAlertsStyling
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classnames(className, showCashBox)}>
|
<div
|
||||||
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
|
style={{ height, width, backgroundColor: color, borderColor: color }}
|
||||||
|
className={classnames(className, classes.cashbox)}>
|
||||||
|
<div
|
||||||
|
className={classnames(emptyPartClassName, classes.emptyPart)}
|
||||||
|
style={{ height: `${100 - percent}%` }}>
|
||||||
{!omitInnerPercentage && ltHalf && (
|
{!omitInnerPercentage && ltHalf && (
|
||||||
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
<Label2
|
||||||
|
style={{ color }}
|
||||||
|
className={classnames(labelClassName, classes.emptyPartP)}>
|
||||||
|
{percent.toFixed(0)}%
|
||||||
|
</Label2>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.fullPart}>
|
<div style={{ backgroundColor: color }}>
|
||||||
{!omitInnerPercentage && !ltHalf && (
|
{!omitInnerPercentage && !ltHalf && (
|
||||||
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
<Label2 className={classnames(classes.fullPartP, labelClassName)}>
|
||||||
|
{percent.toFixed(0)}%
|
||||||
|
</Label2>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -71,7 +76,6 @@ const CashIn = ({
|
||||||
}) => {
|
}) => {
|
||||||
const percent = (100 * notes) / capacity
|
const percent = (100 * notes) / capacity
|
||||||
const isLow = percent < threshold
|
const isLow = percent < threshold
|
||||||
const classes = gridClasses()
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={classes.row}>
|
<div className={classes.row}>
|
||||||
|
|
@ -117,7 +121,6 @@ const CashOut = ({
|
||||||
}) => {
|
}) => {
|
||||||
const percent = (100 * notes) / capacity
|
const percent = (100 * notes) / capacity
|
||||||
const isLow = percent < threshold
|
const isLow = percent < threshold
|
||||||
const classes = gridClasses()
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={classes.row}>
|
<div className={classes.row}>
|
||||||
|
|
@ -160,7 +163,6 @@ const CashOutLite = ({
|
||||||
}) => {
|
}) => {
|
||||||
const percent = (100 * notes) / capacity
|
const percent = (100 * notes) / capacity
|
||||||
const isLow = percent < threshold
|
const isLow = percent < threshold
|
||||||
const classes = gridClasses()
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.col}>
|
<div className={classes.col}>
|
||||||
<Cashbox
|
<Cashbox
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.innerRow {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col2 {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noMarginText {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullPartP {
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyPart {
|
||||||
|
background-color: var(--ghost);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emptyPartP {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
margin: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cashbox {
|
||||||
|
border: 2px solid;
|
||||||
|
text-align: end;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
import { spacer, tomato, primaryColor as zodiac } from 'src/styling/variables'
|
|
||||||
|
|
||||||
const colors = {
|
|
||||||
cashOut: {
|
|
||||||
empty: tomato,
|
|
||||||
full: zodiac
|
|
||||||
},
|
|
||||||
cashIn: {
|
|
||||||
empty: zodiac,
|
|
||||||
full: tomato
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const colorPicker = ({ cashOut, applyColorVariant, isLow }) => {
|
|
||||||
return colors[cashOut ? 'cashOut' : 'cashIn'][
|
|
||||||
applyColorVariant || !isLow ? 'full' : 'empty'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const cashboxStyles = {
|
|
||||||
cashbox: {
|
|
||||||
borderColor: colorPicker,
|
|
||||||
backgroundColor: colorPicker,
|
|
||||||
height: ({ height }) => height ?? 118,
|
|
||||||
width: ({ width }) => width ?? 80,
|
|
||||||
border: '2px solid',
|
|
||||||
textAlign: 'end',
|
|
||||||
display: 'inline-block'
|
|
||||||
},
|
|
||||||
fiatBalanceAlertCashbox: {
|
|
||||||
borderColor: colorPicker,
|
|
||||||
backgroundColor: colorPicker,
|
|
||||||
height: 118,
|
|
||||||
width: 80,
|
|
||||||
border: '4px solid'
|
|
||||||
},
|
|
||||||
emptyPart: {
|
|
||||||
backgroundColor: 'var(--ghost)',
|
|
||||||
height: ({ percent }) => `${100 - percent}%`,
|
|
||||||
position: 'relative',
|
|
||||||
'& > p': {
|
|
||||||
color: colorPicker,
|
|
||||||
display: 'inline-block',
|
|
||||||
position: 'absolute',
|
|
||||||
margin: 0,
|
|
||||||
bottom: 0,
|
|
||||||
right: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fullPart: {
|
|
||||||
backgroundColor: colorPicker,
|
|
||||||
'& > p': {
|
|
||||||
color: 'white',
|
|
||||||
display: 'inline'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const gridStyles = {
|
|
||||||
row: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
col: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
innerRow: {
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'flex-start'
|
|
||||||
},
|
|
||||||
col2: {
|
|
||||||
marginLeft: 14
|
|
||||||
},
|
|
||||||
noMarginText: {
|
|
||||||
marginTop: 0,
|
|
||||||
marginBottom: 0
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
marginTop: spacer
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { cashboxStyles, gridStyles }
|
|
||||||
|
|
@ -1,36 +1,10 @@
|
||||||
import { makeStyles } from '@mui/styles'
|
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import React, { memo } from 'react'
|
import React, { memo } from 'react'
|
||||||
|
|
||||||
import typographyStyles from 'src/components/typography/styles'
|
|
||||||
import {
|
|
||||||
tableHeaderColor,
|
|
||||||
tableHeaderHeight,
|
|
||||||
spacer,
|
|
||||||
white
|
|
||||||
} from 'src/styling/variables'
|
|
||||||
|
|
||||||
const { tl2 } = typographyStyles
|
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
|
||||||
th: {
|
|
||||||
extend: tl2,
|
|
||||||
backgroundColor: tableHeaderColor,
|
|
||||||
height: tableHeaderHeight,
|
|
||||||
textAlign: 'left',
|
|
||||||
color: white,
|
|
||||||
padding: `0 ${spacer * 3}px`
|
|
||||||
},
|
|
||||||
alignRight: {
|
|
||||||
textAlign: 'right'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const TableHeaderCell = memo(
|
const TableHeaderCell = memo(
|
||||||
({ rightAlign, children, className, ...props }) => {
|
({ rightAlign, children, className, ...props }) => {
|
||||||
const classes = useStyles()
|
|
||||||
const styles = {
|
const styles = {
|
||||||
'bg-zodiac text-white py-0 px-6 h-8 font-': true,
|
'bg-zodiac text-white py-0 px-6 h-8 text-sm text-left': true,
|
||||||
'text-right': rightAlign
|
'text-right': rightAlign
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -111,12 +111,6 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
|
||||||
<Info3>{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}</Info3>
|
<Info3>{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}</Info3>
|
||||||
<Info2>{`Don't enable this if you want users to be able to scan an address of their choosing.`}</Info2>
|
<Info2>{`Don't enable this if you want users to be able to scan an address of their choosing.`}</Info2>
|
||||||
<div className="flex justify-end mt-8">
|
<div className="flex justify-end mt-8">
|
||||||
<Button
|
|
||||||
backgroundColor="grey"
|
|
||||||
className="mr-2 p-0"
|
|
||||||
onClick={() => onDissmised()}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => onConfirmed(true)}>Confirm</Button>
|
<Button onClick={() => onConfirmed(true)}>Confirm</Button>
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
|
||||||
|
|
@ -755,9 +755,6 @@ const RetrieveDataDialog = ({
|
||||||
</ErrorMessage>
|
</ErrorMessage>
|
||||||
)}
|
)}
|
||||||
<DialogActions className="p-8 pt-4 gap-2">
|
<DialogActions className="p-8 pt-4 gap-2">
|
||||||
<Button backgroundColor="grey" onClick={() => onDismissed(false)}>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onConfirmed()
|
onConfirmed()
|
||||||
|
|
|
||||||
|
|
@ -126,8 +126,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
||||||
values[`fillingPercentageCassette${it + 1}`] ??
|
values[`fillingPercentageCassette${it + 1}`] ??
|
||||||
data[`cassette${it + 1}`]
|
data[`cassette${it + 1}`]
|
||||||
}
|
}
|
||||||
applyColorVariant
|
isLow={false}
|
||||||
applyFiatBalanceAlertsStyling
|
className="border-4 inline-block"
|
||||||
omitInnerPercentage
|
omitInnerPercentage
|
||||||
cashOut
|
cashOut
|
||||||
/>
|
/>
|
||||||
|
|
@ -168,8 +168,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
||||||
`fillingPercentageRecycler${(it + 1) * 2 - 1}`
|
`fillingPercentageRecycler${(it + 1) * 2 - 1}`
|
||||||
] ?? data[`recycler${(it + 1) * 2 - 1}`]
|
] ?? data[`recycler${(it + 1) * 2 - 1}`]
|
||||||
}
|
}
|
||||||
applyColorVariant
|
isLow={false}
|
||||||
applyFiatBalanceAlertsStyling
|
className="border-4 inline-block"
|
||||||
omitInnerPercentage
|
omitInnerPercentage
|
||||||
cashOut
|
cashOut
|
||||||
/>
|
/>
|
||||||
|
|
@ -193,8 +193,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
||||||
values[`fillingPercentageRecycler${(it + 1) * 2}`] ??
|
values[`fillingPercentageRecycler${(it + 1) * 2}`] ??
|
||||||
data[`recycler${(it + 1) * 2}`]
|
data[`recycler${(it + 1) * 2}`]
|
||||||
}
|
}
|
||||||
applyColorVariant
|
isLow={false}
|
||||||
applyFiatBalanceAlertsStyling
|
className="border-4 inline-block"
|
||||||
omitInnerPercentage
|
omitInnerPercentage
|
||||||
cashOut
|
cashOut
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue