From ac97e2ffd9f4b2b7816d15432f3f804b3508957d Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 22 Apr 2025 14:34:23 +0100 Subject: [PATCH 01/27] refactor: use theme for chips --- new-lamassu-admin/src/components/Chip.jsx | 34 ------------------- .../src/components/SearchFilter.jsx | 2 +- .../src/components/inputs/cashbox/Cashbox.jsx | 7 ++-- .../inputs/cashbox/Cashbox.styles.js | 3 -- .../src/pages/Maintenance/CashUnitDetails.jsx | 2 +- new-lamassu-admin/src/styling/theme.js | 21 +++++++++--- 6 files changed, 20 insertions(+), 49 deletions(-) delete mode 100644 new-lamassu-admin/src/components/Chip.jsx diff --git a/new-lamassu-admin/src/components/Chip.jsx b/new-lamassu-admin/src/components/Chip.jsx deleted file mode 100644 index 6358047d..00000000 --- a/new-lamassu-admin/src/components/Chip.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import Chip from '@mui/material/Chip' -import { withStyles } from '@mui/styles' -import React, { memo } from 'react' - -import { - fontColor, - inputFontWeight, - subheaderColor, - smallestFontSize, - inputFontFamily -} from 'src/styling/variables' - -const styles = theme => ({ - root: { - backgroundColor: subheaderColor, - borderRadius: 4, - margin: theme.spacing(0.5, 0.25), - height: 18 - }, - label: { - fontSize: smallestFontSize, - color: fontColor, - fontWeight: inputFontWeight, - fontFamily: inputFontFamily, - paddingRight: 4, - paddingLeft: 4 - } -}) - -const LsChip = memo(({ classes, ...props }) => ( - -)) - -export default withStyles(styles)(LsChip) diff --git a/new-lamassu-admin/src/components/SearchFilter.jsx b/new-lamassu-admin/src/components/SearchFilter.jsx index 3089f637..d16891e4 100644 --- a/new-lamassu-admin/src/components/SearchFilter.jsx +++ b/new-lamassu-admin/src/components/SearchFilter.jsx @@ -1,6 +1,6 @@ import { makeStyles } from '@mui/styles' +import Chip from '@mui/material/Chip' import React from 'react' -import Chip from 'src/components/Chip' import { P, Label3 } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import FilterIcon from 'src/styling/icons/button/filter/white.svg?react' diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx index 81d90e83..e50f2fd9 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx @@ -1,7 +1,7 @@ import { makeStyles } from '@mui/styles' +import Chip from '@mui/material/Chip' import classnames from 'classnames' import React from 'react' -import Chip from 'src/components/Chip' import { Info2, Label1, Label2 } from 'src/components/typography' import { numberToFiatAmount } from 'src/utils/number' @@ -136,10 +136,7 @@ const CashOut = ({
{notes} - +
diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js index df06ed6b..cbb5c292 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js @@ -79,9 +79,6 @@ const gridStyles = { }, link: { marginTop: spacer - }, - chip: { - margin: [[0, 0, 0, 7]] } } diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx index 1d027869..290cd127 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx @@ -1,7 +1,7 @@ import { makeStyles } from '@mui/styles' +import Chip from '@mui/material/Chip' import * as R from 'ramda' import React from 'react' -import Chip from 'src/components/Chip' import { Label1, TL2 } from 'src/components/typography' import { CashOut } from 'src/components/inputs' diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 83346419..1230c550 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -10,10 +10,13 @@ import { offColor, subheaderColor, fontSize3, - fontSize5, zircon, zircon2, - primaryColor, disabledColor2, disabledColor + primaryColor, + disabledColor2, + disabledColor, + smallestFontSize, + inputFontWeight } from './variables' const { p } = typographyStyles @@ -150,11 +153,19 @@ theme = createTheme(theme, { }, MuiChip: { styleOverrides: { + root: { + backgroundColor: subheaderColor, + borderRadius: 4, + margin: theme.spacing(0.5, 0.25), + height: 18 + }, label: { - paddingLeft: 4, - paddingRight: 4, + fontSize: smallestFontSize, color: fontColor, - fontSize: fontSize5 + fontWeight: inputFontWeight, + fontFamily: inputFontFamily, + paddingRight: 4, + paddingLeft: 4 } } }, From c917fd3ca2857320e96dd01367f4535d5f5539db Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Wed, 23 Apr 2025 11:42:25 +0100 Subject: [PATCH 02/27] chore: remove unused files --- new-lamassu-admin/.env | 4 --- new-lamassu-admin/nginx/nginx.conf | 28 ------------------- .../patches/react-scripts+4.0.0.patch | 12 -------- 3 files changed, 44 deletions(-) delete mode 100644 new-lamassu-admin/.env delete mode 100644 new-lamassu-admin/nginx/nginx.conf delete mode 100644 new-lamassu-admin/patches/react-scripts+4.0.0.patch diff --git a/new-lamassu-admin/.env b/new-lamassu-admin/.env deleted file mode 100644 index e666d42d..00000000 --- a/new-lamassu-admin/.env +++ /dev/null @@ -1,4 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true -HTTPS=true -REACT_APP_TYPE_CHECK_SANCTUARY=false -PORT=3001 diff --git a/new-lamassu-admin/nginx/nginx.conf b/new-lamassu-admin/nginx/nginx.conf deleted file mode 100644 index 13ac5c80..00000000 --- a/new-lamassu-admin/nginx/nginx.conf +++ /dev/null @@ -1,28 +0,0 @@ -server { - listen 80; - - location / { - root /usr/share/nginx/html; - index index.html index.htm; - - try_files $uri /index.html; - } - - location /graphql { - proxy_pass https://lamassu-admin-server/graphql; - proxy_set_header Host $http_host; - proxy_set_header X-Real-IP $remote_addr; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - proxy_read_timeout 300; - proxy_connect_timeout 300; - proxy_send_timeout 300; - } - - error_page 500 502 503 504 /50x.html; - - location = /50x.html { - root /usr/share/nginx/html; - } - -} \ No newline at end of file diff --git a/new-lamassu-admin/patches/react-scripts+4.0.0.patch b/new-lamassu-admin/patches/react-scripts+4.0.0.patch deleted file mode 100644 index 916c3ecd..00000000 --- a/new-lamassu-admin/patches/react-scripts+4.0.0.patch +++ /dev/null @@ -1,12 +0,0 @@ -diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js -index 80c6ac2..3420936 100644 ---- a/node_modules/react-scripts/config/webpack.config.js -+++ b/node_modules/react-scripts/config/webpack.config.js -@@ -752,6 +752,7 @@ module.exports = function (webpackEnv) { - formatter: require.resolve('react-dev-utils/eslintFormatter'), - eslintPath: require.resolve('eslint'), - context: paths.appSrc, -+ cache: true, - // ESLint class options - cwd: paths.appPath, - resolvePluginsRelativeTo: __dirname, From 866da2fc64fa253925dc4f33f7200948d79b59cb Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Wed, 23 Apr 2025 11:42:39 +0100 Subject: [PATCH 03/27] partial: migrate global styles --- new-lamassu-admin/src/App.jsx | 10 +- .../NotificationCenter.styles.js | 3 +- new-lamassu-admin/src/styling/global/fonts.js | 173 ++++++++---------- new-lamassu-admin/src/styling/global/index.js | 138 +++++++------- new-lamassu-admin/src/styling/theme.js | 20 +- 5 files changed, 171 insertions(+), 173 deletions(-) diff --git a/new-lamassu-admin/src/App.jsx b/new-lamassu-admin/src/App.jsx index 1fd11d2b..4b8c92b3 100644 --- a/new-lamassu-admin/src/App.jsx +++ b/new-lamassu-admin/src/App.jsx @@ -1,9 +1,9 @@ -import { useQuery, gql } from "@apollo/client"; +import { useQuery, gql } from '@apollo/client' import CssBaseline from '@mui/material/CssBaseline' import Grid from '@mui/material/Grid' import Slide from '@mui/material/Slide' -import { StylesProvider, jssPreset, makeStyles } from '@mui/styles'; -import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; +import { StylesProvider, jssPreset, makeStyles } from '@mui/styles' +import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles' import { create } from 'jss' import extendJss from 'jss-plugin-extend' import React, { useContext, useState } from 'react' @@ -19,7 +19,6 @@ import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes' import ApolloProvider from 'src/utils/apollo' import AppContext from 'src/AppContext' -import global from 'src/styling/global' import theme from 'src/styling/theme' import { backgroundColor, mainWidth } from 'src/styling/variables' @@ -31,7 +30,6 @@ const fill = '100%' const flexDirection = 'column' const useStyles = makeStyles({ - ...global, root: { backgroundColor, width: fill, @@ -159,7 +157,7 @@ const App = () => { - ); + ) } export default App diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js index 91d1b720..28d588b5 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js @@ -93,7 +93,8 @@ const styles = { flexGrow: 1 }, unreadIcon: { - marginTop: 2, + marginTop: 5, + marginLeft: spacer, width: '12px', height: '12px', backgroundColor: secondaryColor, diff --git a/new-lamassu-admin/src/styling/global/fonts.js b/new-lamassu-admin/src/styling/global/fonts.js index 6bab4c53..20ae0b18 100644 --- a/new-lamassu-admin/src/styling/global/fonts.js +++ b/new-lamassu-admin/src/styling/global/fonts.js @@ -1,95 +1,82 @@ -export default { - // /*! - // * Web Fonts from Fontspring.com - // * - // * All OpenType features and all extended glyphs have been removed. - // * Fully installable fonts can be purchased at http://www.fontspring.com - // * - // * The fonts included in this stylesheet are subject to the End User License you purchased - // * from Fontspring. The fonts are protected under domestic and international trademark and - // * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or - // * distributing this font software. - // * - // * (c) 2010-2018 Fontspring - // * - // * - // * - // * - // * The fonts included are copyrighted by the vendor listed below. - // * - // * Vendor: Fontfabric - // * License URL: https://www.fontspring.com/licenses/fontfabric/webfont - // * - // * - // */ +export default ` + /*! + * Web Fonts from Fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2018 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: Fontfabric + * License URL: https://www.fontspring.com/licenses/fontfabric/webfont + * + * + */ - '@font-face': [ - { - fontFamily: 'Mont', - src: [ - 'url("/fonts/MontHeavy/mont-heavy-webfont.woff2") format("woff2")', - 'url("/fonts/MontHeavy/mont-heavy-webfont.woff") format("woff")' - ], - fontWeight: 900, - fontStyle: 'normal' - }, - { - fontFamily: 'Mont', - src: [ - 'url("/fonts/MontHeavy/mont-bold-webfont.woff2") format("woff2")', - 'url("/fonts/MontHeavy/mont-bold-webfont.woff") format("woff")' - ], - fontWeight: 700, - fontStyle: 'normal' - }, - // /*! - // * Web Fonts from Fontspring.com - // * - // * All OpenType features and all extended glyphs have been removed. - // * Fully installable fonts can be purchased at http://www.fontspring.com - // * - // * The fonts included in this stylesheet are subject to the End User License you purchased - // * from Fontspring. The fonts are protected under domestic and international trademark and - // * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or - // * distributing this font software. - // * - // * (c) 2010-2018 Fontspring - // * - // * - // * - // * - // * The fonts included are copyrighted by the vendor listed below. - // * - // * Vendor: exljbris Font Foundry - // * License URL: https://www.fontspring.com/licenses/exljbris/webfont - // * - // * - // */ - { - fontFamily: 'MuseoSans', - src: [ - 'url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2")', - 'url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff")' - ], - fontWeight: 500, - fontStyle: 'normal' - }, - { - fontFamily: 'MuseoSans', - src: [ - 'url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2")', - 'url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff")' - ], - fontWeight: 700, - fontStyle: 'normal' - }, + @font-face { + font-family: 'Mont'; + font-weight: 900; + font-style: normal; + src: url('/fonts/MontHeavy/mont-heavy-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-heavy-webfont.woff') format('woff'); + } + @font-face { + font-family: 'Mont'; + font-weight: 700; + font-style: normal; + src: url('/fonts/MontHeavy/mont-bold-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-bold-webfont.woff') format('woff'); + } + + /*! + * Web Fonts from Fontspring.com + * + * All OpenType features and all extended glyphs have been removed. + * Fully installable fonts can be purchased at http://www.fontspring.com + * + * The fonts included in this stylesheet are subject to the End User License you purchased + * from Fontspring. The fonts are protected under domestic and international trademark and + * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or + * distributing this font software. + * + * (c) 2010-2018 Fontspring + * + * + * + * + * The fonts included are copyrighted by the vendor listed below. + * + * Vendor: exljbris Font Foundry + * License URL: https://www.fontspring.com/licenses/exljbris/webfont + * + * + */ + @font-face { + font-family: 'MuseoSans'; + font-weight: 500; + font-style: normal; + src: url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff"); + }, + @font-face { + font-family: 'MuseoSans'; + font-weight: 700; + font-style: normal; + src: url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff"); + }, - // // BP-mono Freely distributed at http://backpacker.gr/fonts/5 - { - fontFamily: 'BPmono', - src: 'url("/fonts/BPmono/BPmono.ttf") format("truetype")', - fontWeight: 500, - fontStyle: 'normal' - } - ] -} + /* BP-mono Freely distributed at http://backpacker.gr/fonts/5 */ + @font-face { + font-family: 'BPmono'; + font-weight: 500; + font-style: normal; + src: url("/fonts/BPmono/BPmono.ttf") format("truetype"), + } +` diff --git a/new-lamassu-admin/src/styling/global/index.js b/new-lamassu-admin/src/styling/global/index.js index ceebff20..ab5ebed7 100644 --- a/new-lamassu-admin/src/styling/global/index.js +++ b/new-lamassu-admin/src/styling/global/index.js @@ -1,72 +1,80 @@ import { mainWidth } from 'src/styling/variables' - import fonts from './fonts' const fill = '100%' -export default { - '@global': { - ...fonts, - '#root': { - width: fill, - minHeight: fill - }, - '.root-notifcenter-open': { - // for when notification center is open - overflowY: 'auto', - position: 'absolute', - top: 0, - bottom: 0, - left: 0 - }, - '.body-notifcenter-open': { - // for when notification center is open - overflow: 'hidden' - }, - '.root-blur': { - filter: 'blur(1px)', - pointerEvents: 'none' - }, - html: { - height: fill, - '@media screen and (max-height: 900px)': { - scrollbarGutter: 'stable' - } - }, - body: { - width: mainWidth, - display: 'flex', - minHeight: fill, - '@media screen and (min-width: 1200px)': { - width: 'auto' - } - }, - [`a::-moz-focus-inner, - 'input[type="submit"]::-moz-focus-inner, - input[type="button"]::-moz-focus-inner`]: { - border: 0 - }, - [`a::-moz-focus-inner, - input[type="submit"]::-moz-focus-inner, - input[type="button"]::-moz-focus-inner`]: { - border: 0 - }, - [`a, - a:visited, - a:focus, - a:active, - a:hover`]: { - outline: '0 none' - }, - 'button::-moz-focus-inner': { - border: 0 - }, - // forcing styling onto inner container - '.ReactVirtualized__Grid__innerScrollContainer': { - overflow: 'inherit !important' - }, - '.ReactVirtualized__Grid.ReactVirtualized__List': { - overflowY: 'overlay !important' +export default ` + ${fonts} + body { + font-size: 0.875rem; + width: ${mainWidth}px; + display: flex; + min-height: ${fill}; + @media screen and (min-width: 1200px) { + width: auto; } } -} + + html { + height: ${fill}; + @media screen and (max-height: 900px) { + scrollbar-gutter: stable; + } + } + + #root { + width: ${fill}; + minHeight: ${fill}; + } + + .root-notifcenter-open { + // for when notification center is open + overflow-y: 'auto'; + position: 'absolute'; + top: 0; + bottom: 0; + left: 0; + } + + .body-notifcenter-open { + // for when notification center is open + overflow: hidden; + } + + .root-blur { + filter: blur(1px); + pointer-events: none; + } + + a::-moz-focus-inner, + input[type="submit"]::-moz-focus-inner, + input[type="button"]::-moz-focus-inner { + border: 0; + } + + a::-moz-focus-inner, + input[type="submit"]::-moz-focus-inner, + input[type="button"]::-moz-focus-inner { + border: 0; + } + + a, + a:visited, + a:focus, + a:active, + a:hover { + outline: 0 none; + } + + button::-moz-focus-inner { + border: 0; + } + + // forcing styling onto inner container + .ReactVirtualized__Grid__innerScrollContainer { + overflow: inherit !important; + }, + .ReactVirtualized__Grid.ReactVirtualized__List { + overflow-y: overlay !important; + } +` diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 1230c550..10d4de28 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -1,4 +1,5 @@ -import { createTheme } from '@mui/material/styles'; +import { createTheme } from '@mui/material/styles' +import global from './global' import typographyStyles from 'src/components/typography/styles' @@ -23,7 +24,7 @@ const { p } = typographyStyles let theme = createTheme({ typography: { - fontFamily: inputFontFamily, + fontFamily: inputFontFamily }, palette: { primary: { @@ -39,15 +40,18 @@ let theme = createTheme({ background: { default: backgroundColor } - }, + } }) theme = createTheme(theme, { components: { + MuiCssBaseline: { + styleOverrides: global + }, MuiTypography: { styleOverrides: { root: { ...p }, - body1: { ...p }, + body1: { ...p } } }, MuiButtonBase: { @@ -131,7 +135,7 @@ theme = createTheme(theme, { }, '&[aria-selected="true"]': { backgroundColor: `${subheaderColor} !important` - }, + } }, paper: { color: fontColor, @@ -234,7 +238,7 @@ theme = createTheme(theme, { vertical: { borderRadius: 8, border: 'none', - borderColor: zircon, + borderColor: zircon }, firstButton: { borderTop: '1px solid', @@ -259,10 +263,10 @@ theme = createTheme(theme, { borderTopLeftRadius: 8, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 - }, + } } } } }) -export default theme \ No newline at end of file +export default theme From 6f10977fd007797bfc393452b2420e525dfef6fe Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 24 Apr 2025 11:14:01 +0100 Subject: [PATCH 04/27] partial: tailwind and first component migration --- new-lamassu-admin/package-lock.json | 982 ++++++++++++++++++ new-lamassu-admin/package.json | 2 + new-lamassu-admin/src/App.jsx | 126 +-- new-lamassu-admin/src/Main.jsx | 83 ++ .../BooleanPropertiesTable.jsx | 43 +- .../BooleanPropertiesTable.styles.js | 74 -- .../src/styling/global/fonts.css | 82 ++ new-lamassu-admin/src/styling/global/fonts.js | 82 -- .../src/styling/global/global.css | 97 ++ new-lamassu-admin/src/styling/global/index.js | 80 -- new-lamassu-admin/src/styling/theme.js | 4 - new-lamassu-admin/vite.config.js | 3 +- 12 files changed, 1269 insertions(+), 389 deletions(-) create mode 100644 new-lamassu-admin/src/Main.jsx delete mode 100644 new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js create mode 100644 new-lamassu-admin/src/styling/global/fonts.css delete mode 100644 new-lamassu-admin/src/styling/global/fonts.js create mode 100644 new-lamassu-admin/src/styling/global/global.css delete mode 100644 new-lamassu-admin/src/styling/global/index.js diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json index 50900327..28868ab9 100644 --- a/new-lamassu-admin/package-lock.json +++ b/new-lamassu-admin/package-lock.json @@ -49,6 +49,7 @@ }, "devDependencies": { "@eslint/js": "^9.16.0", + "@tailwindcss/vite": "^4.1.4", "@vitejs/plugin-react-swc": "^3.7.2", "esbuild-plugin-react-virtualized": "^1.0.4", "eslint": "^9.16.0", @@ -58,6 +59,7 @@ "globals": "^15.13.0", "lint-staged": "^15.2.10", "prettier": "3.4.1", + "tailwindcss": "^4.1.4", "vite": "^6.0.1", "vite-plugin-svgr": "^4.3.0" } @@ -1743,6 +1745,339 @@ "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", + "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.1", + "@parcel/watcher-darwin-arm64": "2.5.1", + "@parcel/watcher-darwin-x64": "2.5.1", + "@parcel/watcher-freebsd-x64": "2.5.1", + "@parcel/watcher-linux-arm-glibc": "2.5.1", + "@parcel/watcher-linux-arm-musl": "2.5.1", + "@parcel/watcher-linux-arm64-glibc": "2.5.1", + "@parcel/watcher-linux-arm64-musl": "2.5.1", + "@parcel/watcher-linux-x64-glibc": "2.5.1", + "@parcel/watcher-linux-x64-musl": "2.5.1", + "@parcel/watcher-win32-arm64": "2.5.1", + "@parcel/watcher-win32-ia32": "2.5.1", + "@parcel/watcher-win32-x64": "2.5.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", + "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", + "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", + "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", + "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", + "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", + "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", + "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", + "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", + "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", + "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", + "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", + "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", + "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", @@ -2526,6 +2861,275 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@tailwindcss/node": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.4.tgz", + "integrity": "sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==", + "dev": true, + "license": "MIT", + "dependencies": { + "enhanced-resolve": "^5.18.1", + "jiti": "^2.4.2", + "lightningcss": "1.29.2", + "tailwindcss": "4.1.4" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.4.tgz", + "integrity": "sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.1.4", + "@tailwindcss/oxide-darwin-arm64": "4.1.4", + "@tailwindcss/oxide-darwin-x64": "4.1.4", + "@tailwindcss/oxide-freebsd-x64": "4.1.4", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.4", + "@tailwindcss/oxide-linux-arm64-gnu": "4.1.4", + "@tailwindcss/oxide-linux-arm64-musl": "4.1.4", + "@tailwindcss/oxide-linux-x64-gnu": "4.1.4", + "@tailwindcss/oxide-linux-x64-musl": "4.1.4", + "@tailwindcss/oxide-wasm32-wasi": "4.1.4", + "@tailwindcss/oxide-win32-arm64-msvc": "4.1.4", + "@tailwindcss/oxide-win32-x64-msvc": "4.1.4" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.4.tgz", + "integrity": "sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.4.tgz", + "integrity": "sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.4.tgz", + "integrity": "sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.4.tgz", + "integrity": "sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.4.tgz", + "integrity": "sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.4.tgz", + "integrity": "sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.4.tgz", + "integrity": "sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.4.tgz", + "integrity": "sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.4.tgz", + "integrity": "sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.4.tgz", + "integrity": "sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.4.0", + "@emnapi/runtime": "^1.4.0", + "@emnapi/wasi-threads": "^1.0.1", + "@napi-rs/wasm-runtime": "^0.2.8", + "@tybys/wasm-util": "^0.9.0", + "tslib": "^2.8.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.4.tgz", + "integrity": "sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.4.tgz", + "integrity": "sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.4.tgz", + "integrity": "sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@tailwindcss/node": "4.1.4", + "@tailwindcss/oxide": "4.1.4", + "tailwindcss": "4.1.4" + }, + "peerDependencies": { + "vite": "^5.2.0 || ^6" + } + }, "node_modules/@types/estree": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz", @@ -3439,6 +4043,24 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/cipher-base": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.6.tgz", @@ -4131,6 +4753,21 @@ "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==", "license": "ISC" }, + "node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "peer": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -4290,6 +4927,20 @@ "dev": true, "license": "MIT" }, + "node_modules/enhanced-resolve": { + "version": "5.18.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz", + "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -5263,6 +5914,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "license": "ISC" + }, "node_modules/graphql": { "version": "16.10.0", "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.10.0.tgz", @@ -5558,6 +6216,15 @@ "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", "license": "MIT" }, + "node_modules/immutable": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz", + "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/import-fresh": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", @@ -6081,6 +6748,16 @@ "node": ">= 0.4" } }, + "node_modules/jiti": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", + "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, "node_modules/js-sha256": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", @@ -6384,6 +7061,255 @@ "immediate": "~3.0.5" } }, + "node_modules/lightningcss": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz", + "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-darwin-arm64": "1.29.2", + "lightningcss-darwin-x64": "1.29.2", + "lightningcss-freebsd-x64": "1.29.2", + "lightningcss-linux-arm-gnueabihf": "1.29.2", + "lightningcss-linux-arm64-gnu": "1.29.2", + "lightningcss-linux-arm64-musl": "1.29.2", + "lightningcss-linux-x64-gnu": "1.29.2", + "lightningcss-linux-x64-musl": "1.29.2", + "lightningcss-win32-arm64-msvc": "1.29.2", + "lightningcss-win32-x64-msvc": "1.29.2" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz", + "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz", + "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz", + "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz", + "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz", + "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz", + "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz", + "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz", + "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz", + "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz", + "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss/node_modules/detect-libc": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz", + "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", @@ -7564,6 +8490,22 @@ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "license": "MIT" }, + "node_modules/readdirp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", + "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -7862,6 +8804,29 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, + "node_modules/sass": { + "version": "1.87.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.87.0.tgz", + "integrity": "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.0.2", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, "node_modules/scheduler": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", @@ -8362,6 +9327,23 @@ "node": ">=0.10" } }, + "node_modules/tailwindcss": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz", + "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==", + "dev": true, + "license": "MIT" + }, + "node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/tiny-case": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json index 1526575e..316c7efd 100644 --- a/new-lamassu-admin/package.json +++ b/new-lamassu-admin/package.json @@ -44,6 +44,7 @@ }, "devDependencies": { "@eslint/js": "^9.16.0", + "@tailwindcss/vite": "^4.1.4", "@vitejs/plugin-react-swc": "^3.7.2", "esbuild-plugin-react-virtualized": "^1.0.4", "eslint": "^9.16.0", @@ -53,6 +54,7 @@ "globals": "^15.13.0", "lint-staged": "^15.2.10", "prettier": "3.4.1", + "tailwindcss": "^4.1.4", "vite": "^6.0.1", "vite-plugin-svgr": "^4.3.0" }, diff --git a/new-lamassu-admin/src/App.jsx b/new-lamassu-admin/src/App.jsx index 4b8c92b3..3241615b 100644 --- a/new-lamassu-admin/src/App.jsx +++ b/new-lamassu-admin/src/App.jsx @@ -1,136 +1,22 @@ -import { useQuery, gql } from '@apollo/client' import CssBaseline from '@mui/material/CssBaseline' -import Grid from '@mui/material/Grid' -import Slide from '@mui/material/Slide' -import { StylesProvider, jssPreset, makeStyles } from '@mui/styles' +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, { useContext, useState } from 'react' -import { - useLocation, - useHistory, - BrowserRouter as Router -} from 'react-router-dom' -import Header from 'src/components/layout/Header' -import Sidebar from 'src/components/layout/Sidebar' -import TitleSection from 'src/components/layout/TitleSection' -import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes' +import React, { useState } from 'react' +import { BrowserRouter as Router } from 'react-router-dom' import ApolloProvider from 'src/utils/apollo' import AppContext from 'src/AppContext' import theme from 'src/styling/theme' -import { backgroundColor, mainWidth } from 'src/styling/variables' + +import Main from './Main' +import './styling/global/global.css' const jss = create({ plugins: [extendJss(), ...jssPreset().plugins] }) -const fill = '100%' -const flexDirection = 'column' - -const useStyles = makeStyles({ - root: { - backgroundColor, - width: fill, - minHeight: fill, - display: 'flex', - flexDirection - }, - wrapper: { - width: mainWidth, - height: fill, - margin: '0 auto', - flex: 1, - display: 'flex', - flexDirection - }, - grid: { - flex: 1, - height: '100%' - }, - contentWithSidebar: { - flex: 1, - marginLeft: 48, - paddingTop: 15 - }, - contentWithoutSidebar: { - width: mainWidth - } -}) - -const GET_USER_DATA = gql` - query userData { - userData { - id - username - role - enabled - last_accessed - last_accessed_from - last_accessed_address - } - } -` - -const Main = () => { - const classes = useStyles() - const location = useLocation() - const history = useHistory() - const { wizardTested, userData, setUserData } = useContext(AppContext) - - const { loading } = useQuery(GET_USER_DATA, { - onCompleted: userResponse => { - if (!userData && userResponse?.userData) - setUserData(userResponse.userData) - } - }) - - const route = location.pathname - - const sidebar = hasSidebar(route) - const parent = sidebar ? getParent(route) : {} - - const is404 = location.pathname === '/404' - - const isSelected = it => location.pathname === it.route - - const onClick = it => history.push(it.route) - - const contentClassName = sidebar - ? classes.contentWithSidebar - : classes.contentWithoutSidebar - - return ( -
- {!is404 && wizardTested && userData && ( -
- )} -
- {sidebar && !is404 && wizardTested && ( - -
- -
- - )} - - - {sidebar && !is404 && wizardTested && ( - it.label} - onClick={onClick} - /> - )} -
{!loading && }
- -
-
- ) -} - const App = () => { const [wizardTested, setWizardTested] = useState(false) const [userData, setUserData] = useState(null) diff --git a/new-lamassu-admin/src/Main.jsx b/new-lamassu-admin/src/Main.jsx new file mode 100644 index 00000000..ac31806f --- /dev/null +++ b/new-lamassu-admin/src/Main.jsx @@ -0,0 +1,83 @@ +import { useHistory, useLocation } from 'react-router-dom' +import React, { useContext } from 'react' +import { gql, useQuery } from '@apollo/client' +import Slide from '@mui/material/Slide' +import Grid from '@mui/material/Grid' + +import Header from './components/layout/Header.jsx' +import Sidebar from './components/layout/Sidebar.jsx' +import TitleSection from './components/layout/TitleSection.jsx' +import { getParent, hasSidebar, Routes, tree } from './routing/routes.jsx' + +import AppContext from './AppContext.js' + +const GET_USER_DATA = gql` + query userData { + userData { + id + username + role + enabled + last_accessed + last_accessed_from + last_accessed_address + } + } +` + +const Main = () => { + const location = useLocation() + const history = useHistory() + const { wizardTested, userData, setUserData } = useContext(AppContext) + + const { loading } = useQuery(GET_USER_DATA, { + onCompleted: userResponse => { + if (!userData && userResponse?.userData) + setUserData(userResponse.userData) + } + }) + + const route = location.pathname + + const sidebar = hasSidebar(route) + const parent = sidebar ? getParent(route) : {} + + const is404 = location.pathname === '/404' + + const isSelected = it => location.pathname === it.route + + const onClick = it => history.push(it.route) + + const contentClassName = sidebar ? 'flex-1 ml-12 pt-4' : 'w-[1200px]' + + return ( +
+ {!is404 && wizardTested && userData && ( +
+ )} +
+ {sidebar && !is404 && wizardTested && ( + +
+ +
+ + )} + + + {sidebar && !is404 && wizardTested && ( + it.label} + onClick={onClick} + /> + )} +
{!loading && }
+ +
+
+ ) +} + +export default Main diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx index 361adeb2..e71ddcf6 100644 --- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx +++ b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx @@ -1,5 +1,3 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' import { useFormikContext, Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import React, { useState, memo } from 'react' @@ -15,10 +13,6 @@ import { Link, IconButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs/formik' import { Table, TableBody, TableRow, TableCell } from 'src/components/table' -import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles' - -const useStyles = makeStyles(booleanPropertiesTableStyles) - const BooleanCell = ({ name }) => { const { values } = useFormikContext() return values[name] === 'true' ? : @@ -26,6 +20,8 @@ const BooleanCell = ({ name }) => { const BooleanPropertiesTable = memo( ({ title, disabled, data, elements, save, forcedEditing = false }) => { + const [editing, setEditing] = useState(forcedEditing) + const initialValues = R.fromPairs( elements.map(it => [it.name, data[it.name]?.toString() ?? 'false']) ) @@ -39,10 +35,6 @@ const BooleanPropertiesTable = memo( ) ) - const [editing, setEditing] = useState(forcedEditing) - - const classes = useStyles() - const innerSave = async values => { const toBoolean = (num, _) => R.equals(num, 'true') save(R.mapObjIndexed(toBoolean, R.filter(R.complement(R.isNil))(values))) @@ -54,7 +46,7 @@ const BooleanPropertiesTable = memo( { display: 'No', code: 'false' } ] return ( -
+
{ return (
-
+

{title}

{editing ? ( -
+
Save { resetForm() setEditing(false) @@ -85,7 +77,7 @@ const BooleanPropertiesTable = memo(
) : ( setEditing(true)} size="large"> {disabled ? : } @@ -93,26 +85,21 @@ const BooleanPropertiesTable = memo( )}
- - +
+ {elements.map((it, idx) => ( - - {it.display} - - + className="h-auto py-2 px-4 flex items-center justify-between min-h-8 even:bg-transparent odd:bg-zircon"> + {it.display} + {editing && ( )} {!editing && } @@ -122,11 +109,11 @@ const BooleanPropertiesTable = memo(
- ); + ) }}
- ); + ) } ) diff --git a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js b/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js deleted file mode 100644 index f6a5c1b9..00000000 --- a/new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.styles.js +++ /dev/null @@ -1,74 +0,0 @@ -import baseStyles from 'src/pages/Logs.styles' -import { backgroundColor, zircon } from 'src/styling/variables' - -const { fillColumn } = baseStyles - -const booleanPropertiesTableStyles = { - booleanPropertiesTableWrapper: { - display: 'flex', - flexDirection: 'column', - width: 396 - }, - tableRow: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - '&:nth-child(even)': { - backgroundColor: backgroundColor - }, - '&:nth-child(odd)': { - backgroundColor: zircon - }, - minHeight: 32, - height: 'auto', - padding: [[8, 16, 8, 24]], - boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)' - }, - leftTableCell: { - display: 'flex', - alignItems: 'center', - justifyContent: 'left', - width: 200, - padding: [0] - }, - rightTableCell: { - display: 'flex', - alignItems: 'center', - justifyContent: 'right', - padding: [0] - }, - transparentButton: { - '& > *': { - margin: 'auto 12px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - rowWrapper: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap' - }, - rightAligned: { - marginLeft: 'auto' - }, - radioButtons: { - display: 'flex', - flexDirection: 'row', - margin: [-15] - }, - rightLink: { - marginLeft: '20px' - }, - fillColumn, - popoverContent: { - width: 272, - padding: [[10, 15]] - } -} - -export { booleanPropertiesTableStyles } diff --git a/new-lamassu-admin/src/styling/global/fonts.css b/new-lamassu-admin/src/styling/global/fonts.css new file mode 100644 index 00000000..e5623b10 --- /dev/null +++ b/new-lamassu-admin/src/styling/global/fonts.css @@ -0,0 +1,82 @@ +/*! +* Web Fonts from Fontspring.com +* +* All OpenType features and all extended glyphs have been removed. +* Fully installable fonts can be purchased at http://www.fontspring.com +* +* The fonts included in this stylesheet are subject to the End User License you purchased +* from Fontspring. The fonts are protected under domestic and international trademark and +* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or +* distributing this font software. +* +* (c) 2010-2018 Fontspring +* +* +* +* +* The fonts included are copyrighted by the vendor listed below. +* +* Vendor: Fontfabric +* License URL: https://www.fontspring.com/licenses/fontfabric/webfont +* +* +*/ + +@font-face { + font-family: 'Mont'; + font-weight: 900; + font-style: normal; + src: url('/fonts/MontHeavy/mont-heavy-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-heavy-webfont.woff') format('woff'); +} + +@font-face { + font-family: 'Mont'; + font-weight: 700; + font-style: normal; + src: url('/fonts/MontHeavy/mont-bold-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-bold-webfont.woff') format('woff'); +} + +/*! +* Web Fonts from Fontspring.com +* +* All OpenType features and all extended glyphs have been removed. +* Fully installable fonts can be purchased at http://www.fontspring.com +* +* The fonts included in this stylesheet are subject to the End User License you purchased +* from Fontspring. The fonts are protected under domestic and international trademark and +* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or +* distributing this font software. +* +* (c) 2010-2018 Fontspring +* +* +* +* +* The fonts included are copyrighted by the vendor listed below. +* +* Vendor: exljbris Font Foundry +* License URL: https://www.fontspring.com/licenses/exljbris/webfont +* +* +*/ +@font-face { + font-family: 'MuseoSans'; + font-weight: 500; + font-style: normal; + src: url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff"); +} + +@font-face { + font-family: 'MuseoSans'; + font-weight: 700; + font-style: normal; + src: url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff"); +} + +/* BP-mono Freely distributed at http://backpacker.gr/fonts/5 */ +@font-face { + font-family: 'BPmono'; + font-weight: 500; + font-style: normal; + src: url("/fonts/BPmono/BPmono.ttf") format("truetype"), +} \ No newline at end of file diff --git a/new-lamassu-admin/src/styling/global/fonts.js b/new-lamassu-admin/src/styling/global/fonts.js deleted file mode 100644 index 20ae0b18..00000000 --- a/new-lamassu-admin/src/styling/global/fonts.js +++ /dev/null @@ -1,82 +0,0 @@ -export default ` - /*! - * Web Fonts from Fontspring.com - * - * All OpenType features and all extended glyphs have been removed. - * Fully installable fonts can be purchased at http://www.fontspring.com - * - * The fonts included in this stylesheet are subject to the End User License you purchased - * from Fontspring. The fonts are protected under domestic and international trademark and - * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or - * distributing this font software. - * - * (c) 2010-2018 Fontspring - * - * - * - * - * The fonts included are copyrighted by the vendor listed below. - * - * Vendor: Fontfabric - * License URL: https://www.fontspring.com/licenses/fontfabric/webfont - * - * - */ - - @font-face { - font-family: 'Mont'; - font-weight: 900; - font-style: normal; - src: url('/fonts/MontHeavy/mont-heavy-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-heavy-webfont.woff') format('woff'); - } - @font-face { - font-family: 'Mont'; - font-weight: 700; - font-style: normal; - src: url('/fonts/MontHeavy/mont-bold-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-bold-webfont.woff') format('woff'); - } - - /*! - * Web Fonts from Fontspring.com - * - * All OpenType features and all extended glyphs have been removed. - * Fully installable fonts can be purchased at http://www.fontspring.com - * - * The fonts included in this stylesheet are subject to the End User License you purchased - * from Fontspring. The fonts are protected under domestic and international trademark and - * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or - * distributing this font software. - * - * (c) 2010-2018 Fontspring - * - * - * - * - * The fonts included are copyrighted by the vendor listed below. - * - * Vendor: exljbris Font Foundry - * License URL: https://www.fontspring.com/licenses/exljbris/webfont - * - * - */ - @font-face { - font-family: 'MuseoSans'; - font-weight: 500; - font-style: normal; - src: url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff"); - }, - @font-face { - font-family: 'MuseoSans'; - font-weight: 700; - font-style: normal; - src: url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff"); - }, - - /* BP-mono Freely distributed at http://backpacker.gr/fonts/5 */ - @font-face { - font-family: 'BPmono'; - font-weight: 500; - font-style: normal; - src: url("/fonts/BPmono/BPmono.ttf") format("truetype"), - } -` diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css new file mode 100644 index 00000000..65504a87 --- /dev/null +++ b/new-lamassu-admin/src/styling/global/global.css @@ -0,0 +1,97 @@ +@import "./fonts.css"; + +/*@tailwind setup with no preflighrt*/ +/* TODO remove important after mui v6 migration*/ +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities) important; + +:root { + --zodiac: #1b2559; + --spring: #48f694; + + --ghost: #fafbff; + --zircon: #ebefff; +} + +@theme { + --color-zodiac: var(--zodiac); + --color-spring: var(--spring); + --color-ghost: var(--ghost); + --color-zircon: var(--zircon); +} + +body { + font-size: 0.875rem; + width: 1200px; + color: var(--zodiac); + display: flex; + min-height: 100%; + @media screen and (min-width: 1200px) { + width: auto; + } +} + +html { + height: 100%; + @media screen and (max-height: 900px) { + scrollbar-gutter: stable; + } +} + +#root { + width: 100%; + min-height: 100%; +} + +.root-notifcenter-open { + /*for when notification center is open*/ + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; +} + +.body-notifcenter-open { + /*for when notification center is open*/ + overflow: hidden; +} + +.root-blur { + filter: blur(1px); + pointer-events: none; +} + +a::-moz-focus-inner, +input[type="submit"]::-moz-focus-inner, +input[type="button"]::-moz-focus-inner { + border: 0; +} + +a::-moz-focus-inner, +input[type="submit"]::-moz-focus-inner, +input[type="button"]::-moz-focus-inner { + border: 0; +} + +a, +a:visited, +a:focus, +a:active, +a:hover { + outline: 0 none; +} + +button::-moz-focus-inner { + border: 0; +} + +/*forcing styling onto inner container*/ +.ReactVirtualized__Grid__innerScrollContainer { + overflow: inherit !important; +} + +.ReactVirtualized__Grid.ReactVirtualized__List { + overflow-y: auto !important; +} diff --git a/new-lamassu-admin/src/styling/global/index.js b/new-lamassu-admin/src/styling/global/index.js deleted file mode 100644 index ab5ebed7..00000000 --- a/new-lamassu-admin/src/styling/global/index.js +++ /dev/null @@ -1,80 +0,0 @@ -import { mainWidth } from 'src/styling/variables' -import fonts from './fonts' - -const fill = '100%' - -export default ` - ${fonts} - body { - font-size: 0.875rem; - width: ${mainWidth}px; - display: flex; - min-height: ${fill}; - @media screen and (min-width: 1200px) { - width: auto; - } - } - - html { - height: ${fill}; - @media screen and (max-height: 900px) { - scrollbar-gutter: stable; - } - } - - #root { - width: ${fill}; - minHeight: ${fill}; - } - - .root-notifcenter-open { - // for when notification center is open - overflow-y: 'auto'; - position: 'absolute'; - top: 0; - bottom: 0; - left: 0; - } - - .body-notifcenter-open { - // for when notification center is open - overflow: hidden; - } - - .root-blur { - filter: blur(1px); - pointer-events: none; - } - - a::-moz-focus-inner, - input[type="submit"]::-moz-focus-inner, - input[type="button"]::-moz-focus-inner { - border: 0; - } - - a::-moz-focus-inner, - input[type="submit"]::-moz-focus-inner, - input[type="button"]::-moz-focus-inner { - border: 0; - } - - a, - a:visited, - a:focus, - a:active, - a:hover { - outline: 0 none; - } - - button::-moz-focus-inner { - border: 0; - } - - // forcing styling onto inner container - .ReactVirtualized__Grid__innerScrollContainer { - overflow: inherit !important; - }, - .ReactVirtualized__Grid.ReactVirtualized__List { - overflow-y: overlay !important; - } -` diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 10d4de28..f0bd2450 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -1,5 +1,4 @@ import { createTheme } from '@mui/material/styles' -import global from './global' import typographyStyles from 'src/components/typography/styles' @@ -45,9 +44,6 @@ let theme = createTheme({ theme = createTheme(theme, { components: { - MuiCssBaseline: { - styleOverrides: global - }, MuiTypography: { styleOverrides: { root: { ...p }, diff --git a/new-lamassu-admin/vite.config.js b/new-lamassu-admin/vite.config.js index d81c0371..2cc157a2 100644 --- a/new-lamassu-admin/vite.config.js +++ b/new-lamassu-admin/vite.config.js @@ -4,6 +4,7 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import svgr from 'vite-plugin-svgr' import fixReactVirtualized from 'esbuild-plugin-react-virtualized' +import tailwindcss from '@tailwindcss/vite' export default defineConfig({ base: '/', @@ -25,7 +26,7 @@ export default defineConfig({ plugins: [fixReactVirtualized] } }, - plugins: [react(), svgr()], + plugins: [react(), svgr(), tailwindcss()], resolve: { alias: { src: fileURLToPath(new URL('./src', import.meta.url)) From b9b7dcdcd73ad3bec35e10219b0fcc6ffefbaa21 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 24 Apr 2025 15:44:54 +0100 Subject: [PATCH 05/27] partial: migrate AddMachine page css --- new-lamassu-admin/src/components/Stage.jsx | 112 ------------------ .../src/pages/AddMachine/AddMachine.jsx | 106 ++++++++--------- .../src/pages/AddMachine/styles.js | 109 ----------------- new-lamassu-admin/src/routing/routes.jsx | 20 +--- .../src/styling/global/global.css | 9 ++ 5 files changed, 61 insertions(+), 295 deletions(-) delete mode 100644 new-lamassu-admin/src/components/Stage.jsx diff --git a/new-lamassu-admin/src/components/Stage.jsx b/new-lamassu-admin/src/components/Stage.jsx deleted file mode 100644 index e691e4b4..00000000 --- a/new-lamassu-admin/src/components/Stage.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' -import * as R from 'ramda' -import React, { memo } from 'react' -import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react' -import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react' -import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react' -import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react' -import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react' -import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react' - -import { - primaryColor, - secondaryColor, - offColor, - disabledColor -} from 'src/styling/variables' - -const styles = { - stages: { - display: 'flex', - alignItems: 'center' - }, - wrapper: { - display: 'flex', - alignItems: 'center', - margin: 0 - }, - stage: { - display: 'flex', - height: 28, - width: 28, - zIndex: 2, - '& > svg': { - height: '100%', - width: '100%', - overflow: 'visible' - } - }, - separator: { - width: 28, - height: 2, - border: [[2, 'solid']], - zIndex: 1 - }, - separatorSpring: { - borderColor: secondaryColor - }, - separatorZodiac: { - borderColor: primaryColor - }, - separatorSpringEmpty: { - borderColor: disabledColor - }, - separatorZodiacEmpty: { - borderColor: offColor - } -} - -const useStyles = makeStyles(styles) - -const Stage = memo(({ stages, currentStage, color = 'spring', className }) => { - if (currentStage < 1 || currentStage > stages) - throw Error('Value of currentStage is invalid') - if (stages < 1) throw Error('Value of stages is invalid') - - const classes = useStyles() - - const separatorClasses = { - [classes.separator]: true, - [classes.separatorSpring]: color === 'spring', - [classes.separatorZodiac]: color === 'zodiac' - } - - const separatorEmptyClasses = { - [classes.separator]: true, - [classes.separatorSpringEmpty]: color === 'spring', - [classes.separatorZodiacEmpty]: color === 'zodiac' - } - - return ( -
- {R.range(1, currentStage).map(idx => ( -
- {idx > 1 &&
} -
- {color === 'spring' && } - {color === 'zodiac' && } -
-
- ))} -
- {currentStage > 1 &&
} -
- {color === 'spring' && } - {color === 'zodiac' && } -
-
- {R.range(currentStage + 1, stages + 1).map(idx => ( -
-
-
- {color === 'spring' && } - {color === 'zodiac' && } -
-
- ))} -
- ) -}) - -export default Stage diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx index 03249806..55930c41 100644 --- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx +++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx @@ -1,12 +1,11 @@ -import { useMutation, useQuery, gql } from "@apollo/client"; +import { useMutation, useQuery, gql } from '@apollo/client' import Dialog from '@mui/material/Dialog' import DialogContent from '@mui/material/DialogContent' import SvgIcon from '@mui/material/SvgIcon' import IconButton from '@mui/material/IconButton' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Form, Formik, FastField } from 'formik' -import {QRCodeSVG as QRCode} from 'qrcode.react' +import { QRCodeSVG as QRCode } from 'qrcode.react' import * as R from 'ramda' import React, { memo, useState, useEffect, useRef } from 'react' import Title from 'src/components/Title' @@ -25,8 +24,6 @@ import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { primaryColor } from 'src/styling/variables' -import styles from './styles' - const SAVE_CONFIG = gql` mutation createPairingTotem($name: String!) { createPairingTotem(name: $name) @@ -41,11 +38,9 @@ const GET_MACHINES = gql` } ` -const useStyles = makeStyles(styles) - const getSize = R.compose(R.length, R.pathOr([], ['machines'])) -const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { +const QrCodeComponent = ({ qrCode, name, count, onPaired }) => { const timeout = useRef(null) const CLOSE_SCREEN_TIMEOUT = 2000 const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 }) @@ -69,43 +64,42 @@ const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { return ( <> - - Scan QR code with your new cryptomat - -
-
+ Scan QR code with your new cryptomat +
+
-
+
-

Snap a picture and scan

+

+ Snap a picture and scan +

-
-
-
+
+
+
-
-

- To pair the machine you need scan the QR code with your machine. - To do this either snap a picture of this QR code or download it - through the button above and scan it with the scanning bay on - your machine. -

-
+

+ To pair the machine you need scan the QR code with your machine. + To do this either snap a picture of this QR code or download it + through the button above and scan it with the scanning bay on your + machine. +

{hasNewMachine && ( -
-
+
+
- + Machine has been successfully paired!
@@ -135,7 +129,7 @@ const validationSchema = Yup.object().shape({ ) }) -const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { +const MachineNameComponent = ({ nextStep, setQrCode, setName }) => { const [register] = useMutation(SAVE_CONFIG, { onCompleted: ({ createPairingTotem }) => { if (process.env.NODE_ENV === 'development') { @@ -162,9 +156,7 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { return ( <> - - Machine Name (ex: Coffee shop 01) - + Machine Name (ex: Coffee shop 01) { register({ variables: { name } }) }}> {({ errors }) => ( -
+
{ component={TextInput} />
- {errors &&

{errors.message}

} -
+ {errors &&

{errors.message}

} +
@@ -205,18 +197,18 @@ const steps = [ } ] -const renderStepper = (step, it, idx, classes) => { +const renderStepper = (step, it, idx) => { const active = step === idx const past = idx < step const future = idx > step return ( -
+
{it.label} @@ -226,8 +218,8 @@ const renderStepper = (step, it, idx, classes) => { {idx < steps.length - 1 && (
)}
@@ -235,7 +227,6 @@ const renderStepper = (step, it, idx, classes) => { } const AddMachine = memo(({ close, onPaired }) => { - const classes = useStyles() const { data } = useQuery(GET_MACHINES) const [qrCode, setQrCode] = useState('') const [name, setName] = useState('') @@ -246,14 +237,12 @@ const AddMachine = memo(({ close, onPaired }) => { return (
- - -
-
+ + +
+
Add Machine @@ -261,13 +250,12 @@ const AddMachine = memo(({ close, onPaired }) => {
-
+
- {steps.map((it, idx) => renderStepper(step, it, idx, classes))} + {steps.map((it, idx) => renderStepper(step, it, idx))} -
+
setStep(1)} count={count} onPaired={onPaired} @@ -282,7 +270,7 @@ const AddMachine = memo(({ close, onPaired }) => {
- ); + ) }) export default AddMachine diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js index 75d3c608..926e629e 100644 --- a/new-lamassu-admin/src/pages/AddMachine/styles.js +++ b/new-lamassu-admin/src/pages/AddMachine/styles.js @@ -1,7 +1,6 @@ import typographyStyles from 'src/components/typography/styles' import { placeholderColor, - backgroundColor, primaryColor, mainWidth, spring2, @@ -15,14 +14,6 @@ const fill = '100%' const flexDirection = 'column' const styles = { - dialog: { - backgroundColor, - width: fill, - minHeight: fill, - display: 'flex', - flexDirection, - padding: 0 - }, wrapper: { width: mainWidth, height: fill, @@ -43,106 +34,6 @@ const styles = { }, contentWrapper: { marginLeft: 48 - }, - button: { - marginTop: 64 - }, - nameTitle: { - marginTop: 16, - marginBottom: 25 - }, - qrTitle: { - marginTop: 12, - marginBottom: 40 - }, - qrCodeWrapper: { - display: 'flex' - }, - qrTextInfoWrapper: { - display: 'flex', - flexDirection: 'row' - }, - qrTextWrapper: { - width: 381, - marginLeft: 80, - display: 'flex', - flexDirection: 'column' - }, - textWrapper: { - display: 'flex', - flexDirection: 'column' - }, - qrTextIcon: { - marginRight: 16 - }, - qrText: { - marginTop: 0 - }, - item: { - position: 'relative', - margin: '12px 0 12px 0', - display: 'flex' - }, - itemText: { - extend: p, - color: placeholderColor, - marginRight: 24 - }, - itemTextActive: { - extend: tl2, - color: primaryColor - }, - itemTextPast: { - color: primaryColor - }, - stepperPath: { - position: 'absolute', - height: 25, - width: 1, - border: [[1, 'solid', placeholderColor]], - right: 8, - top: 18 - }, - stepperPast: { - border: [[1, 'solid', primaryColor]] - }, - successMessageWrapper: { - backgroundColor: spring3, - display: 'flex', - flexDirection: 'row', - padding: '0px 10px', - borderRadius: '8px' - }, - successMessage: { - color: spring2, - margin: '8px 0px' - }, - successMessageIcon: { - marginRight: 16, - marginBottom: 2, - display: 'flex', - flexDirection: 'col', - alignItems: 'center' - }, - errorMessage: { - color: errorColor - }, - qrCodeImageWrapper: { - display: 'flex', - flexDirection: 'column', - backgroundColor: 'white', - border: `5px solid ${primaryColor}`, - padding: 5, - borderRadius: 15 - }, - qrCodeScanMessage: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - margin: [[0, 0, 20, 20]], - '& > p': { - marginLeft: 10 - } } } diff --git a/new-lamassu-admin/src/routing/routes.jsx b/new-lamassu-admin/src/routing/routes.jsx index 47d623d6..8fd3c366 100644 --- a/new-lamassu-admin/src/routing/routes.jsx +++ b/new-lamassu-admin/src/routing/routes.jsx @@ -1,6 +1,5 @@ import Fade from '@mui/material/Fade' import Slide from '@mui/material/Slide' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useContext } from 'react' import { @@ -24,14 +23,7 @@ import PrivateRoute from './PrivateRoute' import PublicRoute from './PublicRoute' import getLamassuRoutes from './lamassu.routes' -const useStyles = makeStyles({ - wrapper: { - flex: 1, - display: 'flex', - flexDirection: 'column', - height: '100%' - } -}) +const wrapperClasses = 'flex flex-1 flex-col h-full' const tree = getLamassuRoutes() @@ -65,8 +57,6 @@ const getParent = route => )(flattened) const Routes = () => { - const classes = useStyles() - const history = useHistory() const location = useLocation() const { wizardTested, userData } = useContext(AppContext) @@ -115,12 +105,12 @@ const Routes = () => { -
+
@@ -134,12 +124,12 @@ const Routes = () => { {getFilteredRoutes().map(({ route, component: Page, key }) => ( -
+
diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index 65504a87..4480411c 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -9,6 +9,11 @@ :root { --zodiac: #1b2559; --spring: #48f694; + --spring2: #44e188; + --spring3: #ecfbef; + + --comet: #5f668a; + --tomato: #ff584a; --ghost: #fafbff; --zircon: #ebefff; @@ -17,6 +22,10 @@ @theme { --color-zodiac: var(--zodiac); --color-spring: var(--spring); + --color-spring2: var(--spring2); + --color-spring3: var(--spring3); + --color-comet: var(--comet); + --color-tomato: var(--tomato); --color-ghost: var(--ghost); --color-zircon: var(--zircon); } From 92ccd8cb923021a7c7d6628b1535ec96fb27dcb2 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Mon, 28 Apr 2025 10:06:33 +0100 Subject: [PATCH 06/27] partial: Analytics css migration --- .../src/pages/Analytics/Analytics.jsx | 45 +++-- .../src/pages/Analytics/Analytics.module.css | 0 .../src/pages/Analytics/Analytics.styles.js | 163 ------------------ .../Analytics/components/LegendEntry.jsx | 9 +- .../components/tooltips/GraphTooltip.jsx | 22 +-- .../tooltips/GraphTooltip.styles.js | 29 ---- .../components/wrappers/HourOfDayWrapper.jsx | 7 +- .../components/wrappers/OverTimeWrapper.jsx | 18 +- .../wrappers/TopMachinesWrapper.jsx | 7 +- .../wrappers/VolumeOverTimeWrapper.jsx | 18 +- .../components/wrappers/wrappers.module.css | 56 ++++++ .../src/styling/global/global.css | 10 ++ 12 files changed, 116 insertions(+), 268 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Analytics/Analytics.module.css delete mode 100644 new-lamassu-admin/src/pages/Analytics/Analytics.styles.js delete mode 100644 new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.styles.js create mode 100644 new-lamassu-admin/src/pages/Analytics/components/wrappers/wrappers.module.css diff --git a/new-lamassu-admin/src/pages/Analytics/Analytics.jsx b/new-lamassu-admin/src/pages/Analytics/Analytics.jsx index e27f2aa6..679afad5 100644 --- a/new-lamassu-admin/src/pages/Analytics/Analytics.jsx +++ b/new-lamassu-admin/src/pages/Analytics/Analytics.jsx @@ -1,6 +1,4 @@ -import { useQuery, gql } from "@apollo/client"; -import Box from '@mui/material/Box' -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import classnames from 'classnames' import { endOfToday } from 'date-fns' import { subDays, format, add, startOfWeek } from 'date-fns/fp' @@ -17,15 +15,12 @@ import { fromNamespace } from 'src/utils/config' import { numberToFiatAmount } from 'src/utils/number' import { DAY, WEEK, MONTH } from 'src/utils/time' -import styles from './Analytics.styles' import LegendEntry from './components/LegendEntry' import HourOfDayWrapper from './components/wrappers/HourOfDayWrapper' import OverTimeWrapper from './components/wrappers/OverTimeWrapper' import TopMachinesWrapper from './components/wrappers/TopMachinesWrapper' import VolumeOverTimeWrapper from './components/wrappers/VolumeOverTimeWrapper' -const useStyles = makeStyles(styles) - const MACHINE_OPTIONS = [{ code: 'all', display: 'All machines' }] const REPRESENTING_OPTIONS = [ { code: 'overTime', display: 'Over time' }, @@ -106,26 +101,28 @@ const GET_DATA = gql` } ` -const OverviewEntry = ({ label, value, oldValue, currency }) => { - const classes = useStyles() +const VerticalLine = () => ( +
+) +const OverviewEntry = ({ label, value, oldValue, currency }) => { const _oldValue = !oldValue || R.equals(oldValue, 0) ? 1 : oldValue const growthRate = ((value - oldValue) * 100) / _oldValue const growthClasses = { - [classes.growthPercentage]: true, - [classes.growth]: R.gt(value, oldValue), - [classes.decline]: R.gt(oldValue, value) + 'font-bold': true, + 'text-malachite': R.gt(value, oldValue), + 'text-tomato': R.gt(oldValue, value) } return ( -
+

{label}

- - {numberToFiatAmount(value)} + + {numberToFiatAmount(value)} {!!currency && ` ${currency}`} - + {R.gt(growthRate, 0) && } {R.lt(growthRate, 0) && } {R.equals(growthRate, 0) && } @@ -138,8 +135,6 @@ const OverviewEntry = ({ label, value, oldValue, currency }) => { } const Analytics = () => { - const classes = useStyles() - const { data: txResponse, loading: txLoading } = useQuery(GET_TRANSACTIONS, { variables: { from: subDays(65, endOfToday()), @@ -320,7 +315,7 @@ const Analytics = () => { !loading && ( <> - +
{ IconComponent={EqualIcon} label={'Same since last period'} /> - +
-
-
+
+
{ - const classes = useStyles() - const [graphType /*, setGraphType */] = useState(options[0].code) const legend = { diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx b/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx index cc3fe801..718036c9 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx +++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx @@ -1,17 +1,14 @@ import Box from '@mui/material/Box' import Switch from '@mui/material/Switch' -import { makeStyles } from '@mui/styles' import React, { useState } from 'react' -import { H2 } from 'src/components/typography' +import { H2, Label1 } from 'src/components/typography' import { Select } from 'src/components/inputs' import { neon, java } from 'src/styling/variables' -import styles from '../../Analytics.styles' import Graph from '../../graphs/Graph' import LegendEntry from '../LegendEntry' - -const useStyles = makeStyles(styles) +import classes from './wrappers.module.css' const VolumeOverTimeGraphHeader = ({ title, @@ -24,8 +21,6 @@ const VolumeOverTimeGraphHeader = ({ timezone, currency }) => { - const classes = useStyles() - const [logarithmic, setLogarithmic] = useState() const legend = { @@ -63,8 +58,13 @@ const VolumeOverTimeGraphHeader = ({
- Log. scale - setLogarithmic(event.target.checked)} /> + + Log. scale + + setLogarithmic(event.target.checked)} + />
{ defaultAsFilter />
-
+

{title}

- +
- +
{/*

{title}

- +
- +
diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx b/new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx index 7d1abbca..ab0f9c52 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx +++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import * as R from 'ramda' import React, { useState } from 'react' import { H2 } from 'src/components/typography' @@ -33,10 +32,10 @@ const TopMachinesBarGraphHeader = ({

{title}

- +
- +
{/*

{title}

- +
- +
diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx index 694dd839..637fb7e8 100644 --- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import Box from '@mui/material/Box' +import { useQuery, useMutation, gql } from '@apollo/client' import Dialog from '@mui/material/Dialog' import DialogContent from '@mui/material/DialogContent' import DialogActions from '@mui/material/DialogActions' @@ -14,7 +13,12 @@ import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import ReverseSettingsIcon from 'src/styling/icons/circle buttons/settings/white.svg?react' import SettingsIcon from 'src/styling/icons/circle buttons/settings/zodiac.svg?react' -import { Link, Button, IconButton, SupportLinkButton } from 'src/components/buttons' +import { + Link, + Button, + IconButton, + SupportLinkButton +} from 'src/components/buttons' import { fromNamespace, toNamespace } from 'src/utils/config' import styles from './Blacklist.styles' @@ -234,12 +238,8 @@ const Blacklist = () => { } ]}> {!advancedSettings && ( - - +
+

Enable paper wallet (only)

{ to scan an address from their own wallet.

- - +
+

Reject reused addresses

{ label="Reject Address Reuse" /> - +
setShowModal(true)}> Blacklist new addresses - +
)} {!advancedSettings && ( diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx index 7e5b4dd0..3a6555ba 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import { Formik, Form, Field } from 'formik' import * as R from 'ramda' @@ -55,11 +54,11 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
{!R.isNil(errorMsg) && {errorMsg}} - +
Blacklist address - +
) diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx index bd52274d..219c3cb5 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client"; +import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client' import Breadcrumbs from '@mui/material/Breadcrumbs' -import Box from '@mui/material/Box' import DialogActions from '@mui/material/DialogActions' import DialogContent from '@mui/material/DialogContent' import Dialog from '@mui/material/Dialog' @@ -637,10 +636,7 @@ const CustomerProfile = memo(() => {
{isOverview && (
- +
{ setShowCompliance={() => setShowCompliance(!showCompliance)} timezone={timezone} /> - +
{
} appendixRight={ - +
setShowCreationModal(true)}> Add new user - +
} labels={[ { label: 'Cash-in', icon: }, diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx index 4dd04418..3b285039 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo } from 'react' @@ -51,9 +50,9 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => { }) return ( - +
- +

@@ -64,7 +63,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => { : getFormattedPhone(phone, locale.country)}

- +
{elements.map(({ size, header }, idx) => ( { {header} ))} - - +
+
{elements.map(({ size, value }, idx) => (

{ {value}

))} - - - +
+
+
) }) diff --git a/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx b/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx index a2b81cd7..9433c255 100644 --- a/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo } from 'react' @@ -35,7 +34,7 @@ const IdCardPhotoCard = memo(({ customerData, updateCustomer }) => { updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }) } reject={() => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED })}> - +
{customerData.idCardPhotoPath ? ( { ) : ( )} - +
) }) diff --git a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx index 8ead9dc0..1cb0fb73 100644 --- a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import { differenceInYears, format, parse } from 'date-fns/fp' import * as R from 'ramda' import React, { memo } from 'react' @@ -77,11 +76,11 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => { updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }) } reject={() => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED })}> - +
{elements.map(({ header, display, size }, idx) => ( ))} - +
) }) diff --git a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx index ef9fbfc9..aa8ea43a 100644 --- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx @@ -1,5 +1,4 @@ import { toUnit } from '@lamassu/coins/lightUtils' -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import classnames from 'classnames' @@ -139,8 +138,8 @@ const TransactionsList = ({ customer, data, loading }) => { return ( <>

Transactions

- - +
+
{summaryElements.map(({ size, header }, idx) => ( { {header} ))} - - +
+
{summaryElements.map(({ size, value }, idx) => (

{ {value}

))} - - +
+
{loading ? ( diff --git a/new-lamassu-admin/src/pages/Customers/helper.jsx b/new-lamassu-admin/src/pages/Customers/helper.jsx index 3fa95175..6bb774b1 100644 --- a/new-lamassu-admin/src/pages/Customers/helper.jsx +++ b/new-lamassu-admin/src/pages/Customers/helper.jsx @@ -1,5 +1,4 @@ import React from 'react' -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { parse, isValid, format } from 'date-fns/fp' @@ -7,7 +6,7 @@ import { Field, useFormikContext } from 'formik' import { parsePhoneNumberFromString } from 'libphonenumber-js' import * as R from 'ramda' import { H4 } from 'src/components/typography' -import { validate as uuidValidate } from 'uuid'; +import { validate as uuidValidate } from 'uuid' import * as Yup from 'yup' import { @@ -224,9 +223,9 @@ const EntryType = ({ customInfoRequirementOptions }) => { return ( <> - +

Type of entry

- +
{ /> {displayCustomOptions && (
- +

Type of data

- +
{ )} {displayRequirementOptions && (
- +

Requirements

- +
{ return ( <> - +

{title}

- +
{isCustomInfoRequirement && ( { }> )} - ); + ) } const customElements = { diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx index a79f187d..d6940a65 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import Box from '@mui/material/Box' +import { useQuery, useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' @@ -67,9 +66,7 @@ const IndividualDiscounts = () => { const [showModal, setShowModal] = useState(false) const toggleModal = () => setShowModal(!showModal) - const { data: discountResponse, loading } = useQuery( - GET_INDIVIDUAL_DISCOUNTS - ) + const { data: discountResponse, loading } = useQuery(GET_INDIVIDUAL_DISCOUNTS) const { data: customerData, loading: customerLoading } = useQuery(GET_CUSTOMERS) @@ -157,16 +154,15 @@ const IndividualDiscounts = () => { <> {!loading && !R.isEmpty(discountResponse.individualDiscounts) && ( <> - - +
+ Add new code - +
{ )} {!loading && R.isEmpty(discountResponse.individualDiscounts) && ( - +
It seems there are no active individual customer discounts on your network. - +
)} { return ( <> {!loading && !R.isEmpty(codeResponse.promoCodes) && ( - +
Add new code - +
)} {!loading && !R.isEmpty(codeResponse.promoCodes) && ( <> @@ -164,12 +158,12 @@ const PromoCodes = () => { )} {!loading && R.isEmpty(codeResponse.promoCodes) && ( - +
Currently, there are no active promo codes on your network. - +
)} +
{elements.map(({ width, className, textAlign, header }, idx) => ( @@ -181,7 +180,7 @@ const DataTable = ({
- +
) } diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx index 9377e1e3..8f3fa94b 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import DialogActions from '@mui/material/DialogActions' -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' @@ -98,7 +97,11 @@ const SET_CASSETTE_BILLS = gql` ` const GET_BATCHES_CSV = gql` - query cashboxBatchesCsv($from: DateTimeISO, $until: DateTimeISO, $timezone: String) { + query cashboxBatchesCsv( + $from: DateTimeISO + $until: DateTimeISO + $timezone: String + ) { cashboxBatchesCsv(from: $from, until: $until, timezone: $timezone) } ` @@ -202,155 +205,155 @@ const CashCassettes = () => { /> ) - return (!dataLoading && (<> - R.path(['cashboxBatchesCsv'])(logs)} - timezone={timezone} - args={{ timezone }} - /> - ) : ( - <> - ) - } - ]} - iconClassName={classes.listViewButton} - className={classes.tableWidth} - appendix={ - -

- For details on configuring cash boxes and cassettes, please read - the relevant knowledgebase article: -

- - - }> - {!showHistory && ( - - Cash box resets - - {cashboxReset && ( -

- {onlyFirstToUpper(cashboxReset)} -

- )} - setEditingSchema(true)} - className={classes.button} - size="large"> - - - - - )} - - {!showHistory && ( + return ( + !dataLoading && ( <> - + R.path(['cashboxBatchesCsv'])(logs)} + timezone={timezone} + args={{ timezone }} + /> + ) : ( + <> + ) + } + ]} + iconClassName={classes.listViewButton} + className={classes.tableWidth} + appendix={ + +

+ For details on configuring cash boxes and cassettes, please read + the relevant knowledgebase article: +

+ + + }> + {!showHistory && ( +
+ Cash box resets +
+ {cashboxReset && ( +

+ {onlyFirstToUpper(cashboxReset)} +

+ )} + setEditingSchema(true)} + className={classes.button} + size="large"> + + +
+
+ )} + + {!showHistory && ( + <> + - {data && R.isEmpty(machines) && ( - + {data && R.isEmpty(machines) && ( + + )} + + )} + {showHistory && ( + + )} + + {wizard && ( + { + setWizard(false) + }} + error={error?.message} + save={onSave} + locale={locale} + /> + )} + {editingSchema && ( + setEditingSchema(null)} + open={true}> +

+ We can automatically assume you emptied a bill validator's cash + box when the machine detects that it has been removed. +

+ +

+ Assume the cash box is emptied whenever it's removed, creating a + new batch on the history screen and setting its current balance to + zero. +

+ +

+ Cash boxes won't be assumed emptied when removed, nor their counts + modified. Instead, to update the count and create a new batch, + you'll click the 'Edit' button on this panel. +

+ + + + )} - )} - {showHistory && ( - - )} - - {wizard && ( - { - setWizard(false) - }} - error={error?.message} - save={onSave} - locale={locale} - /> - )} - {editingSchema && ( - setEditingSchema(null)} - open={true}> -

- We can automatically assume you emptied a bill validator's cash - box when the machine detects that it has been removed. -

- -

- Assume the cash box is emptied whenever it's removed, creating a - new batch on the history screen and setting its current balance to - zero. -

- -

- Cash boxes won't be assumed emptied when removed, nor their counts - modified. Instead, to update the count and create a new batch, - you'll click the 'Edit' button on this panel. -

- - - - - )} - )); + ) + ) } export default CashCassettes diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx b/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx index f4d87525..744ecbca 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx +++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx @@ -1,6 +1,5 @@ -import { useLazyQuery, useMutation, gql } from "@apollo/client"; +import { useLazyQuery, useMutation, gql } from '@apollo/client' import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils' -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import classNames from 'classnames' @@ -249,7 +248,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
- +
{tx.customerPhone && ( { /> )} - +
diff --git a/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx b/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx index b98396d6..e8e208c5 100644 --- a/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx +++ b/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx @@ -1,5 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; -import Box from '@mui/material/Box' +import { useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' @@ -52,9 +51,9 @@ const TriggerView = ({ } const add = rawConfig => { - const toSave = R.concat([{ id: uuidv4(), direction: 'both', ...rawConfig }])( - triggers - ) + const toSave = R.concat([ + { id: uuidv4(), direction: 'both', ...rawConfig } + ])(triggers) return saveConfig({ variables: { config: { triggers: toServer(toSave) } } }) } @@ -85,12 +84,12 @@ const TriggerView = ({ /> )} {R.isEmpty(triggers) && ( - +

It seems there are no active compliance triggers on your network

- +
)} ) diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.jsx b/new-lamassu-admin/src/pages/Triggers/Triggers.jsx index 1043caa1..c414d443 100644 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.jsx +++ b/new-lamassu-admin/src/pages/Triggers/Triggers.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import Box from '@mui/material/Box' +import { useQuery, useMutation, gql } from '@apollo/client' import Switch from '@mui/material/Switch' import { makeStyles } from '@mui/styles' import classnames from 'classnames' @@ -169,12 +168,8 @@ const Triggers = () => { ]} className={classnames(titleSectionWidth)}> {!subMenu && ( - - +
+

Reject reused addresses

{ label="Reject Address Reuse" /> - - +
+
)} {subMenu === 'customInfoRequests' && !R.isEmpty(enabledCustomInfoRequests) && ( - +
toggleWizard('newCustomRequest')()}> + Add new custom info request - +
)} {!loading && !subMenu && !R.isEmpty(triggers) && ( - +
+ Add new trigger - +
)} {!loading && subMenu === 'customInfoRequests' && ( diff --git a/new-lamassu-admin/src/pages/Triggers/helper.jsx b/new-lamassu-admin/src/pages/Triggers/helper.jsx index 353a7c41..cd8a18c8 100644 --- a/new-lamassu-admin/src/pages/Triggers/helper.jsx +++ b/new-lamassu-admin/src/pages/Triggers/helper.jsx @@ -1,4 +1,3 @@ -import Box from '@mui/material/Box' import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' @@ -363,9 +362,9 @@ const Type = ({ ...props }) => { return ( <> - +

Choose trigger type

- +
- +

Choose a requirement

- +
{ : getView(requirementOptions, 'display')(requirement) return ( - +
{`${display} ${isSuspend ? 'for' : ''}`} {isSuspend && ( { /> )} {isSuspend && 'days'} - +
) } @@ -783,7 +782,7 @@ const RequirementView = ({ : getView(requirementOptions, 'display')(requirement) const isSuspend = requirement === 'suspend' return ( - +
{`${display} ${isSuspend ? 'for' : ''}`} {isSuspend && ( @@ -791,7 +790,7 @@ const RequirementView = ({ )} {isSuspend && 'days'} - +
) } @@ -833,16 +832,16 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { switch (config?.triggerType) { case 'txAmount': return ( - +
{Threshold} {currency} - +
) case 'txVolume': return ( - +
{Threshold} {currency} @@ -854,11 +853,11 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { days - +
) case 'txVelocity': return ( - +
{Threshold} transactions in @@ -867,16 +866,16 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { days - +
) case 'consecutiveDays': return ( - +
{ThresholdDays} days - +
) default: return '' diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx index 271ccba7..488c420a 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client"; +import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client' import Chip from '@mui/material/Chip' -import Box from '@mui/material/Box' import Switch from '@mui/material/Switch' import { makeStyles } from '@mui/styles' import { startAttestation } from '@simplewebauthn/browser' @@ -242,24 +241,21 @@ const Users = () => { return ( <> - - - { - dispatch({ - type: 'open', - payload: 'showCreateUserModal' - }) - }}> - Add new user - - + { + dispatch({ + type: 'open', + payload: 'showCreateUserModal' + }) + }}> + Add new user + + } + />

Twilio (SMS service)

- +

Will you setup a two way machine or compliance?

@@ -112,7 +111,7 @@ function Twilio({ doContinue }) { compliance triggers

- +
- - To set up Twilio please read the instructions from our support portal. - +
+ + + To set up Twilio please read the instructions from our support + portal. + +
Date: Tue, 29 Apr 2025 11:43:28 +0100 Subject: [PATCH 08/27] partial: Authentication css migration --- .../Authentication/Authentication.module.css | 73 ++++++++++++ .../pages/Authentication/Input2FAState.jsx | 24 ++-- .../pages/Authentication/InputFIDOState.jsx | 33 ++---- .../src/pages/Authentication/Login.jsx | 9 +- .../src/pages/Authentication/LoginCard.jsx | 7 +- .../src/pages/Authentication/LoginState.jsx | 28 ++--- .../src/pages/Authentication/Register.jsx | 18 ++- .../src/pages/Authentication/Reset2FA.jsx | 34 +++--- .../pages/Authentication/ResetPassword.jsx | 18 ++- .../pages/Authentication/Setup2FAState.jsx | 25 ++-- .../src/pages/Authentication/shared.styles.js | 109 ------------------ .../UserManagement/UserManagement.styles.js | 3 - .../UserManagement/modals/CreateUserModal.jsx | 4 +- .../UserManagement/modals/Input2FAModal.jsx | 19 ++- 14 files changed, 152 insertions(+), 252 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Authentication/Authentication.module.css delete mode 100644 new-lamassu-admin/src/pages/Authentication/shared.styles.js diff --git a/new-lamassu-admin/src/pages/Authentication/Authentication.module.css b/new-lamassu-admin/src/pages/Authentication/Authentication.module.css new file mode 100644 index 00000000..88648763 --- /dev/null +++ b/new-lamassu-admin/src/pages/Authentication/Authentication.module.css @@ -0,0 +1,73 @@ +.welcomeBackground { + background: var(--ghost) url(/wizard-background.svg) no-repeat fixed center center; + background-size: cover; + height: 100vh; + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + min-height: 100vh; +} + +.wrapper { + padding: 2.5em 4em; + width: 575px; + display: flex; + flex-direction: column; +} + +.titleWrapper { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 30px +} + +.icon { + transform: scale(1.5); + margin-right: 25px; +} + +.title { + padding-top: 8px; +} + +.infoWrapper { + margin-bottom: 3vh; +} + +.info2 { + text-align: justify; +} + +.qrCodeWrapper { + display: flex; + justify-content: center; + margin-bottom: 3vh; +} + +.secretWrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.secretLabel { + margin-right: 15px; +} + +.secret { + margin-right: 35px; +} + +.hiddenSecret { + margin-right: 35px; + filter: blur(8px); +} + +.confirm2FAInput { + margin-top: 25px; +} + diff --git a/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx b/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx index f7fd5cce..b1326044 100644 --- a/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { Form, Formik } from 'formik' import React, { useContext, useState } from 'react' import { useHistory } from 'react-router-dom' @@ -9,11 +8,8 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' -import styles from './shared.styles' import { STATES } from './states' -const useStyles = makeStyles(styles) - const INPUT_2FA = gql` mutation input2FA( $username: String! @@ -41,7 +37,6 @@ const GET_USER_DATA = gql` ` const Input2FAState = ({ state, dispatch }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -104,9 +99,7 @@ const Input2FAState = ({ state, dispatch }) => { return ( <> - - Enter your two-factor authentication code - + Enter your two-factor authentication code {/* TODO: refactor the 2FA CodeInput to properly use Formik */} {}} initialValues={{}}>
@@ -117,15 +110,14 @@ const Input2FAState = ({ state, dispatch }) => { numInputs={6} error={invalidToken} /> - +
-
- {errorMessage &&

{errorMessage}

} - -
) } diff --git a/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx b/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx index 82f73041..3c8a1b70 100644 --- a/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { startAssertion } from '@simplewebauthn/browser' import { Field, Form, Formik } from 'formik' import React, { useState, useContext } from 'react' @@ -11,10 +10,6 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { Checkbox, TextInput } from 'src/components/inputs/formik' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) - const GET_USER_DATA = gql` { userData { @@ -66,7 +61,6 @@ const InputFIDOState = ({ state, strategy }) => { } ` - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -166,32 +160,25 @@ const InputFIDOState = ({ state, strategy }) => { component={TextInput} fullWidth autoFocus - className={classes.input} + className="-mt-4 mb-6" error={getErrorMsg(errors, touched)} onKeyUp={() => { if (invalidUsername) setInvalidUsername(false) }} /> -
+
- - Keep me logged in - + Keep me logged in
-
+
{getErrorMsg(errors, touched) && ( -

- {getErrorMsg(errors, touched)} -

+

{getErrorMsg(errors, touched)}

)} -
@@ -201,14 +188,14 @@ const InputFIDOState = ({ state, strategy }) => { )} {strategy === 'FIDO2FA' && ( <> -

+

Insert your hardware key and follow the instructions

diff --git a/new-lamassu-admin/src/pages/Authentication/Login.jsx b/new-lamassu-admin/src/pages/Authentication/Login.jsx index ab883a64..0ea27cb0 100644 --- a/new-lamassu-admin/src/pages/Authentication/Login.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Login.jsx @@ -1,15 +1,10 @@ import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import React from 'react' import LoginCard from './LoginCard' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const Login = () => { - const classes = useStyles() - return ( { - ); + ) } export default Login diff --git a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx index e9c1da4c..4179cfe9 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx +++ b/new-lamassu-admin/src/pages/Authentication/LoginCard.jsx @@ -1,5 +1,4 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import React, { useReducer } from 'react' import { H5 } from 'src/components/typography' import Logo from 'src/styling/icons/menu/logo.svg?react' @@ -8,14 +7,12 @@ import Input2FAState from './Input2FAState' import InputFIDOState from './InputFIDOState' import LoginState from './LoginState' import Setup2FAState from './Setup2FAState' -import styles from './shared.styles' import { STATES } from './states' +import classes from './Authentication.module.css' // FIDO2FA, FIDOPasswordless or FIDOUsernameless const AUTHENTICATION_STRATEGY = 'FIDO2FA' -const useStyles = makeStyles(styles) - const initialState = { twoFAField: '', clientField: '', @@ -30,8 +27,6 @@ const reducer = (state, action) => { } const LoginCard = () => { - const classes = useStyles() - const [state, dispatch] = useReducer(reducer, initialState) const renderState = () => { diff --git a/new-lamassu-admin/src/pages/Authentication/LoginState.jsx b/new-lamassu-admin/src/pages/Authentication/LoginState.jsx index f5f89055..ce8b4c72 100644 --- a/new-lamassu-admin/src/pages/Authentication/LoginState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/LoginState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useLazyQuery, gql } from '@apollo/client' import { startAssertion } from '@simplewebauthn/browser' import { Field, Form, Formik } from 'formik' import React, { useContext } from 'react' @@ -11,10 +10,6 @@ import AppContext from 'src/AppContext' import { Button } from 'src/components/buttons' import { Checkbox, SecretInput, TextInput } from 'src/components/inputs/formik' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) - const LOGIN = gql` mutation login($username: String!, $password: String!) { login(username: $username, password: $password) @@ -68,7 +63,6 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => { } const LoginState = ({ state, dispatch, strategy }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -148,7 +142,7 @@ const LoginState = ({ state, dispatch, strategy }) => { component={TextInput} fullWidth autoFocus - className={classes.input} + className="-mt-4 mb-6" error={getErrorMsg( errors, touched, @@ -173,15 +167,16 @@ const LoginState = ({ state, dispatch, strategy }) => { userDataQueryError )} /> -
+
Keep me logged in
-
+
{getErrorMsg( errors, touched, @@ -190,7 +185,7 @@ const LoginState = ({ state, dispatch, strategy }) => { assertionQueryError || userDataQueryError ) && ( -

+

{getErrorMsg( errors, touched, @@ -214,15 +209,12 @@ const LoginState = ({ state, dispatch, strategy }) => { payload: {} }) }} - buttonClassName={classes.loginButton} - className={classes.fidoLoginButtonWrapper}> + buttonClassName="w-full" + className="mb-3"> I have a hardware key )} -

diff --git a/new-lamassu-admin/src/pages/Authentication/Register.jsx b/new-lamassu-admin/src/pages/Authentication/Register.jsx index cec03435..e7b71398 100644 --- a/new-lamassu-admin/src/pages/Authentication/Register.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Register.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Field, Form, Formik } from 'formik' import React, { useReducer } from 'react' @@ -11,11 +10,9 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik' - -import styles from './shared.styles' +import classes from './Authentication.module.css' const QueryParams = () => new URLSearchParams(useLocation().search) -const useStyles = makeStyles(styles) const VALIDATE_REGISTER_LINK = gql` query validateRegisterLink($token: String!) { @@ -87,7 +84,6 @@ const getErrorMsg = ( } const Register = () => { - const classes = useStyles() const history = useHistory() const token = QueryParams().get('t') @@ -165,7 +161,7 @@ const Register = () => { component={SecretInput} size="lg" fullWidth - className={classes.input} + className="-mt-4 mb-6" /> { size="lg" fullWidth /> -
+
{getErrorMsg( errors, touched, queryError, mutationError ) && ( -

+

{getErrorMsg( errors, touched, @@ -193,7 +189,7 @@ const Register = () => {

@@ -215,7 +211,7 @@ const Register = () => {
- ); + ) } export default Register diff --git a/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx b/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx index e16e1fd8..3d93ce88 100644 --- a/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Form, Formik } from 'formik' import { QRCodeSVG as QRCode } from 'qrcode.react' @@ -13,9 +12,7 @@ import { ActionButton, Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' import { primaryColor } from 'src/styling/variables' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const VALIDATE_RESET_2FA_LINK = gql` query validateReset2FALink($token: String!) { @@ -46,7 +43,6 @@ const reducer = (state, action) => { } const Reset2FA = () => { - const classes = useStyles() const history = useHistory() const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') @@ -177,23 +173,19 @@ const Reset2FA = () => { numInputs={6} error={invalidToken} /> - +
-
- {getErrorMsg() && ( -

{getErrorMsg()}

- )} - -
)} {!loading && state.result === 'failure' && ( @@ -206,7 +198,7 @@ const Reset2FA = () => {
- ); + ) } export default Reset2FA diff --git a/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx b/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx index 5c9392b6..5f440f17 100644 --- a/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx +++ b/new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx @@ -1,6 +1,5 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; +import { useQuery, useMutation, gql } from '@apollo/client' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import Paper from '@mui/material/Paper' import { Field, Form, Formik } from 'formik' import React, { useState } from 'react' @@ -12,9 +11,7 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik/' -import styles from './shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Authentication.module.css' const VALIDATE_RESET_PASSWORD_LINK = gql` query validateResetPasswordLink($token: String!) { @@ -60,7 +57,6 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => { } const ResetPassword = () => { - const classes = useStyles() const history = useHistory() const QueryParams = () => new URLSearchParams(useLocation().search) const token = QueryParams().get('t') @@ -129,7 +125,7 @@ const ResetPassword = () => { component={SecretInput} label="New password" fullWidth - className={classes.input} + className="-mt-4 mb-6" /> { label="Confirm your password" fullWidth /> -
+
{getErrorMsg(errors, touched, error) && ( -

+

{getErrorMsg(errors, touched, error)}

)}
@@ -165,7 +161,7 @@ const ResetPassword = () => {
- ); + ) } export default ResetPassword diff --git a/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx b/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx index 8ddb0594..24c8507b 100644 --- a/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx +++ b/new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx @@ -1,5 +1,4 @@ -import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, useQuery, useLazyQuery, gql } from '@apollo/client' import { Form, Formik } from 'formik' import { QRCodeSVG as QRCode } from 'qrcode.react' import React, { useContext, useState } from 'react' @@ -11,7 +10,7 @@ import { ActionButton, Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' import { primaryColor } from 'src/styling/variables' -import styles from './shared.styles' +import classes from './Authentication.module.css' const SETUP_2FA = gql` mutation setup2FA( @@ -48,10 +47,7 @@ const GET_USER_DATA = gql` } ` -const useStyles = makeStyles(styles) - const Setup2FAState = ({ state, dispatch }) => { - const classes = useStyles() const history = useHistory() const { setUserData } = useContext(AppContext) @@ -159,18 +155,17 @@ const Setup2FAState = ({ state, dispatch }) => { error={invalidToken} shouldAutoFocus /> - +
-
- {getErrorMsg() && ( -

{getErrorMsg()}

- )} - -
) ) diff --git a/new-lamassu-admin/src/pages/Authentication/shared.styles.js b/new-lamassu-admin/src/pages/Authentication/shared.styles.js deleted file mode 100644 index 20ed5058..00000000 --- a/new-lamassu-admin/src/pages/Authentication/shared.styles.js +++ /dev/null @@ -1,109 +0,0 @@ -import { backgroundColor, errorColor } from 'src/styling/variables' - -const styles = { - title: { - paddingTop: 8 - }, - input: { - marginBottom: 25, - marginTop: -15 - }, - wrapper: { - padding: '2.5em 4em', - width: 575, - display: 'flex', - flexDirection: 'column' - }, - titleWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginBottom: 30 - }, - rememberMeWrapper: { - marginTop: 35, - display: 'flex', - flexDirection: 'row' - }, - icon: { - transform: 'scale(1.5)', - marginRight: 25 - }, - checkbox: { - transform: 'scale(1.5)', - marginRight: 5, - marginLeft: -5 - }, - footer: { - marginTop: '10vh' - }, - twofaFooter: { - marginTop: '6vh' - }, - fidoLoginButtonWrapper: { - marginBottom: 12 - }, - loginButton: { - display: 'block', - width: '100%' - }, - welcomeBackground: { - background: 'url(/wizard-background.svg) no-repeat center center fixed', - backgroundColor: backgroundColor, - backgroundSize: 'cover', - height: '100vh', - width: '100vw', - position: 'relative', - left: '50%', - right: '50%', - marginLeft: '-50vw', - marginRight: '-50vw', - minHeight: '100vh' - }, - info: { - marginBottom: '5vh' - }, - info2: { - textAlign: 'justify' - }, - infoWrapper: { - marginBottom: '3vh' - }, - errorMessage: { - color: errorColor - }, - qrCodeWrapper: { - display: 'flex', - justifyContent: 'center', - marginBottom: '3vh' - }, - secretWrapper: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - secretLabel: { - marginRight: 15 - }, - secret: { - marginRight: 35 - }, - hiddenSecret: { - marginRight: 35, - filter: 'blur(8px)' - }, - confirm2FAInput: { - marginTop: 25 - }, - confirmPassword: { - marginTop: 25 - }, - error: { - color: errorColor - }, - enterButton: { - display: 'none' - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js index 745d226f..6859dd97 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js @@ -118,9 +118,6 @@ const styles = { actionButtonWrapper: { display: 'flex', gap: 12 - }, - enterButton: { - display: 'none' } } diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx index b3704f68..e6048622 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx @@ -1,4 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; +import { useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, Form, Formik } from 'formik' @@ -73,7 +73,7 @@ const CreateUserModal = ({ state, dispatch }) => { const [createUser, { error }] = useMutation(CREATE_USER, { onCompleted: ({ createRegisterToken: token }) => { - setCreateUserURL(urlResolver(`/register?t${token.token}`)) + setCreateUserURL(urlResolver(`/register?t=${token.token}`)) } }) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx index 73666fa7..a6639358 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx @@ -1,4 +1,4 @@ -import { useLazyQuery, gql } from "@apollo/client"; +import { useLazyQuery, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import { Form, Formik } from 'formik' import React, { useState } from 'react' @@ -80,17 +80,16 @@ const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => { error={invalidCode} containerStyle={classes.codeContainer} /> - +
- {getErrorMsg() && ( -

{getErrorMsg()}

- )} -
- -
) ) From b07a3d9ad62217a43740bf0c9cb7e264def343c4 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 29 Apr 2025 12:25:09 +0100 Subject: [PATCH 09/27] partial: blacklist css migration --- .../src/pages/Blacklist/Blacklist.jsx | 58 +++++++------- .../src/pages/Blacklist/Blacklist.styles.js | 75 ------------------- .../src/pages/Blacklist/BlacklistAdvanced.jsx | 20 ++--- .../src/pages/Blacklist/BlacklistModal.jsx | 25 +++---- .../src/pages/Blacklist/BlacklistTable.jsx | 11 +-- 5 files changed, 45 insertions(+), 144 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Blacklist/Blacklist.styles.js diff --git a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx index 637fb7e8..d0962c94 100644 --- a/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx @@ -1,9 +1,8 @@ import { useQuery, useMutation, gql } from '@apollo/client' import Dialog from '@mui/material/Dialog' +import DialogTitle from '@mui/material/DialogTitle' import DialogContent from '@mui/material/DialogContent' -import DialogActions from '@mui/material/DialogActions' import Switch from '@mui/material/Switch' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { HelpTooltip } from 'src/components/Tooltip' @@ -21,13 +20,10 @@ import { } from 'src/components/buttons' import { fromNamespace, toNamespace } from 'src/utils/config' -import styles from './Blacklist.styles' import BlackListAdvanced from './BlacklistAdvanced' import BlackListModal from './BlacklistModal' import BlacklistTable from './BlacklistTable' -const useStyles = makeStyles(styles) - const DELETE_ROW = gql` mutation DeleteBlacklistRow($address: String!) { deleteBlacklistRow(address: $address) { @@ -88,8 +84,6 @@ const EDIT_BLACKLIST_MESSAGE = gql` ` const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => { - const classes = useStyles() - return ( { } }} {...props}> -
- - - +
+ + + + +

{'Are you sure you want to enable this?'}

+ + + {`This mode means that only paper wallets will be printed for users, and they won't be permitted to scan an address from their own wallet.`} + {`This mode is only useful for countries like Switzerland which mandates such a feature.\n`} + {`Don't enable this if you want users to be able to scan an address of their choosing.`} +
+ + +
+
-

- {'Are you sure you want to enable this?'} -

- - {`This mode means that only paper wallets will be printed for users, and they won't be permitted to scan an address from their own wallet.`} - {`This mode is only useful for countries like Switzerland which mandates such a feature.\n`} - {`Don't enable this if you want users to be able to scan an address of their choosing.`} - - - - -
) } @@ -162,8 +160,6 @@ const Blacklist = () => { refetchQueries: () => ['getBlacklistData'] }) - const classes = useStyles() - const blacklistData = R.path(['blacklist'])(blacklistResponse) ?? [] const complianceConfig = @@ -289,7 +285,7 @@ const Blacklist = () => { )} {!advancedSettings && ( -
+
*': { - marginTop: 20 - }, - display: 'flex', - flexDirection: 'column', - height: '100%' - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - }, - modalTitle: { - margin: [['auto', 0, 8.5, 'auto']] - }, - subtitle: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row' - }, - white: { - color: white - }, - deleteButton: { - paddingLeft: 13 - }, - addressRow: { - marginLeft: 8 - }, - error: { - marginTop: 20 - }, - closeButton: { - display: 'flex', - padding: [[spacer * 2, spacer * 2, 0, spacer * 2]], - paddingRight: spacer * 1.5, - justifyContent: 'end' - }, - dialogTitle: { - margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]] - }, - dialogContent: { - width: 615, - marginLeft: 16 - }, - dialogActions: { - padding: spacer * 4, - paddingTop: spacer * 2 - }, - cancelButton: { - marginRight: 8, - padding: 0 - }, - resetToDefault: { - width: 145 - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx index 2f554905..5314bac9 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React, { useState } from 'react' @@ -15,10 +14,6 @@ import * as Yup from 'yup' import { ActionButton, IconButton, Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import styles from './Blacklist.styles' - -const useStyles = makeStyles(styles) - const DEFAULT_MESSAGE = `This address may be associated with a deceptive offer or a prohibited group. Please make sure you're using an address from your own wallet.` const getErrorMsg = (formikErrors, formikTouched, mutationError) => { @@ -35,7 +30,6 @@ const BlacklistAdvanced = ({ onClose, mutationError }) => { - const classes = useStyles() const [selectedMessage, setSelectedMessage] = useState(null) const elements = [ @@ -63,7 +57,7 @@ const BlacklistAdvanced = ({ size: 'sm', view: it => ( setSelectedMessage(it)} size="large"> @@ -78,7 +72,7 @@ const BlacklistAdvanced = ({ size: 'sm', view: it => ( {({ errors, touched, setFieldValue }) => ( -
+ setFieldValue('content', DEFAULT_MESSAGE)}> Reset to default @@ -156,15 +150,13 @@ const BlacklistAdvanced = ({ rows={6} component={TextInput} /> -
+
{getErrorMsg(errors, touched, mutationError) && ( {getErrorMsg(errors, touched, mutationError)} )} - +
)} diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx index 3a6555ba..dbd267f9 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Formik, Form, Field } from 'formik' import * as R from 'ramda' import React from 'react' @@ -10,11 +9,7 @@ import * as Yup from 'yup' import { Link } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import styles from './Blacklist.styles' -const useStyles = makeStyles(styles) - const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => { - const classes = useStyles() const handleAddToBlacklist = address => { addToBlacklist(address) } @@ -40,8 +35,8 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => { onSubmit={({ address }) => { handleAddToBlacklist(address.trim()) }}> -
-

Blacklist new address

+ +

Blacklist new address

{ placeholder={`ex: ${placeholderAddress}`} component={TextInput} /> +
+ {!R.isNil(errorMsg) && {errorMsg}} +
+ + Blacklist address + +
+
-
- {!R.isNil(errorMsg) && {errorMsg}} -
- - Blacklist address - -
-
) } diff --git a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx index 877ca6a8..33d99819 100644 --- a/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx +++ b/new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { DeleteDialog } from 'src/components/DeleteDialog' @@ -8,10 +7,6 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import { IconButton } from 'src/components/buttons' -import styles from './Blacklist.styles' - -const useStyles = makeStyles(styles) - const BlacklistTable = ({ data, handleDeleteEntry, @@ -20,8 +15,6 @@ const BlacklistTable = ({ deleteDialog, setDeleteDialog }) => { - const classes = useStyles() - const [toBeDeleted, setToBeDeleted] = useState() const elements = [ @@ -32,7 +25,7 @@ const BlacklistTable = ({ textAlign: 'left', size: 'sm', view: it => ( -
+
{R.path(['address'], it)}
) @@ -45,7 +38,7 @@ const BlacklistTable = ({ size: 'sm', view: it => ( { setDeleteDialog(true) setToBeDeleted(it) From f9103bd1ba6d19c0d22d995cf2b9671bda89f235 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 29 Apr 2025 12:52:30 +0100 Subject: [PATCH 10/27] partial: cashout css migration --- .../src/pages/Cashout/Cashout.jsx | 24 ++------ .../src/pages/Cashout/WizardSplash.jsx | 60 +++--------------- .../src/pages/Cashout/WizardStep.jsx | 40 ++++++------ .../src/pages/Cashout/WizardStep.styles.js | 61 ------------------- new-lamassu-admin/src/pages/Cashout/helper.js | 4 +- .../src/styling/global/global.css | 1 + 6 files changed, 32 insertions(+), 158 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js diff --git a/new-lamassu-admin/src/pages/Cashout/Cashout.jsx b/new-lamassu-admin/src/pages/Cashout/Cashout.jsx index e301c927..2872b5a8 100644 --- a/new-lamassu-admin/src/pages/Cashout/Cashout.jsx +++ b/new-lamassu-admin/src/pages/Cashout/Cashout.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import Switch from '@mui/material/Switch' import * as R from 'ramda' import React, { useState } from 'react' @@ -15,20 +14,6 @@ import { fromNamespace, toNamespace } from 'src/utils/config' import Wizard from './Wizard' import { DenominationsSchema, getElements } from './helper' -const useStyles = makeStyles({ - fudgeFactor: { - display: 'flex', - alignItems: 'center' - }, - switchLabel: { - margin: 6, - width: 24 - }, - autoComplete: { - width: '100%' - } -}) - const SAVE_CONFIG = gql` mutation Save($config: JSONObject) { saveConfig(config: $config) @@ -61,7 +46,6 @@ const GET_INFO = gql` ` const CashOut = ({ name: SCREEN_KEY }) => { - const classes = useStyles() const [wizard, setWizard] = useState(false) const { data, loading } = useQuery(GET_INFO) @@ -107,7 +91,7 @@ const CashOut = ({ name: SCREEN_KEY }) => { /> }> -
+

Transaction fudge factor

{ }} value={fudgeFactorActive} /> - + {fudgeFactorActive ? 'On' : 'Off'} @@ -150,7 +134,7 @@ const CashOut = ({ name: SCREEN_KEY }) => { error={error?.message} validationSchema={DenominationsSchema} disableRowEdit={R.compose(R.not, R.path(['active']))} - elements={getElements(machines, locale, classes)} + elements={getElements(machines, locale)} /> {R.isEmpty(machines) && } {wizard && ( diff --git a/new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx b/new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx index a7b210c0..dd9b0535 100644 --- a/new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx +++ b/new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx @@ -1,64 +1,20 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H1, P, Info2 } from 'src/components/typography' import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' import { Button } from 'src/components/buttons' -import { neon, spacer } from 'src/styling/variables' - -const styles = { - logo: { - maxHeight: 80, - maxWidth: 200 - }, - subtitle: { - margin: 0, - marginBottom: 42, - textAlign: 'center' - }, - text: { - margin: 0 - }, - button: { - margin: [[0, 'auto']] - }, - modalContent: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - flex: 1, - padding: [[0, 34, 107, 34]] - }, - innerContent: { - paddingBottom: 72 - }, - title: { - color: neon, - marginBottom: 12, - marginTop: 30, - textAlign: 'center' - }, - titleDecorator: { - verticalAlign: 'bottom', - marginRight: spacer * 1.5, - width: spacer * 3, - height: spacer * 3.25 - } -} - -const useStyles = makeStyles(styles) const WizardSplash = ({ name, onContinue }) => { - const classes = useStyles() - return ( -
-
-

- +
+
+

+ Enable cash-out

- {name} + + {name} +

You are about to activate cash-out functionality on your {name}{' '} machine which will allow your customers to sell crypto to you. @@ -68,7 +24,7 @@ const WizardSplash = ({ name, onContinue }) => { denominations for the machine.

-
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.jsx b/new-lamassu-admin/src/pages/Cashout/WizardStep.jsx index 9e4a70b1..6aa881c9 100644 --- a/new-lamassu-admin/src/pages/Cashout/WizardStep.jsx +++ b/new-lamassu-admin/src/pages/Cashout/WizardStep.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Formik, Form, Field } from 'formik' import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' @@ -18,9 +17,6 @@ import tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cas import tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg' import tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg' -import styles from './WizardStep.styles' -const useStyles = makeStyles(styles) - const getCassetesArtworks = () => ({ 1: { 1: cassetteOne @@ -54,14 +50,12 @@ const WizardStep = ({ options, numberOfCassettes }) => { - const classes = useStyles() - const label = isLastStep ? 'Finish' : 'Next' const cassetteIcon = getCassetesArtworks()[numberOfCassettes] return ( <> -
- {name} +
+ {name}
@@ -78,18 +72,18 @@ const WizardStep = ({ }} enableReinitialize validationSchema={schema}> -
-
+ +
{steps.map( ({ type, display, component }, idx) => 1 + idx === step && ( -
-

Edit {display}

+
+

Edit {display}

Choose bill denomination -
+
- + {fiatCurrency}
@@ -110,14 +104,14 @@ const WizardStep = ({ ) )} cassette
- @@ -125,11 +119,11 @@ const WizardStep = ({ )} {isLastStep && ( -
+
- Cash Cassette Bill Count + Cash Cassette Bill Count

- + When enabling cash-out, your bill count will be automatically set to zero. Make sure you physically put cash inside the cash cassettes to allow the machine to dispense it to your users. If @@ -137,9 +131,9 @@ const WizardStep = ({ count for this machine on your Cash boxes & cassettes tab under Maintenance.

- Default Commissions + Default Commissions

- + When enabling cash-out, default commissions will be set. To change commissions for this machine, please go to the Commissions tab under Settings where you can set exceptions for each of the @@ -147,7 +141,7 @@ const WizardStep = ({

{error && Failed to save} -
diff --git a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js b/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js deleted file mode 100644 index 4cd13301..00000000 --- a/new-lamassu-admin/src/pages/Cashout/WizardStep.styles.js +++ /dev/null @@ -1,61 +0,0 @@ -import { errorColor, spacer } from 'src/styling/variables' - -const LABEL_WIDTH = 150 - -export default { - title: { - margin: [[0, 0, 12, 0]] - }, - titleDiv: { - paddingBottom: 32 - }, - subtitle: { - margin: [[32, 0, 21, 0]] - }, - edit: { - margin: [[0, 0, 0, 0]] - }, - error: { - color: errorColor - }, - bill: { - width: 131, - display: 'flex', - alignItems: 'center', - justifyContent: 'end' - }, - billInput: { - width: '100%' - }, - suffix: { - paddingLeft: spacer * 2 - }, - submit: { - alignSelf: 'flex-end' - }, - picker: { - width: LABEL_WIDTH - }, - header: { - display: 'flex' - }, - column: { - display: 'flex', - flexGrow: 2, - flexDirection: 'column', - paddingBottom: 32, - justifyContent: 'space-between' - }, - step: { - flex: 1 - }, - stepImage: { - position: 'relative', - top: -20, - right: 14 - }, - disclaimerIcon: { - float: 'left', - margin: [[2, 16, 48, 0]] - } -} diff --git a/new-lamassu-admin/src/pages/Cashout/helper.js b/new-lamassu-admin/src/pages/Cashout/helper.js index 8178a2f2..8aa62d0b 100644 --- a/new-lamassu-admin/src/pages/Cashout/helper.js +++ b/new-lamassu-admin/src/pages/Cashout/helper.js @@ -102,7 +102,7 @@ const DenominationsSchema = Yup.object() }) ) -const getElements = (machines, locale = {}, classes) => { +const getElements = (machines, locale = {}) => { const fiatCurrency = R.prop('fiatCurrency')(locale) const maxNumberOfCassettes = Math.max( ...R.map(it => it.numberOfCassettes, machines), @@ -122,7 +122,7 @@ const getElements = (machines, locale = {}, classes) => { options: options, labelProp: 'display', valueProp: 'code', - className: classes.autoComplete + className: 'w-full' } : { decimalPlaces: 0 } diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index af8794ce..5c8432f6 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -41,6 +41,7 @@ --color-tomato: var(--tomato); --color-ghost: var(--ghost); --color-zircon: var(--zircon); + --color-neon: var(--neon); --color-malachite: var(--malachite); --color-orange-yellow: var(--orange-yellow); } From 926b7e6933c60fc94e853fc0571f94490416266b Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 29 Apr 2025 12:58:08 +0100 Subject: [PATCH 11/27] partial: commissions css migration --- .../src/pages/Commissions/Commissions.jsx | 15 ++------- .../components/CommissionsList.jsx | 31 +++---------------- 2 files changed, 6 insertions(+), 40 deletions(-) diff --git a/new-lamassu-admin/src/pages/Commissions/Commissions.jsx b/new-lamassu-admin/src/pages/Commissions/Commissions.jsx index 36b2388b..bfe4a9d2 100644 --- a/new-lamassu-admin/src/pages/Commissions/Commissions.jsx +++ b/new-lamassu-admin/src/pages/Commissions/Commissions.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import { HelpTooltip } from 'src/components/Tooltip' @@ -16,14 +15,6 @@ import { P } from '../../components/typography' import CommissionsDetails from './components/CommissionsDetails' import CommissionsList from './components/CommissionsList' -const styles = { - listViewButton: { - marginLeft: 4 - } -} - -const useStyles = makeStyles(styles) - const GET_DATA = gql` query getData { config @@ -49,7 +40,6 @@ const removeCoinFromOverride = crypto => override => }) const Commissions = ({ name: SCREEN_KEY }) => { - const classes = useStyles() const [showMachines, setShowMachines] = useState(false) const [error, setError] = useState(null) const { data, loading } = useQuery(GET_DATA) @@ -120,7 +110,7 @@ const Commissions = ({ name: SCREEN_KEY }) => { toggle: setShowMachines } ]} - iconClassName={classes.listViewButton} + iconClassName="ml-1" appendix={

@@ -150,7 +140,6 @@ const Commissions = ({ name: SCREEN_KEY }) => { error={error} save={save} saveOverrides={saveOverrides} - classes={classes} /> )} {showMachines && !loading && ( diff --git a/new-lamassu-admin/src/pages/Commissions/components/CommissionsList.jsx b/new-lamassu-admin/src/pages/Commissions/components/CommissionsList.jsx index 0889e6dd..927660c8 100644 --- a/new-lamassu-admin/src/pages/Commissions/components/CommissionsList.jsx +++ b/new-lamassu-admin/src/pages/Commissions/components/CommissionsList.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo, useState } from 'react' import { @@ -11,24 +10,6 @@ import { import { Table as EditableTable } from 'src/components/editableTable' import { Select } from 'src/components/inputs' -const styles = { - headerLine: { - display: 'flex', - justifyContent: '', - marginBottom: 24 - }, - select: { - marginRight: 24 - }, - tableWrapper: { - flex: 1, - display: 'block', - overflowY: 'auto', - width: '100%', - maxHeight: '70vh' - } -} - const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' @@ -61,8 +42,6 @@ const ORDER_OPTIONS = [ } ] -const useStyles = makeStyles(styles) - const getElement = (code, display) => ({ code: code, display: display || code @@ -92,8 +71,6 @@ const filterCommissions = (coinFilter, machineFilter) => const CommissionsList = memo( ({ config, localeConfig, currency, data, error, saveOverrides }) => { - const classes = useStyles() - const [machineFilter, setMachineFilter] = useState(SHOW_ALL) const [coinFilter, setCoinFilter] = useState(SHOW_ALL) const [orderProp, setOrderProp] = useState(ORDER_OPTIONS[0]) @@ -137,9 +114,9 @@ const CommissionsList = memo( return (

-
+
-
+
Date: Mon, 5 May 2025 14:43:58 +0100 Subject: [PATCH 12/27] partial: customer page css migration --- .../src/components/buttons/ActionButton.jsx | 5 +- .../components/buttons/ActionButton.styles.js | 4 + .../src/components/inputs/base/TextInput.jsx | 13 +- .../src/pages/Customers/CustomerData.jsx | 247 +++----- .../pages/Customers/CustomerData.styles.js | 49 -- .../src/pages/Customers/CustomerNotes.jsx | 11 +- .../pages/Customers/CustomerNotes.styles.js | 17 - .../src/pages/Customers/CustomerPhotos.jsx | 28 +- .../pages/Customers/CustomerPhotos.styles.js | 38 -- .../src/pages/Customers/CustomerProfile.jsx | 59 +- .../pages/Customers/CustomerProfile.styles.js | 81 --- .../src/pages/Customers/Customers.jsx | 7 +- .../src/pages/Customers/CustomersList.jsx | 8 +- .../pages/Customers/CustomersList.styles.js | 117 ---- .../src/pages/Customers/Wizard.jsx | 55 +- .../components/CreateCustomerModal.jsx | 41 +- .../components/CustomInfoRequestsData.jsx | 193 ------ .../Customers/components/CustomerDetails.jsx | 20 +- .../Customers/components/CustomerSidebar.jsx | 25 +- .../components/CustomerSidebar.styles.js | 41 -- .../Customers/components/EditableCard.jsx | 550 +++++++----------- .../components/EditableCard.styles.js | 70 --- .../src/pages/Customers/components/Field.jsx | 38 -- .../Customers/components/FrontCameraPhoto.jsx | 28 - .../Customers/components/IdCardPhotoCard.jsx | 52 -- .../pages/Customers/components/IdDataCard.jsx | 88 --- .../pages/Customers/components/PhoneCard.jsx | 36 -- .../pages/Customers/components/PhotosCard.jsx | 22 +- .../Customers/components/PhotosCard.styles.js | 42 -- .../Customers/components/PhotosCarousel.jsx | 18 +- .../components/PhotosCarousel.styles.js | 30 - .../Customers/components/TransactionsList.jsx | 47 +- .../src/pages/Customers/components/Upload.jsx | 54 +- .../Customers/components/Upload.module.css | 14 + .../src/pages/Customers/components/consts.js | 5 + .../src/pages/Customers/components/index.js | 6 - .../components/notes/NewNoteCard.jsx | 19 +- .../components/notes/NewNoteModal.jsx | 16 +- .../components/notes/NewNoteModal.styles.js | 25 - .../Customers/components/notes/NoteCard.jsx | 48 +- .../components/notes/NoteCard.styles.js | 93 --- .../Customers/components/notes/NoteEdit.jsx | 14 +- .../components/propertyCard/PropertyCard.jsx | 132 ----- .../propertyCard/PropertyCard.styles.js | 69 --- .../components/propertyCard/index.js | 13 - .../src/pages/Customers/helper.jsx | 105 +--- .../pages/Transactions/CopyToClipboard.jsx | 3 +- .../src/styling/global/global.css | 11 + 48 files changed, 524 insertions(+), 2183 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Customers/CustomerData.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/CustomerNotes.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/CustomersList.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/Field.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/FrontCameraPhoto.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/PhoneCard.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/PhotosCard.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.styles.js create mode 100644 new-lamassu-admin/src/pages/Customers/components/Upload.module.css create mode 100644 new-lamassu-admin/src/pages/Customers/components/consts.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.jsx delete mode 100644 new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.styles.js delete mode 100644 new-lamassu-admin/src/pages/Customers/components/propertyCard/index.js diff --git a/new-lamassu-admin/src/components/buttons/ActionButton.jsx b/new-lamassu-admin/src/components/buttons/ActionButton.jsx index d2fb2043..36eba7cf 100644 --- a/new-lamassu-admin/src/components/buttons/ActionButton.jsx +++ b/new-lamassu-admin/src/components/buttons/ActionButton.jsx @@ -7,14 +7,15 @@ import styles from './ActionButton.styles' const useStyles = makeStyles(styles) const ActionButton = memo( - ({ className, Icon, InverseIcon, color, children, ...props }) => { + ({ 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.tomato]: color === 'tomato', + [classes.center]: center } return ( diff --git a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js index f924347a..d6659029 100644 --- a/new-lamassu-admin/src/components/buttons/ActionButton.styles.js +++ b/new-lamassu-admin/src/components/buttons/ActionButton.styles.js @@ -119,5 +119,9 @@ export default { } } }, + center: { + alignItems: 'center', + justifyContent: 'center' + }, actionButtonIconActive: {} } diff --git a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx index 33ba68ac..2c4592e7 100644 --- a/new-lamassu-admin/src/components/inputs/base/TextInput.jsx +++ b/new-lamassu-admin/src/components/inputs/base/TextInput.jsx @@ -19,6 +19,7 @@ const TextInput = memo( suffix, textAlign, width, + inputClasses, // lg or sm size, bold, @@ -29,7 +30,7 @@ const TextInput = memo( const classes = useStyles({ textAlign, width, size }) const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value) const filled = isPasswordFilled || isTextFilled - const inputClasses = { + const divClass = { [classes.bold]: bold } @@ -44,15 +45,17 @@ const TextInput = memo( classes={{ root: classes.root }} className={className} InputProps={{ - className: classnames(inputClasses), + className: classnames(divClass), classes: { root: classes.size, - underline: filled ? classes.underline : null + underline: filled ? classes.underline : null, + input: inputClasses }, ...InputProps }} - {...props} /> - ); + {...props} + /> + ) } ) diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.jsx b/new-lamassu-admin/src/pages/Customers/CustomerData.jsx index e1f9a265..61a8e1d3 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerData.jsx @@ -1,28 +1,19 @@ -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import { useState, React } from 'react' import ImagePopper from 'src/components/ImagePopper' import { H3, Info3 } from 'src/components/typography' import CardIcon from 'src/styling/icons/ID/card/comet.svg?react' import PhoneIcon from 'src/styling/icons/ID/phone/comet.svg?react' -import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react' import EditIcon from 'src/styling/icons/action/edit/comet.svg?react' -import CustomerListViewReversedIcon from 'src/styling/icons/circle buttons/customer-list-view/white.svg?react' -import CustomerListViewIcon from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg?react' -import OverviewReversedIcon from 'src/styling/icons/circle buttons/overview/white.svg?react' -import OverviewIcon from 'src/styling/icons/circle buttons/overview/zodiac.svg?react' import * as Yup from 'yup' -import { FeatureButton } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED -} from 'src/pages/Customers/components/propertyCard' +} from 'src/pages/Customers/components/consts' import { onlyFirstToUpper } from 'src/utils/string' -import styles from './CustomerData.styles' import { EditableCard } from './components' import { customerDataElements, @@ -32,32 +23,20 @@ import { getFormattedPhone } from './helper' -const useStyles = makeStyles(styles) - const IMAGE_WIDTH = 165 const IMAGE_HEIGHT = 32 const POPUP_IMAGE_WIDTH = 360 const POPUP_IMAGE_HEIGHT = 240 -const Photo = ({ show, src }) => { - const classes = useStyles({ width: IMAGE_WIDTH }) - +const Photo = ({ src }) => { return ( - <> - {show ? ( - - ) : ( -
- -
- )} - + ) } @@ -75,8 +54,6 @@ const CustomerData = ({ setRetrieve, checkAgainstSanctions }) => { - const classes = useStyles() - const [listView, setListView] = useState(false) const [previewPhoto, setPreviewPhoto] = useState(null) const [previewCard, setPreviewCard] = useState(null) @@ -163,7 +140,7 @@ const CustomerData = ({ { fields: customerDataElements.idCardData, title: 'ID Scan', - titleIcon: , + titleIcon: , state: R.path(['idCardDataOverride'])(customer), authorize: () => updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }), @@ -187,7 +164,7 @@ const CustomerData = ({ { fields: smsDataElements, title: 'SMS data', - titleIcon: , + titleIcon: , state: R.path(['phoneOverride'])(customer), authorize: () => updateCustomer({ phoneOverride: OVERRIDE_AUTHORIZED }), reject: () => updateCustomer({ phoneOverride: OVERRIDE_REJECTED }), @@ -208,7 +185,7 @@ const CustomerData = ({ { title: 'Email', fields: customerDataElements.email, - titleIcon: , + titleIcon: , // state: R.path(['emailOverride'])(customer), // authorize: () => updateCustomer({ emailOverride: OVERRIDE_AUTHORIZED }), // reject: () => updateCustomer({ emailOverride: OVERRIDE_REJECTED }), @@ -220,13 +197,13 @@ const CustomerData = ({ }, { title: 'Name', - titleIcon: , + titleIcon: , isAvailable: false, editable: true }, { title: 'Sanctions check', - titleIcon: , + titleIcon: , state: R.path(['sanctionsOverride'])(customer), authorize: () => updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }), @@ -238,7 +215,7 @@ const CustomerData = ({ { fields: customerDataElements.frontCamera, title: 'Front facing camera', - titleIcon: , + titleIcon: , state: R.path(['frontCameraOverride'])(customer), authorize: () => updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }), @@ -259,7 +236,6 @@ const CustomerData = ({ return customer.frontCameraPath ? ( , + titleIcon: , state: R.path(['idCardPhotoOverride'])(customer), authorize: () => updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }), @@ -298,7 +274,6 @@ const CustomerData = ({ return customer.idCardPhotoPath ? ( , + titleIcon: , state: R.path(['usSsnOverride'])(customer), authorize: () => updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED }), reject: () => updateCustomer({ usSsnOverride: OVERRIDE_REJECTED }), @@ -342,7 +317,7 @@ const CustomerData = ({ } ], title: it.customInfoRequest.customRequest.name, - titleIcon: , + titleIcon: , state: R.path(['override'])(it), authorize: () => authorizeCustomRequest({ @@ -395,7 +370,7 @@ const CustomerData = ({ } ], title: it.label, - titleIcon: , + titleIcon: , save: values => { updateCustomEntry({ fieldId: it.id, @@ -445,7 +420,7 @@ const CustomerData = ({ editable: false } ], - titleIcon: , + titleIcon: , title: `External Info [${it.service}]`, initialValues: it ?? { externalId: '', @@ -477,26 +452,28 @@ const CustomerData = ({ idx ) => { return ( - - {children} - +
+ + {children} + +
) } @@ -505,113 +482,67 @@ const CustomerData = ({ idx ) => { return ( - - {children} - +
+ + {children} + +
) } const visibleCards = getVisibleCards(cards) + const Separator = ({ title }) => ( +
+
+
+ {title} +
+
+
+ ) + return (
-
-

{'Customer data'}

- { - // TODO: Remove false condition for next release - // false && ( - // <> - // setListView(false)} - // /> - // setListView(true)}> - // - // ) - } -
+

{'Customer data'}

- {!listView && customer && ( - - - {visibleCards.map((elem, idx) => { - return isEven(idx) ? editableCard(elem, idx) : null - })} - - - {visibleCards.map((elem, idx) => { - return !isEven(idx) ? editableCard(elem, idx) : null - })} - - - )} - {!R.isEmpty(customFields) && ( -
- Custom data entry - - + {customer && ( +
+ {visibleCards.map((elem, idx) => { + return editableCard(elem, idx) + })} + {!R.isEmpty(customFields) && ( + <> + {customFields.map((elem, idx) => { - return isEven(idx) ? editableCard(elem, idx) : null + return editableCard(elem, idx) })} - - - {customFields.map((elem, idx) => { - return !isEven(idx) ? editableCard(elem, idx) : null - })} - - -
- )} - {!R.isEmpty(customRequirements) && ( -
- Custom requirements - - + + )} + {!R.isEmpty(customRequirements) && ( + <> + {customRequirements.map((elem, idx) => { - return isEven(idx) ? editableCard(elem, idx) : null + return editableCard(elem, idx) })} - - - {customRequirements.map((elem, idx) => { - return !isEven(idx) ? editableCard(elem, idx) : null - })} - - -
- )} - {!R.isEmpty(externalCompliance) && ( -
- - External compliance information - - - + + )} + {!R.isEmpty(externalCompliance) && ( + <> + {externalCompliance.map((elem, idx) => { - return isEven(idx) ? nonEditableCard(elem, idx) : null + return nonEditableCard(elem, idx) })} - - - {externalCompliance.map((elem, idx) => { - return !isEven(idx) ? nonEditableCard(elem, idx) : null - })} - - + + )}
)}
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js deleted file mode 100644 index 373e2f0c..00000000 --- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js +++ /dev/null @@ -1,49 +0,0 @@ -import { offColor } from 'src/styling/variables' - -export default { - header: { - display: 'flex', - flexDirection: 'row', - marginBottom: 15 - }, - title: { - marginTop: 7, - marginRight: 24 - }, - editIcon: { - marginTop: 5 - }, - cardIcon: { - marginTop: 7 - }, - viewIcons: { - marginRight: 12 - }, - wrapper: { - display: 'block', - overflow: 'hidden', - whiteSpace: 'nowrap' - }, - separator: { - color: offColor, - margin: [[8, 0, 8, 150]], - position: 'relative', - display: 'inline-block', - '&:before, &:after': { - content: '""', - position: 'absolute', - background: offColor, - top: '50%', - width: 1000, - height: 1 - }, - '&:before': { - right: '100%', - marginRight: 15 - }, - '&:after': { - left: '100%', - marginLeft: 15 - } - } -} diff --git a/new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx b/new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx index 8e8f01b7..ee1ad95e 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx @@ -1,16 +1,12 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import { React, useState } from 'react' import { H3 } from 'src/components/typography' -import styles from './CustomerNotes.styles' import NewNoteCard from './components/notes/NewNoteCard' import NewNoteModal from './components/notes/NewNoteModal' import NoteCard from './components/notes/NoteCard' import NoteEdit from './components/notes/NoteEdit' -const useStyles = makeStyles(styles) - const CustomerNotes = ({ customer, createNote, @@ -18,7 +14,6 @@ const CustomerNotes = ({ editNote, timezone }) => { - const classes = useStyles() const [openModal, setOpenModal] = useState(false) const [editing, setEditing] = useState(null) @@ -52,11 +47,9 @@ const CustomerNotes = ({ return (
-
-

{'Notes'}

-
+

{'Notes'}

{R.isNil(editing) && ( -
+
{customerNotes.map((it, idx) => ( { - const classes = useStyles() - const [photosDialog, setPhotosDialog] = useState(false) const [photoClickedIndex, setPhotoClickIndex] = useState(null) const orderedPhotosData = !R.isNil(photoClickedIndex) @@ -23,10 +17,8 @@ const CustomerPhotos = ({ photosData, timezone }) => { return (
-
-

{'Photos & files'}

-
-
+

{'Photos & files'}

+
{photosData.map((elem, idx) => ( { - const classes = useStyles() - return ( { setPhotoClickIndex(idx) setPhotosDialog(true) }}> - -
+ +
- - {format('yyyy-MM-dd', new Date(date))} - + {format('yyyy-MM-dd', new Date(date))}
) diff --git a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js deleted file mode 100644 index 93d8637f..00000000 --- a/new-lamassu-admin/src/pages/Customers/CustomerPhotos.styles.js +++ /dev/null @@ -1,38 +0,0 @@ -const styles = { - header: { - display: 'flex', - flexDirection: 'row' - }, - title: { - marginTop: 7, - marginRight: 24, - marginBottom: 32 - }, - photosChipList: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - gap: 14 - }, - image: { - objectFit: 'cover', - objectPosition: 'center', - width: 224, - height: 200, - borderTopLeftRadius: 4, - borderTopRightRadius: 4 - }, - photoCardChip: { - cursor: 'pointer' - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [[8, 0, 0, 8]] - }, - date: { - margin: [[0, 0, 8, 12]] - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx index 219c3cb5..acae9d2e 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx @@ -4,7 +4,6 @@ import DialogActions from '@mui/material/DialogActions' import DialogContent from '@mui/material/DialogContent' import Dialog from '@mui/material/Dialog' import Switch from '@mui/material/Switch' -import { makeStyles } from '@mui/styles' import NavigateNextIcon from '@mui/icons-material/NavigateNext' import * as R from 'ramda' import React, { memo, useState } from 'react' @@ -23,7 +22,7 @@ import { Button, IconButton, ActionButton } from 'src/components/buttons' import { OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED -} from 'src/pages/Customers/components/propertyCard' +} from 'src/pages/Customers/components/consts' // TODO: Enable for next release // import DiscountReversedIcon from 'src/styling/icons/button/discount/white.svg?react' // import Discount from 'src/styling/icons/button/discount/zodiac.svg?react' @@ -32,7 +31,6 @@ import { fromNamespace, namespaces } from 'src/utils/config' import CustomerData from './CustomerData' import CustomerNotes from './CustomerNotes' import CustomerPhotos from './CustomerPhotos' -import styles from './CustomerProfile.styles' import { CustomerDetails, TransactionsList, @@ -41,8 +39,6 @@ import { } from './components' import { getFormattedPhone, getName, formatPhotosData } from './helper' -const useStyles = makeStyles(styles) - const GET_CUSTOMER = gql` query customer($customerId: ID!) { config @@ -528,23 +524,22 @@ const CustomerProfile = memo(() => { display: it.customRequest.name })) ?? [] - const classes = useStyles() const email = R.path(['email'])(customerData) const phone = R.path(['phone'])(customerData) return ( <> } aria-label="breadcrumb"> history.push('/compliance/customers')}> Customers - + {name.length ? name : email?.length @@ -552,8 +547,8 @@ const CustomerProfile = memo(() => { : getFormattedPhone(phone, locale.country)} -
-
+
+
{!loading && !customerData.isAnonymous && ( <> { onClick={onClickSidebarItem} />
- Actions -
+ + Actions + +
{ {`Manual data entry`} {/* { */} {isSuspended && ( { )} {
- + {`Special user status`} -
-
+
+
{ : enableTestCustomer() } /> - {`Test user`} + Test user
)}
-
+
{isOverview && (
@@ -724,8 +720,6 @@ const RetrieveDataDialog = ({ error, props }) => { - const classes = useStyles() - return ( -
+
onDismissed(false)}>
-

{'Retrieve API data from Twilio'}

- +

{'Retrieve API data from Twilio'}

+ {`With this action you'll be using Twilio's API to retrieve additional data from this user. This includes name and address, if available.\n`} {` There is a small cost from Twilio for each retrieval. Would you like to proceed?`} {error && ( - + Failed to fetch additional data )} - -
diff --git a/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx b/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx index ba7e1484..c71f5289 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Field, Form, Formik } from 'formik' import { parsePhoneNumberWithError } from 'libphonenumber-js' import * as R from 'ramda' @@ -10,28 +9,6 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import { spacer, primaryColor, fontPrimary } from 'src/styling/variables' - -const styles = { - modalTitle: { - marginTop: -5, - color: primaryColor, - fontFamily: fontPrimary - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%' - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - } -} const getValidationSchema = countryCodes => Yup.object().shape({ @@ -39,7 +16,9 @@ const getValidationSchema = countryCodes => .required('A phone number is required') .test('is-valid-number', 'That is not a valid phone number', value => { try { - return countryCodes.some(countryCode => parsePhoneNumberWithError(value, countryCode).isValid()) + return countryCodes.some(countryCode => + parsePhoneNumberWithError(value, countryCode).isValid() + ) } catch (e) { return false } @@ -60,8 +39,6 @@ const initialValues = { phoneNumber: '' } -const useStyles = makeStyles(styles) - const getErrorMsg = (formikErrors, formikTouched) => { if (!formikErrors || !formikTouched) return null if (formikErrors.phoneNumber && formikTouched.phoneNumber) @@ -70,8 +47,6 @@ const getErrorMsg = (formikErrors, formikTouched) => { } const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => { - const classes = useStyles() - const possibleCountries = R.append( locale?.country, R.map(it => it.country, locale?.overrides ?? []) @@ -99,8 +74,10 @@ const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => { }) }}> {({ errors, touched }) => ( - -

Create new customer

+ +

Create new customer

{ autoFocus label="Phone number" /> -
+
{getErrorMsg(errors, touched) && ( {getErrorMsg(errors, touched)} )}
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx b/new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx deleted file mode 100644 index 037a161f..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/CustomInfoRequestsData.jsx +++ /dev/null @@ -1,193 +0,0 @@ -import { useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' -import React, { useState } from 'react' -import Modal from 'src/components/Modal' -import { MainStatus } from 'src/components/Status' -import { - Table, - THead, - Th, - Tr, - Td, - TBody -} from 'src/components/fake-table/Table' -import { H3, Label1 } from 'src/components/typography' -import AuthorizeReversedIcon from 'src/styling/icons/button/authorize/white.svg?react' -import AuthorizeIcon from 'src/styling/icons/button/authorize/zodiac.svg?react' -import RejectReversedIcon from 'src/styling/icons/button/cancel/white.svg?react' -import RejectIcon from 'src/styling/icons/button/cancel/zodiac.svg?react' -import LinkIcon from 'src/styling/icons/month arrows/right.svg?react' - -import { ActionButton } from 'src/components/buttons' -import { white, disabledColor } from 'src/styling/variables' - -import DetailsCard from '../../Triggers/CustomInfoRequests/DetailsCard' -const styles = { - white: { - color: white - }, - actionButton: { - display: 'flex', - height: 28, - marginRight: 'auto' - }, - flex: { - display: 'flex' - }, - disabledBtn: { - backgroundColor: disabledColor, - '&:hover': { - backgroundColor: disabledColor - } - }, - linkIcon: { - marginTop: 12, - marginLeft: 4, - cursor: 'pointer' - } -} - -const SET_AUTHORIZED_REQUEST = gql` - mutation setAuthorizedCustomRequest( - $customerId: ID! - $infoRequestId: ID! - $override: String! - ) { - setAuthorizedCustomRequest( - customerId: $customerId - infoRequestId: $infoRequestId - override: $override - ) - } -` - -const useStyles = makeStyles(styles) -const CustomInfoRequestsData = ({ data }) => { - const classes = useStyles() - const [toView, setToView] = useState(null) - const [setAuthorized] = useMutation(SET_AUTHORIZED_REQUEST, { - onError: () => console.error('Error while clearing notification'), - refetchQueries: () => ['customer'] - }) - - const authorize = it => - setAuthorized({ - variables: { - customerId: it.customerId, - infoRequestId: it.customInfoRequest.id, - isAuthorized: true - } - }) - - const reject = it => - setAuthorized({ - variables: { - customerId: it.customerId, - infoRequestId: it.customInfoRequest.id, - isAuthorized: false - } - }) - - const getBtnClasses = (it, isAuthorize) => { - return { - [classes.actionButton]: true, - [classes.disabledBtn]: - (isAuthorize && it.approved === true) || - (!isAuthorize && it.approved === false) - } - } - - const AuthorizeButton = it => ( - authorize(it)}> - Authorize - - ) - - const RejectButton = it => ( - reject(it)}> - Reject - - ) - - const getActionButtons = it => { - return ( - <> - {AuthorizeButton(it)} - {RejectButton(it)} - - ) - } - - const getAuthorizedStatus = it => - it.approved === null - ? { label: 'Pending', type: 'neutral' } - : it.approved === false - ? { label: 'Rejected', type: 'error' } - : { label: 'Accepted', type: 'success' } - - return ( - <> -

Custom Info Requests Data

-
- - - - - - - - - {data.map((it, idx) => ( - - - - - - - - - ))} - -
Custom Request NameCustom Request DataStatus - Actions -
-
- {it.customInfoRequest.customRequest.name} -
setToView(it)}> - -
-
- 		-
{JSON.stringify(it.customerData.data, null, 2)}
- 		- - -
{getActionButtons(it)}
-
- {toView && ( - setToView(null)}> -

Custom Information Request Details

- - - )} -
- - ) -} - -export default CustomInfoRequestsData diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx index 3b285039..fb09c760 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/CustomerDetails.jsx @@ -1,19 +1,13 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo } from 'react' import { H2, Label1, P } from 'src/components/typography' import IdIcon from 'src/styling/icons/ID/card/zodiac.svg?react' -import mainStyles from '../CustomersList.styles' import { getFormattedPhone, getName } from '../helper' import PhotosCard from './PhotosCard' -const useStyles = makeStyles(mainStyles) - const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => { - const classes = useStyles() - const idNumber = R.path(['idCardData', 'documentNumber'])(customer) const usSsn = R.path(['usSsn'])(customer) const name = getName(customer) @@ -50,11 +44,11 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => { }) return ( -
+
-
- +
+

{name.length ? name @@ -68,7 +62,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => { {header} @@ -76,11 +70,7 @@ const CustomerDetails = memo(({ customer, photosData, locale, timezone }) => {

{elements.map(({ size, value }, idx) => ( -

+

{value}

))} diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx index f35041ba..3b396d96 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import CustomerDataReversedIcon from 'src/styling/icons/customer-nav/data/comet.svg?react' @@ -10,12 +9,9 @@ import OverviewIcon from 'src/styling/icons/customer-nav/overview/white.svg?reac import PhotosReversedIcon from 'src/styling/icons/customer-nav/photos/comet.svg?react' import Photos from 'src/styling/icons/customer-nav/photos/white.svg?react' -import styles from './CustomerSidebar.styles' - -const useStyles = makeStyles(styles) +import { P } from '/src/components/typography/index.jsx' const CustomerSidebar = ({ isSelected, onClick }) => { - const classes = useStyles() const sideBarOptions = [ { code: 'overview', @@ -44,19 +40,24 @@ const CustomerSidebar = ({ isSelected, onClick }) => { ] return ( -
+
{sideBarOptions?.map(({ Icon, InverseIcon, display, code }, idx) => (
onClick(code)}> -
- {isSelected(code) ? : } -
- {display} + {isSelected(code) ? : } +

+ {display} +

))}
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js deleted file mode 100644 index 9485c7f4..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js +++ /dev/null @@ -1,41 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { zircon, offDarkColor, white } from 'src/styling/variables' - -const { tl2, p } = typographyStyles - -const sidebarColor = zircon - -export default { - sidebar: { - display: 'flex', - backgroundColor: sidebarColor, - width: 219, - flexDirection: 'column', - borderRadius: 5 - }, - link: { - alignItems: 'center', - display: 'flex', - extend: p, - position: 'relative', - color: offDarkColor, - padding: 15, - cursor: 'pointer' - }, - activeLink: { - display: 'flex', - alignItems: 'center', - extend: tl2, - color: white, - backgroundColor: offDarkColor, - '&:first-child': { - borderRadius: [[5, 5, 0, 0]] - }, - '&:last-child': { - borderRadius: [[0, 0, 5, 5]] - } - }, - icon: { - marginRight: 15 - } -} diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx b/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx index 682ad41e..56e04f9d 100644 --- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx @@ -1,18 +1,13 @@ import CardContent from '@mui/material/CardContent' import Card from '@mui/material/Card' -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import { useState, React, useRef } from 'react' -// import { HelpTooltip } from 'src/components/Tooltip' import ErrorMessage from 'src/components/ErrorMessage' import PromptWhenDirty from 'src/components/PromptWhenDirty' import { MainStatus } from 'src/components/Status' import { Label1, P, H3 } from 'src/components/typography' -import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' -import DeleteReversedIcon from 'src/styling/icons/action/delete/white.svg?react' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import EditReversedIcon from 'src/styling/icons/action/edit/white.svg?react' import AuthorizeIcon from 'src/styling/icons/button/authorize/white.svg?react' @@ -25,84 +20,34 @@ import SaveReversedIcon from 'src/styling/icons/circle buttons/save/white.svg?re import { ActionButton } from 'src/components/buttons' import { - OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED, OVERRIDE_PENDING -} from 'src/pages/Customers/components/propertyCard' -import { comet } from 'src/styling/variables' +} from 'src/pages/Customers/components/consts' -import styles from './EditableCard.styles' - -const useStyles = makeStyles(styles) - -const fieldStyles = { - field: { - position: 'relative', - width: 280, - height: 48, - padding: [[0, 4, 4, 0]], - marginTop: 2 - }, - label: { - color: comet, - margin: [[0, 0, 0, 0]] - }, - notEditing: { - display: 'flex', - flexDirection: 'column', - '& > p:first-child': { - height: 16, - lineHeight: '16px', - transformOrigin: 'left', - paddingLeft: 0, - margin: [[3, 0, 3, 0]] - }, - '& > p:last-child': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - margin: 0 - } - }, - editing: { - '& > div': { - '& > input': { - padding: 0, - fontSize: 14 - } - } - }, - readOnlyLabel: { - color: comet, - margin: [[3, 0, 3, 0]] - }, - readOnlyValue: { - margin: 0 - } +const ReadOnlyField = ({ field, value }) => { + return ( +
+ + {field.label} + +

+ {value} +

+
+ ) } -const fieldUseStyles = makeStyles(fieldStyles) - const EditableField = ({ editing, field, value, size, ...props }) => { - const classes = fieldUseStyles() - const classNames = { - [classes.field]: true, - [classes.notEditing]: !editing - } - + if (!editing) return return ( -
- {!editing && ( - <> - {field.label} -

{value}

- - )} +
{editing && ( <> - {field.label} + + {field.label} + { ) } -const ReadOnlyField = ({ field, value, ...props }) => { - const classes = fieldUseStyles() - const classNames = { - [classes.field]: true, - [classes.notEditing]: true - } - - return ( - <> -
- {field.label} -

{value}

-
- - ) -} - const EditableCard = ({ fields, save = () => {}, @@ -152,8 +80,6 @@ const EditableCard = ({ editable, checkAgainstSanctions }) => { - const classes = useStyles() - const formRef = useRef() const [editing, setEditing] = useState(false) @@ -162,12 +88,6 @@ const EditableCard = ({ const triggerInput = () => input.click() - const label1ClassNames = { - [classes.label1]: true, - [classes.label1Pending]: state === OVERRIDE_PENDING, - [classes.label1Rejected]: state === OVERRIDE_REJECTED, - [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED - } const authorized = state === OVERRIDE_PENDING ? { label: 'Pending', type: 'neutral' } @@ -176,247 +96,211 @@ const EditableCard = ({ : { label: 'Accepted', type: 'success' } return ( -
- - -
-
- {titleIcon} -

{title}

- { - // TODO: Enable for next release - /* */ - } -
- {state && authorize && ( -
- -
- )} + + +
+
+ {titleIcon} +

{title}

- {children(formRef.current?.values ?? {})} - { - save(values) - setEditing(false) - }} - onReset={() => { - setEditing(false) - setError(false) - }}> - {({ setFieldValue }) => ( - - -
- - - {!hasImage && - fields?.map((field, idx) => { - return idx >= 0 && idx < 4 ? ( - !field.editable ? ( - - ) : ( - - ) - ) : null - })} - - - {!hasImage && - fields?.map((field, idx) => { - return idx >= 4 ? ( - !field.editable ? ( - - ) : ( - - ) - ) : null - })} - - + {state && authorize && } +
+ {children(formRef.current?.values ?? {})} + { + save(values) + setEditing(false) + }} + onReset={() => { + setEditing(false) + setError(false) + }}> + {({ setFieldValue }) => ( + + +
+
+ {!hasImage && + fields?.map((field, idx) => { + return idx >= 0 && idx < 4 ? ( + !field.editable ? ( + + ) : ( + + ) + ) : null + })}
-
- {!editing && ( -
-
- {/*{false && (*/} - {/* deleteEditedData()}>*/} - {/* Delete*/} - {/* */} - {/*)}*/} - {!hasAdditionalData && ( - retrieveAdditionalData()}> - Retrieve API data - - )} - {checkAgainstSanctions && ( - checkAgainstSanctions()}> - Check against OFAC sanction list - - )} -
- {editable && ( +
+ {!hasImage && + fields?.map((field, idx) => { + return idx >= 4 ? ( + !field.editable ? ( + + ) : ( + + ) + ) : null + })} +
+
+
+ {!editing && ( + <> + {!hasAdditionalData && ( + retrieveAdditionalData()}> + Retrieve API data + + )} + {checkAgainstSanctions && ( + checkAgainstSanctions()}> + Check against OFAC sanction list + + )} + {editable && ( + setEditing(true)}> + Edit + + )} + {!editable && + authorize && + authorized.label !== 'Accepted' && ( setEditing(true)}> - Edit + color="spring" + type="button" + Icon={AuthorizeIcon} + InverseIcon={AuthorizeIcon} + onClick={() => authorize()}> + Authorize )} - {!editable && - authorize && - authorized.label !== 'Accepted' && ( -
- authorize()}> - Authorize - + {!editable && + authorize && + authorized.label !== 'Rejected' && ( + reject()}> + Reject + + )} + + )} + {editing && ( + <> + {hasImage && state !== OVERRIDE_PENDING && ( + triggerInput()}> + { +
+ setInput(fileInput)} + onChange={event => { + // need to store it locally if we want to display it even after saving to db + const file = R.head(event.target.files) + if (!file) return + setFieldValue(R.head(fields).name, file) + }} + /> + Replace
- )} - {!editable && - authorize && - authorized.label !== 'Rejected' && ( - reject()}> - Reject - - )} -
- )} - {editing && ( -
-
- {hasImage && state !== OVERRIDE_PENDING && ( - triggerInput()}> - { -
- setInput(fileInput)} - onChange={event => { - // need to store it locally if we want to display it even after saving to db - const file = R.head(event.target.files) - if (!file) return - setFieldValue(R.head(fields).name, file) - }} - /> - Replace -
- } - - )} -
-
- {fields && ( -
- - Save - -
- )} -
- cancel()} - type="reset"> - Cancel - -
- {authorize && authorized.label !== 'Accepted' && ( -
- authorize()}> - Authorize - -
- )} - {authorize && authorized.label !== 'Rejected' && ( - reject()}> - Reject - - )} - {error && ( - Failed to save changes - )} -
-
- )} -
- - )} - - - -
+ } + + )} + {fields && ( + + Save + + )} + cancel()} + type="reset"> + Cancel + + {authorize && authorized.label !== 'Accepted' && ( + authorize()}> + Authorize + + )} + {authorize && authorized.label !== 'Rejected' && ( + reject()}> + Reject + + )} + {error && ( + Failed to save changes + )} + + )} +
+ + )} + + + ) } diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js deleted file mode 100644 index 3ef803d2..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.styles.js +++ /dev/null @@ -1,70 +0,0 @@ -import { tomato, spring4, comet } from 'src/styling/variables' - -export default { - label1: { - display: 'flex', - width: 85, - justifyContent: 'right' - }, - label1Pending: { - color: comet - }, - label1Rejected: { - color: tomato - }, - label1Accepted: { - color: spring4 - }, - editButton: { - marginTop: 20, - display: 'flex', - justifyContent: 'right' - }, - deleteButton: { - marginRight: 8 - }, - headerWrapper: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - height: 40 - }, - editingWrapper: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - marginTop: 20 - }, - replace: { - marginRight: 5 - }, - input: { - display: 'none' - }, - button: { - marginRight: 5 - }, - editingButtons: { - display: 'flex', - justifyContent: 'right' - }, - card: { - borderRadius: 10, - marginRight: 15, - marginBottom: 15 - }, - cardHeader: { - display: 'flex', - flexDirection: 'row', - marginBottom: 15 - }, - editIcon: { - marginTop: 5 - }, - cardIcon: { - marginTop: 7 - }, - cardTitle: { - margin: [[8, 15, 15, 15]] - } -} diff --git a/new-lamassu-admin/src/pages/Customers/components/Field.jsx b/new-lamassu-admin/src/pages/Customers/components/Field.jsx deleted file mode 100644 index 7992773d..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/Field.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' -import React, { memo } from 'react' -import { Info3, Label1 } from 'src/components/typography' - -import { comet } from 'src/styling/variables' - -const useStyles = makeStyles({ - field: { - height: 46 - }, - label: { - color: comet, - margin: [[0, 3]] - }, - value: { - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - margin: 0, - paddingLeft: 4 - } -}) - -const Field = memo(({ label, display, size, className }) => { - const classes = useStyles() - - return ( -
- {label} - {display} -
- ) -}) - -export default Field diff --git a/new-lamassu-admin/src/pages/Customers/components/FrontCameraPhoto.jsx b/new-lamassu-admin/src/pages/Customers/components/FrontCameraPhoto.jsx deleted file mode 100644 index 4dcee494..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/FrontCameraPhoto.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' -import React, { memo } from 'react' -import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react' - -import mainStyles from '../CustomersList.styles' - -const useStyles = makeStyles(mainStyles) - -const FrontCameraPhoto = memo(({ frontCameraPath }) => { - const classes = useStyles() - - return ( - - {frontCameraPath ? ( - - ) : ( - - )} - - ) -}) - -export default FrontCameraPhoto diff --git a/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx b/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx deleted file mode 100644 index 9433c255..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/IdCardPhotoCard.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import { makeStyles } from '@mui/styles' -import * as R from 'ramda' -import React, { memo } from 'react' -import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react' - -import { - PropertyCard, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} from 'src/pages/Customers/components/propertyCard' - -const useStyles = makeStyles({ - idCardPhotoCard: { - width: 325, - height: 240, - margin: [[32, 0, 0, 0]] - }, - idCardPhoto: { - maxHeight: 130 - }, - field: { - marginLeft: 14 - } -}) - -const IdCardPhotoCard = memo(({ customerData, updateCustomer }) => { - const classes = useStyles() - - return ( - - updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }) - } - reject={() => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED })}> -
- {customerData.idCardPhotoPath ? ( - - ) : ( - - )} -
- - ) -}) - -export default IdCardPhotoCard diff --git a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx deleted file mode 100644 index 1cb0fb73..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.jsx +++ /dev/null @@ -1,88 +0,0 @@ -import { differenceInYears, format, parse } from 'date-fns/fp' -import * as R from 'ramda' -import React, { memo } from 'react' - -import { - PropertyCard, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} from 'src/pages/Customers/components/propertyCard' -import { ifNotNull } from 'src/utils/nullCheck' - -import { getName } from '../helper' - -import Field from './Field' - -const IdDataCard = memo(({ customerData, updateCustomer }) => { - const idData = R.path(['idCardData'])(customerData) - const rawExpirationDate = R.path(['expirationDate'])(idData) - const country = R.path(['country'])(idData) - const rawDob = R.path(['dateOfBirth'])(idData) - - const elements = [ - { - header: 'Name', - display: `${getName(customerData)}`, - size: 190 - }, - { - header: 'ID number', - display: R.path(['documentNumber'])(idData), - size: 160 - }, - { - header: 'Birth date', - display: - (rawDob && - format('yyyy-MM-dd')(parse(new Date(), 'yyyyMMdd', rawDob))) ?? - '', - size: 110 - }, - { - header: 'Age', - display: - (rawDob && - differenceInYears( - parse(new Date(), 'yyyyMMdd', rawDob), - new Date() - )) ?? - '', - size: 50 - }, - { - header: 'Gender', - display: R.path(['gender'])(idData) ?? R.path(['sex'])(idData), - size: 80 - }, - { - header: country === 'Canada' ? 'Province' : 'State', - display: R.path(['state'])(idData), - size: 120 - }, - { - header: 'Expiration date', - display: ifNotNull( - rawExpirationDate, - format('yyyy-MM-dd', rawExpirationDate) - ) - } - ] - - return ( - - updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }) - } - reject={() => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED })}> -
- {elements.map(({ header, display, size }, idx) => ( - - ))} -
- - ) -}) - -export default IdDataCard diff --git a/new-lamassu-admin/src/pages/Customers/components/PhoneCard.jsx b/new-lamassu-admin/src/pages/Customers/components/PhoneCard.jsx deleted file mode 100644 index 74dcd3f5..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/PhoneCard.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import { parsePhoneNumberFromString } from 'libphonenumber-js' -import * as R from 'ramda' -import React, { memo } from 'react' - -import { - PropertyCard, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} from 'src/pages/Customers/components/propertyCard' - -import Field from './Field' - -const PhoneCard = memo( - ({ className, customerData, updateCustomer, locale }) => ( - updateCustomer({ smsOverride: OVERRIDE_AUTHORIZED })} - reject={() => updateCustomer({ smsOverride: OVERRIDE_REJECTED })}> - - - ) -) - -export default PhoneCard diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.jsx b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.jsx index 542ebeb4..dd72a435 100644 --- a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.jsx @@ -1,20 +1,14 @@ import ButtonBase from '@mui/material/ButtonBase' import Paper from '@mui/material/Card' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo, useState } from 'react' import { InformativeDialog } from 'src/components/InformativeDialog' import { Info2 } from 'src/components/typography' import CrossedCameraIcon from 'src/styling/icons/ID/photo/crossed-camera.svg?react' -import styles from './PhotosCard.styles' import PhotosCarousel from './PhotosCarousel' -const useStyles = makeStyles(styles) - const PhotosCard = memo(({ photosData, timezone }) => { - const classes = useStyles() - const [photosDialog, setPhotosDialog] = useState(false) const sortedPhotosData = R.sortWith( @@ -26,24 +20,24 @@ const PhotosCard = memo(({ photosData, timezone }) => { return ( <> - + { setPhotosDialog(true) }}> {singlePhoto ? ( -
+
- -
- {sortedPhotosData.length} -
+
+ + {sortedPhotosData.length}
) : ( diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCard.styles.js deleted file mode 100644 index 5d974078..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/PhotosCard.styles.js +++ /dev/null @@ -1,42 +0,0 @@ -import { zircon, backgroundColor } from 'src/styling/variables' - -export default { - photo: { - width: 135, - height: 135, - borderRadius: 8, - backgroundColor: zircon, - margin: [[0, 28, 0, 0]], - alignItems: 'center', - justifyContent: 'center', - display: 'flex' - }, - img: { - objectFit: 'cover', - objectPosition: 'center', - width: 135, - height: 135 - }, - container: { - position: 'relative', - '& > img': { - display: 'block' - }, - '& > circle': { - position: 'absolute', - top: '0', - right: '0', - marginRight: 5, - marginTop: 5 - } - }, - circle: { - background: backgroundColor, - borderRadius: '50%', - width: 25, - height: 25, - alignItems: 'center', - justifyContent: 'center', - display: 'flex' - } -} diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.jsx b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.jsx index 6b4a8337..e8855dec 100644 --- a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo, useState } from 'react' import { Carousel } from 'src/components/Carousel' @@ -8,35 +7,34 @@ import { formatDate } from 'src/utils/timezones' import CopyToClipboard from '../../Transactions/CopyToClipboard' -import styles from './PhotosCarousel.styles' - -const useStyles = makeStyles(styles) - const PhotosCarousel = memo(({ photosData, timezone }) => { - const classes = useStyles() const [currentIndex, setCurrentIndex] = useState(0) const Label = ({ children }) => { - const classes = useStyles() - return {children} + return ( + + {children} + + ) } const isFaceCustomerPhoto = !R.has('id')(photosData[currentIndex]) const slidePhoto = index => setCurrentIndex(index) + // TODO hide copy to clipboard shit return ( <> {!isFaceCustomerPhoto && ( -
+
{photosData && photosData[currentIndex]?.id}
)} -
+
<> diff --git a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.styles.js b/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.styles.js deleted file mode 100644 index 03d3f755..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/PhotosCarousel.styles.js +++ /dev/null @@ -1,30 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { offColor } from 'src/styling/variables' - -const { p } = typographyStyles - -export default { - label: { - color: offColor, - margin: [[0, 0, 6, 0]] - }, - firstRow: { - padding: [[8]], - display: 'flex', - flexDirection: 'column' - }, - secondRow: { - extend: p, - display: 'flex', - padding: [[8]], - '& > div': { - display: 'flex', - flexDirection: 'column', - '& > div': { - height: 37, - marginBottom: 15, - marginRight: 55 - } - } - } -} diff --git a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx index aa8ea43a..d6384bc3 100644 --- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.jsx @@ -1,7 +1,5 @@ import { toUnit } from '@lamassu/coins/lightUtils' -import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' -import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import DataTable from 'src/components/tables/DataTable' @@ -13,21 +11,13 @@ import { ifNotNull } from 'src/utils/nullCheck' import { formatDate } from 'src/utils/timezones' import CopyToClipboard from '../../Transactions/CopyToClipboard' -import mainStyles from '../CustomersList.styles' - -const useStyles = makeStyles(mainStyles) const TransactionsList = ({ customer, data, loading }) => { - const classes = useStyles() const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon const hasData = !(R.isEmpty(data) || R.isNil(data)) const { lastUsedMachineName } = customer const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone - const tableSpacingClasses = { - [classes.titleAndButtonsContainer]: loading || (!loading && !hasData), - [classes.txTableSpacing]: !loading && hasData - } const summaryElements = [ { @@ -61,7 +51,7 @@ const TransactionsList = ({ customer, data, loading }) => { value: ifNotNull( customer.lastTxFiat, <> - + {`${Number.parseFloat(customer.lastTxFiat)} ${customer.lastTxFiatCode}`} @@ -80,9 +70,9 @@ const TransactionsList = ({ customer, data, loading }) => { view: it => ( <> {it.txClass === 'cashOut' ? ( - + ) : ( - + )} ) @@ -96,7 +86,9 @@ const TransactionsList = ({ customer, data, loading }) => { header: 'Transaction ID', width: 145, view: it => ( - {it.id} + + {it.id} + ) }, { @@ -144,7 +136,7 @@ const TransactionsList = ({ customer, data, loading }) => { {header} @@ -152,28 +144,21 @@ const TransactionsList = ({ customer, data, loading }) => {
{summaryElements.map(({ size, value }, idx) => ( -

+

{value}

))}
-
-
- {loading ? ( -

Loading

- ) : hasData ? ( - '' - ) : ( -

No transactions so far

- )} -
+
+ {loading ? ( +

Loading

+ ) : hasData ? ( + + ) : ( +

No transactions so far

+ )}
- {hasData && } ) } diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.jsx b/new-lamassu-admin/src/pages/Customers/components/Upload.jsx index e2f63e7b..1e81c289 100644 --- a/new-lamassu-admin/src/pages/Customers/components/Upload.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/Upload.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { useFormikContext } from 'formik' import * as R from 'ramda' import React, { useState, useCallback } from 'react' @@ -7,42 +6,9 @@ import { Label3, H3 } from 'src/components/typography' import UploadPhotoIcon from 'src/styling/icons/button/photo/zodiac-resized.svg?react' import UploadFileIcon from 'src/styling/icons/button/upload-file/zodiac-resized.svg?react' -import { offColor, subheaderColor } from 'src/styling/variables' - -const useStyles = makeStyles({ - box: { - boxSizing: 'border-box', - width: 450, - height: 120, - borderStyle: 'dashed', - borderColor: offColor, - borderRadius: 4, - borderWidth: 1, - backgroundColor: subheaderColor, - display: 'flex', - justifyContent: 'center' - }, - inputContent: { - marginTop: 35, - display: 'flex' - }, - uploadContent: { - marginTop: 50, - display: 'flex' - }, - board: { - marginTop: 40, - width: 450, - height: 120 - }, - icon: { - margin: [[14, 20, 0, 0]] - } -}) +import classes from './Upload.module.css' const Upload = ({ type }) => { - const classes = useStyles() - const [data, setData] = useState({}) const { setFieldValue } = useFormikContext() @@ -71,20 +37,14 @@ const Upload = ({ type }) => { return ( <> -
+
{R.isEmpty(data) && (
-
- {isImage ? ( - - ) : ( - - )} - {`Drag and drop ${ - isImage ? 'an image' : 'a file' - } or click to open the explorer`} -
+ {isImage ? : } + {`Drag and drop ${ + isImage ? 'an image' : 'a file' + } or click to open the explorer`}
)} {!R.isEmpty(data) && isImage && ( @@ -94,7 +54,7 @@ const Upload = ({ type }) => { )} {!R.isEmpty(data) && !isImage && (
-

{data.preview}

+

{data.preview}

)}
diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.module.css b/new-lamassu-admin/src/pages/Customers/components/Upload.module.css new file mode 100644 index 00000000..3f7955df --- /dev/null +++ b/new-lamassu-admin/src/pages/Customers/components/Upload.module.css @@ -0,0 +1,14 @@ +.box { + box-sizing: border-box; + width: 450px; + height: 120px; + border-style: dashed; + border-color: var(--comet); + border-radius: 4px; + border-width: 1px; + background-color: var(--zircon); + display: flex; + justify-content: center; + align-items: center; + gap: 20px; +} diff --git a/new-lamassu-admin/src/pages/Customers/components/consts.js b/new-lamassu-admin/src/pages/Customers/components/consts.js new file mode 100644 index 00000000..5cec0f8b --- /dev/null +++ b/new-lamassu-admin/src/pages/Customers/components/consts.js @@ -0,0 +1,5 @@ +const OVERRIDE_PENDING = 'automatic' +const OVERRIDE_AUTHORIZED = 'verified' +const OVERRIDE_REJECTED = 'blocked' + +export { OVERRIDE_PENDING, OVERRIDE_AUTHORIZED, OVERRIDE_REJECTED } diff --git a/new-lamassu-admin/src/pages/Customers/components/index.js b/new-lamassu-admin/src/pages/Customers/components/index.js index 7e3c3e19..448efe76 100644 --- a/new-lamassu-admin/src/pages/Customers/components/index.js +++ b/new-lamassu-admin/src/pages/Customers/components/index.js @@ -3,19 +3,13 @@ import Wizard from '../Wizard' import CustomerDetails from './CustomerDetails' import CustomerSidebar from './CustomerSidebar' import EditableCard from './EditableCard' -import Field from './Field' -import IdDataCard from './IdDataCard' -import PhotosCarousel from './PhotosCarousel' import TransactionsList from './TransactionsList' import Upload from './Upload' export { - PhotosCarousel, CustomerDetails, - IdDataCard, TransactionsList, CustomerSidebar, - Field, EditableCard, Wizard, Upload diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteCard.jsx b/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteCard.jsx index 9bef903a..a3c568e8 100644 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteCard.jsx @@ -1,23 +1,16 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' -import classNames from 'classnames' import { React } from 'react' import { P } from 'src/components/typography' import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react' -import styles from './NoteCard.styles' - -const useStyles = makeStyles(styles) - const NewNoteCard = ({ setOpenModal }) => { - const classes = useStyles() return ( -
setOpenModal(true)}> - - -

Add new

- -
+ setOpenModal(true)}> + +

Add new

+ ) } diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.jsx b/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.jsx index 6325bb7d..5725472a 100644 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik, Field } from 'formik' import { React } from 'react' import ErrorMessage from 'src/components/ErrorMessage' @@ -8,10 +7,6 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import styles from './NewNoteModal.styles' - -const useStyles = makeStyles(styles) - const initialValues = { title: '', content: '' @@ -23,8 +18,6 @@ const validationSchema = Yup.object().shape({ }) const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => { - const classes = useStyles() - return ( <> { onSubmit={({ title, content }) => { onSubmit({ title, content }) }}> -
+ { rows={11} label="Note content" /> -
+
{errorMsg && {errorMsg}} -
diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.styles.js b/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.styles.js deleted file mode 100644 index a42ecd41..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NewNoteModal.styles.js +++ /dev/null @@ -1,25 +0,0 @@ -import { spacer } from 'src/styling/variables' - -const styles = { - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - '& > *': { - marginTop: 20 - }, - '& > *:last-child': { - marginTop: 'auto' - } - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.jsx b/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.jsx index c4a4f21a..912e0d95 100644 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.jsx @@ -1,5 +1,4 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import { React } from 'react' import { H3, P } from 'src/components/typography' @@ -7,10 +6,6 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import { formatDate } from 'src/utils/timezones' -import styles from './NoteCard.styles' - -const useStyles = makeStyles(styles) - const formatContent = content => { const fragments = R.split(/\n/)(content) return R.map((it, idx) => { @@ -25,31 +20,28 @@ const formatContent = content => { } const NoteCard = ({ note, deleteNote, handleClick, timezone }) => { - const classes = useStyles() - return ( -
- handleClick(note)}> -
-
-

{note?.title}

-

{formatDate(note?.created, timezone, 'yyyy-MM-dd')}

-
-
- { - e.stopPropagation() - deleteNote({ noteId: note.id }) - }} - /> -
+ handleClick(note)}> +
+
+

{note?.title}

+

{formatDate(note?.created, timezone, 'yyyy-MM-dd')}

-

- {formatContent(note?.content)} -

- -
+
+ { + e.stopPropagation() + deleteNote({ noteId: note.id }) + }} + /> +
+
+

+ {formatContent(note?.content)} +

+ ) } diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.styles.js deleted file mode 100644 index 9712fa77..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NoteCard.styles.js +++ /dev/null @@ -1,93 +0,0 @@ -import { zircon } from 'src/styling/variables' - -const styles = { - noteCardWrapper: { - flexGrow: 0, - flexShrink: 0, - flexBasis: `25%`, - minWidth: 0, - maxWidth: 500, - '&:nth-child(4n+1)': { - '& > div': { - margin: [[0, 10, 0, 0]] - } - }, - '&:nth-child(4n)': { - '& > div': { - margin: [[0, 0, 0, 10]] - } - }, - margin: [[10, 0]] - }, - noteCardChip: { - height: 200, - margin: [[0, 10]], - padding: [[10, 10]], - cursor: 'pointer' - }, - newNoteCard: { - backgroundColor: zircon, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center' - }, - noteCardHeader: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - width: '100%' - }, - noteCardTitle: { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - marginRight: 10 - }, - noteCardContent: { - display: 'box', - lineClamp: 7, - boxOrient: 'vertical', - margin: [[15, 0]], - overflow: 'hidden', - textOverflow: 'ellipsis', - wordWrap: 'break-word' - }, - editCardChip: { - height: 325, - padding: 15 - }, - editCardHeader: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 15 - }, - editCardActions: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - '& > *': { - marginRight: 10 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - editNotesContent: { - '& > div': { - '&:after': { - borderBottom: 'none' - }, - '&:before': { - borderBottom: 'none' - }, - '&:hover:not(.Mui-disabled)::before': { - borderBottom: 'none' - } - } - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Customers/components/notes/NoteEdit.jsx b/new-lamassu-admin/src/pages/Customers/components/notes/NoteEdit.jsx index 3fac6309..ea9f8ca3 100644 --- a/new-lamassu-admin/src/pages/Customers/components/notes/NoteEdit.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/notes/NoteEdit.jsx @@ -1,5 +1,4 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import { formatDurationWithOptions, intervalToDuration } from 'date-fns/fp' import { Form, Formik, Field } from 'formik' import { React, useRef } from 'react' @@ -14,13 +13,8 @@ import { ActionButton } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { toTimezone } from 'src/utils/timezones' -import styles from './NoteCard.styles' - -const useStyles = makeStyles(styles) - const NoteEdit = ({ note, cancel, edit, timezone }) => { const formRef = useRef() - const classes = useStyles() const validationSchema = Yup.object().shape({ content: Yup.string() @@ -31,8 +25,8 @@ const NoteEdit = ({ note, cancel, edit, timezone }) => { } return ( - -
+ +

{`Last edited `} {formatDurationWithOptions( @@ -44,7 +38,7 @@ const NoteEdit = ({ note, cancel, edit, timezone }) => { )} {` ago`}

-
+
{ { - const classes = useStyles() - - const label1ClassNames = { - [classes.label1]: true, - [classes.label1Pending]: state === OVERRIDE_PENDING, - [classes.label1Rejected]: state === OVERRIDE_REJECTED, - [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED - } - - const AuthorizeButton = () => ( - authorize()}> - Authorize - - ) - - const RejectButton = () => ( - reject()}> - Reject - - ) - - const EditButton = () => ( - edit()}> - Edit - - ) - - const ConfirmButton = () => ( - - Confirm - - ) - - const authorized = - state === OVERRIDE_PENDING - ? { label: 'Pending', type: 'neutral' } - : state === OVERRIDE_REJECTED - ? { label: 'Rejected', type: 'error' } - : { label: 'Accepted', type: 'success' } - - return ( - -

{title}

-
- {state && ( -
- -
- )} - {children} -
- {authorize && state !== OVERRIDE_AUTHORIZED && AuthorizeButton()} - {reject && state !== OVERRIDE_REJECTED && RejectButton()} - {edit && !isEditing && EditButton()} - {confirm && isEditing && ConfirmButton()} -
-
- - ) - } -) - -export { - PropertyCard, - OVERRIDE_PENDING, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} diff --git a/new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.styles.js b/new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.styles.js deleted file mode 100644 index ff8b334f..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/propertyCard/PropertyCard.styles.js +++ /dev/null @@ -1,69 +0,0 @@ -import { white, tomato, spring4, comet } from 'src/styling/variables' - -const propertyCardStyles = { - label1: { - display: 'flex', - marginBottom: 2, - marginTop: 'auto', - width: 85 - }, - label1Pending: { - color: comet - }, - label1Rejected: { - color: tomato - }, - label1Accepted: { - color: spring4 - }, - cardActionButton: { - display: 'flex', - height: 28, - marginRight: 'auto', - marginLeft: 12 - }, - propertyCardTopRow: { - display: 'flex', - margin: [[0, 10, 5, 0]] - }, - propertyCardBottomRow: { - display: 'flex', - flexDirection: 'row', - height: 45 - }, - propertyCard: { - display: 'flex', - flexDirection: 'column', - borderRadius: 8, - width: '100%', - height: 100, - padding: [[20]], - boxSizing: 'border-box', - boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.04)', - border: 'solid 0', - backgroundColor: white, - margin: [[20, 0, 0, 0]] - }, - rowSpaceBetween: { - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - justifyContent: 'space-between' - }, - columnSpaceBetween: { - display: 'flex', - flexFlow: 'column nowrap', - alignItems: 'center', - justifyContent: 'space-between', - width: 90 - }, - buttonsWrapper: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-end', - marginLeft: 'auto', - marginTop: 'auto' - } -} - -export { propertyCardStyles } diff --git a/new-lamassu-admin/src/pages/Customers/components/propertyCard/index.js b/new-lamassu-admin/src/pages/Customers/components/propertyCard/index.js deleted file mode 100644 index 3002e26a..00000000 --- a/new-lamassu-admin/src/pages/Customers/components/propertyCard/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import { - PropertyCard, - OVERRIDE_PENDING, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} from './PropertyCard' - -export { - PropertyCard, - OVERRIDE_PENDING, - OVERRIDE_AUTHORIZED, - OVERRIDE_REJECTED -} diff --git a/new-lamassu-admin/src/pages/Customers/helper.jsx b/new-lamassu-admin/src/pages/Customers/helper.jsx index 6bb774b1..ca672fc7 100644 --- a/new-lamassu-admin/src/pages/Customers/helper.jsx +++ b/new-lamassu-admin/src/pages/Customers/helper.jsx @@ -1,6 +1,4 @@ import React from 'react' -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' import { parse, isValid, format } from 'date-fns/fp' import { Field, useFormikContext } from 'formik' import { parsePhoneNumberFromString } from 'libphonenumber-js' @@ -14,45 +12,10 @@ import { TextInput, Autocomplete } from 'src/components/inputs/formik' -import { errorColor } from 'src/styling/variables' import { MANUAL } from 'src/utils/constants' import { Upload } from './components' -const useStyles = makeStyles({ - radio: { - padding: 4, - margin: 4 - }, - radioGroup: { - flexDirection: 'row' - }, - error: { - color: errorColor - }, - specialLabel: { - height: 40, - padding: 0, - width: 250 - }, - label: { - height: 40, - padding: 0 - }, - specialGrid: { - display: 'grid', - gridTemplateColumns: [[182, 162, 141]] - }, - picker: { - width: 150 - }, - field: { - '& > *:last-child': { - marginBottom: 24 - } - } -}) - const CUSTOMER_BLOCKED = 'blocked' const CUSTOM = 'custom' const REQUIREMENT = 'requirement' @@ -215,68 +178,50 @@ const updateRequirementOptions = it => [ ] const EntryType = ({ customInfoRequirementOptions }) => { - const classes = useStyles() const { values } = useFormikContext() const displayCustomOptions = values.entryType === CUSTOM const displayRequirementOptions = values.entryType === REQUIREMENT - return ( - <> + const Entry = ({ title, name, options, className }) => ( +
-

Type of entry

+

{title}

+
+ ) + + return ( + <> + {displayCustomOptions && ( -
-
-

Type of data

-
- -
+ )} {displayRequirementOptions && ( -
-
-

Requirements

-
- -
+ )} ) } const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => { - const classes = useStyles() - const typeOfEntrySelected = selectedValues?.entryType const dataTypeSelected = selectedValues?.dataType const requirementSelected = selectedValues?.requirement @@ -316,14 +261,14 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => { {}} /> )} -
+
{!upload && !isCustomInfoRequirement && elements.options.map(({ label, name }, idx) => ( diff --git a/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx b/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx index 306111f5..021b6a65 100644 --- a/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx +++ b/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx @@ -16,6 +16,7 @@ const CopyToClipboard = ({ className, buttonClassname, children, + variant, wrapperClassname, removeSpace = true, ...props @@ -71,7 +72,7 @@ const CopyToClipboard = ({ )}
- ); + ) } export default CopyToClipboard diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index 5c8432f6..9186c0ca 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -27,6 +27,10 @@ --neon: #5a67ff; --malachite: #00CD5A; --orange-yellow: #ffcc00; + + --mont: 'Mont'; + --museo: 'MuseoSans'; + --bpmono: 'BPmono'; } @theme { @@ -44,6 +48,13 @@ --color-neon: var(--neon); --color-malachite: var(--malachite); --color-orange-yellow: var(--orange-yellow); + --font-mont: var(--mont); + --font-museo: var(--museo); + --font-bpmono: var(--bpmono); +} + +@utility col-span-all { + column-span: all; } body { From 5f81487dccf40163ed5b96cf1b33ef876a7b24d9 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 6 May 2025 13:44:23 +0100 Subject: [PATCH 13/27] partial: Dashboard and Locales css migration --- .../src/components/CollapsibleCard.jsx | 23 +-- .../src/pages/Dashboard/Alerts/Alerts.jsx | 28 +--- .../pages/Dashboard/Alerts/Alerts.styles.js | 57 ------- .../pages/Dashboard/Alerts/AlertsTable.jsx | 11 +- .../src/pages/Dashboard/Dashboard.jsx | 50 +++--- .../src/pages/Dashboard/Dashboard.styles.js | 120 -------------- .../src/pages/Dashboard/Footer/Footer.jsx | 38 ++--- .../pages/Dashboard/Footer/Footer.module.css | 28 ++++ .../pages/Dashboard/Footer/Footer.styles.js | 50 ------ .../src/pages/Dashboard/LeftSide.jsx | 22 --- .../src/pages/Dashboard/RightSide.jsx | 110 ++++++------- .../Graphs/PercentageChart.jsx | 63 +------ .../SystemPerformance/Graphs/RefLineChart.jsx | 12 +- .../Graphs/RefScatterplot.jsx | 30 ++-- .../SystemPerformance/InfoWithLabel.jsx | 8 +- .../pages/Dashboard/SystemPerformance/Nav.jsx | 23 +-- .../SystemPerformance/SystemPerformance.jsx | 154 ++++++++---------- .../SystemPerformance.styles.js | 154 ------------------ .../Dashboard/SystemStatus/MachinesTable.jsx | 84 +++++----- .../SystemStatus/MachinesTable.styles.js | 24 --- .../Dashboard/SystemStatus/SystemStatus.jsx | 74 +++------ .../src/pages/Locales/Locales.jsx | 12 +- .../src/pages/Locales/Locales.styles.js | 12 -- .../src/styling/global/global.css | 3 + new-lamassu-admin/src/styling/theme.js | 7 + 25 files changed, 314 insertions(+), 883 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js delete mode 100644 new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js create mode 100644 new-lamassu-admin/src/pages/Dashboard/Footer/Footer.module.css delete mode 100644 new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js delete mode 100644 new-lamassu-admin/src/pages/Dashboard/LeftSide.jsx delete mode 100644 new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js delete mode 100644 new-lamassu-admin/src/pages/Locales/Locales.styles.js diff --git a/new-lamassu-admin/src/components/CollapsibleCard.jsx b/new-lamassu-admin/src/components/CollapsibleCard.jsx index eeec8527..987c32e7 100644 --- a/new-lamassu-admin/src/components/CollapsibleCard.jsx +++ b/new-lamassu-admin/src/components/CollapsibleCard.jsx @@ -1,10 +1,8 @@ -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' import PropTypes from 'prop-types' import React from 'react' -import { white } from 'src/styling/variables' +import Paper from '@mui/material/Paper' +import classnames from 'classnames' const cardState = Object.freeze({ DEFAULT: 'default', @@ -12,24 +10,11 @@ const cardState = Object.freeze({ EXPANDED: 'expanded' }) -const styles = { - card: { - wordWrap: 'break-word', - boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)', - borderRadius: 12, - padding: 24, - backgroundColor: white - } -} - -const useStyles = makeStyles(styles) - const CollapsibleCard = ({ className, state, shrunkComponent, children }) => { - const classes = useStyles() return ( - + {state === cardState.SHRUNK ? shrunkComponent : children} - + ) } diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.jsx b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.jsx index 17b89f2f..bb88d73f 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.jsx @@ -1,14 +1,12 @@ -import { useQuery, gql } from "@apollo/client"; +import { useQuery, gql } from '@apollo/client' import Button from '@mui/material/Button' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import { cardState } from 'src/components/CollapsibleCard' import { Label1, H4 } from 'src/components/typography' -import styles from './Alerts.styles' import AlertsTable from './AlertsTable' const NUM_TO_RENDER = 3 @@ -31,10 +29,7 @@ const GET_ALERTS = gql` } ` -const useStyles = makeStyles(styles) - const Alerts = ({ onReset, onExpand, size }) => { - const classes = useStyles() const showAllItems = size === cardState.EXPANDED const { data } = useQuery(GET_ALERTS) const alerts = R.path(['alerts'])(data) ?? [] @@ -44,35 +39,30 @@ const Alerts = ({ onReset, onExpand, size }) => { )(data?.machines ?? []) const alertsLength = alerts.length - const alertsTableContainerClasses = { - [classes.alertsTableContainer]: !showAllItems, - [classes.expandedAlertsTableContainer]: showAllItems - } - return ( <> -
-

{`Alerts (${alertsLength})`}

+
+

{`Alerts (${alertsLength})`}

{showAllItems && ( - + )}
{!alerts.length && ( - + No new alerts. Your system is running smoothly. )} @@ -85,13 +75,13 @@ const Alerts = ({ onReset, onExpand, size }) => { {!showAllItems && alertsLength > NUM_TO_RENDER && ( - + diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js deleted file mode 100644 index eb188b65..00000000 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js +++ /dev/null @@ -1,57 +0,0 @@ -import { primaryColor, comet } from 'src/styling/variables' - -const styles = { - container: { - display: 'flex', - justifyContent: 'space-between' - }, - h4: { - margin: 0, - marginBottom: 10 - }, - centerLabel: { - marginBottom: 0, - padding: 0, - textAlign: 'center' - }, - upperButtonLabel: { - marginTop: -3, - marginBottom: 24 - }, - button: { - color: primaryColor, - marginTop: 0, - minHeight: 0, - minWidth: 0, - padding: 0, - textTransform: 'none', - '&:hover': { - backgroundColor: 'transparent' - } - }, - alertsTableContainer: { - margin: 0 - }, - expandedAlertsTableContainer: { - margin: 0, - maxHeight: 460 - }, - noAlertsLabel: { - color: comet, - marginLeft: -5, - height: 100 - }, - table: { - maxHeight: 465, - overflowX: 'hidden', - overflowY: 'auto' - }, - listItemText: { - margin: '8px 0 8px 0' - }, - linkIcon: { - marginLeft: 'auto', - cursor: 'pointer' - } -} -export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.jsx b/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.jsx index 478b0876..604a2992 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/Alerts/AlertsTable.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' import * as R from 'ramda' @@ -10,9 +9,6 @@ import CashBoxEmpty from 'src/styling/icons/cassettes/cashbox-empty.svg?react' import AlertLinkIcon from 'src/styling/icons/month arrows/right.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react' -import styles from './Alerts.styles' -const useStyles = makeStyles(styles) - const icons = { error: , fiatBalance: ( @@ -28,7 +24,6 @@ const links = { const AlertsTable = ({ numToRender, alerts, machines }) => { const history = useHistory() - const classes = useStyles() const alertsToRender = R.slice(0, numToRender, alerts) const alertMessage = alert => { @@ -40,16 +35,16 @@ const AlertsTable = ({ numToRender, alerts, machines }) => { } return ( - + {alertsToRender.map((alert, idx) => { return ( {icons[alert.type] || ( )} -

{alertMessage(alert)}

+

{alertMessage(alert)}

history.push(links[alert.type] || '/dashboard')} /> diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.jsx b/new-lamassu-admin/src/pages/Dashboard/Dashboard.jsx index e3b7eb07..3814d5bc 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/Dashboard.jsx @@ -1,6 +1,4 @@ -import { useQuery, gql } from "@apollo/client"; -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import { useHistory } from 'react-router-dom' @@ -13,11 +11,10 @@ import { Button } from 'src/components/buttons' import AddMachine from 'src/pages/AddMachine' import { errorColor } from 'src/styling/variables' -import styles from './Dashboard.styles' import Footer from './Footer' -import LeftSide from './LeftSide' import RightSide from './RightSide' -const useStyles = makeStyles(styles) +import Paper from '@mui/material/Paper' +import SystemPerformance from './SystemPerformance/index.js' const GET_DATA = gql` query getData { @@ -30,7 +27,6 @@ const GET_DATA = gql` const Dashboard = () => { const history = useHistory() - const classes = useStyles() const [open, setOpen] = useState(false) const { data, loading } = useQuery(GET_DATA) @@ -44,16 +40,16 @@ const Dashboard = () => { !R.isEmpty(data.machines) ? ( <> -
-
+
+
Cash-in
-
+
Cash-out
-
+
@@ -61,15 +57,15 @@ const Dashboard = () => {
-
- - - - - - - - +
+
+ + + +
+
+ +
@@ -79,17 +75,17 @@ const Dashboard = () => { setOpen(false)} onPaired={onPaired} /> )} -
+
- {data?.serverVersion}{' '} - server version + {data?.serverVersion}{' '} + server version
-
-
-

No machines on your system yet

- +
+
+

No machines on your system yet

+ To fully take advantage of Lamassu Admin, add a new machine to your system diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js b/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js deleted file mode 100644 index a13b54d7..00000000 --- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js +++ /dev/null @@ -1,120 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { - spacer, - white, - primaryColor, - zircon, - zircon2, - offDarkColor -} from 'src/styling/variables' -const { label1 } = typographyStyles - -const styles = { - headerLabels: { - display: 'flex', - flexDirection: 'row', - '& > div:first-child': { - display: 'flex', - alignItems: 'center', - marginLeft: 0 - }, - '& > div': { - display: 'flex', - alignItems: 'center', - marginLeft: 25 - }, - '& > div:last-child': { - display: 'flex', - alignItems: 'center', - marginLeft: 64 - }, - '& > div > span': { - extend: label1, - marginLeft: 7 - } - }, - root: { - flexGrow: 1, - display: 'flex', - marginBottom: 120 - }, - emptyMachinesRoot: { - height: 300, - backgroundColor: zircon, - border: `solid 2px ${zircon2}` - }, - card: { - wordWrap: 'break-word', - boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)', - borderRadius: 12, - padding: 24, - backgroundColor: white, - flex: 1, - marginRight: 24 - }, - container: { - display: 'flex', - justifyContent: 'space-between' - }, - button: { - color: primaryColor, - minHeight: 0, - minWidth: 0, - padding: 0, - textTransform: 'none', - '&:hover': { - backgroundColor: 'transparent' - } - }, - upperButtonLabel: { - textAlign: 'center', - marginBottom: 0, - marginTop: 0, - marginLeft: spacer - }, - alertsCard: { - marginBottom: spacer - }, - h4: { - marginTop: 0 - }, - centerLabel: { - marginTop: 40, - marginBottom: 0 - }, - systemStatusCard: { - flex: 1, - marginTop: spacer - }, - expandedCard: { - flex: 0.9 - }, - shrunkCard: { - flex: 0.1 - }, - displayFlex: { - display: 'flex', - flexDirection: 'column' - }, - inline: { - display: 'inline' - }, - emptyMachinesContent: { - display: 'flex', - flexDirection: 'column', - height: '100%', - justifyContent: 'center', - alignItems: 'center', - '& > :first-child': { - marginTop: 0 - }, - '& > *': { - marginTop: 25 - } - }, - offColor: { - color: offDarkColor - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx index ab6ab6ad..0e22d82c 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx @@ -1,8 +1,6 @@ -import { useQuery, gql } from "@apollo/client"; +import { useQuery, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' -import Grid from '@mui/material/Grid' import BigNumber from 'bignumber.js' -import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import { Label2 } from 'src/components/typography' @@ -11,7 +9,8 @@ import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' import { fromNamespace } from 'src/utils/config' -import styles from './Footer.styles' +import classes from './Footer.module.css' + const GET_DATA = gql` query getData { cryptoRates @@ -29,12 +28,10 @@ const GET_DATA = gql` BigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP }) -const useStyles = makeStyles(styles) const Footer = () => { const { data } = useQuery(GET_DATA) const withCommissions = R.path(['cryptoRates', 'withCommissions'])(data) ?? {} - const classes = useStyles() const config = R.path(['config'])(data) ?? {} // const canExpand = R.keys(withCommissions).length > 4 @@ -72,36 +69,31 @@ const Footer = () => { ).toFormat(2) return ( - - +
+ {cryptoCurrencies[idx].display} -
-
+
+
- {` ${cashIn} ${localeFiatCurrency}`} + {`${cashIn} ${localeFiatCurrency}`}
-
+
- {` ${cashOut} ${localeFiatCurrency}`} + {`${cashOut} ${localeFiatCurrency}`}
- {`${tickerName}: ${avgOfAskBid} ${localeFiatCurrency}`} - + + {`${tickerName}: ${avgOfAskBid} ${localeFiatCurrency}`} + +
) } return (
- - - {R.keys(withCommissions).map(key => renderFooterItem(key))} - - + {R.keys(withCommissions).map(key => renderFooterItem(key))}
) diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.module.css b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.module.css new file mode 100644 index 00000000..304ffbb5 --- /dev/null +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.module.css @@ -0,0 +1,28 @@ +.footer1 { + left: 0; + bottom: 0; + position: fixed; + width: 100vw; + background-color: white; + text-align: left; + z-index: 1; + box-shadow: 0 -1px 10px 0 rgba(50, 50, 50, 0.1); + min-height: 48px; + transition: min-height 0.5s ease-out; +} + +.footer1:hover { + transition: min-height 0.5s ease-in; + min-height: 200px; + } + +.content1 { + width: 1200px; + max-height: 100px; + background-color: white; + z-index: 2; + bottom: -8px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; +} diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js deleted file mode 100644 index ffc26ed8..00000000 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js +++ /dev/null @@ -1,50 +0,0 @@ -import { offColor, white, spacer } from 'src/styling/variables' - -const styles = { - label: { - color: offColor - }, - headerLabels: { - whiteSpace: 'pre', - display: 'flex', - flexDirection: 'row', - marginTop: -20 - }, - headerLabel: { - display: 'flex', - alignItems: 'center' - }, - txOutMargin: { - marginLeft: spacer * 3 - }, - tickerLabel: { - color: offColor, - marginTop: -5 - }, - footer1: { - left: 0, - bottom: 0, - position: 'fixed', - width: '100vw', - backgroundColor: white, - textAlign: 'left', - zIndex: 1, - boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)', - minHeight: spacer * 12, - transition: 'min-height 0.5s ease-out', - '&:hover': { - transition: 'min-height 0.5s ease-in', - minHeight: 200 - } - }, - content1: { - width: 1200, - maxHeight: 100, - backgroundColor: white, - zIndex: 2, - bottom: -spacer, - margin: '0 auto' - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/LeftSide.jsx b/new-lamassu-admin/src/pages/Dashboard/LeftSide.jsx deleted file mode 100644 index 8cda8eec..00000000 --- a/new-lamassu-admin/src/pages/Dashboard/LeftSide.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' -import React from 'react' - -import styles from './Dashboard.styles' -import SystemPerformance from './SystemPerformance' - -const useStyles = makeStyles(styles) - -const LeftSide = () => { - const classes = useStyles() - - return ( - -
- -
- - ) -} - -export default LeftSide diff --git a/new-lamassu-admin/src/pages/Dashboard/RightSide.jsx b/new-lamassu-admin/src/pages/Dashboard/RightSide.jsx index 82eb332e..e7a438f0 100644 --- a/new-lamassu-admin/src/pages/Dashboard/RightSide.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/RightSide.jsx @@ -1,29 +1,23 @@ import Button from '@mui/material/Button' -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React, { useState } from 'react' import CollapsibleCard, { cardState } from 'src/components/CollapsibleCard' import { H4, Label1 } from 'src/components/typography' import Alerts from './Alerts' -import styles from './Dashboard.styles' import SystemStatus from './SystemStatus' -const useStyles = makeStyles(styles) - const ShrunkCard = ({ title, buttonName, onUnshrink }) => { - const classes = useStyles() return ( -
-

{title}

- +
+

{title}

+ @@ -32,7 +26,6 @@ const ShrunkCard = ({ title, buttonName, onUnshrink }) => { } const RightSide = () => { - const classes = useStyles() const [systemStatusSize, setSystemStatusSize] = useState(cardState.DEFAULT) const [alertsSize, setAlertsSize] = useState(cardState.DEFAULT) @@ -41,58 +34,55 @@ const RightSide = () => { setSystemStatusSize(cardState.DEFAULT) } return ( - -
- <> - - }> - { - setAlertsSize(cardState.EXPANDED) - setSystemStatusSize(cardState.SHRUNK) - }} - onReset={onReset} - size={alertsSize} +
+
+ - - - }> - { - setSystemStatusSize(cardState.EXPANDED) - setAlertsSize(cardState.SHRUNK) - }} - onReset={onReset} - size={systemStatusSize} + }> + { + setAlertsSize(cardState.EXPANDED) + setSystemStatusSize(cardState.SHRUNK) + }} + onReset={onReset} + size={alertsSize} + /> + + - - + }> + { + setSystemStatusSize(cardState.EXPANDED) + setAlertsSize(cardState.SHRUNK) + }} + onReset={onReset} + size={systemStatusSize} + /> +
- +
) } diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.jsx index 7a8aa683..775ed780 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.jsx @@ -1,77 +1,30 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import { Label1 } from 'src/components/typography/index' -import { java, neon, white } from 'src/styling/variables' - -const styles = { - wrapper: { - display: 'flex', - height: 142 - }, - percentageBox: { - height: 142, - borderRadius: 4, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - whiteSpace: 'pre' - }, - label: { - color: white - }, - inColor: { - backgroundColor: java - }, - outColor: { - backgroundColor: neon - }, - other: { - minWidth: '6px', - borderRadius: 2 - }, - inWidth: { - width: value => `${value}%`, - marginRight: value => (value === 100 ? 0 : 4) - }, - outWidth: { - width: value => `${100 - value}%` - } -} - -const useStyles = makeStyles(styles) - const PercentageChart = ({ cashIn, cashOut }) => { const value = cashIn || cashOut !== 0 ? cashIn : 50 - const classes = useStyles(value) const buildPercentageView = value => { if (value <= 15) return - return {value}% + return {value}% } const percentageClasses = { - [classes.percentageBox]: true, - [classes.other]: value < 5 && value > 0 + 'h-35 rounded-sm flex items-center justify-center': true, + 'min-w-2 rounded-xs': value < 5 && value > 0 } return ( -
+
+ className={classnames(percentageClasses, 'bg-java')} + style={{ width: `${value}%` }}> {buildPercentageView(value, 'cashIn')}
+ className={classnames(percentageClasses, 'bg-neon')} + style={{ width: `${100 - value}%` }}> {buildPercentageView(100 - value, 'cashOut')}
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.jsx index 9517a4bd..2dc3787e 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefLineChart.jsx @@ -2,8 +2,6 @@ import * as d3 from 'd3' import * as R from 'ramda' import React, { useEffect, useRef, useCallback } from 'react' -import { backgroundColor, zircon, primaryColor } from 'src/styling/variables' - const transactionProfit = R.prop('profit') const mockPoint = (tx, offsetMs, profit) => { @@ -106,7 +104,7 @@ const RefLineChart = ({ .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top) - .attr('fill', backgroundColor) + .attr('fill', 'var(--ghost)') .attr('transform', `translate(${0},${margin.top})`) // gradient color for the graph (creates the "url", the color is applied by calling the url, in the area color fill ) @@ -120,9 +118,9 @@ const RefLineChart = ({ .attr('y2', '100%') .selectAll('stop') .data([ - { offset: '0%', color: zircon }, - { offset: '25%', color: zircon }, - { offset: '100%', color: backgroundColor } + { offset: '0%', color: 'var(--zircon)' }, + { offset: '25%', color: 'var(--zircon)' }, + { offset: '100%', color: 'var(--ghost)' } ]) .enter() .append('stop') @@ -181,7 +179,7 @@ const RefLineChart = ({ .attr('fill', 'none') .attr('stroke-width', '2') .attr('stroke-linejoin', 'round') - .attr('stroke', primaryColor) + .attr('stroke', 'var(--zodiac)') }, [realData, timeFrame, previousTimeData, previousProfit]) useEffect(() => { diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.jsx index 3319118b..e1ef4388 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.jsx @@ -4,14 +4,6 @@ import { getTimezoneOffset } from 'date-fns-tz' import { add, format, startOfWeek, startOfYear } from 'date-fns/fp' import React, { useCallback, useEffect, useMemo, useRef } from 'react' -import { - java, - neon, - subheaderDarkColor, - offColor, - fontSecondary, - backgroundColor -} from 'src/styling/variables' import { numberToFiatAmount } from 'src/utils/number' import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time' @@ -143,7 +135,7 @@ const Graph = ({ data, timeFrame, timezone }) => { .attr('y', GRAPH_MARGIN.top) .attr('width', GRAPH_WIDTH) .attr('height', GRAPH_HEIGHT - GRAPH_MARGIN.top - GRAPH_MARGIN.bottom) - .attr('fill', backgroundColor) + .attr('fill', 'var(--ghost)') }, [GRAPH_MARGIN] ) @@ -191,8 +183,8 @@ const Graph = ({ data, timeFrame, timezone }) => { const buildGrid = useCallback( g => { - g.attr('stroke', subheaderDarkColor) - .attr('fill', subheaderDarkColor) + g.attr('stroke', 'var(--zircon2)') + .attr('fill', 'var(--zircon2)') // Vertical lines .call(g => g @@ -277,10 +269,10 @@ const Graph = ({ data, timeFrame, timezone }) => { () => d3 .selectAll('.tick text') - .style('stroke', offColor) - .style('fill', offColor) + .style('stroke', 'var(--comet)') + .style('fill', 'var(--comet)') .style('stroke-width', 0) - .style('font-family', fontSecondary), + .style('font-family', 'var(--museo)'), [] ) @@ -288,10 +280,10 @@ const Graph = ({ data, timeFrame, timezone }) => { () => d3 .selectAll('text') - .style('stroke', offColor) - .style('fill', offColor) + .style('stroke', 'var(--comet)') + .style('fill', 'var(--comet)') .style('stroke-width', 0) - .style('font-family', fontSecondary), + .style('font-family', 'var(--museo)'), [] ) @@ -311,7 +303,9 @@ const Graph = ({ data, timeFrame, timezone }) => { return x(created.setTime(created.getTime() + offset)) }) .attr('cy', d => y(new BigNumber(d.fiat).toNumber())) - .attr('fill', d => (d.txClass === 'cashIn' ? java : neon)) + .attr('fill', d => + d.txClass === 'cashIn' ? 'var(--java)' : 'var(--neon)' + ) .attr('r', 3.5) }, [data, offset, x, y] diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/InfoWithLabel.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/InfoWithLabel.jsx index fef78ca2..367f9c7c 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/InfoWithLabel.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/InfoWithLabel.jsx @@ -2,10 +2,10 @@ import React from 'react' import { Info1, Label1 } from 'src/components/typography/index' const InfoWithLabel = ({ info, label }) => { return ( - <> - {info} - {label} - +
+ {info} + {label} +
) } diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.jsx index e12ac98b..e81c28c3 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Nav.jsx @@ -1,16 +1,11 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { useState } from 'react' import { H4 } from 'src/components/typography' -import styles from './SystemPerformance.styles' - -const useStyles = makeStyles(styles) const ranges = ['Month', 'Week', 'Day'] const Nav = ({ handleSetRange, showPicker }) => { - const classes = useStyles() const [clickedItem, setClickedItem] = useState('Day') const isSelected = R.equals(clickedItem) @@ -20,22 +15,20 @@ const Nav = ({ handleSetRange, showPicker }) => { } return ( -
-
-

{'System performance'}

-
+
+

{'System performance'}

{showPicker && ( -
+
{ranges.map((it, idx) => { return (
handleClick(e.target.innerText)} - className={ - isSelected(it) - ? classnames(classes.newHighlightedLabel, classes.navButton) - : classnames(classes.label, classes.navButton) - }> + className={classnames({ + 'cursor-pointer text-comet': true, + 'font-bold text-zodiac border-b-zodiac border-b-2': + isSelected(it) + })}> {it}
) diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.jsx index cd3552b1..838ded7e 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.jsx @@ -1,12 +1,10 @@ -import { useQuery, gql } from "@apollo/client"; -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import BigNumber from 'bignumber.js' import classnames from 'classnames' import { isAfter } from 'date-fns/fp' import * as R from 'ramda' import React, { useState } from 'react' -import { Label1, Label2, P } from 'src/components/typography/index' +import { Info2, Label1, Label2, P } from 'src/components/typography/index' import PercentDownIcon from 'src/styling/icons/dashboard/down.svg?react' import PercentNeutralIcon from 'src/styling/icons/dashboard/equal.svg?react' import PercentUpIcon from 'src/styling/icons/dashboard/up.svg?react' @@ -23,12 +21,10 @@ import LineChart from './Graphs/RefLineChart' import Scatterplot from './Graphs/RefScatterplot' import InfoWithLabel from './InfoWithLabel' import Nav from './Nav' -import styles from './SystemPerformance.styles' BigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP }) const getFiats = R.map(R.prop('fiat')) -const useStyles = makeStyles(styles) const GET_DATA = gql` query getData($excludeTestingCustomers: Boolean) { @@ -54,7 +50,6 @@ const GET_DATA = gql` ` const SystemPerformance = () => { - const classes = useStyles() const [selectedRange, setSelectedRange] = useState('Day') const { data, loading } = useQuery(GET_DATA, { variables: { excludeTestingCustomers: true } @@ -162,17 +157,17 @@ const SystemPerformance = () => { const percentChange = getPercentChange() const percentageClasses = { - [classes.percentDown]: percentChange < 0, - [classes.percentUp]: percentChange > 0, - [classes.percentNeutral]: percentChange === 0 + 'text-tomato': percentChange < 0, + 'text-spring4': percentChange > 0, + 'text-comet': percentChange === 0, + 'flex items-center justify-center gap-1': true } const getPercentageIcon = () => { - if (percentChange === 0) - return - if (percentChange > 0) - return - return + const className = 'w-4 h-4' + if (percentChange === 0) return + if (percentChange > 0) return + return } return ( @@ -182,74 +177,67 @@ const SystemPerformance = () => { handleSetRange={setSelectedRange} /> {!loading && R.isEmpty(data.transactions) && ( - + )} {!loading && !R.isEmpty(data.transactions) && ( - <> - - - - - - - - {/* todo new customers */} - - - -
- Transactions -
-

- {timezones[timezone]?.short ?? timezones[timezone]?.long}{' '} - timezone -

- -
+
+
+ + +
+
+
+ Transactions +
+

+ {timezones[timezone]?.short ?? timezones[timezone]?.long}{' '} + timezone +

+ +
+
- In + + In +
-
+
- Out + + Out +
- - - - - - +
+ +
+
+
+ Profit from commissions -
-
+
+ {`${getProfit(transactionsToShow).toFormat(2)} ${ data?.config.locale_fiatCurrency }`} -
-
+ + {getPercentageIcon()} {`${new BigNumber(percentChange).toFormat(2)}%`} -
+
{ previousTimeData={transactionsLastTimePeriod} previousProfit={getProfit(transactionsLastTimePeriod)} /> - - - +
+
+
Direction -
-
+
+
- In + + In +
-
+
- Out + + Out +
- - - - - - - +
+ +
+
+
)} ) diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js deleted file mode 100644 index 0a54b9a9..00000000 --- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js +++ /dev/null @@ -1,154 +0,0 @@ -import { - offColor, - offDarkColor, - spacer, - primaryColor, - fontSize3, - fontSecondary, - fontColor, - spring4, - tomato, - comet -} from 'src/styling/variables' - -const styles = { - titleWrapper: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row' - }, - titleAndButtonsContainer: { - display: 'flex' - }, - error: { - marginLeft: 12 - }, - icon: { - marginRight: 6 - }, - h4: { - margin: 0, - marginRight: spacer * 8 - }, - label: { - cursor: 'pointer', - minHeight: 0, - minWidth: 0, - padding: 0, - color: offColor, - textTransform: 'none', - borderBottom: `2px solid transparent`, - display: 'inline-block', - lineHeight: 1.5, - '&:hover': { - backgroundColor: 'transparent' - } - }, - newHighlightedLabel: { - cursor: 'pointer', - color: primaryColor, - fontWeight: 700, - borderRadius: 0, - minHeight: 0, - minWidth: 0, - textTransform: 'none', - borderBottom: `2px solid ${primaryColor}`, - display: 'inline-block', - lineHeight: 1.5, - '&:hover': { - backgroundColor: 'transparent' - } - }, - navButton: { - marginLeft: 24 - }, - navContainer: { - display: 'flex' - }, - percentUp: { - fontSize: fontSize3, - fontFamily: fontSecondary, - fontWeight: 700, - color: spring4, - height: 10 - }, - percentDown: { - fontSize: fontSize3, - fontFamily: fontSecondary, - fontWeight: 700, - color: tomato, - height: 13 - }, - percentNeutral: { - fontSize: fontSize3, - fontFamily: fontSecondary, - fontWeight: 700, - color: comet - }, - profitContainer: { - display: 'flex', - justifyContent: 'space-between', - margin: '23px 26px -30px 16px', - position: 'relative' - }, - profitLabel: { - fontSize: fontSize3, - fontFamily: fontSecondary, - fontWeight: 700, - color: fontColor - }, - directionIcon: { - width: 16, - height: 16, - marginBottom: -2, - marginRight: 4 - }, - emptyTransactions: { - paddingTop: 40 - }, - commissionProfitTitle: { - marginBottom: 16 - }, - graphHeader: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 16 - }, - labelWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - '& > div': { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginLeft: 15, - '&:first-child': { - marginLeft: 0 - }, - '& > p': { - marginLeft: 8 - } - } - }, - txGraphContainer: { - height: 300, - marginTop: 30 - }, - commissionsGraphContainer: { - height: 250, - marginTop: 30 - }, - verticalLine: { - height: 15, - width: 1, - backgroundColor: offDarkColor, - marginLeft: 31, - marginRight: 16 - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx index 94d1c68b..37362174 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.jsx @@ -1,12 +1,11 @@ -import { useQuery, gql } from "@apollo/client"; -import { makeStyles, withStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' +import { styled } from '@mui/material/styles' import Table from '@mui/material/Table' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell' import TableContainer from '@mui/material/TableContainer' import TableHead from '@mui/material/TableHead' import TableRow from '@mui/material/TableRow' -import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import { useHistory } from 'react-router-dom' @@ -15,11 +14,8 @@ import { Label2, TL2 } from 'src/components/typography' import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' import MachineLinkIcon from 'src/styling/icons/month arrows/right.svg?react' -// import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react' import { fromNamespace } from 'src/utils/config' -import styles from './MachinesTable.styles' - // percentage threshold where below this number the text in the cash cassettes percentage turns red const PERCENTAGE_THRESHOLD = 20 @@ -29,27 +25,20 @@ const GET_CONFIG = gql` } ` -const useStyles = makeStyles(styles) +const StyledCell = styled(TableCell)({ + borderBottom: '4px solid white', + padding: 0, + paddingLeft: '15px' +}) -const StyledCell = withStyles({ - root: { - borderBottom: '4px solid white', - padding: 0, - paddingLeft: 15 - } -})(TableCell) - -const HeaderCell = withStyles({ - root: { - borderBottom: '4px solid white', - padding: 0, - paddingLeft: 15, - backgroundColor: 'white' - } -})(TableCell) +const HeaderCell = styled(TableCell)({ + borderBottom: '4px solid white', + padding: 0, + paddingLeft: '15px', + backgroundColor: 'white' +}) const MachinesTable = ({ machines = [], numToRender }) => { - const classes = useStyles() const history = useHistory() const { data } = useQuery(GET_CONFIG) @@ -69,7 +58,7 @@ const MachinesTable = ({ machines = [], numToRender }) => { R.defaultTo(PERCENTAGE_THRESHOLD) )(fillingPercentageSettings) return percent < percentageThreshold ? ( - {`${percent}%`} + {`${percent}%`} ) : ( {`${percent}%`} ) @@ -87,30 +76,32 @@ const MachinesTable = ({ machines = [], numToRender }) => { ) return ( - + -
- Machines +
+ + Machines +
-
- Status +
+ + Status +
- {/* -
- -
- */} {R.times(R.identity, maxNumberOfCassettes).map((it, idx) => ( -
+
- {it + 1} + + {' '} + {it + 1} +
))} @@ -122,20 +113,23 @@ const MachinesTable = ({ machines = [], numToRender }) => { return ( redirect(machine)} - className={classnames(classes.row)} + className="boder-b-0 bg-ghost" key={machine.deviceId + idx}> - -
+ +
{machine.name} redirect(machine)} />
- + diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js index 7f466583..b8774833 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js @@ -6,10 +6,6 @@ import { } from 'src/styling/variables' const styles = { - container: { - display: 'flex', - justifyContent: 'space-between' - }, label: { margin: 0, color: offColor @@ -45,30 +41,12 @@ const styles = { bottom: 160, marginBottom: 0 }, - upperButtonLabel: { - textAlign: 'center', - marginBottom: 0, - marginTop: 0 - }, statusHeader: { marginLeft: 2 }, - table: { - maxHeight: 440, - '&::-webkit-scrollbar': { - width: 7 - }, - '&::-webkit-scrollbar-thumb': { - backgroundColor: offColor, - borderRadius: 5 - } - }, tableBody: { overflow: 'auto' }, - h4: { - marginTop: 0 - }, tl2: { display: 'inline' }, @@ -76,11 +54,9 @@ const styles = { display: 'inline' }, machinesTableContainer: { - marginTop: 10, height: 220 }, expandedMachinesTableContainer: { - marginTop: 10, height: 414 }, centerLabel: { diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.jsx b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.jsx index ff01f03d..7b043d1a 100644 --- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.jsx @@ -1,18 +1,12 @@ -import { useQuery, gql } from "@apollo/client"; +import { useQuery, gql } from '@apollo/client' import Button from '@mui/material/Button' -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import { cardState as cardState_ } from 'src/components/CollapsibleCard' -// import ActionButton from 'src/components/buttons/ActionButton' import { H4, TL2, Label1 } from 'src/components/typography' import MachinesTable from './MachinesTable' -import styles from './MachinesTable.styles' - -const useStyles = makeStyles(styles) // number of machines in the table to render on page load const NUM_TO_RENDER = 4 @@ -59,29 +53,28 @@ const GET_DATA = gql` } */ const SystemStatus = ({ onReset, onExpand, size }) => { - const classes = useStyles() const { data, loading } = useQuery(GET_DATA) const machines = R.path(['machines'])(data) ?? [] const showAllItems = size === cardState_.EXPANDED const machinesTableContainerClasses = { - [classes.machinesTableContainer]: !showAllItems, - [classes.expandedMachinesTableContainer]: showAllItems + 'h-55': !showAllItems, + 'h-103': showAllItems } // const uptime = data?.uptime ?? [{}] return ( <> -
-

System status

{' '} +
+

System status

{showAllItems && ( - + @@ -89,54 +82,29 @@ const SystemStatus = ({ onReset, onExpand, size }) => {
{!loading && ( <> - - {/* - On hold until system uptime is implemented - - - {parseUptime(uptime[0].time)} - - System up time - */} - - {data?.serverVersion} - server version - - - {/* - On hold until system update features are implemented - console.log('Upgrade button clicked')}> - Update to v10.6.0 - */} - - - - - - - +
+ {data?.serverVersion} + server version +
+
+ +
{!showAllItems && machines.length > NUM_TO_RENDER && ( - - +
+ - +
)} )} diff --git a/new-lamassu-admin/src/pages/Locales/Locales.jsx b/new-lamassu-admin/src/pages/Locales/Locales.jsx index fcb32433..06a526da 100644 --- a/new-lamassu-admin/src/pages/Locales/Locales.jsx +++ b/new-lamassu-admin/src/pages/Locales/Locales.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' @@ -15,7 +14,6 @@ import { Link, SupportLinkButton } from 'src/components/buttons' import { Table as EditableTable } from 'src/components/editableTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { styles } from './Locales.styles' import { mainFields, overrides, @@ -25,8 +23,6 @@ import { overridesDefaults } from './helper' -const useStyles = makeStyles(styles) - const GET_DATA = gql` query getData { config @@ -75,8 +71,6 @@ const GET_MARKETS = gql` ` const FiatCurrencyChangeAlert = ({ open, close, save }) => { - const classes = useStyles() - return ( { Also, if you have cash-out enabled, you must define new dispenser bill counts for the new currency for cash-out on the new currency to work.

-
+
Cancel - + Save
diff --git a/new-lamassu-admin/src/pages/Locales/Locales.styles.js b/new-lamassu-admin/src/pages/Locales/Locales.styles.js deleted file mode 100644 index 7470d8f6..00000000 --- a/new-lamassu-admin/src/pages/Locales/Locales.styles.js +++ /dev/null @@ -1,12 +0,0 @@ -const styles = { - rightAligned: { - marginTop: '20px', - marginLeft: 'auto', - marginBottom: '20px' - }, - rightLink: { - marginLeft: '20px' - } -} - -export { styles } diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index 9186c0ca..906d56a0 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -22,6 +22,7 @@ --ghost: #fafbff; --zircon: #ebefff; + --zircon2: #dbdfed; --java: #16d6d3; --neon: #5a67ff; @@ -45,6 +46,8 @@ --color-tomato: var(--tomato); --color-ghost: var(--ghost); --color-zircon: var(--zircon); + --color-zircon2: var(--zircon2); + --color-java: var(--java); --color-neon: var(--neon); --color-malachite: var(--malachite); --color-orange-yellow: var(--orange-yellow); diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index f0bd2450..230160a3 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -151,6 +151,13 @@ theme = createTheme(theme, { } } }, + MuiPaper: { + styleOverrides: { + elevation1: { + boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)' + } + } + }, MuiChip: { styleOverrides: { root: { From b95dd5cbbf5f3c36f193c16852d87fcb05447c85 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 6 May 2025 14:50:11 +0100 Subject: [PATCH 14/27] partial: Loyalty, Machines CSS rework --- .../LoyaltyPanel/IndividualDiscount.styles.js | 58 ---------- .../LoyaltyPanel/IndividualDiscountModal.jsx | 28 ++--- .../LoyaltyPanel/IndividualDiscounts.jsx | 14 +-- .../pages/LoyaltyPanel/LoyaltyDiscounts.jsx | 7 -- .../src/pages/LoyaltyPanel/PromoCodes.jsx | 6 - .../pages/LoyaltyPanel/PromoCodes.styles.js | 51 --------- .../pages/LoyaltyPanel/PromoCodesModal.jsx | 103 ++++++++---------- .../MachineComponents/Cassettes/Cassettes.jsx | 13 +-- .../Cassettes/Cassettes.styles.js | 35 ------ .../Machines/MachineComponents/Details.jsx | 21 ++-- .../Machines/MachineComponents/Overview.jsx | 48 +++----- .../src/pages/Machines/MachineSidebar.jsx | 6 +- .../src/pages/Machines/Machines.jsx | 90 +++++++-------- .../src/pages/Machines/Machines.styles.js | 66 ----------- .../src/pages/Maintenance/CashUnits.jsx | 1 - .../src/pages/Maintenance/CashUnits.styles.js | 26 ----- .../src/pages/Maintenance/helper.jsx | 20 +--- 17 files changed, 134 insertions(+), 459 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx delete mode 100644 new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js delete mode 100644 new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js delete mode 100644 new-lamassu-admin/src/pages/Machines/Machines.styles.js diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js deleted file mode 100644 index 68951bfc..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscount.styles.js +++ /dev/null @@ -1,58 +0,0 @@ -import { spacer, errorColor } from 'src/styling/variables' - -const styles = { - identification: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - '& > *:first-child': { - marginLeft: 0 - }, - '& > *': { - marginLeft: 6 - }, - '& > *:nth-child(3)': { - marginLeft: 15 - } - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%', - '& > *:first-child': { - marginTop: 10 - }, - '& > *': { - marginBottom: 20 - } - }, - customerAutocomplete: { - width: 350 - }, - discountRateWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - discountInput: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - }, - error: { - color: errorColor - }, - disabled: { - cursor: 'wait' - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx index 6868330d..840964ab 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscountModal.jsx @@ -1,20 +1,15 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { HelpTooltip } from 'src/components/Tooltip' -import { H3, TL1, P } from 'src/components/typography' +import { H1, H3, P } from 'src/components/typography' import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { NumberInput, Autocomplete } from 'src/components/inputs/formik' -import styles from './IndividualDiscount.styles' - -const useStyles = makeStyles(styles) - const initialValues = { customer: '', discount: '' @@ -46,8 +41,6 @@ const IndividualDiscountModal = ({ addDiscount, customers }) => { - const classes = useStyles() - const handleAddDiscount = (customer, discount) => { addDiscount({ variables: { @@ -77,8 +70,10 @@ const IndividualDiscountModal = ({ handleAddDiscount(customer, discount) }}> {({ errors, touched }) => ( - -
+ +
-
+

Define discount rate

@@ -112,22 +107,19 @@ const IndividualDiscountModal = ({

-
+
- - % - +

%

-
+
{getErrorMsg(errors, touched, creationError) && ( {getErrorMsg(errors, touched, creationError)} @@ -136,7 +128,7 @@ const IndividualDiscountModal = ({
diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx index d6940a65..7f1d63fc 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx @@ -1,21 +1,17 @@ import { useQuery, useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' + +import { Link, Button, IconButton } from 'src/components/buttons' import { DeleteDialog } from 'src/components/DeleteDialog' import DataTable from 'src/components/tables/DataTable' import { Label3, TL1 } from 'src/components/typography' import PhoneIdIcon from 'src/styling/icons/ID/phone/zodiac.svg?react' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' -import { Link, Button, IconButton } from 'src/components/buttons' - -import styles from './IndividualDiscount.styles' import IndividualDiscountModal from './IndividualDiscountModal' import classnames from 'classnames' -const useStyles = makeStyles(styles) - const GET_INDIVIDUAL_DISCOUNTS = gql` query individualDiscounts { individualDiscounts { @@ -57,8 +53,6 @@ const GET_CUSTOMERS = gql` ` const IndividualDiscounts = () => { - const classes = useStyles() - const [deleteDialog, setDeleteDialog] = useState(false) const [toBeDeleted, setToBeDeleted] = useState() @@ -94,7 +88,7 @@ const IndividualDiscounts = () => { size: 'sm', view: t => { return ( -
+
{t.customer.phone}
@@ -158,7 +152,7 @@ const IndividualDiscounts = () => { Add new code diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx deleted file mode 100644 index cf4e9335..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/LoyaltyDiscounts.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react' - -const LoyaltyDiscounts = () => { - return <> -} - -export default LoyaltyDiscounts diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx index 6c3afcf0..6a239742 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx @@ -1,5 +1,4 @@ import { useQuery, useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { DeleteDialog } from 'src/components/DeleteDialog' @@ -9,11 +8,8 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react' import { Link, Button, IconButton } from 'src/components/buttons' -import styles from './PromoCodes.styles' import PromoCodesModal from './PromoCodesModal' -const useStyles = makeStyles(styles) - const DUPLICATE_ERROR_MSG = 'There is already a promotion with that code!' const DEFAULT_ERROR_MSG = 'Failed to save' @@ -46,8 +42,6 @@ const CREATE_CODE = gql` ` const PromoCodes = () => { - const classes = useStyles() - const [deleteDialog, setDeleteDialog] = useState(false) const [toBeDeleted, setToBeDeleted] = useState() diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js deleted file mode 100644 index 6332a4c3..00000000 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.styles.js +++ /dev/null @@ -1,51 +0,0 @@ -import { - spacer, - fontPrimary, - primaryColor, - errorColor -} from 'src/styling/variables' - -const styles = { - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - modalLabel1: { - marginTop: 20 - }, - modalLabel2Wrapper: { - marginTop: 40, - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start' - }, - discountInput: { - display: 'flex', - flexDirection: 'row', - alignItems: 'flex-start' - }, - inputLabel: { - color: primaryColor, - fontFamily: fontPrimary, - fontSize: 24, - marginLeft: 8, - marginTop: 15 - }, - tableWidth: { - width: 620 - }, - error: { - color: errorColor - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%' - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx index 25556f6e..15d064e5 100644 --- a/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx +++ b/new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodesModal.jsx @@ -1,33 +1,30 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { HelpTooltip } from 'src/components/Tooltip' -import { H3, TL1, P } from 'src/components/typography' +import { H3, P, H1 } from 'src/components/typography' import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { TextInput, NumberInput } from 'src/components/inputs/formik' -import styles from './PromoCodes.styles' - -const useStyles = makeStyles(styles) - const initialValues = { code: '', discount: '' } const validationSchema = Yup.object().shape({ - code: Yup.string().required().trim().max(25).matches(/^\S*$/, 'No whitespace allowed'), + code: Yup.string() + .required() + .trim() + .max(25) + .matches(/^\S*$/, 'No whitespace allowed'), discount: Yup.number().required().min(0).max(100) }) const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => { - const classes = useStyles() - const handleAddCode = (code, discount) => { addCode(R.toUpper(code), parseInt(discount)) } @@ -51,58 +48,52 @@ const PromoCodesModal = ({ showModal, onClose, errorMsg, addCode }) => { handleAddCode(code, discount) }}> {({ errors }) => ( - -

Promo code name

+ +

Promo code name

-
-

Define discount rate

- -

- This is a percentage discount off of your existing - commission rates for a customer entering this code at the - machine. -

-

- For instance, if you charge 8% commissions, and this code is - set for 50%, then you'll instead be charging 4% on - transactions using the code. -

- -
-
- - - % - -
-
- {(errorMsg || !R.isEmpty(errors)) && ( - - {errorMsg || R.head(R.values(errors))} - - )} - +
+

Define discount rate

+ +

+ This is a percentage discount off of your existing + commission rates for a customer entering this code at the + machine. +

+

+ For instance, if you charge 8% commissions, and this code + is set for 50%, then you'll instead be charging 4% on + transactions using the code. +

+ +
+
+ +

%

+
+
+ {(errorMsg || !R.isEmpty(errors)) && ( + + {errorMsg || R.head(R.values(errors))} + + )} +
)} diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx index 04dfb6b6..0dd0b5a4 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.jsx @@ -1,5 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import DataTable from 'src/components/tables/DataTable' @@ -9,10 +8,6 @@ import helper from 'src/pages/Maintenance/helper' import { fromNamespace } from 'src/utils/config' -import styles from './Cassettes.styles' - -const useStyles = makeStyles(styles) - const SET_CASSETTE_BILLS = gql` mutation MachineAction( $deviceId: ID! @@ -46,8 +41,6 @@ const widths = { } const CashCassettes = ({ machine, config, refetchData, bills }) => { - const classes = useStyles() - const [wizard, setWizard] = useState(false) const cashout = config && fromNamespace('cashOut')(config) @@ -57,7 +50,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => { const getCashoutSettings = deviceId => fromNamespace(deviceId)(cashout) const elements = R.filter(it => it.name !== 'name')( - helper.getElements(classes, config, bills, setWizard, widths) + helper.getElements(config, bills, setWizard, widths) ) const [setCassetteBills, { error }] = useMutation(SET_CASSETTE_BILLS, { @@ -92,7 +85,7 @@ const CashCassettes = ({ machine, config, refetchData, bills }) => { Details={InnerCashUnitDetails} emptyText="No machines so far" initialExpanded={0} - tableClassName={classes.dataTable} + tableClassName="min-h-72" /> {wizard && ( *': { - marginRight: 30 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - units: { - display: 'flex', - flexDirection: 'row', - '& > *': { - marginRight: 10 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - verticalLine: { - height: '100%', - width: 1, - backgroundColor: offDarkColor - }, - dataTable: { - minHeight: 290 - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx index 7b9105da..7ca96a36 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.jsx @@ -1,31 +1,26 @@ -import { makeStyles } from '@mui/styles' import React from 'react' -import { Label3, P } from 'src/components/typography' +import { Label1, P } from 'src/components/typography' import { modelPrettifier } from 'src/utils/machine' import { formatDate } from 'src/utils/timezones' -import styles from '../Machines.styles' -const useStyles = makeStyles(styles) - const Details = ({ data, timezone }) => { - const classes = useStyles() return ( -
-
- Paired at +
+
+ Paired at

{data.pairedAt ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss') : ''}

-
- Machine model +
+ Machine model

{modelPrettifier[data.model]}

-
- Software version +
+ Software version

{data.version}

diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx index a9f42060..db9730c6 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import { formatDistance } from 'date-fns' import React from 'react' @@ -7,36 +6,25 @@ import MachineActions from 'src/components/machineActions/MachineActions' import { H3, Label1, P } from 'src/components/typography' import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' -import styles from '../Machines.styles' -const useStyles = makeStyles(styles) - const Overview = ({ data, onActionSuccess }) => { - const classes = useStyles() - return ( -
-
-
-

{data.name}

-
+
+

{data.name}

+
+ Status + {data && data.statuses ? : null}
-
-
- Status - {data && data.statuses ? : null} -
-
-
-
- Ping +
+
+ Ping

{data.responseTime ? new BigNumber(data.responseTime).toFixed(3).toString() + ' ms' : 'unavailable'}

-
- Last ping +
+ Last ping

{data.lastPing ? formatDistance(new Date(data.lastPing), new Date(), { @@ -45,8 +33,8 @@ const Overview = ({ data, onActionSuccess }) => { : 'unknown'}

-
- Network speed +
+ Network speed

{data.downloadSpeed ? new BigNumber(data.downloadSpeed) @@ -56,17 +44,15 @@ const Overview = ({ data, onActionSuccess }) => {

-
-
- Device ID +
+
+ Device ID

- - {data.deviceId} - + {data.deviceId}

-
+
diff --git a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx index 1181d615..a9f1851b 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineSidebar.jsx @@ -1,15 +1,11 @@ import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' import ListItemText from '@mui/material/ListItemText' -import { makeStyles } from '@mui/styles' import React from 'react' -import styles from './Machines.styles' -const useStyles = makeStyles(styles) const MachineSidebar = ({ data, getText, getKey, isSelected, selectItem }) => { - const classes = useStyles() return ( - + {data.map((item, idx) => { return ( { } const Machines = ({ data, refetch, reload }) => { - const classes = useStyles() - const timezone = R.path(['config', 'locale_timezone'], data) ?? {} const machine = R.path(['machine'])(data) ?? {} @@ -113,51 +106,44 @@ const Machines = ({ data, refetch, reload }) => { const machineID = R.path(['deviceId'])(machine) ?? null return ( - - - -
- }> - - - Dashboard - - - - {machineName} - - - -
- - - -
-
- {'Details'} -
-
-
- {'Cash box & cassettes'} - -
-
- {'Latest transactions'} - -
-
- {'Commissions'} - -
+
+
+ }> + + + Dashboard + + + + {machineName} + + + +
+
+
+ Details +
- - +
+ Cash box & cassettes + +
+
+ Latest transactions + +
+
+ Commissions + +
+
+
) } diff --git a/new-lamassu-admin/src/pages/Machines/Machines.styles.js b/new-lamassu-admin/src/pages/Machines/Machines.styles.js deleted file mode 100644 index 2a524939..00000000 --- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js +++ /dev/null @@ -1,66 +0,0 @@ -import { spacer, comet } from 'src/styling/variables' - -const styles = { - grid: { - flex: 1, - height: '100%' - }, - content: { - display: 'flex', - flexDirection: 'column', - flex: 1, - marginLeft: spacer * 6, - maxWidth: 900 - }, - subtitle: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row', - color: comet - }, - label3: { - color: comet, - marginTop: 0, - fontSize: 12 - }, - row: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-around' - }, - rowItem: { - flex: 1, - marginBottom: spacer * 2 - }, - detailItem: { - marginBottom: spacer * 4 - }, - actionButtonsContainer: { - display: 'flex', - flexDirection: 'row' - }, - breadcrumbsContainer: { - marginTop: 32 - }, - breadcrumbLink: { - textDecoration: 'none' - }, - detailsMargin: { - marginTop: 24 - }, - sidebarContainer: { - height: 400, - overflowY: 'auto' - }, - contentContainer: { - '& > *': { - marginTop: 26 - }, - '& > *:first-child': { - marginTop: 0 - } - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx index 8f3fa94b..16aaad7c 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx @@ -188,7 +188,6 @@ const CashCassettes = () => { } const elements = helper.getElements( - classes, config, bills, setWizard, diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js index 389968bc..2c46a149 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js @@ -27,32 +27,6 @@ export default { downloadLogsButton: { marginLeft: 13 }, - unitsRow: { - display: 'flex', - flexDirection: 'row', - margin: [[10, 0]], - '& > *': { - marginRight: 30 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - units: { - display: 'flex', - flexDirection: 'row', - '& > *': { - marginRight: 10 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - verticalLine: { - height: '100%', - width: 1, - backgroundColor: offDarkColor - }, dataTable: { marginBottom: 80 } diff --git a/new-lamassu-admin/src/pages/Maintenance/helper.jsx b/new-lamassu-admin/src/pages/Maintenance/helper.jsx index 19e21f60..e63e8ac4 100644 --- a/new-lamassu-admin/src/pages/Maintenance/helper.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/helper.jsx @@ -7,14 +7,7 @@ import { IconButton } from 'src/components/buttons' import { fromNamespace } from 'src/utils/config' import { getCashUnitCapacity } from 'src/utils/machine' -const getElements = ( - classes, - config, - bills, - setWizard, - widths, - setMachineId -) => { +const getElements = (config, bills, setWizard, widths, setMachineId) => { const fillingPercentageSettings = fromNamespace('notifications', config) const locale = fromNamespace('locale')(config) const cashout = fromNamespace('cashOut')(config) @@ -42,7 +35,6 @@ const getElements = ( width={25} height={45} omitInnerPercentage - className={classes.padding} /> ), inputProps: { @@ -55,8 +47,8 @@ const getElements = ( width: widths.cassettes, view: m => { return ( -
-
+
+
{R.range(1, m.numberOfCassettes + 1).map((it, idx) => ( ))}
-
+
{R.map(it => ( <> {it !== m.numberOfRecyclers / 2 && ( - + )} ))(R.range(1, m.numberOfRecyclers / 2 + 1))} @@ -136,7 +128,7 @@ const getElements = ( size="large"> - ); + ) } } ] From a90833726e9c45e1752eed3def1cd460f6fab03a Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Tue, 6 May 2025 18:14:49 +0100 Subject: [PATCH 15/27] partial: Maintenance css migration --- .../src/pages/Maintenance/CashUnitDetails.jsx | 123 +++---------- .../src/pages/Maintenance/CashUnits.jsx | 35 ++-- .../src/pages/Maintenance/CashUnits.styles.js | 33 ---- .../src/pages/Maintenance/CashUnitsFooter.jsx | 42 ++--- .../Maintenance/CashUnitsFooter.styles.js | 42 ----- .../src/pages/Maintenance/CashboxHistory.jsx | 137 +------------- .../pages/Maintenance/MachineDetailsCard.jsx | 172 +++++------------- .../Maintenance/MachineDetailsCard.styles.js | 47 ----- .../src/pages/Maintenance/MachineStatus.jsx | 28 +-- .../pages/Maintenance/Wizard/WizardSplash.jsx | 70 ++----- .../pages/Maintenance/Wizard/WizardStep.jsx | 150 +++------------ .../Maintenance/Wizard/WizardStep.module.css | 22 +++ 12 files changed, 176 insertions(+), 725 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js delete mode 100644 new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js delete mode 100644 new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js create mode 100644 new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.module.css diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx index 290cd127..00b196ac 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnitDetails.jsx @@ -1,87 +1,12 @@ -import { makeStyles } from '@mui/styles' import Chip from '@mui/material/Chip' import * as R from 'ramda' import React from 'react' import { Label1, TL2 } from 'src/components/typography' import { CashOut } from 'src/components/inputs' -import { offDarkColor } from 'src/styling/variables' import { fromNamespace } from 'src/utils/config' import { getCashUnitCapacity, modelPrettifier } from 'src/utils/machine' -const styles = { - wrapper: { - display: 'flex', - flexDirection: 'row', - marginTop: 12, - marginBottom: 16, - '& > *': { - marginRight: 40 - }, - '& > *:last-child': { - marginRight: 0 - }, - minHeight: 120 - }, - row: { - display: 'flex', - flexDirection: 'row' - }, - col: { - display: 'flex', - flexDirection: 'column' - }, - machineData: { - display: 'flex', - flexDirection: 'column', - minWidth: 210 - }, - billList: ({ hideMachineData }) => ({ - display: 'flex', - flexDirection: 'column', - minWidth: hideMachineData ? 60 : 160, - '& > span': { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - '& > p': { - minWidth: 30 - } - } - }), - unitList: { - display: 'flex', - flexDirection: 'row', - '& > *': { - marginRight: 20 - }, - '& > *:last-child': { - marginRight: 0 - }, - marginTop: 10 - }, - verticalLine: { - height: '100%', - width: 1, - backgroundColor: offDarkColor - }, - label: { - marginBottom: 10 - }, - loadingBoxes: { - display: 'flex', - flexDirection: 'column', - '& > *': { - marginBottom: 20 - }, - '& > *:last-child': { - marginBottom: 0 - } - } -} - -const useStyles = makeStyles(styles) - const CashUnitDetails = ({ machine, bills, @@ -89,38 +14,40 @@ const CashUnitDetails = ({ config, hideMachineData = false }) => { - const classes = useStyles({ hideMachineData }) const billCount = R.countBy(it => it.fiat)(bills) const fillingPercentageSettings = fromNamespace('notifications', config) const cashout = fromNamespace('cashOut')(config) const getCashoutSettings = id => fromNamespace(id)(cashout) + const minWidth = hideMachineData ? 'min-w-15' : 'min-w-40' + const VerticalLine = () => + return ( -
+
{!hideMachineData && ( -
+
Machine Model {modelPrettifier[machine.model]}
)} -
+
Cash box {R.isEmpty(billCount) && Empty} {R.keys(billCount).map((it, idx) => ( - - {billCount[it]} + + + {billCount[it]} + ))}
-
+
{machine.numberOfRecyclers === 0 && R.map(it => ( <> -
- {`Cassette ${it}`} +
+ {`Cassette ${it}`}
- {it !== machine.numberOfCassettes && ( - - )} + {it !== machine.numberOfCassettes && } ))(R.range(1, machine.numberOfCassettes + 1))} {machine.numberOfRecyclers > 0 && ( <> -
- {`Loading boxes`} -
+
+ {`Loading boxes`} +
{R.range(1, machine.numberOfCassettes + 1).map((it, idx) => (
- + {R.map(it => ( <> -
- +
+ {`Recycler ${ machine.model === 'aveiro' ? `${it} f/r` : `${it * 2 - 1} - ${it * 2}` }`} -
+
- {it !== machine.numberOfRecyclers / 2 && ( - - )} + {it !== machine.numberOfRecyclers / 2 && } ))(R.range(1, machine.numberOfRecyclers / 2 + 1))} diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx index 16aaad7c..66635201 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx @@ -1,6 +1,5 @@ import { useQuery, useMutation, gql } from '@apollo/client' import DialogActions from '@mui/material/DialogActions' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' @@ -21,14 +20,11 @@ import { MANUAL, AUTOMATIC } from 'src/utils/constants' import { onlyFirstToUpper } from 'src/utils/string' import CashUnitDetails from './CashUnitDetails' -import styles from './CashUnits.styles' import CashCassettesFooter from './CashUnitsFooter' import CashboxHistory from './CashboxHistory' import Wizard from './Wizard/Wizard' import helper from './helper' -const useStyles = makeStyles(styles) - const GET_MACHINES_AND_CONFIG = gql` query getData($billFilters: JSONObject) { machines { @@ -114,7 +110,6 @@ const widths = { } const CashCassettes = () => { - const classes = useStyles() const [showHistory, setShowHistory] = useState(false) const [editingSchema, setEditingSchema] = useState(null) const [selectedRadio, setSelectedRadio] = useState(null) @@ -219,7 +214,7 @@ const CashCassettes = () => { { component: showHistory ? ( { ) } ]} - iconClassName={classes.listViewButton} - className={classes.tableWidth} + className="flex items-center mr-[1px]" appendix={

@@ -248,18 +242,17 @@ const CashCassettes = () => { }> {!showHistory && ( -

- Cash box resets +
+ + Cash box resets +
{cashboxReset && ( -

+

{onlyFirstToUpper(cashboxReset)}

)} - setEditingSchema(true)} - className={classes.button} - size="large"> + setEditingSchema(true)} size="large">
@@ -275,7 +268,7 @@ const CashCassettes = () => { Details={InnerCashUnitDetails} emptyText="No machines so far" expandable - tableClassName={classes.dataTable} + tableClassName="mb-20" /> {data && R.isEmpty(machines) && ( @@ -315,7 +308,7 @@ const CashCassettes = () => { width={478} handleClose={() => setEditingSchema(null)} open={true}> -

+

We can automatically assume you emptied a bill validator's cash box when the machine detects that it has been removed.

@@ -324,9 +317,8 @@ const CashCassettes = () => { value={selectedRadio ?? cashboxReset} options={[radioButtonOptions[0]]} onChange={handleRadioButtons} - className={classes.radioButtons} /> -

+

Assume the cash box is emptied whenever it's removed, creating a new batch on the history screen and setting its current balance to zero. @@ -336,14 +328,13 @@ const CashCassettes = () => { value={selectedRadio ?? cashboxReset} options={[radioButtonOptions[1]]} onChange={handleRadioButtons} - className={classes.radioButtons} /> -

+

Cash boxes won't be assumed emptied when removed, nor their counts modified. Instead, to update the count and create a new batch, you'll click the 'Edit' button on this panel.

- + diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js deleted file mode 100644 index 2c46a149..00000000 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnits.styles.js +++ /dev/null @@ -1,33 +0,0 @@ -import { offColor, offDarkColor } from 'src/styling/variables' - -export default { - cashbox: { - height: 36 - }, - tBody: { - maxHeight: 'calc(100vh - 350px)', - overflow: 'auto' - }, - tableWidth: { - display: 'flex', - alignItems: 'center', - marginRight: 1 - }, - descriptions: { - color: offColor, - marginTop: 0 - }, - cashboxReset: { - color: offColor, - margin: [[13, 0, -5, 20]] - }, - selection: { - marginRight: 12 - }, - downloadLogsButton: { - marginLeft: 13 - }, - dataTable: { - marginBottom: 80 - } -} diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.jsx b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.jsx index bbbab515..856828af 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import * as R from 'ramda' import React from 'react' @@ -9,10 +8,6 @@ import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' import { fromNamespace } from 'src/utils/config' import { numberToFiatAmount } from 'src/utils/number' -import styles from './CashUnitsFooter.styles' - -const useStyles = makeStyles(styles) - const CashCassettesFooter = ({ machines, config, @@ -20,7 +15,6 @@ const CashCassettesFooter = ({ bills, deviceIds }) => { - const classes = useStyles() const cashout = config && fromNamespace('cashOut')(config) const getCashoutSettings = id => fromNamespace(id)(cashout) const cashoutReducerFn = ( @@ -84,33 +78,33 @@ const CashCassettesFooter = ({ ).toFormat(0) return ( -
-
- Cash value in System -
- - Cash-in: - +
+
+ Cash value in System +
+ + Cash-in: + {numberToFiatAmount(totalInCashBox)} {currencyCode}
-
- - Cash-out: - +
+ + Cash-out: + {numberToFiatAmount(totalInCassettes)} {currencyCode}
-
- - Recycle: - +
+ + Recycle: + {numberToFiatAmount(totalInRecyclers)} {currencyCode}
-
- Total: - +
+ Total: + {numberToFiatAmount(total)} {currencyCode}
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js b/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js deleted file mode 100644 index a0a2484b..00000000 --- a/new-lamassu-admin/src/pages/Maintenance/CashUnitsFooter.styles.js +++ /dev/null @@ -1,42 +0,0 @@ -import { comet } from 'src/styling/variables' - -export default { - footerLabel: { - color: comet, - alignSelf: 'center' - }, - footerContent: { - width: 1200, - maxHeight: 64, - display: 'flex', - justifyContent: 'space-around', - position: 'fixed' - }, - footerContainer: { - position: 'fixed', - height: 64, - left: 0, - bottom: 0, - width: '100vw', - backgroundColor: 'white', - display: 'flex', - justifyContent: 'space-around', - boxShadow: [[0, -1, 10, 0, 'rgba(50, 50, 50, 0.1)']] - }, - flex: { - display: 'flex' - }, - icon: { - alignSelf: 'center', - height: 20, - width: 20, - marginRight: 8 - }, - iconLabel: { - alignSelf: 'center', - marginRight: 8 - }, - valueDisplay: { - alignSelf: 'center' - } -} diff --git a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.jsx b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.jsx index 580fa0be..70b8f41e 100644 --- a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.jsx @@ -1,17 +1,11 @@ -import { useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React from 'react' -// import * as Yup from 'yup' -// import { Link, IconButton } from 'src/components/buttons' -// import { TextInput } from 'src/components/inputs' import DataTable from 'src/components/tables/DataTable' import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react' import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' import { NumberInput } from 'src/components/inputs/formik' -// import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react' -// import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import { formatDate } from 'src/utils/timezones' const GET_BATCHES = gql` @@ -29,55 +23,9 @@ const GET_BATCHES = gql` } ` -/* const EDIT_BATCH = gql` - mutation editBatch($id: ID, $performedBy: String) { - editBatch(id: $id, performedBy: $performedBy) { - id - } - } -` */ - -const styles = { - operationType: { - marginLeft: 8 - }, - operationTypeWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - }, - saveAndCancel: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between' - }, - tableWrapper: { - display: 'flex', - flexDirection: 'column', - flex: 1, - marginBottom: 80 - } -} - -/* const schema = Yup.object().shape({ - performedBy: Yup.string().nullable() -}) */ - -const useStyles = makeStyles(styles) - const CashboxHistory = ({ machines, currency, timezone }) => { - const classes = useStyles() - - /* const [error, setError] = useState(false) - const [field, setField] = useState(null) - const [editing, setEditing] = useState(false) */ - const { data: batchesData, loading: batchesLoading } = useQuery(GET_BATCHES) - /* const [editBatch] = useMutation(EDIT_BATCH, { - refetchQueries: () => ['cashboxBatches'] - }) */ - const loading = batchesLoading const batches = R.path(['cashboxBatches'])(batchesData) @@ -89,18 +37,14 @@ const CashboxHistory = ({ machines, currency, timezone }) => { `cash-cassette-${i}-refill`, <> - - Cash cassette {i} refill - + Cash cassette {i} refill ), R.assoc( `cash-cassette-${i}-empty`, <> - - Cash cassette {i} emptied - + Cash cassette {i} emptied ) )(ret), @@ -108,35 +52,13 @@ const CashboxHistory = ({ machines, currency, timezone }) => { 'cash-box-empty': ( <> - Cash box emptied + Cash box emptied ) }, R.range(1, 5) ) - /* const save = row => { - const performedBy = field.performedBy === '' ? null : field.performedBy - - schema - .isValid(field) - .then(() => { - setError(false) - editBatch({ - variables: { id: row.id, performedBy: performedBy } - }) - }) - .catch(setError(true)) - return close() - } - - const close = () => { - setEditing(false) - setField(null) - } - - const notEditing = id => field?.id !== id */ - const elements = [ { name: 'operation', @@ -144,7 +66,7 @@ const CashboxHistory = ({ machines, currency, timezone }) => { width: 200, textAlign: 'left', view: it => ( -
+
{getOperationRender[it.operationType]}
) @@ -198,57 +120,10 @@ const CashboxHistory = ({ machines, currency, timezone }) => { textAlign: 'right', view: it => formatDate(it.created, timezone, 'HH:mm') } - /* { - name: 'performedBy', - header: 'Performed by', - width: 180, - textAlign: 'left', - view: it => { - if (notEditing(it.id)) - return R.isNil(it.performedBy) ? 'Unknown entity' : it.performedBy - return ( - setField({ ...field, performedBy: e.target.value })} - error={error} - width={190 * 0.85} - value={field?.performedBy} - /> - ) - } - }, - { - name: '', - header: 'Edit', - width: 80, - textAlign: 'right', - view: it => { - if (notEditing(it.id)) - return ( - { - setField({ id: it.id, performedBy: it.performedBy }) - setEditing(true) - }}> - {editing ? : } - - ) - return ( -
- save(it)}> - Save - - - Cancel - -
- ) - } - } */ ] return ( -
+
-// supportArtices.find(({ code: article }) => article === status) - -const useLStyles = makeStyles(labelStyles) - const Label = ({ children }) => { - const classes = useLStyles() - - return
{children}
+ return {children} } -const useMDStyles = makeStyles(machineDetailsStyles) - -const Container = ({ children, ...props }) => ( - - {children} - -) - -const Item = ({ children, ...props }) => ( - - {children} - -) - const MachineDetailsRow = ({ it: machine, onActionSuccess, timezone }) => { - const classes = useMDStyles() - return ( - - {/* - - - -
    - {machine.statuses.map((status, index) => ( -
  • - -
    • - ))} -
- - - -
    - {machine.statuses - .map(article) - .map(({ label, article }, index) => ( -
  • - - '{label}' - -
    • - ))} -
- - - - */} - - - - - {modelPrettifier[machine.model]} - - - - - {timezone && - formatDate(machine.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')} - - - - - - - - - {machine.downloadSpeed - ? new BigNumber(machine.downloadSpeed).toFixed(4).toString() + - ' MB/s' - : 'unavailable'} - - - - - - {machine.responseTime - ? new BigNumber(machine.responseTime).toFixed(3).toString() + - ' ms' - : 'unavailable'} - - - - - - {machine.packetLoss - ? new BigNumber(machine.packetLoss).toFixed(3).toString() + - ' %' - : 'unavailable'} - - - - - +
+
+ + {modelPrettifier[machine.model]} +
+
+ + + {timezone && + formatDate(machine.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')} + +
+
+ +
+
+ + + {machine.downloadSpeed + ? new BigNumber(machine.downloadSpeed).toFixed(4).toString() + + ' MB/s' + : 'unavailable'} + +
+
+ + + {machine.responseTime + ? new BigNumber(machine.responseTime).toFixed(3).toString() + ' ms' + : 'unavailable'} + +
+
+ + + {machine.packetLoss + ? new BigNumber(machine.packetLoss).toFixed(3).toString() + ' %' + : 'unavailable'} + +
+
) } diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js b/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js deleted file mode 100644 index 7ac4426f..00000000 --- a/new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.styles.js +++ /dev/null @@ -1,47 +0,0 @@ -import { alpha } from '@mui/material/styles' - -import { - detailsRowStyles, - labelStyles -} from 'src/pages/Transactions/Transactions.styles' -import { spacer, comet, primaryColor, fontSize4 } from 'src/styling/variables' - -const machineDetailsStyles = { - ...detailsRowStyles, - wrapper: { - display: 'flex', - // marginTop: 24, - // marginBottom: 32, - marginTop: 12, - marginBottom: 16, - fontSize: fontSize4 - }, - row: { - display: 'flex', - flexDirection: 'row' - // marginBottom: 36 - }, - list: { - padding: 0, - margin: 0, - listStyle: 'none' - }, - item: { - height: spacer * 3, - marginBottom: spacer * 1.5 - }, - link: { - color: primaryColor, - textDecoration: 'none' - }, - separator: { - width: 1, - height: 170, - zIndex: 1, - marginRight: 60, - marginLeft: 'auto', - background: alpha(comet, 0.5) - } -} - -export { labelStyles, machineDetailsStyles } diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.jsx b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.jsx index 3b0abdc4..34eea6d3 100644 --- a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.jsx @@ -1,5 +1,4 @@ -import { useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import { formatDistance } from 'date-fns' import * as R from 'ramda' import React from 'react' @@ -7,12 +6,11 @@ import { useHistory, useLocation } from 'react-router-dom' import { MainStatus } from 'src/components/Status' import Title from 'src/components/Title' import DataTable from 'src/components/tables/DataTable' +import { Label1 } from 'src/components/typography/index.jsx' import MachineRedirectIcon from 'src/styling/icons/month arrows/right.svg?react' import WarningIcon from 'src/styling/icons/status/pumpkin.svg?react' import ErrorIcon from 'src/styling/icons/status/tomato.svg?react' -import { mainStyles } from 'src/pages/Transactions/Transactions.styles' - import MachineDetailsRow from './MachineDetailsCard' const GET_MACHINES = gql` @@ -56,10 +54,7 @@ const GET_DATA = gql` } ` -const useStyles = makeStyles(mainStyles) - const MachineStatus = () => { - const classes = useStyles() const history = useHistory() const { state } = useLocation() const addedMachineId = state?.id @@ -78,10 +73,9 @@ const MachineStatus = () => { size: 'sm', textAlign: 'left', view: m => ( -
+
{m.name}
{ history.push(`/machines/${m.deviceId}`) }}> @@ -131,18 +125,16 @@ const MachineStatus = () => { return ( <> -
-
- Machine status -
-
-
+
+ Machine status +
+
- Warning + Warning
-
+
- Error + Error
diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx index 921e189b..3693cff4 100644 --- a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx @@ -1,77 +1,35 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H1, P, Info2 } from 'src/components/typography' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' import { Button } from 'src/components/buttons' import filledCassettes from 'src/styling/icons/cassettes/both-filled.svg' -import { comet } from 'src/styling/variables' - -const styles = { - button: { - margin: [[35, 'auto', 0, 'auto']] - }, - modalContent: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - flex: 1, - padding: [[0, 34]] - }, - splashTitle: { - marginTop: 15 - }, - warningInfo: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - marginTop: 15 - }, - warningIcon: { - width: 25, - height: 25, - marginRight: 8, - display: 'block' - }, - warningText: { - flexBasis: '100%', - flexGrow: 1 - }, - machineName: { - margin: [[5, 0]], - color: comet - } -} - -const useStyles = makeStyles(styles) const WizardSplash = ({ name, onContinue }) => { - const classes = useStyles() - return ( -
+
cassette -

- Update counts -

- - {name} - -
- -

+

+

Update counts

+ + {name} + +
+
+ +

Before updating counts on Lamassu Admin, make sure you've done it before on the machines.

-
- -

+

+ +

For cash cassettes, please make sure you've removed the remaining bills before adding the new ones.

-
diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.jsx b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.jsx index 42186e38..51007534 100644 --- a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Formik, Form, Field } from 'formik' import * as R from 'ramda' @@ -22,89 +21,10 @@ import tejo4CassetteOne from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cas import tejo4CassetteTwo from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-2-left.svg' import tejo4CassetteThree from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-3-left.svg' import tejo4CassetteFour from 'src/styling/icons/cassettes/tejo/4-cassettes/4-cassettes-open-4-left.svg' -import { comet, errorColor } from 'src/styling/variables' import { getCashUnitCapacity } from 'src/utils/machine' import { numberToFiatAmount } from 'src/utils/number' import { startCase } from 'src/utils/string' - -const styles = { - content: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - flex: 1, - paddingBottom: 32 - }, - titleDiv: { - marginBottom: 32 - }, - title: { - margin: [[0, 0, 12, 0]], - color: comet - }, - stepImage: { - width: 148, - height: 196 - }, - form: { - paddingBottom: 95 - }, - verticalAlign: { - display: 'flex', - flexDirection: 'column' - }, - horizontalAlign: { - display: 'flex', - flexDirection: 'row' - }, - centerAlignment: { - alignItems: 'center' - }, - lineAlignment: { - alignItems: 'baseline' - }, - fullWidth: { - margin: [[0, 'auto']], - flexBasis: 'auto' - }, - formWrapper: { - flexBasis: '100%', - display: 'flex', - justifyContent: 'center' - }, - submit: { - float: 'right' - }, - cashboxBills: { - marginRight: 5 - }, - cassetteCashbox: { - width: 40, - height: 35 - }, - cassetteFormTitle: { - marginTop: 18 - }, - cassetteFormTitleContent: { - marginLeft: 10, - marginRight: 25 - }, - smBottomMargin: { - marginBottom: 25 - }, - fiatTotal: { - color: comet - }, - errorMessage: { - color: errorColor - }, - stepErrorMessage: { - maxWidth: 275, - marginTop: 25 - } -} - -const useStyles = makeStyles(styles) +import classes from './WizardStep.module.css' const CASHBOX_STEP = 1 @@ -171,8 +91,6 @@ const WizardStep = ({ onContinue, initialValues }) => { - const classes = useStyles() - const label = lastStep ? 'Finish' : 'Confirm' const stepOneRadioOptions = [ @@ -197,9 +115,11 @@ const WizardStep = ({ ) return ( -
-
- {name} +
+
+ + {name} +
@@ -212,19 +132,14 @@ const WizardStep = ({ enableReinitialize validationSchema={steps[0].schema}> {({ errors }) => ( -
-
+ +
{cashUnitCategory}
-
+

Did you empty the cash box?

{errors.wasCashboxEmptied && ( -
+
{errors.wasCashboxEmptied}
)}

Since previous update

@@ -253,9 +168,9 @@ const WizardStep = ({
- + {machine?.cashUnits.cashbox}

accepted bills

@@ -263,7 +178,7 @@ const WizardStep = ({
- @@ -280,9 +195,8 @@ const WizardStep = ({ enableReinitialize validationSchema={steps[step - 1].schema}> {({ values, errors }) => ( -
-
+ +
{cashUnitCategory}
-
+
+ className={classnames(classes.horizontalAlign, 'mb-6')}>
+ className={classnames(classes.horizontalAlign, 'mt-4')}> -

+

{startCase(cashUnitField)} ( {cashUnitCategory === 'cassette' ? `dispenser` @@ -321,7 +223,7 @@ const WizardStep = ({

@@ -330,7 +232,7 @@ const WizardStep = ({

{cashUnitDenomination} {fiatCurrency} bills loaded

-

+

= {numberToFiatAmount(cassetteTotal(values))}{' '} {fiatCurrency}

{!R.isEmpty(errors) && ( - + {R.head(R.values(errors))} )}
- diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.module.css b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.module.css new file mode 100644 index 00000000..2d5a96de --- /dev/null +++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardStep.module.css @@ -0,0 +1,22 @@ +.stepImage { + width: 148px; + height: 196px; +} + +.formWrapper { + flex-basis: 100%; + display: flex; + justify-content: center; +} + +.verticalAlign { + display: flex; + flex-direction: column; + margin: 0 auto; + flex-basis: auto; +} + +.horizontalAlign { + display: flex; + flex-direction: row; +} From 6d6edf578ce3ca5d68deec9dc9e6efbcf2b9193b Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Wed, 7 May 2025 13:22:54 +0100 Subject: [PATCH 16/27] partial: notifications, op info, services --- .../inputs/cashbox/Cashbox.styles.js | 2 +- .../Notifications/Notifications.styles.js | 20 --- .../Notifications/components/EditHeader.jsx | 19 +-- .../components/EditHeader.styles.js | 29 ---- .../components/EditableNumber.jsx | 20 +-- .../components/EditableNumber.styles.js | 18 -- .../sections/CryptoBalanceAlerts.jsx | 14 +- .../sections/CryptoBalanceAlerts.styles.js | 20 --- .../sections/FiatBalanceAlerts.jsx | 73 +++----- .../sections/FiatBalanceAlerts.styles.js | 31 ---- .../pages/Notifications/sections/Setup.jsx | 10 +- .../src/pages/OperatorInfo/CoinATMRadar.jsx | 108 ++++-------- .../src/pages/OperatorInfo/ContactInfo.jsx | 159 +++++------------- .../src/pages/OperatorInfo/MachineScreens.jsx | 58 +++---- .../pages/OperatorInfo/OperatorInfo.styles.js | 118 ------------- .../pages/OperatorInfo/ReceiptPrinting.jsx | 124 ++++---------- .../pages/OperatorInfo/TermsConditions.jsx | 132 +++++---------- .../pages/OperatorInfo/components/Header.jsx | 20 +++ .../OperatorInfo/components/InfoMessage.jsx | 12 ++ .../OperatorInfo/components/SwitchRow.jsx | 21 +++ .../src/pages/Services/FormRenderer.jsx | 40 +---- .../src/pages/Services/Services.jsx | 37 ++-- 22 files changed, 290 insertions(+), 795 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Notifications/Notifications.styles.js delete mode 100644 new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js delete mode 100644 new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js delete mode 100644 new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js delete mode 100644 new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js create mode 100644 new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx create mode 100644 new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx create mode 100644 new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx diff --git a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js index cbb5c292..0c7c7ecc 100644 --- a/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js +++ b/new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js @@ -35,7 +35,7 @@ const cashboxStyles = { border: '4px solid' }, emptyPart: { - backgroundColor: 'white', + backgroundColor: 'var(--ghost)', height: ({ percent }) => `${100 - percent}%`, position: 'relative', '& > p': { diff --git a/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js b/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js deleted file mode 100644 index effc5c32..00000000 --- a/new-lamassu-admin/src/pages/Notifications/Notifications.styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - cryptoBalanceAlerts: { - display: 'flex', - marginBottom: 36, - height: 135, - alignItems: 'center' - }, - cryptoBalanceAlertsForm: { - width: 222, - marginRight: 32 - }, - cryptoBalanceAlertsSecondForm: { - marginLeft: 50 - }, - vertSeparator: { - width: 1, - height: '100%', - borderRight: [[1, 'solid', 'black']] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx index 2fca1331..79931bc7 100644 --- a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx +++ b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H4 } from 'src/components/typography' import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react' @@ -6,27 +5,23 @@ import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import { Link, IconButton } from 'src/components/buttons' -import styles from './EditHeader.styles' - -const useStyles = makeStyles(styles) - const Header = ({ title, editing, disabled, setEditing }) => { - const classes = useStyles() - return ( -
-

{title}

+
+

+ {title} +

{!editing && ( setEditing(true)} - className={classes.button} + className="border-0 bg-transparent shrink-0 cursor-pointer ml-2" disabled={disabled} size="large"> {disabled ? : } )} {editing && ( -
+
Save @@ -36,7 +31,7 @@ const Header = ({ title, editing, disabled, setEditing }) => {
)}
- ); + ) } export default Header diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js b/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js deleted file mode 100644 index c15f5910..00000000 --- a/new-lamassu-admin/src/pages/Notifications/components/EditHeader.styles.js +++ /dev/null @@ -1,29 +0,0 @@ -export default { - header: { - display: 'flex', - alignItems: 'center', - marginBottom: 16, - height: 26, - margin: 0 - }, - title: { - flexShrink: 2, - margin: 0, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis' - }, - button: { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer', - marginLeft: 8 - }, - editingButtons: { - display: 'flex', - flexShrink: 0, - marginLeft: 16, - justifyContent: 'space-between', - width: 110 - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx index 05cf20f6..6abbcf4b 100644 --- a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx +++ b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { useFormikContext, Field as FormikField } from 'formik' import React from 'react' @@ -6,10 +5,6 @@ import { Label1, Info1, TL2 } from 'src/components/typography' import { NumberInput } from 'src/components/inputs/formik' -import styles from './EditableNumber.styles' - -const useStyles = makeStyles(styles) - const EditableNumber = ({ label, name, @@ -20,20 +15,21 @@ const EditableNumber = ({ decimalPlaces = 0, width = 80 }) => { - const classes = useStyles({ width, editing }) const { values } = useFormikContext() const classNames = { - [classes.fieldWrapper]: true, + 'h-13': true, className } return (
- {label && {label}} -
+ {label && {label}} +
{!editing && ( - {displayValue(values[name])} + + {displayValue(values[name])} + )} {editing && ( )} - {decoration} + + {decoration} +
) diff --git a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js b/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js deleted file mode 100644 index f42de9ee..00000000 --- a/new-lamassu-admin/src/pages/Notifications/components/EditableNumber.styles.js +++ /dev/null @@ -1,18 +0,0 @@ -export default { - text: { - margin: [[7, 0, 7, 1]] - }, - fieldWrapper: { - height: 53 - }, - valueWrapper: { - display: 'flex', - alignItems: 'baseline' - }, - label: { - margin: 0 - }, - decoration: { - margin: [[0, 0, 0, 7]] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx index 10c105ba..773640eb 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.jsx @@ -1,31 +1,24 @@ -import { makeStyles } from '@mui/styles' import React, { useContext } from 'react' import NotificationsCtx from '../NotificationsContext' import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber' -import styles from './CryptoBalanceAlerts.styles' - const LOW_BALANCE_KEY = 'cryptoLowBalance' const HIGH_BALANCE_KEY = 'cryptoHighBalance' -const useStyles = makeStyles(styles) - const CryptoBalanceAlerts = ({ section, fieldWidth }) => { - const classes = useStyles() - const { data, save, currency, setEditing, isEditing, isDisabled } = useContext(NotificationsCtx) return ( -
+
{ width={fieldWidth} /> -
+
{ section={section} save={save} decoration={currency} - className={classes.cryptoBalanceAlertsSecondForm} title="Default (High balance)" label="Alert me over" editing={isEditing(HIGH_BALANCE_KEY)} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js deleted file mode 100644 index effc5c32..00000000 --- a/new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default { - cryptoBalanceAlerts: { - display: 'flex', - marginBottom: 36, - height: 135, - alignItems: 'center' - }, - cryptoBalanceAlertsForm: { - width: 222, - marginRight: 32 - }, - cryptoBalanceAlertsSecondForm: { - marginLeft: 50 - }, - vertSeparator: { - width: 1, - height: '100%', - borderRight: [[1, 'solid', 'black']] - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx index 86e40da4..d8238d37 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik } from 'formik' import * as R from 'ramda' import React, { useContext } from 'react' @@ -13,10 +12,6 @@ import NotificationsCtx from '../NotificationsContext' import Header from '../components/EditHeader' import EditableNumber from '../components/EditableNumber' -import styles from './FiatBalanceAlerts.styles' - -const useStyles = makeStyles(styles) - const CASH_IN_KEY = 'fiatBalanceAlertsCashIn' const CASH_OUT_KEY = 'fiatBalanceAlertsCashOut' const RECYCLER_STACKER_KEY = 'fiatBalanceAlertsRecyclerStacker' @@ -34,8 +29,6 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => { save, machines = [] } = useContext(NotificationsCtx) - const classes = useStyles() - const maxNumberOfCassettes = Math.max( ...R.map(it => it.numberOfCassettes, machines), DEFAULT_NUMBER_OF_CASSETTES @@ -97,8 +90,8 @@ const FiatBalance = ({ section, min = 0, max = 100, fieldWidth = 80 }) => { setEditing(CASH_OUT_KEY, false) }}> {({ values }) => ( - <> -
+
+
{ disabled={isDisabled(CASH_IN_KEY)} setEditing={it => setEditing(CASH_IN_KEY, it)} /> -
-
-
-
- (x === '' ? '-' : x)} - decoration="notes" - width={fieldWidth} - /> -
-
-
-
+ (x === '' ? '-' : x)} + decoration="notes" + width={fieldWidth} + /> -
+
{ disabled={isDisabled(CASH_OUT_KEY)} setEditing={it => setEditing(CASH_OUT_KEY, it)} /> -
+
{R.map( it => ( <> -
+
{ omitInnerPercentage cashOut /> -
- Cassette {it + 1} +
+ Cassette {it + 1} { )}
-
+
{ disabled={isDisabled(RECYCLER_STACKER_KEY)} setEditing={it => setEditing(RECYCLER_STACKER_KEY, it)} /> -
+
{R.chain( it => [ <> -
+
{ omitInnerPercentage cashOut /> -
- - Recycler {(it + 1) * 2 - 1} - +
+ Recycler {(it + 1) * 2 - 1} {
, <> -
+
{ omitInnerPercentage cashOut /> -
- - Recycler {(it + 1) * 2} - +
+ Recycler {(it + 1) * 2} { )}
- +
)} ) diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js deleted file mode 100644 index ab4a4450..00000000 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js +++ /dev/null @@ -1,31 +0,0 @@ -import { backgroundColor } from 'src/styling/variables' - -export default { - wrapper: { - display: 'flex' - }, - form: { - marginBottom: 36 - }, - title: { - marginTop: 0 - }, - row: { - width: 236, - display: 'grid', - gridTemplateColumns: 'repeat(2,1fr)', - gridTemplateRows: '1fr', - gridColumnGap: 18, - gridRowGap: 0 - }, - col2: { - width: 136 - }, - cashboxLabel: { - marginRight: 4, - fontSize: 20 - }, - cashboxEmptyPart: { - backgroundColor: `${backgroundColor}` - } -} diff --git a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx index 130b7525..82fecb6e 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx +++ b/new-lamassu-admin/src/pages/Notifications/sections/Setup.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import Switch from '@mui/material/Switch' import * as R from 'ramda' import React, { useContext } from 'react' @@ -74,12 +73,6 @@ const Row = ({ ) } -const useStyles = makeStyles({ - wizardTable: { - width: 930 - } -}) - const Setup = ({ wizard, forceDisable }) => { const { data: rawData, @@ -120,9 +113,8 @@ const Setup = ({ wizard, forceDisable }) => { ] const widthAdjust = wizard ? 20 : 0 - const classes = useStyles() return ( -
+
{Object.keys(sizes).map(it => ( diff --git a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx index 91969087..f8064b34 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/CoinATMRadar.jsx @@ -1,18 +1,11 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import React, { memo } from 'react' -import { HelpTooltip } from 'src/components/Tooltip' -import { H4, P, Label2 } from 'src/components/typography' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { SupportLinkButton } from '../../components/buttons' - -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import SwitchRow from './components/SwitchRow.jsx' +import Header from './components/Header.jsx' const GET_CONFIG = gql` query getData { @@ -26,27 +19,7 @@ const SAVE_CONFIG = gql` } ` -const Row = memo(({ title, disabled = false, checked, save, label }) => { - const classes = useStyles() - - return ( -
-

{title}

-
- save && save(event.target.checked)} - /> - {label && {label}} -
-
- ) -}) - const CoinATMRadar = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { @@ -63,53 +36,34 @@ const CoinATMRadar = memo(({ wizard }) => { if (!coinAtmRadarConfig) return null return ( -
-
-
-

Coin ATM Radar share settings

- -

- For details on configuring this panel, please read the relevant - knowledgebase article{' '} - - here - - . -

- - -
- save({ active: value })} - label={coinAtmRadarConfig.active ? 'Yes' : 'No'} - /> - -
-
+ <> +
+ save({ active: value })} + /> + + ) }) diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx index 2b26b873..99ecc42e 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx @@ -1,70 +1,37 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' -import classnames from 'classnames' +import { useQuery, useMutation, gql } from '@apollo/client' import { Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import React, { useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import PromptWhenDirty from 'src/components/PromptWhenDirty' -import { HelpTooltip } from 'src/components/Tooltip' -import { P, H4, Info3, Label1, Label2, Label3 } from 'src/components/typography' +import { H4, Info3, Label3 } from 'src/components/typography' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' import * as Yup from 'yup' -import { Link, IconButton, SupportLinkButton } from 'src/components/buttons' +import { Link, IconButton } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' -import { fontSize5 } from 'src/styling/variables' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { global } from './OperatorInfo.styles' +import SwitchRow from './components/SwitchRow.jsx' +import InfoMessage from './components/InfoMessage.jsx' +import Header from './components/Header.jsx' const FIELD_WIDTH = 280 -const fieldStyles = { - field: { - position: 'relative', - width: 280, - height: 48, - padding: [[0, 4, 4, 0]] - }, - notEditing: { - display: 'flex', - flexDirection: 'column', - '& > p:first-child': { - height: 16, - lineHeight: '16px', - fontSize: fontSize5, - transformOrigin: 'left', - paddingLeft: 0, - margin: [[3, 0, 3, 0]] - }, - '& > p:last-child': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - margin: 0 - } - } -} - -const fieldUseStyles = makeStyles(fieldStyles) - const Field = ({ editing, field, displayValue, ...props }) => { - const classes = fieldUseStyles() - - const classNames = { - [classes.field]: true, - [classes.notEditing]: !editing - } - return ( -
+
{!editing && ( <> - {field.label} - {displayValue(field.value)} + + {field.label} + + + {displayValue(field.value)} + )} {editing && ( @@ -95,11 +62,7 @@ const SAVE_CONFIG = gql` } ` -const contactUseStyles = makeStyles(global) - const ContactInfo = ({ wizard }) => { - const classes = contactUseStyles() - const [editing, setEditing] = useState(wizard || false) const [error, setError] = useState(null) @@ -187,42 +150,17 @@ const ContactInfo = ({ wizard }) => { return ( <> -
-

Contact information

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Info card enabled?

-
- - save({ - active: event.target.checked - }) - } - /> - {info.active ? 'Yes' : 'No'} -
-
-
-
+
+ +
+

Info card

{!editing && ( - setEditing(true)} - size="large"> + setEditing(true)} size="large"> )} @@ -239,9 +177,9 @@ const ContactInfo = ({ wizard }) => { setError(null) }}> {({ errors }) => ( -
+ -
+
{ onFocus={() => setError(null)} />
-
+
{ onFocus={() => setError(null)} />
-
+
{ />
{editing && !!getErrorMsg(errors) && ( - - {getErrorMsg(errors)} - + {getErrorMsg(errors)} + )} + {editing && ( +
+ + Save + + + Cancel + + {error && Failed to save changes} +
)} -
- {editing && ( - <> - - Save - - - Cancel - - {error && ( - Failed to save changes - )} - - )} -
)}
{!wizard && ( -
- - + <> + Sharing your information with your customers through your machines allows them to contact you in case there's a problem with a machine in your network or a transaction. - -
+ + )} - ); + ) } export default ContactInfo diff --git a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx index d66ed288..6a66f783 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/MachineScreens.jsx @@ -1,15 +1,11 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { memo } from 'react' -import { H4, P, Label2 } from 'src/components/typography' +import { H4 } from 'src/components/typography' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import SwitchRow from './components/SwitchRow.jsx' const GET_CONFIG = gql` query getData { @@ -24,14 +20,26 @@ const SAVE_CONFIG = gql` ` const MachineScreens = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { refetchQueries: () => ['getData'] }) + const save = it => { + const formatConfig = R.compose( + toNamespace(namespaces.MACHINE_SCREENS), + toNamespace('rates'), + R.mergeRight(ratesScreenConfig) + ) + + return saveConfig({ + variables: { + config: formatConfig({ active: it }) + } + }) + } + const machineScreensConfig = data?.config && fromNamespace(namespaces.MACHINE_SCREENS, data.config) @@ -46,32 +54,12 @@ const MachineScreens = memo(({ wizard }) => { return ( <> -
-

Rates screen

-
-
-

Enable rates screen

-
- - saveConfig({ - variables: { - config: R.compose( - toNamespace(namespaces.MACHINE_SCREENS), - toNamespace('rates') - )( - R.merge(ratesScreenConfig, { - active: event.target.checked - }) - ) - } - }) - } - /> - {ratesScreenConfig.active ? 'Yes' : 'No'} -
-
+

Rates screen

+ ) }) diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js deleted file mode 100644 index 9bdfe706..00000000 --- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js +++ /dev/null @@ -1,118 +0,0 @@ -import { offColor } from 'src/styling/variables' - -const global = { - content: { - display: 'flex' - }, - header: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap' - }, - section: { - marginBottom: 52 - }, - row: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - marginBottom: 28, - width: 600, - '&:last-child': { - marginBottom: 0 - } - }, - switchRow: { - display: 'flex', - alignItems: 'center', - position: 'relative', - flex: 'wrap', - justifyContent: 'space-between', - width: 396 - }, - switch: { - display: 'flex', - alignItems: 'center' - }, - submit: { - justifyContent: 'flex-start', - alignItems: 'center', - padding: [[0, 4, 4, 4]], - '& > button': { - marginRight: 40 - } - }, - transparentButton: { - '& > *': { - margin: 'auto 12px' - }, - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - infoMessage: { - display: 'flex', - marginBottom: 52, - '& > p': { - width: 330, - color: offColor, - marginTop: 4, - marginLeft: 16 - } - }, - formErrorMsg: { - margin: [[0, 0, 20, 0]] - } -} - -const fieldStyles = { - field: { - position: 'relative', - width: 280, - padding: [[0, 4, 4, 0]] - }, - notEditing: { - display: 'flex', - flexDirection: 'column' - }, - notEditingSingleLine: { - '& > p:first-child': { - height: 16, - lineHeight: '16px', - transform: 'scale(0.75)', - transformOrigin: 'left', - paddingLeft: 0, - margin: [[1, 0, 6, 0]] - }, - '& > p:last-child': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - height: 25, - margin: 0 - } - }, - notEditingMultiline: { - '& > p:first-child': { - height: 16, - lineHeight: '16px', - transform: 'scale(0.75)', - transformOrigin: 'left', - paddingLeft: 0, - margin: [[1, 0, 5, 0]] - }, - '& > p:last-child': { - width: 502, - height: 121, - overflowY: 'auto', - lineHeight: '19px', - wordWrap: 'anywhere', - margin: 0 - } - } -} - -export { global, fieldStyles } diff --git a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx index 3d22330e..4f0209d9 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/ReceiptPrinting.jsx @@ -1,19 +1,12 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' -import Switch from '@mui/material/Switch' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { memo } from 'react' -import { HelpTooltip } from 'src/components/Tooltip' -import { H4, P, Label2 } from 'src/components/typography' import { BooleanPropertiesTable } from 'src/components/booleanPropertiesTable' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -import { SupportLinkButton } from '../../components/buttons' - -import { global } from './OperatorInfo.styles' - -const useStyles = makeStyles(global) +import Header from './components/Header.jsx' +import SwitchRow from './components/SwitchRow.jsx' const GET_CONFIG = gql` query getData { @@ -28,14 +21,23 @@ const SAVE_CONFIG = gql` ` const ReceiptPrinting = memo(({ wizard }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG, { refetchQueries: () => ['getData'] }) + const saveSwitch = object => { + return saveConfig({ + variables: { + config: toNamespace( + namespaces.RECEIPT, + R.mergeRight(receiptPrintingConfig, object) + ) + } + }) + } + const save = it => saveConfig({ variables: { config: toNamespace(namespaces.RECEIPT, it) } @@ -47,84 +49,26 @@ const ReceiptPrinting = memo(({ wizard }) => { return ( <> -
-

Receipt options

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Enable receipt printing

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - active: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.active ? 'Yes' : 'No'} -
-
-
-

Automatic receipt printing

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - automaticPrint: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.automaticPrint ? 'Yes' : 'No'} -
-
-
-

Offer SMS receipt

-
- - saveConfig({ - variables: { - config: toNamespace( - namespaces.RECEIPT, - R.merge(receiptPrintingConfig, { - sms: event.target.checked - }) - ) - } - }) - } - /> - {receiptPrintingConfig.sms ? 'Yes' : 'No'} -
-
+
+ saveSwitch({ active: it })} + /> + saveSwitch({ automaticPrint: it })} + /> + saveSwitch({ sms: it })} + /> { - const classes = useFieldStyles() - - const classNames = { - [classes.field]: true, - [classes.notEditing]: !editing, - [classes.notEditingSingleLine]: !editing && !multiline, - [classes.notEditingMultiline]: !editing && multiline + const info3ClassNames = { + 'overflow-hidden whitespace-nowrap text-ellipsis h-6': !multiline, + 'wrap-anywhere overflow-y-auto h-32 mt-4 leading-[23px]': multiline } return ( -
+
{!editing && ( <> - {label} - {value} + + {label} + + + {value} + )} {editing && ( @@ -81,8 +77,6 @@ const SAVE_CONFIG = gql` } ` -const useTermsConditionsStyles = makeStyles(global) - const TermsConditions = () => { const [error, setError] = useState(null) const [editing, setEditing] = useState(false) @@ -95,8 +89,6 @@ const TermsConditions = () => { onError: e => setError(e) }) - const classes = useTermsConditionsStyles() - const { data } = useQuery(GET_CONFIG) const termsAndConditions = @@ -169,72 +161,30 @@ const TermsConditions = () => { return ( <> -
-

Terms & Conditions

- -

- For details on configuring this panel, please read the relevant - knowledgebase article: -

- - -
-
-

Show on screen

-
- - save({ - active: event.target.checked - }) - } - /> - {showOnScreen ? 'Yes' : 'No'} -
-
-
-

- Capture customer photo on acceptance
of Terms & Conditions - screen -

-
- - save({ - tcPhoto: event.target.checked - }) - } - /> - {tcPhoto ? 'Yes' : 'No'} -
-
-
-

Add 7 seconds delay on screen

-
- - save({ - delay: event.target.checked - }) - } - /> - {addDelayOnScreen ? 'Yes' : 'No'} -
-
-
+
+ save({ active: it })} + /> + save({ tcPhoto: it })} + /> + save({ delay: it })} + /> +
Info card {!editing && ( - setEditing(true)} - size="large"> + setEditing(true)} size="large"> )} @@ -251,10 +201,10 @@ const TermsConditions = () => { setError(null) }}> {({ errors }) => ( -
+ {fields.map((f, idx) => ( -
+
{ />
))} -
+
{editing && ( <> @@ -288,7 +238,7 @@ const TermsConditions = () => { )} - ); + ) } export default TermsConditions diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx new file mode 100644 index 00000000..d80b96b8 --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/Header.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { H4, P } from 'src/components/typography/index.jsx' +import { HelpTooltip } from 'src/components/Tooltip.jsx' +import { SupportLinkButton } from 'src/components/buttons/index.js' + +const Header = ({ title, tooltipText, articleUrl }) => ( +
+

{title}

+ +

{tooltipText}

+ + +
+) + +export default Header diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx new file mode 100644 index 00000000..3f21549d --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/InfoMessage.jsx @@ -0,0 +1,12 @@ +import React from 'react' + +import { Label1 } from 'src/components/typography' + +const InfoMessage = ({ Icon, children }) => ( +
+ + {children} +
+) + +export default InfoMessage diff --git a/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx b/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx new file mode 100644 index 00000000..317e1d36 --- /dev/null +++ b/new-lamassu-admin/src/pages/OperatorInfo/components/SwitchRow.jsx @@ -0,0 +1,21 @@ +import React, { memo } from 'react' +import { Label2, P } from 'src/components/typography/index.jsx' +import Switch from '@mui/material/Switch' + +const SwitchRow = memo(({ title, disabled = false, checked, save }) => { + return ( +
+

{title}

+
+ save && save(event.target.checked)} + /> + {checked ? 'Yes' : 'No'} +
+
+ ) +}) + +export default SwitchRow diff --git a/new-lamassu-admin/src/pages/Services/FormRenderer.jsx b/new-lamassu-admin/src/pages/Services/FormRenderer.jsx index 599eb8e5..ca4cbf3b 100644 --- a/new-lamassu-admin/src/pages/Services/FormRenderer.jsx +++ b/new-lamassu-admin/src/pages/Services/FormRenderer.jsx @@ -1,5 +1,3 @@ -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Formik, Form, FastField } from 'formik' import * as R from 'ramda' @@ -8,29 +6,7 @@ import ErrorMessage from 'src/components/ErrorMessage' import { Button } from 'src/components/buttons' import { SecretInput } from 'src/components/inputs/formik' -import { spacer } from 'src/styling/variables' -const styles = { - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 4, 0]] - }, - button: { - margin: [['auto', 0, 0, 'auto']] - }, - form: { - flex: 1, - display: 'flex', - flexDirection: 'column' - }, - grid: { - marginBottom: 24, - marginTop: 12 - } -} - -const useStyles = makeStyles(styles) const FormRenderer = ({ validationSchema, elements, @@ -40,8 +16,6 @@ const FormRenderer = ({ buttonClass, xs = 12 }) => { - const classes = useStyles() - const initialValues = R.compose( R.mergeAll, R.map(({ code }) => ({ [code]: (value && value[code]) ?? '' })) @@ -74,11 +48,11 @@ const FormRenderer = ({ validationSchema={validationSchema} onSubmit={saveNonEmptySecret}> {({ errors }) => ( - - + +
{elements.map( ({ component, code, display, settings, inputProps }) => ( - +
- +
) )} - -
+
+
{!R.isEmpty(R.mergeRight(errors, saveError)) && ( {R.head(R.values(R.mergeRight(errors, saveError)))} )} diff --git a/new-lamassu-admin/src/pages/Services/Services.jsx b/new-lamassu-admin/src/pages/Services/Services.jsx index 22b44c92..c5e728f0 100644 --- a/new-lamassu-admin/src/pages/Services/Services.jsx +++ b/new-lamassu-admin/src/pages/Services/Services.jsx @@ -1,6 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' @@ -33,16 +31,6 @@ const SAVE_ACCOUNT = gql` } ` -const styles = { - wrapper: { - // widths + spacing is a little over 1200 on the design - // this adjusts the margin after a small reduction on card size - marginLeft: 1 - } -} - -const useStyles = makeStyles(styles) - const Services = () => { const [editingSchema, setEditingSchema] = useState(null) @@ -57,8 +45,6 @@ const Services = () => { const schemas = _schemas(markets) - const classes = useStyles() - const accounts = data?.accounts ?? {} const getItems = (code, elements) => { @@ -116,20 +102,19 @@ const Services = () => { return ( !loading && ( -
+
- +
{R.values(schemas).map(schema => ( - - setEditingSchema(schema)} - items={getItems(schema.code, schema.elements)} - /> - + setEditingSchema(schema)} + items={getItems(schema.code, schema.elements)} + /> ))} - +
{editingSchema && ( Date: Wed, 7 May 2025 18:55:21 +0100 Subject: [PATCH 17/27] partial: trigger and transactions --- .../CopyToClipboard.jsx | 31 +- .../src/pages/Analytics/Analytics.module.css | 0 .../src/pages/Blacklist/BlacklistTable.jsx | 2 +- .../Customers/components/PhotosCarousel.jsx | 2 +- .../Customers/components/TransactionsList.jsx | 2 +- new-lamassu-admin/src/pages/Funding.jsx | 4 +- .../Machines/MachineComponents/Overview.jsx | 2 +- .../Transactions/Transactions.jsx | 16 +- .../src/pages/Transactions/DetailsCard.jsx | 96 +++-- .../pages/Transactions/DetailsCard.styles.js | 146 -------- .../src/pages/Transactions/Transactions.jsx | 64 ++-- .../pages/Transactions/Transactions.styles.js | 147 -------- .../src/pages/Transactions/helper.js | 11 +- .../CustomInfoRequests/CustomInfoRequests.jsx | 236 ++++++------- .../CustomInfoRequests.styles.js | 19 - .../CustomInfoRequests/DetailsCard.jsx | 47 +-- .../Forms/TypeFields/ChoiceList.jsx | 21 +- .../Forms/TypeFields/NumericalEntry.jsx | 15 +- .../Forms/TypeFields/TextEntry.jsx | 19 +- .../Forms/TypeFields/formStyles.styles.js | 50 --- .../Triggers/CustomInfoRequests/Wizard.jsx | 33 +- .../CustomInfoRequests/WizardSplash.jsx | 38 +- .../src/pages/Triggers/TriggerView.jsx | 7 +- .../src/pages/Triggers/Triggers.jsx | 8 +- .../src/pages/Triggers/Triggers.styles.js | 16 - .../src/pages/Triggers/Wizard.jsx | 96 ++--- .../src/pages/Triggers/helper.jsx | 332 ++++-------------- .../UserManagement/modals/CreateUserModal.jsx | 2 +- .../UserManagement/modals/Reset2FAModal.jsx | 4 +- .../modals/ResetPasswordModal.jsx | 4 +- 30 files changed, 354 insertions(+), 1116 deletions(-) rename new-lamassu-admin/src/{pages/Transactions => components}/CopyToClipboard.jsx (69%) delete mode 100644 new-lamassu-admin/src/pages/Analytics/Analytics.module.css delete mode 100644 new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js delete mode 100644 new-lamassu-admin/src/pages/Transactions/Transactions.styles.js delete mode 100644 new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.styles.js delete mode 100644 new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/formStyles.styles.js delete mode 100644 new-lamassu-admin/src/pages/Triggers/Triggers.styles.js diff --git a/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx b/new-lamassu-admin/src/components/CopyToClipboard.jsx similarity index 69% rename from new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx rename to new-lamassu-admin/src/components/CopyToClipboard.jsx index 021b6a65..b5edad0d 100644 --- a/new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx +++ b/new-lamassu-admin/src/components/CopyToClipboard.jsx @@ -1,25 +1,20 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { useState, useEffect } from 'react' import { CopyToClipboard as ReactCopyToClipboard } from 'react-copy-to-clipboard' -import Popover from 'src/components/Popper' +import Popover from 'src/components/Popper.jsx' import CopyIcon from 'src/styling/icons/action/copy/copy.svg?react' -import { comet } from 'src/styling/variables' +import { comet } from 'src/styling/variables.js' -import { cpcStyles } from './Transactions.styles' - -const useStyles = makeStyles(cpcStyles) +import { Label1, Mono } from './typography/index.jsx' const CopyToClipboard = ({ className, buttonClassname, children, - variant, wrapperClassname, - removeSpace = true, - ...props + removeSpace = true }) => { const [anchorEl, setAnchorEl] = useState(null) @@ -27,8 +22,6 @@ const CopyToClipboard = ({ if (anchorEl) setTimeout(() => setAnchorEl(null), 3000) }, [anchorEl]) - const classes = useStyles() - const handleClick = event => { setAnchorEl(anchorEl ? null : event.currentTarget) } @@ -41,16 +34,17 @@ const CopyToClipboard = ({ const id = open ? 'simple-popper' : undefined return ( -
+
{children && ( <> -
+ {children} -
-
+ +
-
- )} - {showWizard && ( - { - setToBeEdited(null) - setHasError(false) - toggleWizard() - }} - toBeEdited={toBeEdited} - onSave={(...args) => handleSave(...args)} - existingRequirements={customRequests} - /> - )} - { - setDeleteDialog(false) - setHasError(false) - }} - item={`custom information request`} - extraMessage={detailedDeleteMsg} - onConfirmed={() => handleDelete(toBeDeleted)} - /> - )); + return ( + !configLoading && ( + <> + {customRequests.length > 0 && ( + it.customRequest.name + }, + { + header: 'Data entry type', + width: 300, + textAlign: 'left', + size: 'sm', + view: it => inputTypeDisplay[it.customRequest.input.type] + }, + { + header: 'Constraints', + width: 300, + textAlign: 'left', + size: 'sm', + view: it => + constraintTypeDisplay[it.customRequest.input.constraintType] + }, + { + header: 'Edit', + width: 100, + textAlign: 'center', + size: 'sm', + view: it => { + return ( + { + setToBeEdited(it) + return toggleWizard() + }} + size="large"> + + + ) + } + }, + { + header: 'Delete', + width: 100, + textAlign: 'center', + size: 'sm', + view: it => { + return ( + { + setToBeDeleted(it.id) + return setDeleteDialog(true) + }} + size="large"> + + + ) + } + } + ]} + data={customRequests} + Details={DetailsRow} + expandable + rowSize="sm" + /> + )} + {!customRequests.length && ( +
+ + It seems you haven't added any custom information requests yet. + + + Please read our{' '} + + Support Article + {' '} + on Compliance before adding new information requests. + + +
+ )} + {showWizard && ( + { + setToBeEdited(null) + setHasError(false) + toggleWizard() + }} + toBeEdited={toBeEdited} + onSave={(...args) => handleSave(...args)} + existingRequirements={customRequests} + /> + )} + { + setDeleteDialog(false) + setHasError(false) + }} + item={`custom information request`} + extraMessage={detailedDeleteMsg} + onConfirmed={() => handleDelete(toBeDeleted)} + /> + + ) + ) } export default CustomInfoRequests diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.styles.js b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.styles.js deleted file mode 100644 index 07a1bf87..00000000 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.styles.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - m0: { - margin: 0 - }, - mb10: { - marginBottom: 10 - }, - centerItems: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - height: '50%', - justifyContent: 'center' - }, - alignWithTitleSection: { - marginTop: -47, - display: 'flex' - } -} diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/DetailsCard.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/DetailsCard.jsx index 2de4ac04..fd3d0d2e 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/DetailsCard.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/DetailsCard.jsx @@ -1,32 +1,8 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' import React from 'react' import { Label1, Info2 } from 'src/components/typography' -const styles = { - flex: { - display: 'flex' - }, - column: { - flexDirection: 'column' - }, - halfWidth: { - width: '50%', - marginBottom: 15, - marginRight: 50 - }, - marginTop: { - marginTop: 20 - }, - marginBottom: { - marginBottom: 20 - } -} -const useStyles = makeStyles(styles) const DetailsCard = ({ it }) => { const customRequest = it.customRequest - const classes = useStyles() - const getScreen2Data = () => { const label1Display = customRequest.input.constraintType === 'spaceSeparation' @@ -36,12 +12,12 @@ const DetailsCard = ({ it }) => { case 'text': return ( <> -
+
{label1Display} {customRequest.input.label1}
{customRequest.input.constraintType === 'spaceSeparation' && ( -
+
Second word label {customRequest.input.label2}
@@ -51,11 +27,11 @@ const DetailsCard = ({ it }) => { default: return ( <> -
+
Screen 2 input title {customRequest.screen2.title}
-
+
Screen 2 input description {customRequest.screen2.text}
@@ -87,22 +63,19 @@ const DetailsCard = ({ it }) => { return (
-
-
+
+
Screen 1 title {customRequest.screen1.title}
-
- {getScreen2Data()} -
+
{getScreen2Data()}
-
-
+
+
Screen 1 text {customRequest.screen1.text}
-
{getInputData()}
+
{getInputData()}
) diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/ChoiceList.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/ChoiceList.jsx index a171c1dd..e514d747 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/ChoiceList.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/ChoiceList.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, useFormikContext, FieldArray } from 'formik' import * as R from 'ramda' @@ -10,9 +9,6 @@ import { H4 } from 'src/components/typography' import AddIconInverse from 'src/styling/icons/button/add/white.svg?react' import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react' -import styles from './formStyles.styles' -const useStyles = makeStyles(styles) - const nonEmptyStr = obj => obj.text && obj.text.length const options = [ @@ -21,15 +17,14 @@ const options = [ ] const ChoiceList = () => { - const classes = useStyles() const context = useFormikContext() const choiceListRef = useRef(null) const listChoices = R.path(['values', 'listChoices'])(context) ?? [] const choiceListError = R.path(['errors', 'listChoices'])(context) ?? false const showErrorColor = { - [classes.radioSubtitle]: true, - [classes.error]: + 'mb-0': true, + 'text-tomato': !R.path(['values', 'constraintType'])(context) && R.path(['errors', 'constraintType'])(context) } @@ -56,20 +51,20 @@ const ChoiceList = () => { {({ push }) => { return ( -
-

Choices

-
+
+

Choices

+
{listChoices.map((choice, idx) => { return (
{ Icon={AddIcon} color="primary" InverseIcon={AddIconInverse} - className={classes.button} + className="w-30 h-7 mt-7" onClick={e => { e.preventDefault() return push({ text: '' }) diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx index 5c6c364d..938d587d 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/NumericalEntry.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' import * as R from 'ramda' @@ -7,9 +6,6 @@ import NumberInput from 'src/components/inputs/formik/NumberInput' import RadioGroup from 'src/components/inputs/formik/RadioGroup' import { TL1, H4 } from 'src/components/typography' -import styles from './formStyles.styles' -const useStyles = makeStyles(styles) - const options = [ { display: 'None', code: 'none' }, { display: 'Date', code: 'date' }, @@ -17,7 +13,6 @@ const options = [ ] const NumericalEntry = () => { - const classes = useStyles() const context = useFormikContext() const isLength = @@ -25,8 +20,8 @@ const NumericalEntry = () => { 'length' const showErrorColor = { - [classes.radioSubtitle]: true, - [classes.error]: + 'mb-0': true, + 'text-tomat': !R.path(['values', 'constraintType'])(context) && R.path(['errors', 'constraintType'])(context) } @@ -37,13 +32,13 @@ const NumericalEntry = () => { Numerical entry constraints {isLength && ( -
+
{ decimalPlaces={0} allowNegative={false} /> - digits + digits
)} diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/TextEntry.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/TextEntry.jsx index 79f2674e..6b9ed614 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/TextEntry.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/Forms/TypeFields/TextEntry.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' import * as R from 'ramda' @@ -7,9 +6,6 @@ import RadioGroup from 'src/components/inputs/formik/RadioGroup' import TextInput from 'src/components/inputs/formik/TextInput' import { H4 } from 'src/components/typography' -import styles from './formStyles.styles' -const useStyles = makeStyles(styles) - const options = [ { display: 'None', code: 'none' }, { display: 'Email', code: 'email' }, @@ -21,11 +17,10 @@ const options = [ ] const TextEntry = () => { - const classes = useStyles() const context = useFormikContext() const showErrorColor = { - [classes.radioSubtitle]: true, - [classes.error]: + 'mt-0': true, + 'text-tomato': !R.path(['values', 'constraintType'])(context) && R.path(['errors', 'constraintType'])(context) } @@ -34,15 +29,15 @@ const TextEntry = () => { switch (context.values.constraintType) { case 'spaceSeparation': return ( -
+
{ default: return ( { <>

Text entry constraints

[ { @@ -153,7 +131,6 @@ const Wizard = ({ hasError, existingRequirements }) => { - const classes = useStyles() const isEditing = !R.isNil(toBeEdited) const [step, setStep] = useState(isEditing ? 1 : 0) @@ -206,7 +183,7 @@ const Wizard = ({ open={true}> {step > 0 && ( @@ -221,15 +198,17 @@ const Wizard = ({ initialValues={initialValues} validationSchema={stepOptions.validationSchema}> {({ errors }) => ( - + -
+
{(hasError || !R.isEmpty(errors)) && ( {R.head(R.values(errors)) ?? `Failed to save`} )} -
diff --git a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/WizardSplash.jsx b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/WizardSplash.jsx index b3d9ffa0..421a0402 100644 --- a/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/WizardSplash.jsx +++ b/new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/WizardSplash.jsx @@ -1,43 +1,15 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H1, P } from 'src/components/typography' import CustomReqLogo from 'src/styling/icons/compliance/custom-requirement.svg?react' import { Button } from 'src/components/buttons' -const styles = { - logo: { - maxHeight: 150, - maxWidth: 200 - }, - title: { - margin: [[24, 0, 32, 0]] - }, - text: { - margin: 0 - }, - button: { - marginTop: 'auto', - marginBottom: 58 - }, - modalContent: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: [[0, 42]], - flex: 1 - } -} - -const useStyles = makeStyles(styles) - const WizardSplash = ({ onContinue }) => { - const classes = useStyles() return ( -
- -

Custom information request

-

+

+ +

Custom information request

+

A custom information request allows you to have an extra option to ask specific information about your customers when adding a trigger that isn't an option on the default requirements list. @@ -47,7 +19,7 @@ const WizardSplash = ({ onContinue }) => { triggers. You will still need to add a trigger with the new requirement to get this information from your customers.

-
diff --git a/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx b/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx index e8e208c5..6bd1f76f 100644 --- a/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx +++ b/new-lamassu-admin/src/pages/Triggers/TriggerView.jsx @@ -1,5 +1,4 @@ import { useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { H2 } from 'src/components/typography' @@ -9,12 +8,9 @@ import { Button } from 'src/components/buttons' import { Table as EditableTable } from 'src/components/editableTable' import { fromNamespace, namespaces } from 'src/utils/config' -import styles from './Triggers.styles' import Wizard from './Wizard' import { Schema, getElements, sortBy, toServer } from './helper' -const useStyles = makeStyles(styles) - const SAVE_CONFIG = gql` mutation Save($config: JSONObject) { saveConfig(config: $config) @@ -34,7 +30,6 @@ const TriggerView = ({ const currency = R.path(['fiatCurrency'])( fromNamespace(namespaces.LOCALE)(config) ) - const classes = useStyles() const [error, setError] = useState(null) const [saveConfig] = useMutation(SAVE_CONFIG, { @@ -69,7 +64,7 @@ const TriggerView = ({ error={error?.message} save={save} validationSchema={Schema} - elements={getElements(currency, classes, customInfoRequests)} + elements={getElements(currency, customInfoRequests)} /> {showWizard && ( { - const classes = useStyles() const [wizardType, setWizard] = useState(false) const { data, loading: configLoading, refetch } = useQuery(GET_CONFIG) const { data: customInfoReqData, loading: customInfoLoading } = @@ -109,7 +105,7 @@ const Triggers = () => { } const titleSectionWidth = { - [classes.tableWidth]: !subMenu === 'customInfoRequests' + 'w-230': !subMenu === 'customInfoRequests' } const setBlur = shouldBlur => { @@ -178,7 +174,7 @@ const Triggers = () => { }} value={rejectAddressReuse} /> - + {rejectAddressReuse ? 'On' : 'Off'} diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js deleted file mode 100644 index ad2be31d..00000000 --- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js +++ /dev/null @@ -1,16 +0,0 @@ -export default { - switchLabel: { - margin: 6, - width: 24 - }, - tableRadioGroup: { - flexDirection: 'row', - justifyContent: 'space-between' - }, - tableRadioLabel: { - marginRight: 0 - }, - tableWidth: { - width: 918 - } -} diff --git a/new-lamassu-admin/src/pages/Triggers/Wizard.jsx b/new-lamassu-admin/src/pages/Triggers/Wizard.jsx index abf8d94a..11f5f6c7 100644 --- a/new-lamassu-admin/src/pages/Triggers/Wizard.jsx +++ b/new-lamassu-admin/src/pages/Triggers/Wizard.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import { Form, Formik, useFormikContext } from 'formik' import * as R from 'ramda' import React, { useState, Fragment, useEffect } from 'react' @@ -8,46 +7,12 @@ import Stepper from 'src/components/Stepper' import { H5, Info3 } from 'src/components/typography' import { Button } from 'src/components/buttons' -import { comet } from 'src/styling/variables' import { singularOrPlural } from 'src/utils/string' import { type, requirements } from './helper' const LAST_STEP = 2 -const styles = { - stepper: { - margin: [[16, 0, 14, 0]] - }, - submit: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, 24]] - }, - button: { - marginLeft: 'auto' - }, - form: { - height: '100%', - display: 'flex', - flexDirection: 'column' - }, - infoTitle: { - margin: [[18, 0, 20, 0]] - }, - infoCurrentText: { - color: comet - }, - blankSpace: { - padding: [[0, 30]], - margin: [[0, 4, 0, 2]], - borderBottom: `1px solid ${comet}`, - display: 'inline-block' - } -} - -const useStyles = makeStyles(styles) - const getStep = ( { step, config }, currency, @@ -74,21 +39,23 @@ const getStep = ( } } -const getText = (step, config, currency, classes) => { +const getText = (step, config, currency) => { switch (step) { // case 1: // return `In ${getDirectionText(config)} transactions` case 1: - return <>If the user {getTypeText(config, currency, classes)} + return <>If the user {getTypeText(config, currency)} case 2: - return <>the user will be {getRequirementText(config, classes)}. + return <>the user will be {getRequirementText(config)}. default: return <> } } -const orUnderline = (value, classes) => { - const blankSpaceEl = +const orUnderline = value => { + const blankSpaceEl = ( + + ) return R.isEmpty(value) || R.isNil(value) ? blankSpaceEl : value } @@ -105,34 +72,34 @@ const orUnderline = (value, classes) => { // } // } -const getTypeText = (config, currency, classes) => { +const getTypeText = (config, currency) => { switch (config.triggerType) { case 'txAmount': return ( <> makes a single transaction over{' '} - {orUnderline(config.threshold.threshold, classes)} {currency} + {orUnderline(config.threshold.threshold)} {currency} ) case 'txVolume': return ( <> - makes more than {orUnderline(config.threshold.threshold, classes)}{' '} - {currency} worth of transactions within{' '} - {orUnderline(config.threshold.thresholdDays, classes)}{' '} + makes more than {orUnderline(config.threshold.threshold)} {currency}{' '} + worth of transactions within{' '} + {orUnderline(config.threshold.thresholdDays)}{' '} {singularOrPlural(config.threshold.thresholdDays, 'day', 'days')} ) case 'txVelocity': return ( <> - makes more than {orUnderline(config.threshold.threshold, classes)}{' '} + makes more than {orUnderline(config.threshold.threshold)}{' '} {singularOrPlural( config.threshold.threshold, 'transaction', 'transactions' )}{' '} - in {orUnderline(config.threshold.thresholdDays, classes)}{' '} + in {orUnderline(config.threshold.thresholdDays)}{' '} {singularOrPlural(config.threshold.thresholdDays, 'day', 'days')} ) @@ -140,7 +107,7 @@ const getTypeText = (config, currency, classes) => { return ( <> at least one transaction every day for{' '} - {orUnderline(config.threshold.thresholdDays, classes)}{' '} + {orUnderline(config.threshold.thresholdDays)}{' '} {singularOrPlural(config.threshold.thresholdDays, 'day', 'days')} ) @@ -149,7 +116,7 @@ const getTypeText = (config, currency, classes) => { } } -const getRequirementText = (config, classes) => { +const getRequirementText = config => { switch (config.requirement?.requirement) { case 'email': return <>asked to enter code provided through email verification @@ -170,8 +137,7 @@ const getRequirementText = (config, classes) => { case 'suspend': return ( <> - suspended for{' '} - {orUnderline(config.requirement.suspensionDays, classes)}{' '} + suspended for {orUnderline(config.requirement.suspensionDays)}{' '} {singularOrPlural(config.requirement.suspensionDays, 'day', 'days')} ) @@ -182,28 +148,24 @@ const getRequirementText = (config, classes) => { case 'external': return <>redirected to an external verification process default: - return orUnderline(null, classes) + return orUnderline(null) } } const InfoPanel = ({ step, config = {}, liveValues = {}, currency }) => { - const classes = useStyles() - const oldText = R.range(1, step).map((it, idx) => ( - - {getText(it, config, currency, classes)} - + {getText(it, config, currency)} )) - const newText = getText(step, liveValues, currency, classes) + const newText = getText(step, liveValues, currency) const isLastStep = step === LAST_STEP return ( <> -
Trigger overview so far
+
Trigger overview so far
{oldText} {step !== 1 && ', '} - {newText} + {newText} {!isLastStep && '...'} @@ -229,8 +191,6 @@ const Wizard = ({ emailAuth, triggers }) => { - const classes = useStyles() - const [liveValues, setLiveValues] = useState({}) const [{ step, config }, setState] = useState({ step: 1 @@ -321,11 +281,7 @@ const Wizard = ({ } infoPanelHeight={172} open={true}> - + {({ errors, touched, values }) => ( - + -
+
{error && Failed to save} {createErrorMessage(errors, touched, values) && ( {createErrorMessage(errors, touched, values)} )} -
diff --git a/new-lamassu-admin/src/pages/Triggers/helper.jsx b/new-lamassu-admin/src/pages/Triggers/helper.jsx index cd8a18c8..b6d82200 100644 --- a/new-lamassu-admin/src/pages/Triggers/helper.jsx +++ b/new-lamassu-admin/src/pages/Triggers/helper.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, useFormikContext } from 'formik' import * as R from 'ramda' @@ -7,95 +6,9 @@ import { H4, Label2, Label1, Info1, Info2 } from 'src/components/typography' import * as Yup from 'yup' import { NumberInput, RadioGroup, Dropdown } from 'src/components/inputs/formik' -import { errorColor } from 'src/styling/variables' import { transformNumber } from 'src/utils/number' import { onlyFirstToUpper } from 'src/utils/string' -// import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react' -// import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react' - -const useStyles = makeStyles({ - radioLabel: { - height: 40, - padding: [[0, 10]] - }, - radio: { - padding: 4, - margin: 4 - }, - radioGroup: { - flexDirection: 'row' - }, - error: { - color: errorColor - }, - specialLabel: { - height: 40, - padding: 0 - }, - specialGrid: { - display: 'grid', - gridTemplateColumns: [[182, 162, 181]] - }, - directionIcon: { - marginRight: 2 - }, - directionName: { - marginLeft: 6 - }, - thresholdWrapper: { - display: 'flex', - flexDirection: 'column' - }, - thresholdTitle: { - marginTop: 50 - }, - thresholdContentWrapper: { - display: 'flex', - flexDirection: 'row' - }, - thresholdField: { - marginRight: 6, - width: 75 - }, - description: { - marginTop: 7 - }, - space: { - marginLeft: 6, - marginRight: 6 - }, - lastSpace: { - marginLeft: 6 - }, - suspensionDays: { - width: 34 - }, - input: { - marginTop: -2 - }, - limitedInput: { - width: 50 - }, - daysInput: { - width: 60 - }, - dropdownField: { - marginTop: 16, - minWidth: 155 - }, - externalFields: { - '& > *': { - marginRight: 15 - }, - '& > *:last-child': { - marginRight: 0 - } - } -}) - -// const direction = Yup.string().required() - const triggerType = Yup.string().required() const threshold = Yup.object().shape({ threshold: Yup.number() @@ -171,92 +84,6 @@ const Schema = Yup.object() }) }) -// Direction V2 only -// const directionSchema = Yup.object().shape({ direction }) - -// const directionOptions = [ -// { -// display: 'Both', -// code: 'both' -// }, -// { -// display: 'Only cash-in', -// code: 'cashIn' -// }, -// { -// display: 'Only cash-out', -// code: 'cashOut' -// } -// ] - -// const directionOptions2 = [ -// { -// display: ( -// <> -// in -// -// ), -// code: 'cashIn' -// }, -// { -// display: ( -// <> -// out -// -// ), -// code: 'cashOut' -// }, -// { -// display: ( -// <> -// -// -// -// -// -// -// -// -// -// ), -// code: 'both' -// } -// ] - -// const Direction = () => { -// const classes = useStyles() -// const { errors } = useFormikContext() - -// const titleClass = { -// [classes.error]: errors.direction -// } - -// return ( -// <> -// -//

-// In which type of transactions will it trigger? -//

-// -// -// -// ) -// } - -// const txDirection = { -// schema: directionSchema, -// options: directionOptions, -// Component: Direction, -// initialValues: { direction: '' } -// } - // TYPE const typeSchema = Yup.object() .shape({ @@ -314,18 +141,20 @@ const typeSchema = Yup.object() const typeOptions = [ { display: 'Transaction amount', code: 'txAmount' }, - { display: 'Transaction volume', code: 'txVolume' }, + { + display: 'Transaction volume', + code: 'txVolume' + }, { display: 'Transaction velocity', code: 'txVelocity' }, { display: 'Consecutive days', code: 'consecutiveDays' } ] const Type = ({ ...props }) => { - const classes = useStyles() const { errors, touched, values, setTouched, handleChange } = useFormikContext() const typeClass = { - [classes.error]: errors.triggerType && touched.triggerType + 'text-tomato': errors.triggerType && touched.triggerType } const containsType = R.contains(values?.triggerType) @@ -348,7 +177,7 @@ const Type = ({ ...props }) => { const triggerTypeError = !!(hasDaysError || hasAmountError) const thresholdClass = { - [classes.error]: triggerTypeError + 'text-tomato': triggerTypeError } const isRadioGroupActive = () => { @@ -369,9 +198,9 @@ const Type = ({ ...props }) => { component={RadioGroup} name="triggerType" options={typeOptions} - labelClassName={classes.radioLabel} - radioClassName={classes.radio} - className={classes.radioGroup} + labelClassName="h-10 py-0 px-3" + radioClassName="p-1 m-1" + className="flex-row" onChange={e => { handleChange(e) setTouched({ @@ -381,73 +210,58 @@ const Type = ({ ...props }) => { }} /> -
+
{isRadioGroupActive() && ( -

- Threshold -

+

Threshold

)} -
+
{isThresholdCurrencyEnabled && ( <> - - {props.currency} - + {props.currency} )} {isTransactionAmountEnabled && ( <> - - transactions - + transactions )} {isThresholdDaysEnabled && ( <> - - in - + in - days + days )} {isConsecutiveDaysEnabled && ( <> - - consecutive days - + consecutive days )}
@@ -527,16 +341,27 @@ const requirementSchema = Yup.object() const requirementOptions = [ { display: 'SMS verification', code: 'sms' }, - { display: 'Email verification', code: 'email' }, + { + display: 'Email verification', + code: 'email' + }, { display: 'ID card image', code: 'idCardPhoto' }, - { display: 'ID data', code: 'idCardData' }, + { + display: 'ID data', + code: 'idCardData' + }, { display: 'Customer camera', code: 'facephoto' }, { display: 'Sanctions', code: 'sanctions' }, - { display: 'US SSN', code: 'usSsn' }, - // { display: 'Super user', code: 'superuser' }, + { + display: 'US SSN', + code: 'usSsn' + }, // { display: 'Super user', code: 'superuser' }, { display: 'Suspend', code: 'suspend' }, { display: 'Block', code: 'block' }, - { display: 'External verification', code: 'external' } + { + display: 'External verification', + code: 'external' + } ] const hasRequirementError = (errors, touched, values) => @@ -563,7 +388,6 @@ const Requirement = ({ complianceServices, customInfoRequests = [] }) => { - const classes = useStyles() const { touched, errors, values, handleChange, setTouched } = useFormikContext() @@ -587,7 +411,10 @@ const Requirement = ({ const availableCustomRequirements = R.filter( it => !R.includes( - { triggerType: config.triggerType, id: it.id }, + { + triggerType: config.triggerType, + id: it.id + }, customRequirementsInUse ), customInfoRequests @@ -613,7 +440,7 @@ const Requirement = ({ enableCustomRequirement && options.push(customInfoOption) const titleClass = { - [classes.error]: + 'text-tomato': (!!errors.requirement && !isSuspend && !isCustom && !isExternal) || (isSuspend && hasRequirementError(errors, touched, values)) || (isCustom && hasCustomRequirementError(errors, touched, values)) || @@ -629,9 +456,9 @@ const Requirement = ({ component={RadioGroup} name="requirement.requirement" options={options} - labelClassName={classes.specialLabel} - radioClassName={classes.radio} - className={classnames(classes.radioGroup, classes.specialGrid)} + labelClassName="h-10 p-0" + radioClassName="p-1 m-1" + className="flex-row grid grid-cols-[182px_162px_181px]" onChange={e => { handleChange(e) setTouched({ @@ -641,7 +468,7 @@ const Requirement = ({ /> {isSuspend && ( )} {isExternal && ( -
+
it => { return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data) } -// const DirectionDisplay = ({ code }) => { -// const classes = useStyles() -// const displayName = getView(directionOptions, 'display')(code) -// const showCashIn = code === 'cashIn' || code === 'both' -// const showCashOut = code === 'cashOut' || code === 'both' - -// return ( -//
-// {showCashOut && } -// {showCashIn && } -// {displayName} -//
-// ) -// } - const customReqIdMatches = customReqId => it => { return it.id === customReqId } const RequirementInput = ({ customInfoRequests = [] }) => { const { values } = useFormikContext() - const classes = useStyles() - const requirement = values?.requirement?.requirement const customRequestId = R.path(['requirement', 'customInfoRequestId'])(values) ?? '' @@ -753,7 +563,7 @@ const RequirementInput = ({ customInfoRequests = [] }) => { {isSuspend && ( { - const classes = useStyles() const display = requirement === 'custom' ? (R.path(['customRequest', 'name'])( @@ -785,7 +594,7 @@ const RequirementView = ({
{`${display} ${isSuspend ? 'for' : ''}`} {isSuspend && ( - + {suspensionDays} )} @@ -795,12 +604,10 @@ const RequirementView = ({ } const DisplayThreshold = ({ config, currency, isEdit }) => { - const classes = useStyles() - const inputClasses = { - [classes.input]: true, - [classes.limitedInput]: config?.triggerType === 'txVelocity', - [classes.daysInput]: config?.triggerType === 'consecutiveDays' + '-mt-1': true, + 'w-13': config?.triggerType === 'txVelocity', + 'w-15': config?.triggerType === 'consecutiveDays' } const threshold = config?.threshold?.threshold @@ -834,7 +641,7 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { return (
{Threshold} - + {currency}
@@ -843,14 +650,14 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { return (
{Threshold} - + {currency} - + in {ThresholdDays} - + days
@@ -859,11 +666,11 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { return (
{Threshold} - + transactions in {ThresholdDays} - + days
@@ -872,7 +679,7 @@ const DisplayThreshold = ({ config, currency, isEdit }) => { return (
{ThresholdDays} - + days
@@ -892,7 +699,7 @@ const ThresholdView = ({ config, currency }) => { return } -const getElements = (currency, classes, customInfoRequests) => [ +const getElements = (currency, customInfoRequests) => [ { name: 'triggerType', size: 'sm', @@ -926,18 +733,6 @@ const getElements = (currency, classes, customInfoRequests) => [ input: () => , view: (it, config) => } - // { - // name: 'direction', - // size: 'sm', - // width: 282, - // view: it => , - // input: RadioGroup, - // inputProps: { - // labelClassName: classes.tableRadioLabel, - // className: classes.tableRadioGroup, - // options: directionOptions2 - // } - // } ] const triggerOrder = R.map(R.prop('code'))(typeOptions) @@ -987,8 +782,7 @@ const toServer = triggers => export { Schema, - getElements, - // txDirection, + getElements, // txDirection, type, requirements, sortBy, diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx index e6048622..8b4213d1 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx @@ -6,7 +6,7 @@ import React, { useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { H1, H3, Info2, P, Mono } from 'src/components/typography' -import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' +import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import * as Yup from 'yup' import { Button } from 'src/components/buttons' diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx index ae1cfc49..b91f8f54 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx @@ -1,10 +1,10 @@ -import { useMutation, gql } from "@apollo/client"; +import { useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import React, { useEffect, useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Info2, P, Mono } from 'src/components/typography' -import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' +import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import { urlResolver } from 'src/utils/urlResolver' diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx index ca53e015..d6b36f7e 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx @@ -1,10 +1,10 @@ -import { useMutation, gql } from "@apollo/client"; +import { useMutation, gql } from '@apollo/client' import { makeStyles } from '@mui/styles' import React, { useEffect, useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Info2, P, Mono } from 'src/components/typography' -import CopyToClipboard from 'src/pages/Transactions/CopyToClipboard' +import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import { urlResolver } from 'src/utils/urlResolver' From 8d7f507d6e1586d2a444a48b264426ce7c494c45 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 08:17:09 +0100 Subject: [PATCH 18/27] partial: User Management and Wallet css migration --- .../pages/Maintenance/Wizard/WizardSplash.jsx | 2 +- .../pages/UserManagement/UserManagement.jsx | 5 +- .../UserManagement/UserManagement.module.css | 134 ++++++++++++++++++ .../UserManagement/UserManagement.styles.js | 124 ---------------- .../UserManagement/modals/ChangeRoleModal.jsx | 10 +- .../UserManagement/modals/CreateUserModal.jsx | 7 +- .../UserManagement/modals/EnableUserModal.jsx | 10 +- .../pages/UserManagement/modals/FIDOModal.jsx | 9 +- .../UserManagement/modals/Input2FAModal.jsx | 9 +- .../UserManagement/modals/Reset2FAModal.jsx | 9 +- .../modals/ResetPasswordModal.jsx | 7 +- new-lamassu-admin/src/pages/Wallet/Wallet.jsx | 7 +- .../src/pages/Wallet/Wallet.styles.js | 7 - .../src/pages/Wallet/WizardSplash.jsx | 38 +---- .../src/pages/Wallet/WizardStep.jsx | 51 +++---- .../src/pages/Wallet/WizardStep.styles.js | 60 -------- new-lamassu-admin/src/pages/Wallet/helper.jsx | 14 +- .../src/styling/global/global.css | 2 + 18 files changed, 182 insertions(+), 323 deletions(-) create mode 100644 new-lamassu-admin/src/pages/UserManagement/UserManagement.module.css delete mode 100644 new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js delete mode 100644 new-lamassu-admin/src/pages/Wallet/Wallet.styles.js delete mode 100644 new-lamassu-admin/src/pages/Wallet/WizardStep.styles.js diff --git a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx index 3693cff4..4e2cedca 100644 --- a/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx +++ b/new-lamassu-admin/src/pages/Maintenance/Wizard/WizardSplash.jsx @@ -29,7 +29,7 @@ const WizardSplash = ({ name, onContinue }) => { bills before adding the new ones.

-
diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx index 488c420a..d7850b37 100644 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.jsx @@ -1,7 +1,6 @@ import { useQuery, useMutation, useLazyQuery, gql } from '@apollo/client' import Chip from '@mui/material/Chip' import Switch from '@mui/material/Switch' -import { makeStyles } from '@mui/styles' import { startAttestation } from '@simplewebauthn/browser' import * as R from 'ramda' import React, { useReducer, useState, useContext } from 'react' @@ -18,7 +17,6 @@ import AppContext from 'src/AppContext' import { ActionButton, Link } from 'src/components/buttons' import { IP_CHECK_REGEX } from 'src/utils/constants' -import styles from './UserManagement.styles' import ChangeRoleModal from './modals/ChangeRoleModal' import CreateUserModal from './modals/CreateUserModal' import EnableUserModal from './modals/EnableUserModal' @@ -26,7 +24,7 @@ import FIDOModal from './modals/FIDOModal' import Reset2FAModal from './modals/Reset2FAModal' import ResetPasswordModal from './modals/ResetPasswordModal' -const useStyles = makeStyles(styles) +import classes from './UserManagement.module.css' const GET_USERS = gql` query users { @@ -88,7 +86,6 @@ const roleMapper = { } const Users = () => { - const classes = useStyles() const { userData } = useContext(AppContext) const { data: userResponse } = useQuery(GET_USERS) diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.module.css b/new-lamassu-admin/src/pages/UserManagement/UserManagement.module.css new file mode 100644 index 00000000..604f6aa0 --- /dev/null +++ b/new-lamassu-admin/src/pages/UserManagement/UserManagement.module.css @@ -0,0 +1,134 @@ +.footer { + display: flex; + flex-direction: row; + margin: auto 0 24px 0; +} + +.modalTitle { + margin-top: -5px; + color: var(--zodiac); + font-family: var(--mont); +} + +.modalLabel1 { + margin-top: 20px; +} + +.modalLabel2 { + margin-top: 40px; +} + +.inputLabel { + color: var(--zodiac); + font-family: var(--mont); + font-size: 24px; + margin-left: 8px; + margin-top: 15px; +} + +.tableWidth { + width: 1132px; +} + +.radioGroup { + flex-direction: row; + width: 500px; +} + +.radioLabel { + width: 150px; + height: 48px; +} + +.copyToClipboard { + margin-left: auto; + padding-top: 7px; + margin-right: -5px; +} + +.chip { + background-color: var(--zircon); + font-family: var(--mont); + margin-left: 10px; +} + +.info { + font-family: var(--museo); + text-align: justify; +} + +.addressWrapper { + background-color: var(--zircon); + margin-top: 8px; + height: 35px; +} + +.address { + margin: 0px 16px 0px 16px; + padding-right: -15px; +} + +.errorMessage { + font-family: var(--museo); + color: var(--tomato); +} + +.codeContainer { + margin-top: 15px; + margin-bottom: 15px; +} + +.form { + display: flex; + flex-direction: column; + height: 100%; +} + +.submit { + margin: auto 0 0 auto; +} + +.error { + color: var(--tomato); +} + +.link { + position: absolute; + top: 10px; + left: 0; + bottom: -20px; + right: -20px; + white-space: nowrap; + overflow-x: auto; + width: 92.5%; +} + +.linkWrapper { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} + +.loginWrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.username { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 100%; +} + +.roleSwitch { + margin-left: 15px; +} + +.actionButtonWrapper { + display: flex; + gap: 12px; +} diff --git a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js b/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js deleted file mode 100644 index 6859dd97..00000000 --- a/new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js +++ /dev/null @@ -1,124 +0,0 @@ -import { - spacer, - fontPrimary, - fontSecondary, - primaryColor, - subheaderColor, - errorColor -} from 'src/styling/variables' - -const styles = { - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - modalTitle: { - marginTop: -5, - color: primaryColor, - fontFamily: fontPrimary - }, - modalLabel1: { - marginTop: 20 - }, - modalLabel2: { - marginTop: 40 - }, - inputLabel: { - color: primaryColor, - fontFamily: fontPrimary, - fontSize: 24, - marginLeft: 8, - marginTop: 15 - }, - tableWidth: { - width: 1132 - }, - radioGroup: { - flexDirection: 'row', - width: 500 - }, - radioLabel: { - width: 150, - height: 48 - }, - copyToClipboard: { - marginLeft: 'auto', - paddingTop: 7, - marginRight: -5 - }, - chip: { - backgroundColor: subheaderColor, - fontFamily: fontPrimary, - marginLeft: 10 - }, - info: { - fontFamily: fontSecondary, - textAlign: 'justify' - }, - addressWrapper: { - backgroundColor: subheaderColor, - marginTop: 8, - height: 35 - }, - address: { - margin: `0px ${spacer * 2}px 0px ${spacer * 2}px`, - paddingRight: -15 - }, - errorMessage: { - fontFamily: fontSecondary, - color: errorColor - }, - codeContainer: { - marginTop: 15, - marginBottom: 15 - }, - form: { - display: 'flex', - flexDirection: 'column', - height: '100%' - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - }, - error: { - color: errorColor - }, - link: { - position: 'absolute', - top: 10, - left: 0, - bottom: '-20px', - right: '-20px', - whiteSpace: 'nowrap', - overflowX: 'auto', - width: '92.5%' - }, - linkWrapper: { - width: '100%', - height: '100%', - overflow: 'hidden', - position: 'relative' - }, - loginWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between' - }, - username: { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - width: '100%' - }, - roleSwitch: { - marginLeft: 15 - }, - actionButtonWrapper: { - display: 'flex', - gap: 12 - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.jsx index eb7b7cbe..e048d02c 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/ChangeRoleModal.jsx @@ -1,5 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, gql } from '@apollo/client' import React, { useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' @@ -7,9 +6,8 @@ import { Info2, P } from 'src/components/typography' import { Button } from 'src/components/buttons' -import styles from '../UserManagement.styles' - import Input2FAModal from './Input2FAModal' +import classes from '../UserManagement.module.css' const CHANGE_USER_ROLE = gql` mutation changeUserRole( @@ -27,11 +25,7 @@ const CHANGE_USER_ROLE = gql` } ` -const useStyles = makeStyles(styles) - const ChangeRoleModal = ({ state, dispatch, user, requiresConfirmation }) => { - const classes = useStyles() - const [changeUserRole, { error }] = useMutation(CHANGE_USER_ROLE, { onCompleted: () => handleClose(), refetchQueries: () => ['users'] diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx index 8b4213d1..a962c8ed 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/CreateUserModal.jsx @@ -1,5 +1,4 @@ import { useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Field, Form, Formik } from 'formik' import React, { useState } from 'react' @@ -13,9 +12,7 @@ import { Button } from 'src/components/buttons' import { TextInput, RadioGroup } from 'src/components/inputs/formik' import { urlResolver } from 'src/utils/urlResolver' -import styles from '../UserManagement.styles' - -const useStyles = makeStyles(styles) +import classes from '../UserManagement.module.css' const CREATE_USER = gql` mutation createRegisterToken($username: String!, $role: String!) { @@ -58,8 +55,6 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => { } const CreateUserModal = ({ state, dispatch }) => { - const classes = useStyles() - const [usernameField, setUsernameField] = useState('') const [createUserURL, setCreateUserURL] = useState(null) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.jsx index 0066e184..dcb23287 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/EnableUserModal.jsx @@ -1,5 +1,4 @@ -import { useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useMutation, gql } from '@apollo/client' import React, { useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' @@ -7,9 +6,8 @@ import { Info2, P } from 'src/components/typography' import { Button } from 'src/components/buttons' -import styles from '../UserManagement.styles' - import Input2FAModal from './Input2FAModal' +import classes from '../UserManagement.module.css' const ENABLE_USER = gql` mutation enableUser($confirmationCode: String, $id: ID!) { @@ -27,11 +25,7 @@ const DISABLE_USER = gql` } ` -const useStyles = makeStyles(styles) - const EnableUserModal = ({ state, dispatch, user, requiresConfirmation }) => { - const classes = useStyles() - const [enableUser, { error: enableError }] = useMutation(ENABLE_USER, { onCompleted: () => handleClose(), refetchQueries: () => ['users'] diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/FIDOModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/FIDOModal.jsx index 8762a783..172e93a0 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/FIDOModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/FIDOModal.jsx @@ -1,17 +1,12 @@ -import { makeStyles } from '@mui/styles' import React from 'react' + import Modal from 'src/components/Modal' import { Info2, P } from 'src/components/typography' - import { Button } from 'src/components/buttons' -import styles from '../UserManagement.styles' - -const useStyles = makeStyles(styles) +import classes from '../UserManagement.module.css' const ChangeRoleModal = ({ state, dispatch }) => { - const classes = useStyles() - const handleClose = () => { dispatch({ type: 'close', diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx index a6639358..450d3d5f 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Input2FAModal.jsx @@ -1,16 +1,13 @@ import { useLazyQuery, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import { Form, Formik } from 'formik' import React, { useState } from 'react' + import Modal from 'src/components/Modal' import { Info2, P } from 'src/components/typography' - import { Button } from 'src/components/buttons' import { CodeInput } from 'src/components/inputs/base' -import styles from '../UserManagement.styles' - -const useStyles = makeStyles(styles) +import classes from '../UserManagement.module.css' const CONFIRM_2FA = gql` query confirm2FA($code: String!) { @@ -19,8 +16,6 @@ const CONFIRM_2FA = gql` ` const Input2FAModal = ({ showModal, handleClose, setConfirmation }) => { - const classes = useStyles() - const [twoFACode, setTwoFACode] = useState('') const [invalidCode, setInvalidCode] = useState(false) diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx index b91f8f54..ccf0e043 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/Reset2FAModal.jsx @@ -1,16 +1,14 @@ import { useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import React, { useEffect, useState } from 'react' + import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' import { Info2, P, Mono } from 'src/components/typography' import CopyToClipboard from 'src/components/CopyToClipboard.jsx' - import { urlResolver } from 'src/utils/urlResolver' -import styles from '../UserManagement.styles' - import Input2FAModal from './Input2FAModal' +import classes from '../UserManagement.module.css' const CREATE_RESET_2FA_TOKEN = gql` mutation createReset2FAToken($confirmationCode: String, $userID: ID!) { @@ -22,10 +20,7 @@ const CREATE_RESET_2FA_TOKEN = gql` } ` -const useStyles = makeStyles(styles) - const Reset2FAModal = ({ state, dispatch, user, requiresConfirmation }) => { - const classes = useStyles() const [reset2FAUrl, setReset2FAUrl] = useState('') const [createReset2FAToken, { loading, error }] = useMutation( diff --git a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx index d6b36f7e..1ebdfa70 100644 --- a/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx +++ b/new-lamassu-admin/src/pages/UserManagement/modals/ResetPasswordModal.jsx @@ -1,5 +1,4 @@ import { useMutation, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import React, { useEffect, useState } from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Modal from 'src/components/Modal' @@ -8,9 +7,8 @@ import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import { urlResolver } from 'src/utils/urlResolver' -import styles from '../UserManagement.styles' - import Input2FAModal from './Input2FAModal' +import classes from '../UserManagement.module.css' const CREATE_RESET_PASSWORD_TOKEN = gql` mutation createResetPasswordToken($confirmationCode: String, $userID: ID!) { @@ -25,15 +23,12 @@ const CREATE_RESET_PASSWORD_TOKEN = gql` } ` -const useStyles = makeStyles(styles) - const ResetPasswordModal = ({ state, dispatch, user, requiresConfirmation }) => { - const classes = useStyles() const [resetPasswordUrl, setResetPasswordUrl] = useState('') const [createResetPasswordToken, { loading, error }] = useMutation( diff --git a/new-lamassu-admin/src/pages/Wallet/Wallet.jsx b/new-lamassu-admin/src/pages/Wallet/Wallet.jsx index 32915acc..8e61444e 100644 --- a/new-lamassu-admin/src/pages/Wallet/Wallet.jsx +++ b/new-lamassu-admin/src/pages/Wallet/Wallet.jsx @@ -1,5 +1,4 @@ import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import Modal from 'src/components/Modal' @@ -17,7 +16,6 @@ import { fromNamespace, toNamespace } from 'src/utils/config' import { P } from '../../components/typography' import AdvancedWallet from './AdvancedWallet' -import styles from './Wallet.styles' import Wizard from './Wizard' import { WalletSchema, getElements } from './helper' @@ -61,10 +59,7 @@ const GET_MARKETS = gql` const LOCALE = 'locale' -const useStyles = makeStyles(styles) - const Wallet = ({ name: SCREEN_KEY }) => { - const classes = useStyles() const [editingSchema, setEditingSchema] = useState(null) const [onChangeFunction, setOnChangeFunction] = useState(null) const [wizard, setWizard] = useState(false) @@ -128,7 +123,7 @@ const Wallet = ({ name: SCREEN_KEY }) => { return ( <> -
+
{ switch (code) { case 'BTC': @@ -71,19 +44,18 @@ const getLogo = code => { } const WizardSplash = ({ code, name, onContinue }) => { - const classes = useStyles() const Logo = getLogo(code) return ( -
- -

Enable {name}

-

+

+ +

Enable {name}

+

You are about to enable {name} on your system. This will allow you to use this cryptocurrency on your machines. To be able to do that, you’ll have to set up all the necessary 3rd party services.

-
diff --git a/new-lamassu-admin/src/pages/Wallet/WizardStep.jsx b/new-lamassu-admin/src/pages/Wallet/WizardStep.jsx index 0443665a..0b1fcb30 100644 --- a/new-lamassu-admin/src/pages/Wallet/WizardStep.jsx +++ b/new-lamassu-admin/src/pages/Wallet/WizardStep.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { Formik, Form, Field } from 'formik' import * as R from 'ramda' @@ -13,10 +12,6 @@ import { RadioGroup, Autocomplete } from 'src/components/inputs' import { NumberInput } from 'src/components/inputs/formik' import { startCase } from 'src/utils/string' -import styles from './WizardStep.styles' - -const useStyles = makeStyles(styles) - const initialState = { form: null, selected: null, @@ -69,7 +64,6 @@ const WizardStep = ({ unfilled, getValue }) => { - const classes = useStyles() const [{ innerError, selected, form, isNew }, dispatch] = useReducer( reducer, initialState @@ -88,15 +82,16 @@ const WizardStep = ({ const label = isLastStep ? 'Finish' : 'Next' const displayName = name ?? type - const subtitleClass = { - [classes.subtitle]: true, - [classes.error]: innerError - } + const subtitleClass = classnames('mt-8 mb-5 mx-0', { + 'text-tomato': innerError + }) return ( <> - {startCase(displayName)} + + {startCase(displayName)} + -

+

{step < maxSteps - 1 ? `Select a ${displayName} or set up a new one` : `Select ${displayName} for ${coin}`} @@ -105,12 +100,12 @@ const WizardStep = ({ { dispatch({ type: 'select', selected: it }) }} - labelClassName={classes.radioLabel} - radioClassName={classes.radio} + labelClassName="w-37 h-12" + radioClassName="p-1 m-1" /> )} {type === 'zeroConfLimit' && ( @@ -122,11 +117,7 @@ const WizardStep = ({ validationSchema={stepSchema}> {({ values, setFieldValue }) => ( -
+
{fiatCurrency}
@@ -148,15 +139,15 @@ const WizardStep = ({ )} )} -
+
{!R.isEmpty(unfilled) && !R.isNil(unfilled) && ( { dispatch({ type: 'new' }) }} - labelClassName={classes.radioLabel} - radioClassName={classes.radio} + labelClassName="w-[150px] h-12" + radioClassName="p-1 m-1" options={[{ display: 'Set up new', code: true }]} /> )} @@ -164,7 +155,7 @@ const WizardStep = ({ innerContinue({ [type]: form.code }, { [form.code]: it })} elements={schemas[form.code].elements} - validationSchema={schemas[form.code].getValidationSchema(accounts[form.code])} + validationSchema={schemas[form.code].getValidationSchema( + accounts[form.code] + )} value={getValue(form.code)} buttonLabel={label} /> )} {!form && ( -
+
{error && Failed to save}
)} - ); + ) } export default WizardStep diff --git a/new-lamassu-admin/src/pages/Wallet/WizardStep.styles.js b/new-lamassu-admin/src/pages/Wallet/WizardStep.styles.js deleted file mode 100644 index 5ff78ac9..00000000 --- a/new-lamassu-admin/src/pages/Wallet/WizardStep.styles.js +++ /dev/null @@ -1,60 +0,0 @@ -import { errorColor, fontSize1, fontPrimary } from 'src/styling/variables' - -const LABEL_WIDTH = 150 - -export default { - title: { - margin: [[0, 0, 12, 0]] - }, - subtitle: { - margin: [[32, 0, 21, 0]] - }, - error: { - color: errorColor - }, - button: { - marginLeft: 'auto' - }, - submit: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, 24]] - }, - radioGroup: { - flexDirection: 'row' - }, - radioLabel: { - width: LABEL_WIDTH, - height: 48 - }, - radio: { - padding: 4, - margin: 4 - }, - setupNew: { - display: 'flex', - alignItems: 'center', - height: 48 - }, - picker: { - width: LABEL_WIDTH - }, - horizontalAlign: { - display: 'flex', - flexDirection: 'row' - }, - centerAlignment: { - alignItems: 'center' - }, - zeroConfLimit: { - marginRight: 5, - '& > div': { - fontSize: fontSize1, - fontFamily: fontPrimary, - fontWeight: 300, - '& > input': { - padding: [[6, 0, 2]] - } - } - } -} diff --git a/new-lamassu-admin/src/pages/Wallet/helper.jsx b/new-lamassu-admin/src/pages/Wallet/helper.jsx index bd6d90a6..482c7d1c 100644 --- a/new-lamassu-admin/src/pages/Wallet/helper.jsx +++ b/new-lamassu-admin/src/pages/Wallet/helper.jsx @@ -8,15 +8,9 @@ import { Checkbox, NumberInput } from 'src/components/inputs/formik' -import { disabledColor } from 'src/styling/variables' import { CURRENCY_MAX } from 'src/utils/constants' import { defaultToZero } from 'src/utils/number' -const classes = { - editDisabled: { - color: disabledColor - } -} const filterClass = type => R.filter(it => it.class === type) const filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos)) @@ -172,7 +166,7 @@ const getAdvancedWalletElementsOverrides = ( width: 250, view: (_, ite) => { if (ite.cryptoCurrency !== 'BTC') - return {`No`} + return {`No`} return ite.allowTransactionBatching ? 'Yes' : 'No' }, input: Checkbox, @@ -186,7 +180,7 @@ const getAdvancedWalletElementsOverrides = ( width: 250, view: (_, ite) => { if (ite.cryptoCurrency !== 'BTC') - return {`Default`} + return {`Default`} return viewFeeMultiplier(ite.feeMultiplier) }, input: Autocomplete, @@ -289,7 +283,7 @@ const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => { return has0Conf(row) ? ( displayName ) : ( - {displayName} + {displayName} ) }, input: Autocomplete, @@ -309,7 +303,7 @@ const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => { size: 'sm', stripe: true, view: (it, row) => - has0Conf(row) ? it : {it}, + has0Conf(row) ? it : {it}, input: NumberInput, width: 145 - widthAdjust, inputProps: { diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index 906d56a0..30dcc720 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -20,6 +20,7 @@ --tomato: #ff584a; + --dust: #dddddd; --ghost: #fafbff; --zircon: #ebefff; --zircon2: #dbdfed; @@ -44,6 +45,7 @@ --color-comet2: var(--comet2); --color-comet3: var(--comet3); --color-tomato: var(--tomato); + --color--dust: var(--dust); --color-ghost: var(--ghost); --color-zircon: var(--zircon); --color-zircon2: var(--zircon2); From c425195ade80b5ebf6fd521e8b1ac67d8cfd31fb Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 08:41:10 +0100 Subject: [PATCH 19/27] partial: Funding and Logs pages --- new-lamassu-admin/src/pages/Funding.jsx | 9 +- .../src/pages/Funding.module.css | 107 ++++++++++++++++++ new-lamassu-admin/src/pages/Funding.styles.js | 100 ---------------- new-lamassu-admin/src/pages/Logs.module.css | 74 ++++++++++++ new-lamassu-admin/src/pages/Logs.styles.js | 65 ----------- new-lamassu-admin/src/pages/MachineLogs.jsx | 7 +- .../Transactions/Transactions.styles.js | 90 --------------- new-lamassu-admin/src/pages/ServerLogs.jsx | 65 ++++------- .../src/pages/ServerLogs.module.css | 20 ++++ 9 files changed, 226 insertions(+), 311 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Funding.module.css delete mode 100644 new-lamassu-admin/src/pages/Funding.styles.js create mode 100644 new-lamassu-admin/src/pages/Logs.module.css delete mode 100644 new-lamassu-admin/src/pages/Logs.styles.js delete mode 100644 new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.styles.js create mode 100644 new-lamassu-admin/src/pages/ServerLogs.module.css diff --git a/new-lamassu-admin/src/pages/Funding.jsx b/new-lamassu-admin/src/pages/Funding.jsx index 7caa0907..1d75af6c 100644 --- a/new-lamassu-admin/src/pages/Funding.jsx +++ b/new-lamassu-admin/src/pages/Funding.jsx @@ -1,6 +1,5 @@ import { useQuery, gql } from '@apollo/client' import { formatCryptoAddress } from '@lamassu/coins/lightUtils' -import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import classnames from 'classnames' import { format } from 'date-fns/fp' @@ -23,12 +22,11 @@ import CopyToClipboard from 'src/components/CopyToClipboard.jsx' import { primaryColor } from 'src/styling/variables' -import styles from './Funding.styles' +import classes from './Funding.module.css' const NODE_NOT_CONNECTED_ERR = "Couldn't establish connection with the node. Make sure it is installed and try again" -const useStyles = makeStyles(styles) const sizes = { big: 165, time: 140, @@ -79,7 +77,6 @@ const getPendingTotal = list => { const Funding = () => { const [selected, setSelected] = useState(null) const [viewHistory] = useState(false) - const classes = useStyles() const fundingHistory = [ { cryptoAmount: 2.0, @@ -194,7 +191,7 @@ const Funding = () => { {`${selected.confirmedBalance} ${selected.cryptoCode}`} - + {`(${signIfPositive(selected.pending)} ${ selected.pending } pending)`} @@ -207,7 +204,7 @@ const Funding = () => { selected.fiatCode }`} - + {`(${signIfPositive(selected.fiatPending)} ${formatNumber( selected.fiatPending )} pending)`} diff --git a/new-lamassu-admin/src/pages/Funding.module.css b/new-lamassu-admin/src/pages/Funding.module.css new file mode 100644 index 00000000..85eff346 --- /dev/null +++ b/new-lamassu-admin/src/pages/Funding.module.css @@ -0,0 +1,107 @@ +.wrapper { + display: flex; + flex: 1; + flex-direction: row; + height: 100%; +} + +.main { + display: flex; + flex: 1; +} + +.firstSide { + margin: 0 64px 0 48px; +} + +.secondSide { + margin-top: -29px; +} + +.error { + color: var(--tomato); +} + +.coinTotal { + margin: 12px 0; +} + +.topSpacer { + margin-top: 40px; +} + +.addressWrapper { + display: flex; + flex-direction: column; + flex: 1; + background-color: var(--zircon); +} + +.address { + width: 375px; + margin: 12px 24px; +} + +.itemWrapper { + text-align: end; +} + +.item { + font-family: var(--museo); + font-size: 14px; + font-weight: 500; + margin: 2px; +} + +.inactiveItem { + color: var(--comet); +} + +.firstItem { + font-weight: 700; + margin: 2px; +} + +.total { + margin-top: auto; + text-align: right; + margin-right: 24px; +} + +.totalPending { + margin-top: 2px; +} + +.totalTitle { + color: var(--comet); + margin-bottom: 2px; +} + +.table { + margin-top: 8px; + margin-left: 48px; +} + +.tableLabel { + justify-content: end; + margin-top: -38px; +} + +.pending { + background-color: var(--zircon); +} + +.copyToClipboard { + margin-left: auto; + padding-top: 6px; + padding-left: 15px; + margin-right: -11px; +} + +.mono { + font-family: var(--bpmono); + font-size: 14px; + font-weight: 400; + width: 375px; + margin: 12px 24px; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/pages/Funding.styles.js b/new-lamassu-admin/src/pages/Funding.styles.js deleted file mode 100644 index e54457e0..00000000 --- a/new-lamassu-admin/src/pages/Funding.styles.js +++ /dev/null @@ -1,100 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import { - disabledColor2, - spacer, - subheaderColor, - errorColor, - placeholderColor, - comet -} from 'src/styling/variables' - -const { label1, mono } = typographyStyles - -export default { - wrapper: { - display: 'flex', - flex: 1, - flexDirection: 'row', - height: '100%' - }, - main: { - display: 'flex', - flex: 1 - }, - firstSide: { - margin: `0 ${spacer * 8}px 0 ${spacer * 6}px` - }, - secondSide: { - marginTop: -29 - }, - error: { - color: errorColor - }, - coinTotal: { - margin: `${spacer * 1.5}px 0` - }, - leftSpacer: { - marginLeft: spacer - }, - topSpacer: { - marginTop: spacer * 5 - }, - addressWrapper: { - display: 'flex', - flexDirection: 'column', - flex: 1, - backgroundColor: subheaderColor - }, - address: { - width: 375, - margin: `${spacer * 1.5}px ${spacer * 3}px` - }, - itemWrapper: { - textAlign: 'end' - }, - item: { - extend: label1, - margin: 2 - }, - inactiveItem: { - color: comet - }, - firstItem: { - fontWeight: 700, - margin: 2 - }, - total: { - marginTop: 'auto', - textAlign: 'right', - marginRight: 24 - }, - totalPending: { - marginTop: 2 - }, - totalTitle: { - color: placeholderColor, - marginBottom: 2 - }, - table: { - marginTop: spacer, - marginLeft: spacer * 6 - }, - tableLabel: { - justifyContent: 'end', - marginTop: -38 - }, - pending: { - backgroundColor: disabledColor2 - }, - copyToClipboard: { - marginLeft: 'auto', - paddingTop: 6, - paddingLeft: 15, - marginRight: -11 - }, - mono: { - extend: mono, - width: 375, - margin: `${spacer * 1.5}px ${spacer * 3}px` - } -} diff --git a/new-lamassu-admin/src/pages/Logs.module.css b/new-lamassu-admin/src/pages/Logs.module.css new file mode 100644 index 00000000..cf3dde45 --- /dev/null +++ b/new-lamassu-admin/src/pages/Logs.module.css @@ -0,0 +1,74 @@ +.titleWrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; +} + +.wrapper { + flex: 1; + display: flex; + flex-direction: row; + height: 100%; +} + +.tableWrapper { + flex: 1; + margin-left: 40px; + display: block; + overflow-x: auto; + width: 100%; + max-width: 78%; + max-height: 70vh; +} + +.table { + white-space: nowrap; + display: block; +} + +.table th { + position: sticky; + top: 0; +} + +.dateColumn { + min-width: 160px; +} + +.levelColumn { + min-width: 100px; +} + +.fillColumn { + width: 100%; +} + +.shareButton { + margin: 8px; + display: flex; + align-items: center; + font-size: 13px; + padding: 0 12px; +} + +.shareIcon { + margin-right: 6px; +} + +.button { + margin: 8px; +} + +.titleAndButtonsContainer { + display: flex; +} + +.buttonsWrapper { + display: flex; + margin-left: 16px; +} + +.buttonsWrapper > * { + margin: auto 6px; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/pages/Logs.styles.js b/new-lamassu-admin/src/pages/Logs.styles.js deleted file mode 100644 index 15fc8679..00000000 --- a/new-lamassu-admin/src/pages/Logs.styles.js +++ /dev/null @@ -1,65 +0,0 @@ -import { fontSize5 } from 'src/styling/variables' - -export default { - titleWrapper: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - flexDirection: 'row' - }, - wrapper: { - flex: 1, - display: 'flex', - flexDirection: 'row', - height: '100%' - }, - tableWrapper: { - flex: 1, - marginLeft: 40, - display: 'block', - overflowX: 'auto', - width: '100%', - maxWidth: '78%', - maxHeight: '70vh' - }, - table: { - whiteSpace: 'nowrap', - display: 'block', - '& th': { - position: 'sticky', - top: 0 - } - }, - dateColumn: { - minWidth: 160 - }, - levelColumn: { - minWidth: 100 - }, - fillColumn: { - width: '100%' - }, - shareButton: { - margin: 8, - display: 'flex', - alignItems: 'center', - fontSize: fontSize5, - padding: [[0, 12]] - }, - shareIcon: { - marginRight: 6 - }, - button: { - margin: 8 - }, - titleAndButtonsContainer: { - display: 'flex' - }, - buttonsWrapper: { - display: 'flex', - marginLeft: 16, - '& > *': { - margin: 'auto 6px' - } - } -} diff --git a/new-lamassu-admin/src/pages/MachineLogs.jsx b/new-lamassu-admin/src/pages/MachineLogs.jsx index 5e33fdae..2d70f647 100644 --- a/new-lamassu-admin/src/pages/MachineLogs.jsx +++ b/new-lamassu-admin/src/pages/MachineLogs.jsx @@ -1,5 +1,4 @@ import { useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' @@ -17,9 +16,7 @@ import { } from 'src/components/table' import { formatDate } from 'src/utils/timezones' -import styles from './Logs.styles' - -const useStyles = makeStyles(styles) +import classes from './Logs.module.css' const GET_MACHINES = gql` { @@ -73,8 +70,6 @@ const GET_DATA = gql` ` const Logs = () => { - const classes = useStyles() - const [selected, setSelected] = useState(null) const [saveMessage, setSaveMessage] = useState(null) diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.styles.js deleted file mode 100644 index 7bbd00ce..00000000 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.styles.js +++ /dev/null @@ -1,90 +0,0 @@ -import typographyStyles from 'src/components/typography/styles' -import baseStyles from 'src/pages/Logs.styles' -import { offColor, white } from 'src/styling/variables' - -const { label1, mono, p } = typographyStyles -const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles - -const cpcStyles = { - wrapper: { - extend: mono, - display: 'flex', - alignItems: 'center', - height: 32 - }, - address: { - lineBreak: 'anywhere' - }, - buttonWrapper: { - '& button': { - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer' - } - }, - popoverContent: { - extend: label1, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - color: white, - borderRadius: 4, - padding: [[5, 9]] - } -} - -const detailsRowStyles = { - idCardDataCard: { - extend: p, - display: 'flex', - padding: [[11, 8]], - '& > div': { - display: 'flex', - flexDirection: 'column', - '& > div': { - width: 144, - height: 37, - marginBottom: 15, - '&:last-child': { - marginBottom: 0 - } - } - } - } -} - -const labelStyles = { - label: { - extend: label1, - color: offColor, - marginBottom: 4 - } -} - -const mainStyles = { - titleWrapper, - titleAndButtonsContainer, - buttonsWrapper, - headerLabels: { - display: 'flex', - flexDirection: 'row', - '& div': { - display: 'flex', - alignItems: 'center' - }, - '& > div:first-child': { - marginRight: 24 - }, - '& span': { - extend: label1, - marginLeft: 6 - } - }, - overflowTd: { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis' - } -} - -export { cpcStyles, detailsRowStyles, labelStyles, mainStyles } diff --git a/new-lamassu-admin/src/pages/ServerLogs.jsx b/new-lamassu-admin/src/pages/ServerLogs.jsx index 136784b6..d4ff6ac0 100644 --- a/new-lamassu-admin/src/pages/ServerLogs.jsx +++ b/new-lamassu-admin/src/pages/ServerLogs.jsx @@ -1,5 +1,4 @@ -import { useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState, useRef } from 'react' import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' @@ -16,47 +15,23 @@ import { TableBody, TableCell } from 'src/components/table' -import typographyStyles from 'src/components/typography/styles' -import { offColor } from 'src/styling/variables' import { startCase } from 'src/utils/string' import { formatDate } from 'src/utils/timezones' -import logsStyles from './Logs.styles' - -const { p } = typographyStyles -const { tableWrapper } = logsStyles - -const localStyles = { - serverTableWrapper: { - extend: tableWrapper, - maxWidth: '100%', - marginLeft: 0 - }, - serverVersion: { - extend: p, - color: offColor, - margin: 'auto 0 auto 0' - }, - headerLine2: { - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24 - }, - uptimeContainer: { - margin: 'auto 0 auto 0' - } -} - -const styles = R.merge(logsStyles, localStyles) - -const useStyles = makeStyles(styles) +import logsClasses from './Logs.module.css' +import classes from './ServerLogs.module.css' const SHOW_ALL = { code: 'SHOW_ALL', display: 'Show all' } const NUM_LOG_RESULTS = 500 const GET_CSV = gql` - query ServerData($limit: Int, $from: DateTimeISO, $until: DateTimeISO, $timezone: String) { + query ServerData( + $limit: Int + $from: DateTimeISO + $until: DateTimeISO + $timezone: String + ) { serverLogsCsv( limit: $limit from: $from @@ -90,8 +65,6 @@ const GET_DATA = gql` ` const Logs = () => { - const classes = useStyles() - const tableEl = useRef() const [saveMessage, setSaveMessage] = useState(null) @@ -135,11 +108,11 @@ const Logs = () => { return ( <> -
-
+
+
Server {data && ( -
+
{ ))}
-
+
-

Channel
+
- Date - Level - + + Date + + + Level + + diff --git a/new-lamassu-admin/src/pages/ServerLogs.module.css b/new-lamassu-admin/src/pages/ServerLogs.module.css new file mode 100644 index 00000000..78e77779 --- /dev/null +++ b/new-lamassu-admin/src/pages/ServerLogs.module.css @@ -0,0 +1,20 @@ +.serverTableWrapper { + composes: tableWrapper from './Logs.module.css'; + max-width: 100%; + margin-left: 0; +} + +.serverVersion { + color: var(--comet); + margin: auto 0 auto 0; +} + +.headerLine2 { + display: flex; + justify-content: space-between; + margin-bottom: 24px; +} + +.uptimeContainer { + margin: auto 0 auto 0; +} \ No newline at end of file From 2136e26de528f898d99794a708e23b84e2a75a06 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 09:10:52 +0100 Subject: [PATCH 20/27] partial: Wizard css migration --- new-lamassu-admin/src/components/Modal.jsx | 2 +- .../src/pages/Wizard/Radio.module.css | 43 +++++++++++++++ .../src/pages/Wizard/Radio.styles.js | 33 ----------- new-lamassu-admin/src/pages/Wizard/Wizard.jsx | 33 ++--------- .../pages/Wizard/components/Commissions.jsx | 17 +----- .../src/pages/Wizard/components/Footer.jsx | 55 ++++--------------- .../src/pages/Wizard/components/Locales.jsx | 11 +--- .../src/pages/Wizard/components/Mailgun.jsx | 20 +------ .../pages/Wizard/components/Notifications.jsx | 23 +------- .../pages/Wizard/components/OperatorInfo.jsx | 9 +-- .../src/pages/Wizard/components/Twilio.jsx | 42 ++++---------- .../pages/Wizard/components/Twilio.module.css | 24 ++++++++ .../pages/Wizard/components/Wallet/AllSet.jsx | 7 +-- .../Wizard/components/Wallet/Blockcypher.jsx | 14 +---- .../Wizard/components/Wallet/ChooseCoin.jsx | 6 +- .../components/Wallet/ChooseExchange.jsx | 6 +- .../Wizard/components/Wallet/ChooseTicker.jsx | 6 +- .../Wizard/components/Wallet/ChooseWallet.jsx | 6 +- .../components/Wallet/Shared.module.css | 45 +++++++++++++++ .../Wizard/components/Wallet/Shared.styles.js | 42 -------------- .../pages/Wizard/components/Wallet/Wallet.jsx | 14 ++--- .../src/pages/Wizard/components/Welcome.jsx | 29 +--------- new-lamassu-admin/src/pages/Wizard/helper.jsx | 2 - 23 files changed, 166 insertions(+), 323 deletions(-) create mode 100644 new-lamassu-admin/src/pages/Wizard/Radio.module.css delete mode 100644 new-lamassu-admin/src/pages/Wizard/Radio.styles.js create mode 100644 new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css create mode 100644 new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css delete mode 100644 new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js diff --git a/new-lamassu-admin/src/components/Modal.jsx b/new-lamassu-admin/src/components/Modal.jsx index 147a144b..ad750571 100644 --- a/new-lamassu-admin/src/components/Modal.jsx +++ b/new-lamassu-admin/src/components/Modal.jsx @@ -53,7 +53,7 @@ const styles = { padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]] }), button: ({ small, xl }) => ({ - padding: [[0, 0, xl ? 26 : 0, 0]], + padding: [[0, 0, 0, 0]], margin: xl ? [[0, 0, 'auto', 'auto']] : small diff --git a/new-lamassu-admin/src/pages/Wizard/Radio.module.css b/new-lamassu-admin/src/pages/Wizard/Radio.module.css new file mode 100644 index 00000000..c8f40da2 --- /dev/null +++ b/new-lamassu-admin/src/pages/Wizard/Radio.module.css @@ -0,0 +1,43 @@ +.radioGroup { + flex-direction: row; + width: 600px; +} + +.radioLabel { + width: 150px; + height: 48px; +} + +.mailgunRadioGroup { + flex-direction: row; + width: 768px; +} + +.mailgunRadioLabel { + width: 300px; + height: 48px; +} + +.mdForm { + width: 385px; +} + +.infoMessage { + display: flex; + margin-bottom: 20px; +} + +.infoMessage > p { + width: 330px; + margin-top: 4px; + margin-left: 16px; +} + +.actionButton { + margin-bottom: 32px; +} + +.actionButtonLink { + text-decoration: none; + color: var(--zodiac); +} diff --git a/new-lamassu-admin/src/pages/Wizard/Radio.styles.js b/new-lamassu-admin/src/pages/Wizard/Radio.styles.js deleted file mode 100644 index 85975f70..00000000 --- a/new-lamassu-admin/src/pages/Wizard/Radio.styles.js +++ /dev/null @@ -1,33 +0,0 @@ -import { spacer, primaryColor } from 'src/styling/variables' - -const LABEL_WIDTH = 150 - -export default { - radioGroup: { - flexDirection: 'row', - width: 600 - }, - radioLabel: { - width: LABEL_WIDTH, - height: 48 - }, - mdForm: { - width: 385 - }, - infoMessage: { - display: 'flex', - marginBottom: 20, - '& > p': { - width: 330, - marginTop: 4, - marginLeft: 16 - } - }, - actionButton: { - marginBottom: spacer * 4 - }, - actionButtonLink: { - textDecoration: 'none', - color: primaryColor - } -} diff --git a/new-lamassu-admin/src/pages/Wizard/Wizard.jsx b/new-lamassu-admin/src/pages/Wizard/Wizard.jsx index e5b31f88..729ccbbf 100644 --- a/new-lamassu-admin/src/pages/Wizard/Wizard.jsx +++ b/new-lamassu-admin/src/pages/Wizard/Wizard.jsx @@ -1,36 +1,15 @@ import { useQuery, gql } from '@apollo/client' import Dialog from '@mui/material/Dialog' import DialogContent from '@mui/material/DialogContent' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React, { useState, useContext } from 'react' import { useHistory } from 'react-router-dom' import { getWizardStep, STEPS } from 'src/pages/Wizard/helper' import AppContext from 'src/AppContext' -import { backgroundColor } from 'src/styling/variables' import Footer from './components/Footer' -const useStyles = makeStyles({ - wrapper: { - display: 'flex', - padding: [[16, 0]], - flexDirection: 'column', - justifyContent: 'space-between', - backgroundColor: backgroundColor - }, - welcomeBackground: { - background: 'url(/wizard-background.svg) no-repeat center center fixed', - backgroundColor: backgroundColor, - backgroundSize: 'cover' - }, - blurred: { - filter: 'blur(4px)', - pointerEvents: 'none' - } -}) - const GET_DATA = gql` query getData { config @@ -43,7 +22,6 @@ const GET_DATA = gql` ` const Wizard = ({ fromAuthRegister }) => { - const classes = useStyles() const { data, loading } = useQuery(GET_DATA) const history = useHistory() const { setWizardTested } = useContext(AppContext) @@ -68,11 +46,6 @@ const Wizard = ({ fromAuthRegister }) => { } const isWelcome = step === 0 - const classNames = { - [classes.blurred]: footerExp, - [classes.wrapper]: true, - [classes.welcomeBackground]: isWelcome - } const start = () => { setFooterExp(false) @@ -91,6 +64,12 @@ const Wizard = ({ fromAuthRegister }) => { } const current = STEPS[step] + const classNames = { + 'flex flex-col justify-between py-4 px-0 bg-white': true, + 'bg-[url(/wizard-background.svg)] bg-no-repeat bg-center bg-fixed bg-cover': + isWelcome, + 'blur-sm pointer-events-none': footerExp + } return ( diff --git a/new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx b/new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx index f82c4ed4..b4f6f95b 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Commissions.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React from 'react' import Section from 'src/components/layout/Section' @@ -7,16 +6,8 @@ import TitleSection from 'src/components/layout/TitleSection' import { mainFields, defaults, getSchema } from 'src/pages/Commissions/helper' import { Table as EditableTable } from 'src/components/editableTable' -import styles from 'src/pages/AddMachine/styles' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -const useStyles = makeStyles(styles) -const useCommissionStyles = makeStyles({ - autoComplete: { - width: '100%' - } -}) - const GET_DATA = gql` query getData { config @@ -29,8 +20,6 @@ const SAVE_CONFIG = gql` ` function Commissions({ isActive, doContinue }) { - const classes = useStyles() - const commissionClasses = useCommissionStyles() const { data } = useQuery(GET_DATA) const [saveConfig] = useMutation(SAVE_CONFIG, { @@ -49,7 +38,7 @@ function Commissions({ isActive, doContinue }) { const locale = fromNamespace(namespaces.LOCALE)(data?.config) return ( -
+
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Footer.jsx b/new-lamassu-admin/src/pages/Wizard/components/Footer.jsx index 6a0c005c..42fce5c4 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Footer.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Footer.jsx @@ -1,60 +1,27 @@ import Drawer from '@mui/material/Drawer' import Grid from '@mui/material/Grid' -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' import React, { useState } from 'react' import Modal from 'src/components/Modal' import Stepper from 'src/components/Stepper' import { P, H2, Info2 } from 'src/components/typography' import { Button, Link } from 'src/components/buttons' -import { spacer } from 'src/styling/variables' - -const useStyles = makeStyles(() => ({ - drawer: { - borderTop: 'none', - boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)' - }, - wrapper: { - padding: '32px 0', - flexGrow: 1, - height: 264 - }, - smallWrapper: { - height: 84 - }, - title: { - margin: [[0, spacer * 4, 0, 0]] - }, - subtitle: { - marginTop: spacer, - marginBottom: 6, - lineHeight: 1.25, - display: 'inline' - }, - modal: { - background: 'none', - boxShadow: 'none' - } -})) function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) { - const classes = useStyles() const [fullExample, setFullExample] = useState(false) - const wrapperClassNames = { - [classes.wrapper]: true, - [classes.smallWrapper]: !open - } - return ( -
- + classes={{ paperAnchorDockedBottom: 'border-t-0 shadow-sm' }}> +
+ -

Setup Lamassu Admin

- {subtitle} +

Setup Lamassu Admin

+ {subtitle} {open &&

{text}

} { @@ -131,7 +98,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) { - ); + ) } export default Footer diff --git a/new-lamassu-admin/src/pages/Wizard/components/Locales.jsx b/new-lamassu-admin/src/pages/Wizard/components/Locales.jsx index e35b83f4..8ed67674 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Locales.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Locales.jsx @@ -1,12 +1,10 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React from 'react' import Section from 'src/components/layout/Section' import TitleSection from 'src/components/layout/TitleSection' import { Table as EditableTable } from 'src/components/editableTable' -import styles from 'src/pages/AddMachine/styles' import { mainFields, localeDefaults as defaults, @@ -16,8 +14,6 @@ import { toNamespace } from 'src/utils/config' import { getConfiguredCoins } from '../helper' -const useStyles = makeStyles(styles) - const GET_DATA = gql` query getData { config @@ -52,7 +48,6 @@ const SAVE_CONFIG = gql` ` function Locales({ isActive, doContinue }) { - const classes = useStyles() const { data } = useQuery(GET_DATA) const [saveConfig] = useMutation(SAVE_CONFIG, { @@ -72,7 +67,7 @@ function Locales({ isActive, doContinue }) { const onChangeCoin = (prev, curr, setValue) => setValue(curr) return ( -
+
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx b/new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx index fc07996d..b467a12b 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Mailgun.jsx @@ -1,5 +1,4 @@ import { useMutation, useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import React, { useState, useEffect } from 'react' import { H4, Info3 } from 'src/components/typography' import FormRenderer from 'src/pages/Services/FormRenderer' @@ -10,21 +9,9 @@ import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' import { ActionButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import mailgunSchema from 'src/pages/Services/schemas/mailgun' -import styles from 'src/pages/Wizard/Radio.styles' +import classes from 'src/pages/Wizard/Radio.module.css' import { fromNamespace, toNamespace, namespaces } from 'src/utils/config' -const useStyles = makeStyles({ - ...styles, - radioGroup: { - ...styles.radioGroup, - width: 768 - }, - radioLabel: { - ...styles.radioLabel, - width: 300 - } -}) - const GET_CONFIG = gql` { config @@ -55,7 +42,6 @@ const options = [ ] const Mailgun = () => { - const classes = useStyles() const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_CONFIG) const [saveAccounts] = useMutation(SAVE_ACCOUNTS) @@ -90,8 +76,8 @@ const Mailgun = () => {

Do you want to get notifications via email?

handleRadio(event.target.value)} diff --git a/new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx b/new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx index 6506312c..b547f0ca 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Notifications.jsx @@ -1,29 +1,13 @@ -import { makeStyles } from '@mui/styles' import Grid from '@mui/material/Grid' import React, { useState } from 'react' import Sidebar from 'src/components/layout/Sidebar' import TitleSection from 'src/components/layout/TitleSection' import Notifications from 'src/pages/Notifications/Notifications' -import addMachineStyles from 'src/pages/AddMachine/styles' import { namespaces } from 'src/utils/config' import Mailgun from './Mailgun' -const styles = { - ...addMachineStyles, - grid: { - flex: 1, - height: '100%' - }, - content: { - marginLeft: 48, - paddingTop: 15 - } -} - -const useStyles = makeStyles(styles) - const EMAIL = 'Email' const SETUP_CHANNELS = 'Setup channels' const TRANSACTION_ALERTS = 'Transaction alerts' @@ -40,21 +24,20 @@ const pages = [ const N = () => { const [selected, setSelected] = useState(EMAIL) - const classes = useStyles() const isSelected = it => selected === it return ( -
+
- + it} onClick={it => setSelected(it)} /> -
+
{isSelected(EMAIL) && } {isSelected(SETUP_CHANNELS) && ( +
{/* */}
) diff --git a/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx b/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx index 58526ab5..0b00f2b4 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Twilio.jsx @@ -1,5 +1,4 @@ import { useMutation, useQuery, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React, { useState } from 'react' import { HelpTooltip } from 'src/components/Tooltip' @@ -11,7 +10,8 @@ import { Button, SupportLinkButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import twilio from 'src/pages/Services/schemas/twilio' -import styles from './Wallet/Shared.styles' +import sharedClasses from './Wallet/Shared.module.css' +import classes from './Twilio.module.css' const GET_CONFIG = gql` { @@ -26,30 +26,6 @@ const SAVE_ACCOUNTS = gql` } ` -const useStyles = makeStyles({ - ...styles, - content: { - width: 820 - }, - radioLabel: { - ...styles.radioLabel, - width: 280 - }, - wrapper: { - width: 1200, - height: 100, - margin: [[0, 'auto']] - }, - title: { - marginLeft: 8, - marginBottom: 5 - }, - info: { - marginTop: 20, - marginBottom: 20 - } -}) - const options = [ { code: 'enable', @@ -62,7 +38,6 @@ const options = [ ] function Twilio({ doContinue }) { - const classes = useStyles() const [selected, setSelected] = useState(null) const [error, setError] = useState(false) @@ -89,8 +64,8 @@ function Twilio({ doContinue }) { } const titleClasses = { - [classes.title]: true, - [classes.error]: error + 'ml-2 mb-2': true, + [sharedClasses.error]: error } return ( @@ -115,7 +90,7 @@ function Twilio({ doContinue }) { )} {selected !== 'enable' && ( - )} diff --git a/new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css b/new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css new file mode 100644 index 00000000..30bd9e37 --- /dev/null +++ b/new-lamassu-admin/src/pages/Wizard/components/Twilio.module.css @@ -0,0 +1,24 @@ +.content { + width: 820px; +} + +.radioLabel { + width: 280px; + height: 48px; +} + +.wrapper { + width: 1200px; + height: 100px; + margin: 0 auto; +} + +.title { + margin-left: 8px; + margin-bottom: 5px; +} + +.info { + margin-top: 20px; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx index fd5ca065..f2c59217 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.jsx @@ -1,5 +1,4 @@ import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { P, H4 } from 'src/components/typography' @@ -9,9 +8,7 @@ import { Button } from 'src/components/buttons' import { NamespacedTable as EditableTable } from 'src/components/editableTable' import { toNamespace, namespaces } from 'src/utils/config' -import styles from './Shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Shared.module.css' const GET_INFO = gql` query getData { config @@ -37,8 +34,6 @@ const SAVE_CONFIG = gql` ` const AllSet = ({ data: currentData, doContinue }) => { - const classes = useStyles() - const { data } = useQuery(GET_INFO) const [saveConfig] = useMutation(SAVE_CONFIG, { onCompleted: doContinue diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx index a5d2605f..3cf99128 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.jsx @@ -1,5 +1,4 @@ import { useMutation, useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import React, { useState } from 'react' import { P, H4 } from 'src/components/typography' import FormRenderer from 'src/pages/Services/FormRenderer' @@ -8,16 +7,7 @@ import { SupportLinkButton, Button } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import blockcypherSchema from 'src/pages/Services/schemas/blockcypher' -import styles from './Shared.styles' - -const useStyles = makeStyles({ - ...styles, - radioGroup: styles.radioGroup, - radioLabel: { - ...styles.radioLabel, - width: 200 - } -}) +import classes from './Shared.module.css' const GET_CONFIG = gql` { @@ -42,8 +32,6 @@ const options = [ ] const Blockcypher = ({ addData }) => { - const classes = useStyles() - const { data } = useQuery(GET_CONFIG) const [saveConfig] = useMutation(SAVE_ACCOUNTS, { onCompleted: () => addData({ zeroConf: 'blockcypher' }) diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx index 0216bed3..adeb32b4 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.jsx @@ -1,5 +1,4 @@ import { useQuery, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import { Formik, Form, Field } from 'formik' import React, { useState } from 'react' import PromptWhenDirty from 'src/components/PromptWhenDirty' @@ -9,9 +8,7 @@ import * as Yup from 'yup' import { Button } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs/formik' -import styles from './Shared.styles' - -const useStyles = makeStyles(styles) +import classes from './Shared.module.css' const GET_CONFIG = gql` { @@ -27,7 +24,6 @@ const schema = Yup.object().shape({ }) const ChooseCoin = ({ addData }) => { - const classes = useStyles() const [error, setError] = useState(false) const { data } = useQuery(GET_CONFIG) diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx index cb117b79..4a5df8d9 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.jsx @@ -1,6 +1,5 @@ import { useQuery, useMutation, gql } from "@apollo/client"; import { getEquivalentCode } from '@lamassu/coins/lightUtils' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { H4, Info3 } from 'src/components/typography' @@ -11,11 +10,9 @@ import { Button, SupportLinkButton } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' import _schema from 'src/pages/Services/schemas' -import styles from './Shared.styles' +import classes from './Shared.module.css' import { getItems } from './getItems' -const useStyles = makeStyles(styles) - const GET_CONFIG = gql` { accounts @@ -42,7 +39,6 @@ const isConfigurable = it => !R.isNil(it) && !R.contains(it)(['mock-exchange', 'no-exchange']) const ChooseExchange = ({ data: currentData, addData }) => { - const classes = useStyles() const { data } = useQuery(GET_CONFIG) const [saveAccounts] = useMutation(SAVE_ACCOUNTS, { onCompleted: () => submit() diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx index 89e9d646..23c73a23 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.jsx @@ -1,6 +1,5 @@ import { useQuery, gql } from "@apollo/client"; import { getEquivalentCode } from '@lamassu/coins/lightUtils' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { H4 } from 'src/components/typography' @@ -8,11 +7,9 @@ import { H4 } from 'src/components/typography' import { Button } from 'src/components/buttons' import { RadioGroup } from 'src/components/inputs' -import styles from './Shared.styles' +import classes from './Shared.module.css' import { getItems } from './getItems' -const useStyles = makeStyles(styles) - const GET_CONFIG = gql` { accountsConfig { @@ -25,7 +22,6 @@ const GET_CONFIG = gql` ` const ChooseTicker = ({ data: currentData, addData }) => { - const classes = useStyles() const { data } = useQuery(GET_CONFIG) const [selected, setSelected] = useState(null) diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx index 64c6d0d7..e898d4d4 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.jsx @@ -1,5 +1,4 @@ import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import { H4, Info3 } from 'src/components/typography' @@ -11,11 +10,9 @@ import { RadioGroup } from 'src/components/inputs' import _schema from 'src/pages/Services/schemas' import bitgo from 'src/pages/Services/schemas/singlebitgo' -import styles from './Shared.styles' +import classes from './Shared.module.css' import { getItems } from './getItems' -const useStyles = makeStyles(styles) - const GET_CONFIG = gql` { accounts @@ -52,7 +49,6 @@ const isLocalHosted = it => ]) const ChooseWallet = ({ data: currentData, addData }) => { - const classes = useStyles() // no need to fetch exchange config here const schema = _schema() const { data } = useQuery(GET_CONFIG) diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css new file mode 100644 index 00000000..c52d200d --- /dev/null +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.module.css @@ -0,0 +1,45 @@ +.radioGroup { + flex-direction: row; + width: 600px; +} + +.radioLabel { + width: 150px; + height: 48px; +} + +.mdForm { + width: 385px; +} + +.infoMessage { + display: flex; + margin-bottom: 20px; +} + +.infoMessage > p { + width: 330px; + margin-top: 4px; + margin-left: 16px; +} + +.actionButton { + margin-bottom: 32px; +} + +.actionButtonLink { + text-decoration: none; + color: var(--zodiac); +} + +.error { + color: var(--tomato); +} + +.button { + margin-top: 40px; +} + +.formButton { + margin: 24px 0 0; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js deleted file mode 100644 index 4af8b17a..00000000 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js +++ /dev/null @@ -1,42 +0,0 @@ -import { errorColor, spacer, primaryColor } from 'src/styling/variables' - -const LABEL_WIDTH = 150 - -export default { - radioGroup: { - flexDirection: 'row', - width: 600 - }, - radioLabel: { - width: LABEL_WIDTH, - height: 48 - }, - mdForm: { - width: 385 - }, - infoMessage: { - display: 'flex', - marginBottom: 20, - '& > p': { - width: 330, - marginTop: 4, - marginLeft: 16 - } - }, - actionButton: { - marginBottom: spacer * 4 - }, - actionButtonLink: { - textDecoration: 'none', - color: primaryColor - }, - error: { - color: errorColor - }, - button: { - marginTop: spacer * 5 - }, - formButton: { - margin: [[spacer * 3, 0, 0]] - } -} diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx index 337bb4e7..0580b673 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.jsx @@ -1,11 +1,8 @@ -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState } from 'react' import Sidebar, { Stepper } from 'src/components/layout/Sidebar' import TitleSection from 'src/components/layout/TitleSection' -import styles from 'src/pages/AddMachine/styles' - import AllSet from './AllSet' import Blockcypher from './Blockcypher' import ChooseCoin from './ChooseCoin' @@ -13,8 +10,6 @@ import ChooseExchange from './ChooseExchange' import ChooseTicker from './ChooseTicker' import ChooseWallet from './ChooseWallet' -const useStyles = makeStyles(styles) - const steps = [ { label: 'Choose cryptocurrency', @@ -46,7 +41,6 @@ const Wallet = ({ doContinue }) => { const [step, setStep] = useState(0) const [data, setData] = useState({}) - const classes = useStyles() const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps) const Component = mySteps[step].component @@ -57,17 +51,17 @@ const Wallet = ({ doContinue }) => { } return ( -
-
+
+
-
+
{mySteps.map((it, idx) => ( ))} -
+
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx b/new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx index 221fe2a9..a970b212 100644 --- a/new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx +++ b/new-lamassu-admin/src/pages/Wizard/components/Welcome.jsx @@ -1,36 +1,13 @@ -import { makeStyles } from '@mui/styles' import React from 'react' import { H1, P } from 'src/components/typography' import { Button } from 'src/components/buttons' -import { comet } from 'src/styling/variables' - -const styles = { - welcome: { - textAlign: 'center', - paddingTop: 256 - }, - title: { - lineHeight: 1, - fontSize: 48 - }, - getStarted: { - fontSize: 24, - fontWeight: 500, - marginBottom: 54, - color: comet - } -} - -const useStyles = makeStyles(styles) function Welcome({ doContinue }) { - const classes = useStyles() - return ( -
-

Welcome to the Lamassu Admin

-

+

+

Welcome to the Lamassu Admin

+

To get you started, we’ve put together a wizard that will
help set up what you need before pairing your machines. diff --git a/new-lamassu-admin/src/pages/Wizard/helper.jsx b/new-lamassu-admin/src/pages/Wizard/helper.jsx index 193caf12..47035521 100644 --- a/new-lamassu-admin/src/pages/Wizard/helper.jsx +++ b/new-lamassu-admin/src/pages/Wizard/helper.jsx @@ -8,8 +8,6 @@ import { fromNamespace, namespaces } from 'src/utils/config' import Commissions from './components/Commissions' import Locale from './components/Locales' -// import Notifications from './components/Notifications' -// import WizardOperatorInfo from './components/OperatorInfo' import Twilio from './components/Twilio' import Wallet from './components/Wallet/Wallet' import Welcome from './components/Welcome' From 636cf0fc027dfc581ba7289f76dfc95cc272ac5a Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 09:27:07 +0100 Subject: [PATCH 21/27] partial: few missing pages migrations --- .../src/components/tables/DataTable.jsx | 9 +- .../components/tooltips/GraphTooltip.jsx | 1 - .../src/pages/Dashboard/Footer/Footer.jsx | 1 - .../Machines/MachineComponents/Overview.jsx | 2 +- .../Transactions/DataTable.jsx | 187 ------------------ .../Transactions/Transactions.jsx | 4 +- .../OperatorInfo/SMSNotices/SMSNotices.jsx | 24 +-- .../SMSNotices/SMSNotices.styles.js | 95 --------- .../SMSNotices/SMSNoticesModal.jsx | 21 +- .../src/pages/Transactions/DetailsCard.jsx | 2 +- 10 files changed, 28 insertions(+), 318 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.styles.js diff --git a/new-lamassu-admin/src/components/tables/DataTable.jsx b/new-lamassu-admin/src/components/tables/DataTable.jsx index 7027fec0..b1764cbd 100644 --- a/new-lamassu-admin/src/components/tables/DataTable.jsx +++ b/new-lamassu-admin/src/components/tables/DataTable.jsx @@ -105,6 +105,7 @@ const DataTable = ({ initialExpanded, onClick, loading, + maxWidth = 1200, emptyText, rowSize, ...props @@ -114,7 +115,7 @@ const DataTable = ({ useEffect(() => setExpanded(initialExpanded), [initialExpanded]) const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements) - const expWidth = 1200 - coreWidth + const expWidth = maxWidth - coreWidth const width = coreWidth + (expandable ? expWidth : 0) const classes = useStyles({ width }) @@ -170,7 +171,11 @@ const DataTable = ({ } return ( -

+
{elements.map(({ width, className, textAlign, header }, idx) => ( diff --git a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx b/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx index 67afc8c3..9c11e46e 100644 --- a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx +++ b/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx @@ -1,5 +1,4 @@ import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { memo } from 'react' import { Info2, Label3, P } from 'src/components/typography' diff --git a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx index 0e22d82c..6b751407 100644 --- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx +++ b/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.jsx @@ -1,5 +1,4 @@ import { useQuery, gql } from '@apollo/client' -import { makeStyles } from '@mui/styles' import BigNumber from 'bignumber.js' import * as R from 'ramda' import React from 'react' diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx index afbecce2..da3f939a 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.jsx @@ -47,7 +47,7 @@ const Overview = ({ data, onActionSuccess }) => {
Device ID -

+

{data.deviceId}

diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx deleted file mode 100644 index 488df09e..00000000 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.jsx +++ /dev/null @@ -1,187 +0,0 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' -import * as R from 'ramda' -import React, { useState, useEffect } from 'react' -import { - AutoSizer, - List, - CellMeasurer, - CellMeasurerCache -} from 'react-virtualized' -import { - Table, - TBody, - THead, - Tr, - Td, - Th -} from 'src/components/fake-table/Table' -import { H4 } from 'src/components/typography' -import ExpandClosedIcon from 'src/styling/icons/action/expand/closed.svg?react' -import ExpandOpenIcon from 'src/styling/icons/action/expand/open.svg?react' - -import styles from 'src/components/tables/DataTable.styles' - -const useStyles = makeStyles(styles) - -const Row = ({ - id, - elements, - data, - width, - Details, - expanded, - expandRow, - expWidth, - expandable, - onClick -}) => { - const classes = useStyles() - - const hasPointer = onClick || expandable - const trClasses = { - [classes.pointer]: hasPointer, - [classes.row]: true, - [classes.expanded]: expanded - } - - return ( -
-
-
{ - expandable && expandRow(id) - onClick && onClick(data) - }} - error={data.error} - errorMessage={data.errorMessage}> - {elements.map(({ view = it => it?.toString(), ...props }, idx) => ( - - ))} - {expandable && ( - - )} - - - {expandable && expanded && ( -
-
- - - - )} - - ) -} - -const DataTable = ({ - elements = [], - data = [], - Details, - className, - expandable, - initialExpanded, - onClick, - loading, - emptyText, - extraHeight, - ...props -}) => { - const [expanded, setExpanded] = useState(initialExpanded) - - useEffect(() => setExpanded(initialExpanded), [initialExpanded]) - - const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements) - const expWidth = 850 - coreWidth - const width = coreWidth + (expandable ? expWidth : 0) - - const classes = useStyles({ width }) - - const expandRow = id => { - setExpanded(id === expanded ? null : id) - } - - const cache = new CellMeasurerCache({ - defaultHeight: 62, - fixedWidth: true - }) - - function rowRenderer({ index, key, parent, style }) { - return ( - -
- -
- - ) - } - - return ( -
-
- {view(data)} - - -
-
-
- - {elements.map(({ width, className, textAlign, header }, idx) => ( - - ))} - {expandable && } - - - {loading &&

Loading...

} - {!loading && R.isEmpty(data) &&

{emptyText}

} - - {() => ( - - )} - - -
- {header} -
-
- ) -} - -export default DataTable diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.jsx b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.jsx index b44e2787..aac44707 100644 --- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.jsx +++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.jsx @@ -11,7 +11,7 @@ import { getStatus } from 'src/pages/Transactions/helper' import * as Customer from 'src/utils/customer' import { formatDate } from 'src/utils/timezones' -import DataTable from './DataTable' +import DataTable from 'src/components/tables/DataTable' const NUM_LOG_RESULTS = 5 @@ -164,6 +164,8 @@ const Transactions = ({ id }) => { { - const classes = useStyles(coords) - const matches = { '#code': 123, '#timestamp': formatDate(new Date(), timezone, 'HH:mm') } return ( -
-
-
+
+
+
- +

{R.isEmpty(sms?.message) ? ( No content available @@ -117,8 +113,6 @@ const SMSPreview = ({ sms, coords, timezone }) => { } const SMSNotices = () => { - const classes = useStyles() - const [showModal, setShowModal] = useState(false) const [selectedSMS, setSelectedSMS] = useState(null) const [previewOpen, setPreviewOpen] = useState(false) @@ -160,7 +154,7 @@ const SMSNotices = () => { textAlign: 'left', view: it => !R.isEmpty(TOOLTIPS[it.event]) ? ( -

+
{R.prop('messageName', it)}

{TOOLTIPS[it.event]}

@@ -237,7 +231,7 @@ const SMSNotices = () => { return ( <> -
+

SMS notices

diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.styles.js b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.styles.js deleted file mode 100644 index 65e39737..00000000 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.styles.js +++ /dev/null @@ -1,95 +0,0 @@ -import { - spacer, - fontMonospaced, - fontSize5, - fontColor -} from 'src/styling/variables' - -const styles = { - header: { - display: 'flex', - position: 'relative', - alignItems: 'center', - justifyContent: 'space-between', - width: 800 - }, - form: { - '& > *': { - marginTop: 20 - }, - display: 'flex', - flexDirection: 'column', - height: '100%' - }, - footer: { - display: 'flex', - flexDirection: 'row', - margin: [['auto', 0, spacer * 3, 0]] - }, - submit: { - margin: [['auto', 0, 0, 'auto']] - }, - smsPreview: { - position: 'absolute', - left: ({ x }) => x, - bottom: ({ y }) => y, - width: 350, - overflow: 'visible' - }, - smsPreviewContainer: { - display: 'flex', - flexDirection: 'row', - alignItems: 'flex-end', - '& > *': { - marginRight: 10 - } - }, - smsPreviewIcon: { - display: 'flex', - width: 36, - height: 36, - borderRadius: 18, - backgroundColor: '#16D6D3', - alignItems: 'center', - justifyContent: 'center' - }, - smsPreviewContent: { - width: 225, - padding: 15, - borderRadius: '15px 15px 15px 0px' - }, - chipButtons: { - width: 480, - display: 'flex', - flexDirection: 'column', - alignItems: 'space-between', - '& > div': { - marginTop: 15 - }, - '& > div:first-child': { - marginTop: 0 - }, - '& > div > div': { - margin: [[0, 5, 0, 5]] - }, - '& > div > div > span': { - lineHeight: '120%', - color: fontColor, - fontSize: fontSize5, - fontFamily: fontMonospaced, - fontWeight: 500 - }, - marginLeft: 'auto', - marginRight: 'auto' - }, - resetToDefault: { - width: 145 - }, - messageWithTooltip: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center' - } -} - -export default styles diff --git a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx index 745891b7..4939df23 100644 --- a/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx +++ b/new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNoticesModal.jsx @@ -1,5 +1,4 @@ import Chip from '@mui/material/Chip' -import { makeStyles } from '@mui/styles' import { Form, Formik, Field } from 'formik' import * as R from 'ramda' import React from 'react' @@ -14,10 +13,6 @@ import { ActionButton, Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import { zircon } from 'src/styling/variables' -import styles from './SMSNotices.styles' - -const useStyles = makeStyles(styles) - const getErrorMsg = (formikErrors, formikTouched, mutationError) => { if (!formikErrors || !formikTouched) return null if (mutationError) return 'Internal server error' @@ -77,8 +72,6 @@ const SMSNoticesModal = ({ creationError, submit }) => { - const classes = useStyles() - const initialValues = { event: !R.isNil(sms) ? sms.event : '', message: !R.isNil(sms) ? sms.message : '' @@ -128,12 +121,12 @@ const SMSNoticesModal = ({ handleSubmit(values, errors, touched) }> {({ values, errors, touched, setFieldValue }) => ( - + setFieldValue('message', DEFAULT_MESSAGES[sms?.event]) @@ -151,9 +144,9 @@ const SMSNoticesModal = ({ {R.length(CHIPS[sms?.event]) > 0 && ( Values to attach )} -

+
{R.splitEvery(3, CHIPS[sms?.event]).map((it, idx) => ( -
+
{it.map((ite, idx2) => ( { setFieldValue( 'message', @@ -176,7 +169,7 @@ const SMSNoticesModal = ({
))}
-
+
{getErrorMsg(errors, touched, creationError) && ( {getErrorMsg(errors, touched, creationError)} @@ -185,7 +178,7 @@ const SMSNoticesModal = ({
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx b/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx index 1f3cd6e4..e07ec7ab 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx +++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.jsx @@ -384,7 +384,7 @@ const DetailsRow = ({ it: tx, timezone }) => { {tx.id}
-
+
{errorElements} {((tx.txClass === 'cashOut' && getStatus(tx) === 'Pending') || From 8cd7374ee887ba2d145848ecc93e249e71054b15 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 14:46:32 +0100 Subject: [PATCH 22/27] partial: dangling components css migration --- new-lamassu-admin/src/components/Carousel.jsx | 22 +-- .../src/components/ConfirmDialog.jsx | 43 ++---- .../src/components/CopyToClipboard.jsx | 1 - .../src/components/DeleteDialog.jsx | 41 +---- .../src/components/ErrorMessage.jsx | 34 +---- .../src/components/ImagePopper.jsx | 28 ++-- .../src/components/ImagePopper.styles.js | 25 --- .../src/components/InformativeDialog.jsx | 36 +---- .../src/components/LogsDownloaderPopper.jsx | 143 ++++-------------- new-lamassu-admin/src/components/Modal.jsx | 126 ++++++--------- new-lamassu-admin/src/components/Popper.jsx | 128 ++-------------- .../src/components/Popper.module.css | 33 ++++ .../src/components/SearchBox.jsx | 33 ++-- .../src/components/SearchBox.styles.js | 78 ---------- .../src/components/SearchFilter.jsx | 23 +-- .../src/components/SearchFilter.styles.js | 62 -------- new-lamassu-admin/src/components/Status.jsx | 53 +------ new-lamassu-admin/src/components/Stepper.jsx | 73 ++------- .../src/components/Stepper.module.css | 12 ++ new-lamassu-admin/src/components/Subtitle.jsx | 19 +-- .../src/components/TableLabel.jsx | 35 ----- new-lamassu-admin/src/components/Title.jsx | 13 +- new-lamassu-admin/src/components/Tooltip.jsx | 27 ++-- new-lamassu-admin/src/components/Uptime.jsx | 93 ------------ .../src/components/buttons/IDButton.jsx | 1 - .../Customers/components/EditableCard.jsx | 3 +- .../src/pages/{ => Funding}/Funding.jsx | 18 ++- .../pages/{ => Funding}/Funding.module.css | 0 .../src/pages/Funding/TableLabel.jsx | 20 +++ .../src/pages/{ => Logs}/Logs.module.css | 0 .../src/pages/{ => Logs}/MachineLogs.jsx | 21 ++- .../src/pages/{ => Logs}/ServerLogs.jsx | 16 +- .../pages/{ => Logs}/ServerLogs.module.css | 2 +- new-lamassu-admin/src/pages/Logs/Uptime.jsx | 33 ++++ .../src/routing/lamassu.routes.jsx | 6 +- .../src/styling/global/global.css | 4 +- new-lamassu-admin/src/styling/theme.js | 32 +++- 37 files changed, 343 insertions(+), 994 deletions(-) delete mode 100644 new-lamassu-admin/src/components/ImagePopper.styles.js create mode 100644 new-lamassu-admin/src/components/Popper.module.css delete mode 100644 new-lamassu-admin/src/components/SearchBox.styles.js delete mode 100644 new-lamassu-admin/src/components/SearchFilter.styles.js create mode 100644 new-lamassu-admin/src/components/Stepper.module.css delete mode 100644 new-lamassu-admin/src/components/TableLabel.jsx delete mode 100644 new-lamassu-admin/src/components/Uptime.jsx rename new-lamassu-admin/src/pages/{ => Funding}/Funding.jsx (96%) rename new-lamassu-admin/src/pages/{ => Funding}/Funding.module.css (100%) create mode 100644 new-lamassu-admin/src/pages/Funding/TableLabel.jsx rename new-lamassu-admin/src/pages/{ => Logs}/Logs.module.css (100%) rename new-lamassu-admin/src/pages/{ => Logs}/MachineLogs.jsx (90%) rename new-lamassu-admin/src/pages/{ => Logs}/ServerLogs.jsx (93%) rename new-lamassu-admin/src/pages/{ => Logs}/ServerLogs.module.css (83%) create mode 100644 new-lamassu-admin/src/pages/Logs/Uptime.jsx diff --git a/new-lamassu-admin/src/components/Carousel.jsx b/new-lamassu-admin/src/components/Carousel.jsx index 6b610a6c..6fa2ece5 100644 --- a/new-lamassu-admin/src/components/Carousel.jsx +++ b/new-lamassu-admin/src/components/Carousel.jsx @@ -1,27 +1,9 @@ -import { makeStyles } from '@mui/styles' import React, { memo } from 'react' import ReactCarousel from 'react-material-ui-carousel' import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react' import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react' -const useStyles = makeStyles({ - imgWrapper: { - alignItems: 'center', - justifyContent: 'center', - display: 'flex' - }, - imgInner: { - objectFit: 'contain', - objectPosition: 'center', - width: 500, - height: 400, - marginBottom: 40 - } -}) - export const Carousel = memo(({ photosData, slidePhoto }) => { - const classes = useStyles() - return ( <> { prev={activeIndex => slidePhoto(activeIndex)}> {photosData.map((item, i) => (
-
+
diff --git a/new-lamassu-admin/src/components/ConfirmDialog.jsx b/new-lamassu-admin/src/components/ConfirmDialog.jsx index 487b2798..099c3656 100644 --- a/new-lamassu-admin/src/components/ConfirmDialog.jsx +++ b/new-lamassu-admin/src/components/ConfirmDialog.jsx @@ -2,49 +2,25 @@ import Dialog from '@mui/material/Dialog' import DialogActions from '@mui/material/DialogActions' import DialogContent from '@mui/material/DialogContent' import InputLabel from '@mui/material/InputLabel' -import { makeStyles } from '@mui/styles' import React, { memo, useState } from 'react' import { H4, P } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import { Button, IconButton } from 'src/components/buttons' import { TextInput } from 'src/components/inputs' -import { spacer } from 'src/styling/variables' import ErrorMessage from './ErrorMessage' -const useStyles = makeStyles({ - dialogContent: { - width: 434, - padding: spacer * 2, - paddingRight: spacer * 3.5 - }, - dialogTitle: { - padding: spacer * 2, - paddingRight: spacer * 1.5, - display: 'flex', - 'justify-content': 'space-between', - '& > h4': { - margin: 0 - }, - '& > button': { - padding: 0, - marginTop: -(spacer / 2) - } - }, - dialogActions: { - padding: spacer * 4, - paddingTop: spacer * 2 - } -}) - export const DialogTitle = ({ children, onClose }) => { - const classes = useStyles() return ( -
+
{children} {onClose && ( - + )} @@ -67,7 +43,6 @@ export const ConfirmDialog = memo( disabled = false, ...props }) => { - const classes = useStyles() const [value, setValue] = useState(initialValue) const [error, setError] = useState(false) const handleChange = event => setValue(event.target.value) @@ -84,7 +59,7 @@ export const ConfirmDialog = memo( return ( -

{title}

+

{title}

 {errorMessage && ( @@ -98,7 +73,7 @@ export const ConfirmDialog = memo( )} - + {message &&

{message}

} {confirmationMessage} - + diff --git a/new-lamassu-admin/src/components/ErrorMessage.jsx b/new-lamassu-admin/src/components/ErrorMessage.jsx index e5ff4efc..d60e9cb5 100644 --- a/new-lamassu-admin/src/components/ErrorMessage.jsx +++ b/new-lamassu-admin/src/components/ErrorMessage.jsx @@ -1,38 +1,16 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react' -import { errorColor } from 'src/styling/variables' - import { Info3 } from './typography' -const styles = { - wrapper: { - display: 'flex', - alignItems: 'center', - '& > svg': { - marginRight: 10 - } - }, - message: { - display: 'flex', - alignItems: 'center', - color: errorColor, - margin: 0, - whiteSpace: 'break-spaces' - } -} - -const useStyles = makeStyles(styles) - -const ErrorMessage = ({ className, children, ...props }) => { - const classes = useStyles() - +const ErrorMessage = ({ className, children }) => { return ( -
- - {children} +
+ + + {children} +
) } diff --git a/new-lamassu-admin/src/components/ImagePopper.jsx b/new-lamassu-admin/src/components/ImagePopper.jsx index 8053819e..500ac5c8 100644 --- a/new-lamassu-admin/src/components/ImagePopper.jsx +++ b/new-lamassu-admin/src/components/ImagePopper.jsx @@ -1,5 +1,4 @@ import ClickAwayListener from '@mui/material/ClickAwayListener' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React, { memo, useState } from 'react' import Popper from 'src/components/Popper' @@ -8,18 +7,8 @@ import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react' import { FeatureButton } from 'src/components/buttons' -import imagePopperStyles from './ImagePopper.styles' - -const useStyles = makeStyles(imagePopperStyles) - const ImagePopper = memo( ({ className, width, height, popupWidth, popupHeight, src }) => { - const classes = useStyles({ - width, - height, - popupWidth, - popupHeight - }) const [popperAnchorEl, setPopperAnchorEl] = useState(null) const handleOpenPopper = event => { @@ -38,17 +27,24 @@ const ImagePopper = memo( return ( -
- +
+ -
- +
+
diff --git a/new-lamassu-admin/src/components/ImagePopper.styles.js b/new-lamassu-admin/src/components/ImagePopper.styles.js deleted file mode 100644 index f30c8f3e..00000000 --- a/new-lamassu-admin/src/components/ImagePopper.styles.js +++ /dev/null @@ -1,25 +0,0 @@ -export default { - row: { - display: 'flex', - flexDirection: 'row' - }, - image: ({ width, height }) => ({ - objectFit: 'cover', - borderRadius: '8px 0px 0px 8px', - width, - height - }), - popupImage: ({ popupWidth, popupHeight }) => ({ - objectFit: 'cover', - width: popupWidth, - height: popupHeight - }), - button: ({ height }) => ({ - borderRadius: '0px 8px 8px 0px', - height - }), - popoverContent: { - display: 'block', - padding: [[10, 15]] - } -} diff --git a/new-lamassu-admin/src/components/InformativeDialog.jsx b/new-lamassu-admin/src/components/InformativeDialog.jsx index a4c0a8f8..86e94dd0 100644 --- a/new-lamassu-admin/src/components/InformativeDialog.jsx +++ b/new-lamassu-admin/src/components/InformativeDialog.jsx @@ -1,43 +1,13 @@ import Dialog from '@mui/material/Dialog' import DialogContent from '@mui/material/DialogContent' -import { makeStyles } from '@mui/styles' import React, { memo } from 'react' import { H1 } from 'src/components/typography' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import { IconButton } from 'src/components/buttons' -import { spacer } from 'src/styling/variables' - -const useStyles = makeStyles({ - closeButton: { - display: 'flex', - padding: [[spacer * 2, spacer * 2, 0, spacer * 2]], - paddingRight: spacer * 1.5, - justifyContent: 'end' - }, - title: { - margin: [[0, spacer * 2, spacer, spacer * 2 + 4]] - } -}) - -export const DialogTitle = ({ children, onClose }) => { - const classes = useStyles() - return ( -
- {children} - {onClose && ( - - - - )} -
- ) -} export const InformativeDialog = memo( ({ title = '', open, onDissmised, disabled = false, data, ...props }) => { - const classes = useStyles() - const innerOnClose = () => { onDissmised() } @@ -53,13 +23,13 @@ export const InformativeDialog = memo( open={open} aria-labelledby="form-dialog-title" {...props}> -
+
-

{title}

- {data} +

{title}

+ {data}
) } diff --git a/new-lamassu-admin/src/components/LogsDownloaderPopper.jsx b/new-lamassu-admin/src/components/LogsDownloaderPopper.jsx index ff877809..67ec9087 100644 --- a/new-lamassu-admin/src/components/LogsDownloaderPopper.jsx +++ b/new-lamassu-admin/src/components/LogsDownloaderPopper.jsx @@ -1,6 +1,5 @@ -import { useLazyQuery } from "@apollo/client"; +import { useLazyQuery } from '@apollo/client' import ClickAwayListener from '@mui/material/ClickAwayListener' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import { format, set } from 'date-fns/fp' import FileSaver from 'file-saver' @@ -11,68 +10,32 @@ import DownloadInverseIcon from 'src/styling/icons/button/download/white.svg?rea import Download from 'src/styling/icons/button/download/zodiac.svg?react' import { FeatureButton, Link } from 'src/components/buttons' -import { primaryColor, offColor, zircon } from 'src/styling/variables' import { formatDate } from 'src/utils/timezones' import Popper from './Popper' import DateRangePicker from './date-range-picker/DateRangePicker' import { RadioGroup } from './inputs' import typographyStyles from './typography/styles' +import { H4, Info1, Label1, Label2 } from './typography/index.jsx' -const { info1, label1, label2, h4 } = typographyStyles - -const dateContainerStyles = { - wrapper: { - height: 46, - width: 99 - }, - container: { - display: 'flex' - }, - monthWeekDayContainer: { - display: 'flex', - flexDirection: 'column' - }, - label: { - extend: label1, - lineHeight: 1.33, - color: primaryColor - }, - bigNumber: { - extend: info1, - lineHeight: 1, - marginRight: 7 - }, - monthYear: { - extend: label2, - lineHeight: 1.17, - color: primaryColor - }, - weekDay: { - extend: label1, - lineHeight: 1.33, - color: offColor - } -} - -const dateContainerUseStyles = makeStyles(dateContainerStyles) - -const DateContainer = ({ date, children, ...props }) => { - const classes = dateContainerUseStyles() - +const DateContainer = ({ date, children }) => { return ( -
-
{children}
+
+ {children} {date && ( <> -
-
{format('d', date)}
-
- {`${format( +
+ + {format('d', date)} + +
+ {`${format( 'MMM', date - )} ${format('yyyy', date)}`} - {format('EEEE', date)} + )} ${format('yyyy', date)}`} + + {format('EEEE', date)} +
@@ -81,54 +44,6 @@ const DateContainer = ({ date, children, ...props }) => { ) } -const styles = { - popoverContent: { - width: 280 - }, - popoverHeader: { - extend: h4, - padding: [[15, 15, 0, 15]] - }, - radioButtonsContainer: { - padding: [[5, 15, 5, 15]] - }, - radioButtons: { - display: 'flex', - justifyContent: 'space-between', - flexDirection: 'row', - color: primaryColor - }, - dateRangePickerShowing: { - display: 'block', - height: '100%' - }, - dateRangePickerHidden: { - display: 'none', - height: 0 - }, - download: { - padding: [[10, 15]] - }, - dateContainerWrapper: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - position: 'relative', - backgroundColor: zircon, - padding: [[0, 15]], - minHeight: 70 - }, - arrowContainer: { - position: 'absolute', - left: 125, - top: 26 - }, - arrow: { - margin: 'auto' - } -} - -const useStyles = makeStyles(styles) const ALL = 'all' const RANGE = 'range' const ADVANCED = 'advanced' @@ -153,11 +68,9 @@ const LogsDownloaderPopover = ({ onCompleted: data => createLogsFile(getLogs(data), range) }) - const classes = useStyles() - const dateRangePickerClasses = { - [classes.dateRangePickerShowing]: selectedRadio === RANGE, - [classes.dateRangePickerHidden]: selectedRadio === ALL + 'block h-full': selectedRadio === RANGE, + hidden: selectedRadio === ALL } const handleRadioButtons = evt => { @@ -255,26 +168,28 @@ const LogsDownloaderPopover = ({ variant="contained" /> -
-
{title}
-
+
+

+ {title} +

+
{selectedRadio === RANGE && (
-
+
{range && ( <> From -
- +
+
To @@ -295,18 +210,18 @@ const LogsDownloaderPopover = ({
)} {simplified && ( -
+
)} -
+
downloadLogs(range, args)}> Download diff --git a/new-lamassu-admin/src/components/Modal.jsx b/new-lamassu-admin/src/components/Modal.jsx index ad750571..c9c866c2 100644 --- a/new-lamassu-admin/src/components/Modal.jsx +++ b/new-lamassu-admin/src/components/Modal.jsx @@ -1,6 +1,5 @@ import MaterialModal from '@mui/material/Modal' import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import { H1, H4 } from 'src/components/typography' @@ -8,68 +7,6 @@ import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react' import { IconButton } from 'src/components/buttons' -const styles = { - modal: { - display: 'flex', - justifyContent: 'center', - flexDirection: 'column', - alignItems: 'center' - }, - wrapper: ({ width, height }) => ({ - width, - height, - display: 'flex', - flexDirection: 'column', - minHeight: height ?? 400, - maxHeight: '90vh', - overflowY: 'auto', - borderRadius: 8, - outline: 0 - }), - infoPanelWrapper: ({ width, infoPanelHeight }) => ({ - width, - height: infoPanelHeight, - marginTop: 16, - display: 'flex', - flexDirection: 'column', - minHeight: infoPanelHeight ?? 200, - maxHeight: '90vh', - overflowY: 'auto', - borderRadius: 8, - outline: 0 - }), - panelContent: { - width: '100%', - display: 'flex', - flexDirection: 'column', - flex: 1, - padding: [[0, 24]] - }, - content: ({ small, xl }) => ({ - width: '100%', - display: 'flex', - flexDirection: 'column', - flex: 1, - padding: xl ? [[0, 60 + 28]] : small ? [[0, 16]] : [[0, 32]] - }), - button: ({ small, xl }) => ({ - padding: [[0, 0, 0, 0]], - margin: xl - ? [[0, 0, 'auto', 'auto']] - : small - ? [[12, 12, 'auto', 'auto']] - : [[16, 16, 'auto', 'auto']] - }), - header: { - display: 'flex' - }, - title: ({ small }) => ({ - margin: small ? [[20, 0, 8, 16]] : [[28, 0, 8, 32]] - }) -} - -const useStyles = makeStyles(styles) - const Modal = ({ width, height, @@ -86,7 +23,6 @@ const Modal = ({ closeOnBackdropClick, ...props }) => { - const classes = useStyles({ width, height, small, infoPanelHeight, xl }) const TitleCase = small ? H4 : H1 const closeSize = xl ? 28 : small ? 16 : 20 @@ -96,24 +32,60 @@ const Modal = ({ handleClose() } + const marginBySize = xl ? 0 : small ? 12 : 16 + const paddingBySize = xl ? 88 : small ? 16 : 32 return ( - + <> - -
- {title && {title}} - handleClose()}> - - + +
+ {title && ( + + {title} + + )} +
+ handleClose()}> + + +
+
+
+ {children}
-
{children}
 {infoPanel && ( - -
{infoPanel}
+ +
+ {infoPanel} +
)} diff --git a/new-lamassu-admin/src/components/Popper.jsx b/new-lamassu-admin/src/components/Popper.jsx index 75159a0a..d440b987 100644 --- a/new-lamassu-admin/src/components/Popper.jsx +++ b/new-lamassu-admin/src/components/Popper.jsx @@ -1,120 +1,15 @@ import MaterialPopper from '@mui/material/Popper' import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { useState } from 'react' import { white } from 'src/styling/variables' +import classes from './Popper.module.css' -const Popover = ({ - children, - bgColor = white, - arrowSize = 6, - className, - ...props -}) => { +const Popover = ({ children, bgColor = white, className, ...props }) => { const [arrowRef, setArrowRef] = useState(null) - const styles = { - popover: { - zIndex: 3000, - backgroundColor: bgColor, - borderRadius: 4 - }, - arrow: { - position: 'absolute', - fontSize: arrowSize, - width: '3em', - height: '3em' - }, - arrowBottom: { - top: 0, - width: 0, - height: 0, - borderLeft: [['2em', 'solid', 'transparent']], - borderRight: [['2em', 'solid', 'transparent']], - borderBottom: [['2em', 'solid', bgColor]], - marginTop: '-1.9em', - '&:after': { - zIndex: -10, - content: '""', - position: 'absolute', - width: arrowSize * 3, - height: arrowSize * 3, - marginLeft: 0, - bottom: 0, - top: 'calc(50% - 0px)', - left: 0, - border: '5px solid #fff', - borderColor: 'transparent transparent #fff #fff', - transformOrigin: '0 0', - transform: 'rotate(45deg)', - boxShadow: - '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)' - } - }, - arrowTop: { - bottom: 0, - width: 0, - height: 0, - borderLeft: [['2em', 'solid', 'transparent']], - borderRight: [['2em', 'solid', 'transparent']], - borderTop: [['2em', 'solid', bgColor]], - marginBottom: '-1.9em', - '&:after': { - zIndex: -10, - content: '""', - position: 'absolute', - width: arrowSize * 3, - height: arrowSize * 3, - marginLeft: 0, - bottom: 0, - top: -(arrowSize * 4 + 2), - left: 0, - border: '5px solid #fff', - borderColor: 'transparent transparent #fff #fff', - transformOrigin: '0 0', - transform: 'rotate(45deg)', - boxShadow: - '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)' - } - }, - arrowRight: { - left: 0, - width: 0, - height: 0, - borderTop: [['2em', 'solid', 'transparent']], - borderBottom: [['2em', 'solid', 'transparent']], - borderRight: [['2em', 'solid', bgColor]], - marginLeft: '-1.9em' - }, - arrowLeft: { - right: 0, - width: 0, - height: 0, - borderTop: [['2em', 'solid', 'transparent']], - borderBottom: [['2em', 'solid', 'transparent']], - borderLeft: [['2em', 'solid', bgColor]], - marginRight: '-1.9em' - }, - root: { - backgroundColor: bgColor - } - } - - const useStyles = makeStyles(styles) - - const classes = useStyles() - - const getArrowClasses = placement => ({ - [classes.arrow]: true, - [classes.arrowBottom]: placement === 'bottom', - [classes.arrowTop]: placement === 'top', - [classes.arrowRight]: placement === 'right', - [classes.arrowLeft]: placement === 'left' - }) - const flipPlacements = { top: ['bottom'], bottom: ['top'], @@ -164,17 +59,16 @@ const Popover = ({ - {({ placement }) => ( - - - {children} - - )} + + + {children} + ) diff --git a/new-lamassu-admin/src/components/Popper.module.css b/new-lamassu-admin/src/components/Popper.module.css new file mode 100644 index 00000000..66826b91 --- /dev/null +++ b/new-lamassu-admin/src/components/Popper.module.css @@ -0,0 +1,33 @@ +.newArrow, +.newArrow::before { + position: absolute; + width: 8px; + height: 8px; + background: inherit; +} + +.newArrow { + visibility: hidden; +} + +.newArrow::before { + visibility: visible; + content: ''; + transform: rotate(45deg); +} + +.tooltip[data-popper-placement^='top'] > div > span { + bottom: -4px; +} + +.tooltip[data-popper-placement^='bottom'] > div > span { + top: -4px; +} + +.tooltip[data-popper-placement^='left'] > div > span { + right: -4px; +} + +.tooltip[data-popper-placement^='right'] > div > span { + left: -4px; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/SearchBox.jsx b/new-lamassu-admin/src/components/SearchBox.jsx index 0ef4d95e..4445e569 100644 --- a/new-lamassu-admin/src/components/SearchBox.jsx +++ b/new-lamassu-admin/src/components/SearchBox.jsx @@ -1,16 +1,11 @@ import InputBase from '@mui/material/InputBase' import Paper from '@mui/material/Paper' -import { makeStyles } from '@mui/styles' import MAutocomplete from '@mui/material/Autocomplete' import classnames from 'classnames' import React, { memo, useState } from 'react' import { P } from 'src/components/typography' import SearchIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react' -import styles from './SearchBox.styles' - -const useStyles = makeStyles(styles) - const SearchBox = memo( ({ loading = false, @@ -21,13 +16,11 @@ const SearchBox = memo( onChange, ...props }) => { - const classes = useStyles({ size }) - const [popupOpen, setPopupOpen] = useState(false) const inputClasses = { - [classes.input]: true, - [classes.inputWithPopup]: popupOpen + 'flex flex-1 h-8 px-2 py-2 font-md items-center rounded-2xl bg-zircon text-comet': true, + 'rounded-b-none': popupOpen } const innerOnChange = filters => onChange(filters) @@ -35,15 +28,16 @@ const SearchBox = memo( return ( it.label || it.value} renderOption={(props, it) => (
  • -
    -

    {it.label || it.value}

    -

    {it.type}

    +
    +

    + {it.label || it.value} +

    +

    {it.type}

    • )} @@ -54,8 +48,10 @@ const SearchBox = memo( filterSelectedOptions isOptionEqualToValue={(option, value) => option.type === value.type} PaperComponent={({ children }) => ( - -
    + +
    {children} )} @@ -65,13 +61,10 @@ const SearchBox = memo( ref={params.InputProps.ref} {...params} className={classnames(inputClasses)} - startAdornment={} + startAdornment={} placeholder={inputPlaceholder} inputProps={{ - className: classes.bold, - classes: { - root: classes.size - }, + className: 'font-bold', ...params.inputProps }} /> diff --git a/new-lamassu-admin/src/components/SearchBox.styles.js b/new-lamassu-admin/src/components/SearchBox.styles.js deleted file mode 100644 index 336f3ff7..00000000 --- a/new-lamassu-admin/src/components/SearchBox.styles.js +++ /dev/null @@ -1,78 +0,0 @@ -import baseButtonStyles from 'src/components/buttons/BaseButton.styles' -import { bySize, bold } from 'src/styling/helpers' -import { zircon, comet, primaryColor } from 'src/styling/variables' - -const { baseButton } = baseButtonStyles - -const searchBoxBorderRadius = baseButton.height / 2 -const searchBoxHeight = 32 -const popupBorderRadiusFocus = baseButton.height / 4 - -const hoverColor = 'rgba(0, 0, 0, 0.08)' -const boxShadow = `0 4px 4px 0 ${hoverColor}` - -const styles = { - size: ({ size }) => ({ - marginTop: size === 'lg' ? 0 : 2, - ...bySize(size) - }), - bold, - autocomplete: { - '&[data-focus="true"]': { - backgroundColor: hoverColor - } - }, - popup: { - display: 'flex', - flexDirection: 'column', - borderRadius: [[0, 0, popupBorderRadiusFocus, popupBorderRadiusFocus]], - backgroundColor: zircon, - boxShadow - }, - separator: { - width: '88%', - height: 1, - margin: '0 auto', - border: 'solid 0.5px', - borderColor: comet - }, - item: { - display: 'flex', - flexDirection: 'row', - width: '100%', - height: 36, - alignItems: 'center' - }, - itemLabel: { - margin: [0], - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis' - }, - itemType: { - marginLeft: 'auto', - fontSize: 12, - color: comet, - margin: [0] - }, - input: { - display: 'flex', - flex: 1, - width: 273, - padding: [[8, 12]], - alignItems: 'center', - height: searchBoxHeight, - borderRadius: searchBoxBorderRadius, - backgroundColor: zircon, - color: primaryColor - }, - inputWithPopup: { - borderRadius: [[popupBorderRadiusFocus, popupBorderRadiusFocus, 0, 0]], - boxShadow - }, - iconButton: { - marginRight: 12 - } -} - -export default styles diff --git a/new-lamassu-admin/src/components/SearchFilter.jsx b/new-lamassu-admin/src/components/SearchFilter.jsx index d16891e4..bff5cb95 100644 --- a/new-lamassu-admin/src/components/SearchFilter.jsx +++ b/new-lamassu-admin/src/components/SearchFilter.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import Chip from '@mui/material/Chip' import React from 'react' import { P, Label3 } from 'src/components/typography' @@ -9,38 +8,29 @@ import ReverseFilterIcon from 'src/styling/icons/button/filter/zodiac.svg?react' import { ActionButton } from 'src/components/buttons' import { onlyFirstToUpper, singularOrPlural } from 'src/utils/string' -import { chipStyles, styles } from './SearchFilter.styles' - -const useChipStyles = makeStyles(chipStyles) -const useStyles = makeStyles(styles) - const SearchFilter = ({ filters, onFilterDelete, deleteAllFilters, entries = 0 }) => { - const chipClasses = useChipStyles() - const classes = useStyles() - return ( <> -

    {'Filters:'}

    -
    -
    +

    {'Filters:'}

    +
    +
    {filters.map((f, idx) => ( onFilterDelete(f)} - deleteIcon={} + deleteIcon={} /> ))}
    -
    +
    { - {`${entries} ${singularOrPlural( + {`${entries} ${singularOrPlural( entries, `entry`, `entries` @@ -50,7 +40,6 @@ const SearchFilter = ({ color="secondary" Icon={ReverseFilterIcon} InverseIcon={FilterIcon} - className={classes.deleteButton} onClick={deleteAllFilters}> Delete filters diff --git a/new-lamassu-admin/src/components/SearchFilter.styles.js b/new-lamassu-admin/src/components/SearchFilter.styles.js deleted file mode 100644 index fd2f8ccb..00000000 --- a/new-lamassu-admin/src/components/SearchFilter.styles.js +++ /dev/null @@ -1,62 +0,0 @@ -import { - primaryColor, - zircon, - smallestFontSize, - inputFontFamily, - inputFontWeight, - spacer, - offColor -} from 'src/styling/variables' - -const chipStyles = { - root: { - marginLeft: 0, - height: 20, - backgroundColor: zircon, - '&:hover, &:focus, &:active': { - backgroundColor: zircon - }, - marginBottom: 'auto' - }, - label: { - fontSize: smallestFontSize, - fontWeight: inputFontWeight, - fontFamily: inputFontFamily, - paddingRight: 0, - paddingLeft: spacer, - color: primaryColor - } -} - -const styles = { - button: { - width: 8, - height: 8, - marginLeft: 8, - marginRight: 8 - }, - text: { - marginTop: 0, - marginBottom: 0 - }, - filters: { - display: 'flex', - marginBottom: 16 - }, - deleteWrapper: { - display: 'flex', - marginLeft: 'auto', - justifyContent: 'flex-end', - flexDirection: 'row' - }, - entries: { - color: offColor, - margin: 'auto', - marginRight: 12 - }, - chips: { - marginTop: 'auto' - } -} - -export { chipStyles, styles } diff --git a/new-lamassu-admin/src/components/Status.jsx b/new-lamassu-admin/src/components/Status.jsx index 38c02988..710cffdd 100644 --- a/new-lamassu-admin/src/components/Status.jsx +++ b/new-lamassu-admin/src/components/Status.jsx @@ -1,59 +1,8 @@ import Chip from '@mui/material/Chip' -import { makeStyles } from '@mui/styles' import React from 'react' -import { - tomato, - mistyRose, - pumpkin, - secondaryColorDarker as spring4, - inputFontWeight, - spring3, - zircon, - primaryColor, - smallestFontSize, - inputFontFamily, - spacer, - linen -} from '../styling/variables' - -const colors = { - error: tomato, - warning: pumpkin, - success: spring4, - neutral: primaryColor -} - -const backgroundColors = { - error: mistyRose, - warning: linen, - success: spring3, - neutral: zircon -} - -const useStyles = makeStyles({ - root: { - borderRadius: spacer / 2, - marginTop: spacer / 2, - marginRight: spacer / 4, - marginBottom: spacer / 2, - marginLeft: spacer / 4, - height: spacer * 3, - backgroundColor: ({ type }) => backgroundColors[type] - }, - label: { - fontSize: smallestFontSize, - fontWeight: inputFontWeight, - fontFamily: inputFontFamily, - paddingRight: spacer / 2, - paddingLeft: spacer / 2, - color: ({ type }) => colors[type] - } -}) - const Status = ({ status }) => { - const classes = useStyles({ type: status.type }) - return + return } const MainStatus = ({ statuses }) => { diff --git a/new-lamassu-admin/src/components/Stepper.jsx b/new-lamassu-admin/src/components/Stepper.jsx index c8590173..66a829ab 100644 --- a/new-lamassu-admin/src/components/Stepper.jsx +++ b/new-lamassu-admin/src/components/Stepper.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import * as R from 'ramda' import React, { memo } from 'react' @@ -9,79 +8,29 @@ import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react' import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react' -import { - primaryColor, - secondaryColor, - offColor, - disabledColor -} from 'src/styling/variables' - -const styles = { - stages: { - display: 'flex', - alignItems: 'center' - }, - wrapper: { - display: 'flex', - alignItems: 'center', - margin: 0 - }, - stage: { - display: 'flex', - height: 28, - width: 28, - zIndex: 2, - '& > svg': { - height: '100%', - width: '100%', - overflow: 'visible' - } - }, - separator: { - width: 28, - height: 2, - border: [[2, 'solid']], - zIndex: 1 - }, - separatorSpring: { - borderColor: secondaryColor - }, - separatorZodiac: { - borderColor: primaryColor - }, - separatorSpringEmpty: { - borderColor: disabledColor - }, - separatorZodiacEmpty: { - borderColor: offColor - } -} - -const useStyles = makeStyles(styles) +import classes from './Stepper.module.css' const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => { if (currentStep < 1 || currentStep > steps) throw Error('Value of currentStage is invalid') if (steps < 1) throw Error('Value of stages is invalid') - const classes = useStyles() - const separatorClasses = { - [classes.separator]: true, - [classes.separatorSpring]: color === 'spring', - [classes.separatorZodiac]: color === 'zodiac' + 'w-7 h-[2px] border-2 z-1': true, + 'border-spring': color === 'spring', + 'border-zodiac': color === 'zodiac' } const separatorEmptyClasses = { - [classes.separator]: true, - [classes.separatorSpringEmpty]: color === 'spring', - [classes.separatorZodiacEmpty]: color === 'zodiac' + 'w-7 h-[2px] border-2 z-1': true, + 'border-dust': color === 'spring', + 'border-comet': color === 'zodiac' } return ( -
    +
    {R.range(1, currentStep).map(idx => ( -
    +
    {idx > 1 &&
    }
    {color === 'spring' && } @@ -89,7 +38,7 @@ const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
    ))} -
    +
    {currentStep > 1 &&
    }
    {color === 'spring' && } @@ -97,7 +46,7 @@ const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
    {R.range(currentStep + 1, steps + 1).map(idx => ( -
    +
    {color === 'spring' && } diff --git a/new-lamassu-admin/src/components/Stepper.module.css b/new-lamassu-admin/src/components/Stepper.module.css new file mode 100644 index 00000000..34c7b5f7 --- /dev/null +++ b/new-lamassu-admin/src/components/Stepper.module.css @@ -0,0 +1,12 @@ +.stage { + display: flex; + height: 28px; + width: 28px; + z-index: 2; +} + +.stage > svg { + height: 100%; + width: 100%; + overflow: visible; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/Subtitle.jsx b/new-lamassu-admin/src/components/Subtitle.jsx index b22f56a0..1efb6f3a 100644 --- a/new-lamassu-admin/src/components/Subtitle.jsx +++ b/new-lamassu-admin/src/components/Subtitle.jsx @@ -1,27 +1,12 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React, { memo } from 'react' -import { spacer, offColor } from 'src/styling/variables' - import { TL1 } from './typography' -const useStyles = makeStyles({ - subtitle: { - color: offColor, - marginTop: spacer * 2, - marginBottom: spacer * 2 - }, - extraMarginTop: { - marginTop: spacer * 9 - } -}) - const Subtitle = memo(({ children, className, extraMarginTop }) => { - const classes = useStyles() const classNames = { - [classes.subtitle]: true, - [classes.extraMarginTop]: extraMarginTop + 'text-comet my-4': true, + 'mt-18': extraMarginTop } return {children} diff --git a/new-lamassu-admin/src/components/TableLabel.jsx b/new-lamassu-admin/src/components/TableLabel.jsx deleted file mode 100644 index efddfa62..00000000 --- a/new-lamassu-admin/src/components/TableLabel.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import { makeStyles } from '@mui/styles' -import classnames from 'classnames' -import React from 'react' - -import { Label1 } from './typography' - -const useStyles = makeStyles({ - wrapper: { - display: 'flex', - alignItems: 'center' - }, - colorIndicator: { - borderRadius: 3, - height: 12, - width: 12, - marginRight: 8 - } -}) - -const TableLabel = ({ className, label, color, ...props }) => { - const classes = useStyles() - return ( -
    - {color && ( -
    - )} - {label} -
    - ) -} - -export default TableLabel diff --git a/new-lamassu-admin/src/components/Title.jsx b/new-lamassu-admin/src/components/Title.jsx index 13bf4e5f..25c68b20 100644 --- a/new-lamassu-admin/src/components/Title.jsx +++ b/new-lamassu-admin/src/components/Title.jsx @@ -1,20 +1,9 @@ -import { makeStyles } from '@mui/styles' import React, { memo } from 'react' -import { spacer } from 'src/styling/variables' - import { H1 } from './typography' -const useStyles = makeStyles({ - title: { - marginTop: spacer * 3, - marginBottom: spacer * 3 - } -}) - const Title = memo(({ children }) => { - const classes = useStyles() - return

    {children}

    + return

    {children}

    }) export default Title diff --git a/new-lamassu-admin/src/components/Tooltip.jsx b/new-lamassu-admin/src/components/Tooltip.jsx index 863dc417..1d825f77 100644 --- a/new-lamassu-admin/src/components/Tooltip.jsx +++ b/new-lamassu-admin/src/components/Tooltip.jsx @@ -1,11 +1,10 @@ import ClickAwayListener from '@mui/material/ClickAwayListener' -import { makeStyles } from '@mui/styles' import * as R from 'ramda' import React, { useState, memo } from 'react' import Popper from 'src/components/Popper' import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react' -const useStyles = makeStyles({ +const useStyles = { transparentButton: { border: 'none', backgroundColor: 'transparent', @@ -27,10 +26,9 @@ const useStyles = makeStyles({ width, padding: [[10, 15]] }) -}) +} -const usePopperHandler = width => { - const classes = useStyles({ width }) +const usePopperHandler = () => { const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null) const handleOpenHelpPopper = event => { @@ -48,7 +46,6 @@ const usePopperHandler = width => { const helpPopperOpen = Boolean(helpPopperAnchorEl) return { - classes, helpPopperAnchorEl, helpPopperOpen, handleOpenHelpPopper, @@ -62,15 +59,13 @@ const HelpTooltip = memo(({ children, width }) => { return ( -
    +
    {handler.helpPopperOpen && ( -
    +
    )} @@ -79,7 +74,9 @@ const HelpTooltip = memo(({ children, width }) => { anchorEl={handler.helpPopperAnchorEl} arrowEnabled={true} placement="bottom"> -
    {children}
    +
    + {children} +
    @@ -104,7 +101,7 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => { type="button" onMouseEnter={handler.handleOpenHelpPopper} onMouseLeave={handler.handleCloseHelpPopper} - className={handler.classes.transparentButton}> + className="border-0 bg-transparent outline-0 cursor-pointer mt-1"> )} @@ -112,7 +109,9 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => { open={handler.helpPopperOpen} anchorEl={handler.helpPopperAnchorEl} placement="bottom"> -
    {children}
    +
    + {children} +
    diff --git a/new-lamassu-admin/src/components/Uptime.jsx b/new-lamassu-admin/src/components/Uptime.jsx deleted file mode 100644 index ed1d4a2e..00000000 --- a/new-lamassu-admin/src/components/Uptime.jsx +++ /dev/null @@ -1,93 +0,0 @@ -import { makeStyles } from '@mui/styles' -import Chip from '@mui/material/Chip' -import * as R from 'ramda' -import React from 'react' - -import { - secondaryColorLighter, - secondaryColorDarker, - offErrorColor, - errorColor, - offColor, - inputFontWeight, - smallestFontSize, - inputFontFamily, - spacer -} from 'src/styling/variables' -import { onlyFirstToUpper } from 'src/utils/string' - -import typographyStyles from './typography/styles' -const { label1 } = typographyStyles - -const colors = { - running: secondaryColorDarker, - notRunning: offErrorColor -} - -const backgroundColors = { - running: secondaryColorLighter, - notRunning: errorColor -} - -const styles = { - uptimeContainer: { - display: 'inline-block', - minWidth: 104, - margin: [[0, 20]] - }, - name: { - extend: label1, - paddingLeft: 4, - color: offColor - } -} - -const useStyles = makeStyles(styles) - -const useChipStyles = makeStyles({ - root: { - borderRadius: spacer / 2, - marginTop: spacer / 2, - marginRight: spacer / 4, - marginBottom: spacer / 2, - marginLeft: spacer / 4, - height: spacer * 3, - backgroundColor: ({ type }) => backgroundColors[type] - }, - label: { - fontSize: smallestFontSize, - fontWeight: inputFontWeight, - fontFamily: inputFontFamily, - padding: [[spacer / 2, spacer]], - color: ({ type }) => colors[type] - } -}) - -const Uptime = ({ process, ...props }) => { - const classes = useStyles() - - const uptime = time => { - if (time < 60) return `${time}s` - if (time < 3600) return `${Math.floor(time / 60)}m` - if (time < 86400) return `${Math.floor(time / 60 / 60)}h` - return `${Math.floor(time / 60 / 60 / 24)}d` - } - - return ( -
    -
    {R.toLower(process.name)}
    - -
    - ) -} - -export default Uptime diff --git a/new-lamassu-admin/src/components/buttons/IDButton.jsx b/new-lamassu-admin/src/components/buttons/IDButton.jsx index 122c8975..6856b34e 100644 --- a/new-lamassu-admin/src/components/buttons/IDButton.jsx +++ b/new-lamassu-admin/src/components/buttons/IDButton.jsx @@ -127,7 +127,6 @@ const IDButton = memo( open={open} anchorEl={anchorEl} onClose={handleClose} - arrowSize={3} placement="top" flip>
    diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx b/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx index 56e04f9d..e3df3bac 100644 --- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx +++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.jsx @@ -1,6 +1,5 @@ import CardContent from '@mui/material/CardContent' import Card from '@mui/material/Card' -import classnames from 'classnames' import { Form, Formik, Field as FormikField } from 'formik' import * as R from 'ramda' import { useState, React, useRef } from 'react' @@ -90,7 +89,7 @@ const EditableCard = ({ const authorized = state === OVERRIDE_PENDING - ? { label: 'Pending', type: 'neutral' } + ? { label: 'Pending', type: 'default' } : state === OVERRIDE_REJECTED ? { label: 'Rejected', type: 'error' } : { label: 'Accepted', type: 'success' } diff --git a/new-lamassu-admin/src/pages/Funding.jsx b/new-lamassu-admin/src/pages/Funding/Funding.jsx similarity index 96% rename from new-lamassu-admin/src/pages/Funding.jsx rename to new-lamassu-admin/src/pages/Funding/Funding.jsx index 1d75af6c..9c0c589d 100644 --- a/new-lamassu-admin/src/pages/Funding.jsx +++ b/new-lamassu-admin/src/pages/Funding/Funding.jsx @@ -6,10 +6,16 @@ import { format } from 'date-fns/fp' import { QRCodeSVG as QRCode } from 'qrcode.react' import * as R from 'ramda' import React, { useState } from 'react' -import TableLabel from 'src/components/TableLabel' -import Title from 'src/components/Title' -import { Tr, Td, THead, TBody, Table } from 'src/components/fake-table/Table' -import Sidebar from 'src/components/layout/Sidebar' +import TableLabel from 'src/pages/Funding/TableLabel.jsx' +import Title from 'src/components/Title.jsx' +import { + Tr, + Td, + THead, + TBody, + Table +} from 'src/components/fake-table/Table.jsx' +import Sidebar from 'src/components/layout/Sidebar.jsx' import { H3, Info1, @@ -17,10 +23,10 @@ import { Info3, Label1, Label3 -} from 'src/components/typography' +} from 'src/components/typography/index.jsx' import CopyToClipboard from 'src/components/CopyToClipboard.jsx' -import { primaryColor } from 'src/styling/variables' +import { primaryColor } from 'src/styling/variables.js' import classes from './Funding.module.css' diff --git a/new-lamassu-admin/src/pages/Funding.module.css b/new-lamassu-admin/src/pages/Funding/Funding.module.css similarity index 100% rename from new-lamassu-admin/src/pages/Funding.module.css rename to new-lamassu-admin/src/pages/Funding/Funding.module.css diff --git a/new-lamassu-admin/src/pages/Funding/TableLabel.jsx b/new-lamassu-admin/src/pages/Funding/TableLabel.jsx new file mode 100644 index 00000000..787fce97 --- /dev/null +++ b/new-lamassu-admin/src/pages/Funding/TableLabel.jsx @@ -0,0 +1,20 @@ +import classnames from 'classnames' +import React from 'react' + +import { Label1 } from '../../components/typography/index.jsx' + +const TableLabel = ({ className, label, color, ...props }) => { + return ( +
    + {color && ( +
    + )} + {label} +
    + ) +} + +export default TableLabel diff --git a/new-lamassu-admin/src/pages/Logs.module.css b/new-lamassu-admin/src/pages/Logs/Logs.module.css similarity index 100% rename from new-lamassu-admin/src/pages/Logs.module.css rename to new-lamassu-admin/src/pages/Logs/Logs.module.css diff --git a/new-lamassu-admin/src/pages/MachineLogs.jsx b/new-lamassu-admin/src/pages/Logs/MachineLogs.jsx similarity index 90% rename from new-lamassu-admin/src/pages/MachineLogs.jsx rename to new-lamassu-admin/src/pages/Logs/MachineLogs.jsx index 2d70f647..0046ae3c 100644 --- a/new-lamassu-admin/src/pages/MachineLogs.jsx +++ b/new-lamassu-admin/src/pages/Logs/MachineLogs.jsx @@ -1,10 +1,10 @@ -import { useQuery, gql } from "@apollo/client"; +import { useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState } from 'react' -import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' -import Title from 'src/components/Title' -import Sidebar from 'src/components/layout/Sidebar' -import { Info3, H4 } from 'src/components/typography' +import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper.jsx' +import Title from 'src/components/Title.jsx' +import Sidebar from 'src/components/layout/Sidebar.jsx' +import { Info3, H4 } from 'src/components/typography/index.jsx' import { Table, @@ -13,8 +13,8 @@ import { TableHeader, TableBody, TableCell -} from 'src/components/table' -import { formatDate } from 'src/utils/timezones' +} from 'src/components/table/index.js' +import { formatDate } from 'src/utils/timezones.js' import classes from './Logs.module.css' @@ -48,7 +48,12 @@ const GET_MACHINE_LOGS_CSV = gql` ` const GET_MACHINE_LOGS = gql` - query MachineLogs($deviceId: ID!, $limit: Int, $from: DateTimeISO, $until: DateTimeISO) { + query MachineLogs( + $deviceId: ID! + $limit: Int + $from: DateTimeISO + $until: DateTimeISO + ) { machineLogs( deviceId: $deviceId limit: $limit diff --git a/new-lamassu-admin/src/pages/ServerLogs.jsx b/new-lamassu-admin/src/pages/Logs/ServerLogs.jsx similarity index 93% rename from new-lamassu-admin/src/pages/ServerLogs.jsx rename to new-lamassu-admin/src/pages/Logs/ServerLogs.jsx index d4ff6ac0..ac2d1926 100644 --- a/new-lamassu-admin/src/pages/ServerLogs.jsx +++ b/new-lamassu-admin/src/pages/Logs/ServerLogs.jsx @@ -1,12 +1,12 @@ import { useQuery, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState, useRef } from 'react' -import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper' -import Title from 'src/components/Title' -import Uptime from 'src/components/Uptime' -import { Info3, H4 } from 'src/components/typography' +import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper.jsx' +import Title from 'src/components/Title.jsx' +import Uptime from 'src/pages/Logs/Uptime.jsx' +import { Info3, H4 } from 'src/components/typography/index.jsx' -import { Select } from 'src/components/inputs' +import { Select } from 'src/components/inputs/index.js' import { Table, TableHead, @@ -14,9 +14,9 @@ import { TableHeader, TableBody, TableCell -} from 'src/components/table' -import { startCase } from 'src/utils/string' -import { formatDate } from 'src/utils/timezones' +} from 'src/components/table/index.js' +import { startCase } from 'src/utils/string.js' +import { formatDate } from 'src/utils/timezones.js' import logsClasses from './Logs.module.css' import classes from './ServerLogs.module.css' diff --git a/new-lamassu-admin/src/pages/ServerLogs.module.css b/new-lamassu-admin/src/pages/Logs/ServerLogs.module.css similarity index 83% rename from new-lamassu-admin/src/pages/ServerLogs.module.css rename to new-lamassu-admin/src/pages/Logs/ServerLogs.module.css index 78e77779..ddea352c 100644 --- a/new-lamassu-admin/src/pages/ServerLogs.module.css +++ b/new-lamassu-admin/src/pages/Logs/ServerLogs.module.css @@ -1,5 +1,5 @@ .serverTableWrapper { - composes: tableWrapper from './Logs.module.css'; + composes: tableWrapper from 'Logs.module.css'; max-width: 100%; margin-left: 0; } diff --git a/new-lamassu-admin/src/pages/Logs/Uptime.jsx b/new-lamassu-admin/src/pages/Logs/Uptime.jsx new file mode 100644 index 00000000..adbe1217 --- /dev/null +++ b/new-lamassu-admin/src/pages/Logs/Uptime.jsx @@ -0,0 +1,33 @@ +import Chip from '@mui/material/Chip' +import * as R from 'ramda' +import React from 'react' + +import { onlyFirstToUpper } from 'src/utils/string.js' +import { Label1 } from 'src/components/typography/index.jsx' + +const Uptime = ({ process }) => { + const uptime = time => { + if (time < 60) return `${time}s` + if (time < 3600) return `${Math.floor(time / 60)}m` + if (time < 86400) return `${Math.floor(time / 60 / 60)}h` + return `${Math.floor(time / 60 / 60 / 24)}d` + } + + return ( +
    + + {R.toLower(process.name)} + + +
    + ) +} + +export default Uptime diff --git a/new-lamassu-admin/src/routing/lamassu.routes.jsx b/new-lamassu-admin/src/routing/lamassu.routes.jsx index aed875c0..81781d0b 100644 --- a/new-lamassu-admin/src/routing/lamassu.routes.jsx +++ b/new-lamassu-admin/src/routing/lamassu.routes.jsx @@ -1,9 +1,9 @@ import React from 'react' import { Redirect } from 'react-router-dom' -import Funding from 'src/pages/Funding' +import Funding from 'src/pages/Funding/Funding.jsx' import IndividualDiscounts from 'src/pages/LoyaltyPanel/IndividualDiscounts' import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes' -import MachineLogs from 'src/pages/MachineLogs' +import MachineLogs from 'src/pages/Logs/MachineLogs.jsx' import CashUnits from 'src/pages/Maintenance/CashUnits' import MachineStatus from 'src/pages/Maintenance/MachineStatus' import Notifications from 'src/pages/Notifications/Notifications' @@ -13,7 +13,7 @@ import MachineScreens from 'src/pages/OperatorInfo/MachineScreens' import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting' import SMSNotices from 'src/pages/OperatorInfo/SMSNotices/SMSNotices' import TermsConditions from 'src/pages/OperatorInfo/TermsConditions' -import ServerLogs from 'src/pages/ServerLogs' +import ServerLogs from 'src/pages/Logs/ServerLogs.jsx' import Services from 'src/pages/Services/Services' import SessionManagement from 'src/pages/SessionManagement/SessionManagement' import Transactions from 'src/pages/Transactions/Transactions' diff --git a/new-lamassu-admin/src/styling/global/global.css b/new-lamassu-admin/src/styling/global/global.css index 30dcc720..3660d78a 100644 --- a/new-lamassu-admin/src/styling/global/global.css +++ b/new-lamassu-admin/src/styling/global/global.css @@ -19,6 +19,7 @@ --comet3: #525772; --tomato: #ff584a; + --misty-rose: #ffeceb; --dust: #dddddd; --ghost: #fafbff; @@ -45,7 +46,8 @@ --color-comet2: var(--comet2); --color-comet3: var(--comet3); --color-tomato: var(--tomato); - --color--dust: var(--dust); + --color-misty-rose: var(--misty-rose); + --color-dust: var(--dust); --color-ghost: var(--ghost); --color-zircon: var(--zircon); --color-zircon2: var(--zircon2); diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 230160a3..1e8ce8e7 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -16,7 +16,13 @@ import { disabledColor2, disabledColor, smallestFontSize, - inputFontWeight + inputFontWeight, + spring3, + spring4, + tomato, + mistyRose, + linen, + pumpkin } from './variables' const { p } = typographyStyles @@ -173,6 +179,30 @@ theme = createTheme(theme, { fontFamily: inputFontFamily, paddingRight: 4, paddingLeft: 4 + }, + colorDefault: { + backgroundColor: zircon, + '& .MuiChip-label': { + color: primaryColor + } + }, + colorWarning: { + backgroundColor: linen, + '& .MuiChip-label': { + color: pumpkin + } + }, + colorError: { + backgroundColor: mistyRose, + '& .MuiChip-label': { + color: tomato + } + }, + colorSuccess: { + backgroundColor: spring3, + '& .MuiChip-label': { + color: spring4 + } } } }, From 9f4bf1de7b278225dfe8c3ef1a9a46d3a93546d3 Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 16:22:10 +0100 Subject: [PATCH 23/27] partial: second batch of components --- .../NotificationCenter/NotificationCenter.jsx | 16 +- .../NotificationCenter.module.css | 145 ++++++++++++++ .../NotificationCenter.styles.js | 144 -------------- .../NotificationCenter/NotificationRow.jsx | 6 +- .../src/components/inputs/base/Checkbox.jsx | 48 +---- .../src/components/inputs/base/CodeInput.jsx | 23 +-- .../inputs/base/CodeInput.module.css | 14 ++ .../inputs/base/CodeInput.styles.js | 27 --- .../src/components/inputs/base/RadioGroup.jsx | 34 +--- .../inputs/formik/CashCassetteInput.jsx | 15 +- .../inputs/formik/TextInput.styles.js | 36 ---- .../src/components/layout/Header.jsx | 60 +++--- .../src/components/layout/Header.module.css | 175 +++++++++++++++++ .../src/components/layout/Header.styles.js | 182 ------------------ .../src/components/layout/Section.jsx | 12 +- .../src/components/layout/Section.styles.js | 12 -- .../src/components/layout/Sidebar.jsx | 32 ++- .../src/components/layout/Sidebar.module.css | 106 ++++++++++ .../src/components/layout/Sidebar.styles.js | 107 ---------- .../src/components/layout/TitleSection.jsx | 28 ++- .../components/layout/TitleSection.styles.js | 31 --- .../machineActions/DiagnosticsModal.jsx | 28 ++- .../machineActions/MachineActions.jsx | 19 +- .../machineActions/MachineActions.styles.js | 61 ------ .../single-row-table/SingleRowTable.jsx | 42 ++-- .../single-row-table/SingleRowTable.styles.js | 41 ---- .../src/components/table/EmptyTable.jsx | 21 +- .../src/components/table/Table.jsx | 18 +- .../src/components/table/TableCell.jsx | 17 +- .../src/components/table/TableHeader.jsx | 4 +- .../src/components/table/TableRow.jsx | 48 +---- .../src/components/tables/DataTable.jsx | 37 ++-- .../src/components/tables/DataTable.styles.js | 50 ----- .../src/components/tables/Stripes.jsx | 11 -- new-lamassu-admin/src/styling/theme.js | 10 + 35 files changed, 616 insertions(+), 1044 deletions(-) create mode 100644 new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css delete mode 100644 new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js create mode 100644 new-lamassu-admin/src/components/inputs/base/CodeInput.module.css delete mode 100644 new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js delete mode 100644 new-lamassu-admin/src/components/inputs/formik/TextInput.styles.js create mode 100644 new-lamassu-admin/src/components/layout/Header.module.css delete mode 100644 new-lamassu-admin/src/components/layout/Header.styles.js delete mode 100644 new-lamassu-admin/src/components/layout/Section.styles.js create mode 100644 new-lamassu-admin/src/components/layout/Sidebar.module.css delete mode 100644 new-lamassu-admin/src/components/layout/Sidebar.styles.js delete mode 100644 new-lamassu-admin/src/components/layout/TitleSection.styles.js delete mode 100644 new-lamassu-admin/src/components/machineActions/MachineActions.styles.js delete mode 100644 new-lamassu-admin/src/components/single-row-table/SingleRowTable.styles.js delete mode 100644 new-lamassu-admin/src/components/tables/DataTable.styles.js delete mode 100644 new-lamassu-admin/src/components/tables/Stripes.jsx diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx index f0eef5d5..6e971d55 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx @@ -1,5 +1,4 @@ -import { useQuery, useMutation, gql } from "@apollo/client"; -import { makeStyles } from '@mui/styles' +import { useQuery, useMutation, gql } from '@apollo/client' import * as R from 'ramda' import React, { useState, useEffect } from 'react' import ActionButton from 'src/components/buttons/ActionButton' @@ -9,10 +8,8 @@ import ClearAllIconInverse from 'src/styling/icons/stage/spring/empty.svg?react' import ClearAllIcon from 'src/styling/icons/stage/zodiac/empty.svg?react' import ShowUnreadIcon from 'src/styling/icons/stage/zodiac/full.svg?react' -import styles from './NotificationCenter.styles' import NotificationRow from './NotificationRow' - -const useStyles = makeStyles(styles) +import classes from './NotificationCenter.module.css' const GET_NOTIFICATIONS = gql` query getNotifications { @@ -63,7 +60,6 @@ const NotificationCenter = ({ const [xOffset, setXoffset] = useState(300) const [showingUnread, setShowingUnread] = useState(false) - const classes = useStyles({ buttonCoords, xOffset }) const machines = R.compose( R.map(R.prop('name')), R.indexBy(R.prop('deviceId')) @@ -120,7 +116,13 @@ const NotificationCenter = ({
    Notifications
    - diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css new file mode 100644 index 00000000..dd30252b --- /dev/null +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.module.css @@ -0,0 +1,145 @@ +.container { + width: 40vw; + height: 110vh; + right: 0; + background-color: white; + box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.24); +} + +.container @media only screen and (max-width: 1920px) { + width: 30vw; +} + +.header { + display: flex; + justify-content: space-between; +} + +.headerText { + margin-top: 20px; + margin-left: 12px; +} + +.actionButtons { + display: flex; + margin-left: 16px; + height: 0; +} + +.notificationIcon { + position: absolute; + cursor: pointer; + background: transparent; + box-shadow: 0 0 0 transparent; + border: 0 solid transparent; + text-shadow: 0 0 0 transparent; + outline: none; +} + +.clearAllButton { + margin-top: -16px; + margin-left: 8px; + background-color: var(--zircon); +} + +.notificationsList { + height: 90vh; + max-height: 100vh; + margin-top: 24px; + margin-left: 0; + overflow-y: auto; + overflow-x: hidden; + background-color: white; + z-index: 10; +} + +.notificationRow { + display: flex; + flex-direction: row; + justify-content: flex-start; + position: relative; + margin-bottom: 16px; + padding-top: 12px; + gap: 10px; +} + +.notificationRow > *:first-child { + margin-right: 24px; +} + +.notificationContent { + display: flex; + flex-direction: column; + justify-content: center; + width: 300px; +} + +.unread { + background-color: var(--spring3) +} + +.notificationRowIcon { + align-self: center; +} + +.notificationRowIcon > * { + margin-left: 24px +} + +.readIconWrapper { + flex-grow: 1 +} + +.unreadIcon { + margin-top: 5px; + margin-left: 8px; + width: 12px; + height: 12px; + background-color: var(--spring); + border-radius: 50%; + cursor: pointer; + z-index: 1; +} + +.readIcon { + margin-left: 8px; + margin-top: 5px; + width: 12px; + height: 12px; + border: 1px solid var(--comet); + border-radius: 50%; + cursor: pointer; + z-index: 1; +} + +.notificationTitle { + margin: 0; + color: var(--comet); +} + +.notificationBody { + margin: 0 +} + +.notificationSubtitle { + margin: 0; + margin-bottom: 8px; + color: var(--comet); +} + +.stripes { + position: absolute; + height: 100%; + top: 0; + opacity: 60%; +} + +.hasUnread { + position: absolute; + top: 0; + left: 16px; + width: 9px; + height: 9px; + background-color: var(--spring); + border-radius: 50%; +} \ No newline at end of file diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js deleted file mode 100644 index 28d588b5..00000000 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js +++ /dev/null @@ -1,144 +0,0 @@ -import { - spacer, - white, - zircon, - secondaryColor, - spring3, - comet -} from 'src/styling/variables' - -const styles = { - container: { - '@media only screen and (max-width: 1920px)': { - width: '30vw' - }, - width: '40vw', - height: '110vh', - right: 0, - backgroundColor: white, - boxShadow: '0 0 14px 0 rgba(0, 0, 0, 0.24)' - }, - header: { - display: 'flex', - justifyContent: 'space-between' - }, - headerText: { - marginTop: spacer * 2.5, - marginLeft: spacer * 3 - }, - actionButtons: { - display: 'flex', - marginLeft: spacer * 2, - height: 0 - }, - notificationIcon: ({ buttonCoords, xOffset }) => ({ - position: 'absolute', - top: buttonCoords ? buttonCoords.y : 0, - left: buttonCoords ? buttonCoords.x - xOffset : 0, - cursor: 'pointer', - background: 'transparent', - boxShadow: '0px 0px 0px transparent', - border: '0px solid transparent', - textShadow: '0px 0px 0px transparent', - outline: 'none' - }), - clearAllButton: { - marginTop: -spacer * 2, - marginLeft: spacer, - backgroundColor: zircon - }, - notificationsList: { - height: '90vh', - maxHeight: '100vh', - marginTop: spacer * 3, - marginLeft: 0, - overflowY: 'auto', - overflowX: 'hidden', - backgroundColor: white, - zIndex: 10 - }, - notificationRow: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - position: 'relative', - marginBottom: spacer / 2, - paddingTop: spacer * 1.5, - '& > *:first-child': { - marginRight: 24 - }, - '& > *': { - marginRight: 10 - }, - '& > *:last-child': { - marginRight: 0 - } - }, - notificationContent: { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - width: 300 - }, - unread: { - backgroundColor: spring3 - }, - notificationRowIcon: { - alignSelf: 'center', - '& > *': { - marginLeft: spacer * 3 - } - }, - readIconWrapper: { - flexGrow: 1 - }, - unreadIcon: { - marginTop: 5, - marginLeft: spacer, - width: '12px', - height: '12px', - backgroundColor: secondaryColor, - borderRadius: '50%', - cursor: 'pointer', - zIndex: 1 - }, - readIcon: { - marginLeft: spacer, - marginTop: 5, - width: '12px', - height: '12px', - border: [[1, 'solid', comet]], - borderRadius: '50%', - cursor: 'pointer', - zIndex: 1 - }, - notificationTitle: { - margin: 0, - color: comet - }, - notificationBody: { - margin: 0 - }, - notificationSubtitle: { - margin: 0, - marginBottom: spacer, - color: comet - }, - stripes: { - position: 'absolute', - height: '100%', - top: '0px', - opacity: '60%' - }, - hasUnread: { - position: 'absolute', - top: 0, - left: 16, - width: '9px', - height: '9px', - backgroundColor: secondaryColor, - borderRadius: '50%' - } -} - -export default styles diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx index 5b5de598..37f4bfa1 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx @@ -1,4 +1,3 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import prettyMs from 'pretty-ms' import * as R from 'ramda' @@ -8,8 +7,7 @@ import Wrench from 'src/styling/icons/action/wrench/zodiac.svg?react' import Transaction from 'src/styling/icons/arrow/transaction.svg?react' import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react' -import styles from './NotificationCenter.styles' -const useStyles = makeStyles(styles) +import classes from './NotificationCenter.module.css' const types = { transaction: { @@ -46,8 +44,6 @@ const NotificationRow = ({ valid, toggleClear }) => { - const classes = useStyles() - const typeDisplay = R.path([type, 'display'])(types) ?? null const icon = R.path([type, 'icon'])(types) ?? ( diff --git a/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx b/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx index cd097e1f..597c2157 100644 --- a/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx +++ b/new-lamassu-admin/src/components/inputs/base/Checkbox.jsx @@ -1,60 +1,22 @@ import Checkbox from '@mui/material/Checkbox' -import { makeStyles } from '@mui/styles' import CheckBoxIcon from '@mui/icons-material/CheckBox' import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank' import React from 'react' import { Label2, Info3 } from 'src/components/typography' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react' -import { - fontSize2, - fontSize3, - secondaryColor, - offColor -} from 'src/styling/variables' - -const useStyles = makeStyles({ - root: { - color: secondaryColor, - '&.Mui-checked': { - color: secondaryColor - } - }, - checked: {}, - checkBoxLabel: { - display: 'flex' - }, - wrapper: { - display: 'flex', - alignItems: 'center', - '& > svg': { - marginRight: 10 - } - }, - message: { - display: 'flex', - alignItems: 'center', - color: offColor, - margin: 0, - whiteSpace: 'break-spaces' - } -}) +import { fontSize2, fontSize3 } from 'src/styling/variables' const CheckboxInput = ({ name, onChange, value, settings, ...props }) => { const { enabled, label, disabledMessage, rightSideLabel } = settings - const classes = useStyles() return ( <> {enabled ? ( -
    +
    {!rightSideLabel && {label}} { {rightSideLabel && {label}}
    ) : ( -
    +
    - {disabledMessage} + + {disabledMessage} +
    )} diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx b/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx index dd238952..c4439f9e 100644 --- a/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx +++ b/new-lamassu-admin/src/components/inputs/base/CodeInput.jsx @@ -1,14 +1,8 @@ -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import OtpInput from 'react-otp-input' -import typographyStyles from 'src/components/typography/styles' - -import styles from './CodeInput.styles' - -const useStyles = makeStyles(styles) -const useTypographyStyles = makeStyles(typographyStyles) +import classes from './CodeInput.module.css' const CodeInput = ({ name, @@ -19,9 +13,6 @@ const CodeInput = ({ inputStyle, containerStyle }) => { - const classes = useStyles() - const typographyClasses = useTypographyStyles() - return ( } shouldAutoFocus - containerStyle={classnames(containerStyle, classes.container)} + containerStyle={classnames(containerStyle, 'justify-evenly')} inputStyle={classnames( inputStyle, classes.input, - typographyClasses.confirmationCode, - error && classes.error + 'font-museo font-black text-4xl', + error && 'border-tomato' )} inputType={'tel'} - renderInput={(props) => ( - - )} + renderInput={props => } /> ) } diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css b/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css new file mode 100644 index 00000000..5d76df7b --- /dev/null +++ b/new-lamassu-admin/src/components/inputs/base/CodeInput.module.css @@ -0,0 +1,14 @@ +.input { + width: 3.5rem !important; + height: 5rem; + border: 2px solid; + border-color: var(--zircon); + border-radius: 4px; +} + +.input:focus { + border: 2px solid; + border-color: var(--zodiac); + border-radius: 4px; + outline: none; +} diff --git a/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js b/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js deleted file mode 100644 index dcea511c..00000000 --- a/new-lamassu-admin/src/components/inputs/base/CodeInput.styles.js +++ /dev/null @@ -1,27 +0,0 @@ -import { primaryColor, zircon, errorColor } from 'src/styling/variables' - -const styles = { - input: { - width: '3.5rem !important', - height: '5rem', - border: '2px solid', - borderColor: zircon, - borderRadius: '4px', - '&:focus': { - border: '2px solid', - borderColor: primaryColor, - borderRadius: '4px', - '&:focus': { - outline: 'none' - } - }, - }, - error: { - borderColor: errorColor - }, - container: { - justifyContent: 'space-evenly' - } -} - -export default styles diff --git a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx b/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx index 11f1bfdd..97b52d17 100644 --- a/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx +++ b/new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx @@ -1,31 +1,10 @@ import Radio from '@mui/material/Radio' import MRadioGroup from '@mui/material/RadioGroup' import FormControlLabel from '@mui/material/FormControlLabel' -import { makeStyles } from '@mui/styles' import classnames from 'classnames' import React from 'react' import { Label1 } from 'src/components/typography' -import { offColor, secondaryColor } from 'src/styling/variables' -const styles = { - label: { - height: 16, - lineHeight: '16px', - margin: [[0, 0, 4, 0]], - paddingLeft: 3 - }, - subtitle: { - marginTop: -8, - marginLeft: 32, - color: offColor - }, - radio: { - color: secondaryColor - } -} - -const useStyles = makeStyles(styles) - const RadioGroup = ({ name, label, @@ -36,10 +15,11 @@ const RadioGroup = ({ labelClassName, radioClassName }) => { - const classes = useStyles() return ( <> - {label && {label}} + {label && ( + {label} + )} } + control={ + + } label={option.display} className={classnames(labelClassName)} /> {option.subtitle && ( - {option.subtitle} + {option.subtitle} )}
    diff --git a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx index 14f4141a..11744265 100644 --- a/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx +++ b/new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx @@ -1,30 +1,19 @@ -import { makeStyles } from '@mui/styles' import classNames from 'classnames' import React, { memo, useState } from 'react' import { CashOut } from 'src/components/inputs/cashbox/Cashbox' import { NumberInput } from '../base' -const useStyles = makeStyles({ - flex: { - display: 'flex' - }, - cashCassette: { - height: 36, - marginRight: 14 - } -}) const CashCassetteInput = memo( ({ decimalPlaces, width, threshold, inputClassName, ...props }) => { - const classes = useStyles() const { name, onChange, onBlur, value } = props.field const { touched, errors } = props.form const [notes, setNotes] = useState(value) const error = !!(touched[name] && errors[name]) return ( -
    +
    { +const Subheader = ({ item, user }) => { const [prev, setPrev] = useState(null) return ( -
    -
    +
    +