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",
|
||||
"@mui/icons-material": "^5.17.1",
|
||||
"@mui/material": "^5.17.1",
|
||||
"@mui/styles": "^5.17.1",
|
||||
"@simplewebauthn/browser": "^3.0.0",
|
||||
"apollo-upload-client": "^18.0.0",
|
||||
"bignumber.js": "9.0.0",
|
||||
|
|
@ -503,12 +502,6 @@
|
|||
"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": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
|
||||
|
|
@ -528,6 +521,12 @@
|
|||
"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": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
|
||||
|
|
@ -580,18 +579,6 @@
|
|||
"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": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
|
||||
|
|
@ -1491,18 +1478,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": {
|
||||
"version": "5.17.1",
|
||||
"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": {
|
||||
"version": "5.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.17.1.tgz",
|
||||
|
|
@ -1680,12 +1586,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": {
|
||||
"version": "7.2.24",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
|
||||
|
|
@ -1739,12 +1639,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": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||
|
|
@ -3177,13 +3071,6 @@
|
|||
"@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": {
|
||||
"version": "0.16.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||
|
|
@ -4281,15 +4168,11 @@
|
|||
"integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-vendor": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
"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/d3": {
|
||||
"version": "6.7.0",
|
||||
|
|
@ -4791,12 +4674,6 @@
|
|||
"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": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
|
||||
|
|
@ -6162,12 +6039,6 @@
|
|||
"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": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
@ -6851,27 +6722,6 @@
|
|||
"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": {
|
||||
"version": "10.10.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz",
|
||||
|
|
@ -6883,65 +6733,6 @@
|
|||
"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": {
|
||||
"version": "3.3.5",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"@lamassu/coins": "v1.6.1",
|
||||
"@mui/icons-material": "^5.17.1",
|
||||
"@mui/material": "^5.17.1",
|
||||
"@mui/styles": "^5.17.1",
|
||||
"@simplewebauthn/browser": "^3.0.0",
|
||||
"apollo-upload-client": "^18.0.0",
|
||||
"bignumber.js": "9.0.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import CssBaseline from '@mui/material/CssBaseline'
|
||||
import { StylesProvider, jssPreset } from '@mui/styles'
|
||||
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
|
||||
import { create } from 'jss'
|
||||
import extendJss from 'jss-plugin-extend'
|
||||
import React, { useState } from 'react'
|
||||
import { BrowserRouter as Router } from 'react-router-dom'
|
||||
import ApolloProvider from 'src/utils/apollo'
|
||||
|
|
@ -13,10 +10,6 @@ import theme from 'src/styling/theme'
|
|||
import Main from './Main'
|
||||
import './styling/global/global.css'
|
||||
|
||||
const jss = create({
|
||||
plugins: [extendJss(), ...jssPreset().plugins]
|
||||
})
|
||||
|
||||
const App = () => {
|
||||
const [wizardTested, setWizardTested] = useState(false)
|
||||
const [userData, setUserData] = useState(null)
|
||||
|
|
@ -32,14 +25,12 @@ const App = () => {
|
|||
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
|
||||
<Router>
|
||||
<ApolloProvider>
|
||||
<StylesProvider jss={jss}>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Main />
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</StylesProvider>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Main />
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</ApolloProvider>
|
||||
</Router>
|
||||
</AppContext.Provider>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,31 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo } from 'react'
|
||||
|
||||
import styles from './ActionButton.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
import moduleStyles from './ActionButton.module.css'
|
||||
|
||||
const ActionButton = memo(
|
||||
({ className, Icon, InverseIcon, color, center, children, ...props }) => {
|
||||
const classes = useStyles()
|
||||
const classNames = {
|
||||
[classes.actionButton]: true,
|
||||
[classes.primary]: color === 'primary',
|
||||
[classes.secondary]: color === 'secondary',
|
||||
[classes.spring]: color === 'spring',
|
||||
[classes.tomato]: color === 'tomato',
|
||||
[classes.center]: center
|
||||
[moduleStyles.actionButton]: true,
|
||||
[moduleStyles.primary]: color === 'primary',
|
||||
[moduleStyles.secondary]: color === 'secondary',
|
||||
[moduleStyles.spring]: color === 'spring',
|
||||
[moduleStyles.tomato]: color === 'tomato',
|
||||
[moduleStyles.center]: center
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={classnames(classNames, className)} {...props}>
|
||||
{Icon && (
|
||||
<div className={classes.actionButtonIcon}>
|
||||
<div className={moduleStyles.actionButtonIcon}>
|
||||
<Icon />
|
||||
</div>
|
||||
)}
|
||||
{InverseIcon && (
|
||||
<div
|
||||
className={classnames(
|
||||
classes.actionButtonIcon,
|
||||
classes.actionButtonIconActive
|
||||
moduleStyles.actionButtonIcon,
|
||||
moduleStyles.actionButtonIconActive
|
||||
)}>
|
||||
<InverseIcon />
|
||||
</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 React, { memo } from 'react'
|
||||
import AddIcon from 'src/styling/icons/button/add/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)
|
||||
import classes from './AddButton.module.css'
|
||||
|
||||
const SimpleButton = memo(({ className, children, ...props }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<button className={classnames(classes.button, className)} {...props}>
|
||||
<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 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(
|
||||
({
|
||||
size = 'lg',
|
||||
children,
|
||||
className,
|
||||
buttonClassName,
|
||||
backgroundColor,
|
||||
...props
|
||||
}) => {
|
||||
const classes = useStyles({ size, backgroundColor })
|
||||
({ size = 'lg', children, className, buttonClassName, ...props }) => {
|
||||
const height = pickSize(size)
|
||||
|
||||
return (
|
||||
<div className={classnames(className, classes.wrapper)}>
|
||||
<div className={className} style={{ height: height + height / 12 }}>
|
||||
<button
|
||||
className={classnames(buttonClassName, classes.button)}
|
||||
className={classnames(
|
||||
buttonClassName,
|
||||
moduleStyles.button,
|
||||
'text-white',
|
||||
{
|
||||
[moduleStyles.buttonSm]: size === 'sm',
|
||||
[moduleStyles.buttonXl]: size === 'xl'
|
||||
}
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
</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 React, { memo } from 'react'
|
||||
|
||||
import baseButtonStyles from './BaseButton.styles'
|
||||
|
||||
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)
|
||||
import classes from './FeatureButton.module.css'
|
||||
|
||||
const FeatureButton = memo(
|
||||
({ className, Icon, InverseIcon, children, ...props }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
const classNames = {
|
||||
[classes.featureButton]: true,
|
||||
[classes.primary]: true
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={classnames(classNames, className)} {...props}>
|
||||
<button
|
||||
className={classnames(
|
||||
classes.baseButton,
|
||||
classes.roundButton,
|
||||
classes.primary,
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{Icon && (
|
||||
<div className={classes.buttonIcon}>
|
||||
<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 { makeStyles } from '@mui/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { useState, memo } from 'react'
|
||||
import Popover from 'src/components/Popper'
|
||||
|
||||
import typographyStyles from 'src/components/typography/styles'
|
||||
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)
|
||||
import classes from './IDButton.module.css'
|
||||
|
||||
const IDButton = memo(
|
||||
({
|
||||
|
|
@ -77,8 +18,6 @@ const IDButton = memo(
|
|||
}) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const open = Boolean(anchorEl)
|
||||
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 React, { memo } from 'react'
|
||||
|
||||
import styles from './Link.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
import classes from './Link.module.css'
|
||||
|
||||
const Link = memo(
|
||||
({ submit, className, children, color = 'primary', ...props }) => {
|
||||
const classes = useStyles()
|
||||
const classNames = {
|
||||
[classes.link]: true,
|
||||
[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 React, { memo, useState } from 'react'
|
||||
import { H4 } from 'src/components/typography'
|
||||
import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
|
||||
|
||||
import subpageButtonStyles from './SubpageButton.styles'
|
||||
|
||||
const useStyles = makeStyles(subpageButtonStyles)
|
||||
import classes from './SubpageButton.module.css'
|
||||
|
||||
const SubpageButton = memo(
|
||||
({
|
||||
|
|
@ -19,11 +16,10 @@ const SubpageButton = memo(
|
|||
}) => {
|
||||
const [active, setActive] = useState(false)
|
||||
const isActive = forceDisable ? false : active
|
||||
const classes = useStyles()
|
||||
const classNames = {
|
||||
[classes.button]: true,
|
||||
[classes.normalButton]: !isActive,
|
||||
[classes.activeButton]: isActive
|
||||
[classes.normal]: !isActive,
|
||||
[classes.active]: isActive
|
||||
}
|
||||
|
||||
const normalButton = <Icon className={classes.buttonIcon} />
|
||||
|
|
@ -36,7 +32,7 @@ const SubpageButton = memo(
|
|||
classes.buttonIconActiveLeft
|
||||
)}
|
||||
/>
|
||||
<H4 className={classes.white}>{children}</H4>
|
||||
<H4 className="text-white">{children}</H4>
|
||||
<CancelIconInverse
|
||||
className={classnames(
|
||||
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 AddButton from './AddButton'
|
||||
import Button from './Button'
|
||||
import DeleteButton from './DeleteButton'
|
||||
import FeatureButton from './FeatureButton'
|
||||
import IDButton from './IDButton'
|
||||
import Link from './Link'
|
||||
|
|
@ -16,6 +15,5 @@ export {
|
|||
IDButton,
|
||||
AddButton,
|
||||
SupportLinkButton,
|
||||
SubpageButton,
|
||||
DeleteButton
|
||||
SubpageButton
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import {
|
||||
add,
|
||||
differenceInMonths,
|
||||
|
|
@ -18,77 +17,12 @@ import React, { useState } from '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 typographyStyles from 'src/components/typography/styles'
|
||||
import { primaryColor, zircon } from 'src/styling/variables'
|
||||
|
||||
import Tile from './Tile'
|
||||
|
||||
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)
|
||||
import classes from './Calendar.module.css'
|
||||
|
||||
const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
|
||||
const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const weekdays = Array.from(Array(7)).map((_, i) =>
|
||||
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 React from 'react'
|
||||
|
||||
import typographyStyles from 'src/components/typography/styles'
|
||||
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)
|
||||
import classes from './Tile.module.css'
|
||||
|
||||
const Tile = ({
|
||||
isLowerBound,
|
||||
isUpperBound,
|
||||
isBetween,
|
||||
isDisabled,
|
||||
children,
|
||||
...props
|
||||
children
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
const selected = isLowerBound || isUpperBound
|
||||
|
||||
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 IconButton from '@mui/material/IconButton'
|
||||
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 TableCtx from './Context'
|
||||
import styles from './Row.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
import moduleStyles from './Row.module.css'
|
||||
|
||||
const ActionCol = ({ disabled, editing }) => {
|
||||
const classes = useStyles()
|
||||
const { values, submitForm, resetForm } = useFormikContext()
|
||||
const {
|
||||
editWidth,
|
||||
|
|
@ -61,7 +57,7 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
{editing && (
|
||||
<Td textAlign="center" width={actionColSize}>
|
||||
<Link
|
||||
className={classes.saveButton}
|
||||
className={moduleStyles.saveButton}
|
||||
type="submit"
|
||||
color="primary"
|
||||
onClick={submitForm}>
|
||||
|
|
@ -78,8 +74,8 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
<Td textAlign="center" width={editWidth}>
|
||||
<IconButton
|
||||
disabled={disableEdit}
|
||||
className={classes.editButton}
|
||||
onClick={() => onEdit && onEdit(values.id)}>
|
||||
onClick={() => onEdit && onEdit(values.id)}
|
||||
size="small">
|
||||
<SvgIcon>
|
||||
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
|
||||
</SvgIcon>
|
||||
|
|
@ -92,7 +88,8 @@ const ActionCol = ({ disabled, editing }) => {
|
|||
disabled={disabled}
|
||||
onClick={() => {
|
||||
setDeleteDialog(true)
|
||||
}}>
|
||||
}}
|
||||
size="small">
|
||||
<SvgIcon>
|
||||
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
|
||||
</SvgIcon>
|
||||
|
|
@ -155,11 +152,6 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
const isEditing = editing && isEditable(editable)
|
||||
const isField = !bypassField
|
||||
|
||||
const classes = useStyles({
|
||||
textAlign: isEditing ? editingAlign : textAlign,
|
||||
size
|
||||
})
|
||||
|
||||
const innerProps = {
|
||||
fullWidth: true,
|
||||
autoFocus: focus,
|
||||
|
|
@ -169,16 +161,20 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
...inputProps
|
||||
}
|
||||
|
||||
const newAlign = isEditing ? editingAlign : textAlign
|
||||
const justifyContent = newAlign === 'right' ? 'flex-end' : newAlign
|
||||
const style = suffix || prefix ? { justifyContent } : {}
|
||||
|
||||
return (
|
||||
<div className={classes.fields}>
|
||||
<div className={moduleStyles.fields}>
|
||||
{fields.map((f, idx) => (
|
||||
<Td
|
||||
style={style}
|
||||
key={idx}
|
||||
className={{
|
||||
[classes.extraPaddingRight]: extraPaddingRight,
|
||||
[classes.extraPadding]: extraPadding,
|
||||
[classes.withSuffix]: suffix,
|
||||
[classes.withPrefix]: prefix
|
||||
[moduleStyles.extraPaddingRight]: extraPaddingRight,
|
||||
[moduleStyles.extraPadding]: extraPadding,
|
||||
'flex items-center': suffix || prefix
|
||||
}}
|
||||
width={width}
|
||||
size={size}
|
||||
|
|
@ -186,7 +182,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
textAlign={textAlign}>
|
||||
{prefix && !isHidden(values) && (
|
||||
<PrefixComponent
|
||||
className={classes.prefix}
|
||||
className={moduleStyles.prefix}
|
||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||
{typeof prefix === 'function' ? prefix(f) : prefix}
|
||||
</PrefixComponent>
|
||||
|
|
@ -204,7 +200,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
)}
|
||||
{suffix && !isHidden(values) && (
|
||||
<SuffixComponent
|
||||
className={classes.suffix}
|
||||
className={moduleStyles.suffix}
|
||||
style={isEditing ? {} : textStyle(values, isEditing)}>
|
||||
{suffix}
|
||||
</SuffixComponent>
|
||||
|
|
@ -245,8 +241,6 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
|
|||
stripeWhen
|
||||
} = useContext(TableCtx)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
|
||||
|
||||
const innerElements = shouldStripe ? groupStriped(elements) : elements
|
||||
|
|
@ -265,7 +259,7 @@ const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
|
|||
)
|
||||
|
||||
const classNames = {
|
||||
[classes.lastOfGroup]: lastOfGroup
|
||||
[moduleStyles.lastOfGroup]: lastOfGroup
|
||||
}
|
||||
|
||||
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 * as R from 'ramda'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
|
@ -13,13 +12,11 @@ import { AddButton } from 'src/components/buttons/index'
|
|||
import TableCtx from './Context'
|
||||
import Header from './Header'
|
||||
import ERow from './Row'
|
||||
import styles from './Table.styles'
|
||||
import classes from './Table.module.css'
|
||||
|
||||
const ACTION_COL_SIZE = 87
|
||||
const DEFAULT_COL_SIZE = 100
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const getWidth = R.compose(
|
||||
R.reduce(R.add)(0),
|
||||
R.map(it => it.width ?? DEFAULT_COL_SIZE)
|
||||
|
|
@ -129,8 +126,6 @@ const ETable = ({
|
|||
|
||||
const width = getWidth(elements) + actionColSize
|
||||
|
||||
const classes = useStyles({ width })
|
||||
|
||||
const showButtonOnEmpty = !data.length && enableCreate && !adding
|
||||
const canAdd = !forceDisable && !editingId && !disableAdd && !adding
|
||||
const showTable = adding || data.length !== 0
|
||||
|
|
@ -162,7 +157,7 @@ const ETable = ({
|
|||
|
||||
return (
|
||||
<TableCtx.Provider value={ctxValue}>
|
||||
<div className={classes.wrapper}>
|
||||
<div style={{ width }}>
|
||||
{showButtonOnEmpty && canAdd && (
|
||||
<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 = ({
|
||||
style = {},
|
||||
children,
|
||||
header,
|
||||
className,
|
||||
|
|
@ -37,17 +38,17 @@ const Td = ({
|
|||
action
|
||||
}) => {
|
||||
const inlineStyle = {
|
||||
...style,
|
||||
width,
|
||||
textAlign
|
||||
textAlign,
|
||||
fontSize: size === 'sm' ? '14px' : size === 'lg' ? '24px' : ''
|
||||
}
|
||||
|
||||
const cssClasses = {
|
||||
[styles.td]: !header,
|
||||
[styles.tdHeader]: header,
|
||||
[styles.bold]: !header && bold,
|
||||
[styles.actionCol]: action,
|
||||
[styles.sizeSm]: !header && size === 'sm',
|
||||
[styles.sizeLg]: !header && size === 'lg'
|
||||
'font-bold': !header && (bold || size === 'lg'),
|
||||
[styles.actionCol]: action
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -73,7 +74,7 @@ const ThDoubleLevel = ({ title, children, className, width }) => {
|
|||
<div
|
||||
className={classnames(className, styles.thDoubleLevel)}
|
||||
style={{ width }}>
|
||||
<div>{title}</div>
|
||||
<div className={styles.thDoubleLevelFirst}>{title}</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -89,6 +90,9 @@ const Tr = ({
|
|||
size,
|
||||
newRow
|
||||
}) => {
|
||||
const inlineStyle = {
|
||||
minHeight: size === 'sm' ? '34px' : size === 'lg' ? '68px' : '48px'
|
||||
}
|
||||
const cardClasses = {
|
||||
[styles.card]: true,
|
||||
[styles.trError]: error,
|
||||
|
|
@ -105,7 +109,9 @@ const Tr = ({
|
|||
<>
|
||||
<Card className={classnames(className, cardClasses)} onClick={onClick}>
|
||||
<CardContent className={styles.cardContentRoot}>
|
||||
<div className={classnames(mainContentClasses)}>{children}</div>
|
||||
<div className={classnames(mainContentClasses)} style={inlineStyle}>
|
||||
{children}
|
||||
</div>
|
||||
{error && shouldShowError && (
|
||||
<div className={styles.errorContent}>{errorMessage}</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,33 @@
|
|||
.bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header {
|
||||
composes: tl2 from '../typography/typography.module.css';
|
||||
background-color: var(--zodiac);
|
||||
height: 32px;
|
||||
text-align: left;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.doubleHeader {
|
||||
composes: tl2 from '../typography/typography.module.css';
|
||||
background-color: var(--zodiac);
|
||||
height: 64px;
|
||||
color: white;
|
||||
display: table-row;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.thDoubleLevel {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.thDoubleLevel > :first-child {
|
||||
.thDoubleLevelFirst {
|
||||
composes: label1 from '../typography/typography.module.css';
|
||||
margin: 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--zodiac);
|
||||
background-color: var(--comet);
|
||||
color: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
height: 28px;
|
||||
|
|
@ -84,7 +78,7 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
font-size: 14px;
|
||||
composes: p from '../typography/typography.module.css';
|
||||
margin: 4px 0 0 0;
|
||||
width: 100%;
|
||||
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 filled = isPasswordFilled || isTextFilled
|
||||
|
||||
// Set CSS variables for dynamic styles
|
||||
const rootStyle = {
|
||||
'--input-width': width,
|
||||
'--input-text-align': textAlign
|
||||
const style = {
|
||||
width: width,
|
||||
textAlign: textAlign
|
||||
}
|
||||
|
||||
// Determine size class based on size prop
|
||||
const sizeClass = size === 'sm' ? styles.sizeSm : size === 'lg' ? styles.sizeLg : styles.size
|
||||
const sizeClass =
|
||||
size === 'sm'
|
||||
? styles.sizeSm
|
||||
: size === 'lg'
|
||||
? styles.sizeLg
|
||||
: styles.size
|
||||
|
||||
const divClass = {
|
||||
[styles.bold]: bold
|
||||
|
|
@ -48,9 +51,9 @@ const TextInput = memo(
|
|||
onBlur={onBlur}
|
||||
error={error}
|
||||
value={value}
|
||||
classes={{ root: styles.root }}
|
||||
className={className}
|
||||
style={rootStyle}
|
||||
style={style}
|
||||
inputProps={{ style: { textAlign } }}
|
||||
InputProps={{
|
||||
className: classnames(divClass),
|
||||
classes: {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,21 @@
|
|||
.size {
|
||||
margin-top: 2px;
|
||||
font-size: var(--input-font-size, 16px);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sizeSm {
|
||||
margin-top: 2px;
|
||||
font-size: var(--input-font-size-sm, 14px);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sizeLg {
|
||||
margin-top: 0;
|
||||
font-size: var(--input-font-size-lg, 24px);
|
||||
font-weight: var(--input-font-weight-bold, 700);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: var(--input-font-weight-bold, 700);
|
||||
}
|
||||
|
||||
.root {
|
||||
width: var(--input-width);
|
||||
}
|
||||
|
||||
.root input {
|
||||
text-align: var(--input-text-align, left);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.underline:before {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
|
@ -6,49 +5,55 @@ import { Info2, Label1, Label2 } from 'src/components/typography'
|
|||
|
||||
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 gridClasses = makeStyles(gridStyles)
|
||||
const colors = {
|
||||
cashOut: {
|
||||
empty: tomato,
|
||||
full: zodiac
|
||||
},
|
||||
cashIn: {
|
||||
empty: zodiac,
|
||||
full: tomato
|
||||
}
|
||||
}
|
||||
|
||||
const Cashbox = ({
|
||||
percent = 0,
|
||||
cashOut = false,
|
||||
width,
|
||||
height,
|
||||
width = 80,
|
||||
height = 118,
|
||||
className,
|
||||
emptyPartClassName,
|
||||
labelClassName,
|
||||
applyColorVariant,
|
||||
applyFiatBalanceAlertsStyling,
|
||||
omitInnerPercentage,
|
||||
isLow
|
||||
}) => {
|
||||
const classes = cashboxClasses({
|
||||
percent,
|
||||
cashOut,
|
||||
width,
|
||||
height,
|
||||
applyColorVariant,
|
||||
isLow
|
||||
})
|
||||
const ltHalf = percent <= 51
|
||||
|
||||
const showCashBox = {
|
||||
[classes.fiatBalanceAlertCashbox]: applyFiatBalanceAlertsStyling,
|
||||
[classes.cashbox]: !applyFiatBalanceAlertsStyling
|
||||
}
|
||||
const color =
|
||||
colors[cashOut ? 'cashOut' : 'cashIn'][!isLow ? 'full' : 'empty']
|
||||
|
||||
return (
|
||||
<div className={classnames(className, showCashBox)}>
|
||||
<div className={classnames(emptyPartClassName, classes.emptyPart)}>
|
||||
<div
|
||||
style={{ height, width, backgroundColor: color, borderColor: color }}
|
||||
className={classnames(className, classes.cashbox)}>
|
||||
<div
|
||||
className={classnames(emptyPartClassName, classes.emptyPart)}
|
||||
style={{ height: `${100 - percent}%` }}>
|
||||
{!omitInnerPercentage && ltHalf && (
|
||||
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
||||
<Label2
|
||||
style={{ color }}
|
||||
className={classnames(labelClassName, classes.emptyPartP)}>
|
||||
{percent.toFixed(0)}%
|
||||
</Label2>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.fullPart}>
|
||||
<div style={{ backgroundColor: color }}>
|
||||
{!omitInnerPercentage && !ltHalf && (
|
||||
<Label2 className={labelClassName}>{percent.toFixed(0)}%</Label2>
|
||||
<Label2 className={classnames(classes.fullPartP, labelClassName)}>
|
||||
{percent.toFixed(0)}%
|
||||
</Label2>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,7 +76,6 @@ const CashIn = ({
|
|||
}) => {
|
||||
const percent = (100 * notes) / capacity
|
||||
const isLow = percent < threshold
|
||||
const classes = gridClasses()
|
||||
return (
|
||||
<>
|
||||
<div className={classes.row}>
|
||||
|
|
@ -117,7 +121,6 @@ const CashOut = ({
|
|||
}) => {
|
||||
const percent = (100 * notes) / capacity
|
||||
const isLow = percent < threshold
|
||||
const classes = gridClasses()
|
||||
return (
|
||||
<>
|
||||
<div className={classes.row}>
|
||||
|
|
@ -160,7 +163,6 @@ const CashOutLite = ({
|
|||
}) => {
|
||||
const percent = (100 * notes) / capacity
|
||||
const isLow = percent < threshold
|
||||
const classes = gridClasses()
|
||||
return (
|
||||
<div className={classes.col}>
|
||||
<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 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(
|
||||
({ rightAlign, children, className, ...props }) => {
|
||||
const classes = useStyles()
|
||||
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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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">
|
||||
<Button
|
||||
backgroundColor="grey"
|
||||
className="mr-2 p-0"
|
||||
onClick={() => onDissmised()}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => onConfirmed(true)}>Confirm</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
|
|
|||
|
|
@ -755,9 +755,6 @@ const RetrieveDataDialog = ({
|
|||
</ErrorMessage>
|
||||
)}
|
||||
<DialogActions className="p-8 pt-4 gap-2">
|
||||
<Button backgroundColor="grey" onClick={() => onDismissed(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
onConfirmed()
|
||||
|
|
|
|||
|
|
@ -126,8 +126,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
|||
values[`fillingPercentageCassette${it + 1}`] ??
|
||||
data[`cassette${it + 1}`]
|
||||
}
|
||||
applyColorVariant
|
||||
applyFiatBalanceAlertsStyling
|
||||
isLow={false}
|
||||
className="border-4 inline-block"
|
||||
omitInnerPercentage
|
||||
cashOut
|
||||
/>
|
||||
|
|
@ -168,8 +168,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
|||
`fillingPercentageRecycler${(it + 1) * 2 - 1}`
|
||||
] ?? data[`recycler${(it + 1) * 2 - 1}`]
|
||||
}
|
||||
applyColorVariant
|
||||
applyFiatBalanceAlertsStyling
|
||||
isLow={false}
|
||||
className="border-4 inline-block"
|
||||
omitInnerPercentage
|
||||
cashOut
|
||||
/>
|
||||
|
|
@ -193,8 +193,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => {
|
|||
values[`fillingPercentageRecycler${(it + 1) * 2}`] ??
|
||||
data[`recycler${(it + 1) * 2}`]
|
||||
}
|
||||
applyColorVariant
|
||||
applyFiatBalanceAlertsStyling
|
||||
isLow={false}
|
||||
className="border-4 inline-block"
|
||||
omitInnerPercentage
|
||||
cashOut
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue