From c425195ade80b5ebf6fd521e8b1ac67d8cfd31fb Mon Sep 17 00:00:00 2001 From: Rafael Taranto Date: Thu, 8 May 2025 08:41:10 +0100 Subject: [PATCH] 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 && ( -
+
{ ))}
-
+
- +
- 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