partial: customer page css migration

This commit is contained in:
Rafael Taranto 2025-05-05 14:43:58 +01:00
parent 926b7e6933
commit d7b2e12f94
48 changed files with 524 additions and 2183 deletions

View file

@ -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,
<>
<LastTxIcon className={classes.icon} />
<LastTxIcon className="mr-3" />
{`${Number.parseFloat(customer.lastTxFiat)}
${customer.lastTxFiatCode}`}
</>
@ -80,9 +70,9 @@ const TransactionsList = ({ customer, data, loading }) => {
view: it => (
<>
{it.txClass === 'cashOut' ? (
<TxOutIcon className={classes.txClassIconLeft} />
<TxOutIcon className="mr-3" />
) : (
<TxInIcon className={classes.txClassIconLeft} />
<TxInIcon className="mr-3" />
)}
</>
)
@ -96,7 +86,9 @@ const TransactionsList = ({ customer, data, loading }) => {
header: 'Transaction ID',
width: 145,
view: it => (
<CopyToClipboard className={classes.txId}>{it.id}</CopyToClipboard>
<CopyToClipboard className="font-museo whitespace-nowrap overflow-hidden text-ellipsis">
{it.id}
</CopyToClipboard>
)
},
{
@ -144,7 +136,7 @@ const TransactionsList = ({ customer, data, loading }) => {
<Label1
noMargin
key={idx}
className={classes.txSummaryLabel}
className="text-comet mb-1 mr-6"
style={{ width: size }}>
{header}
</Label1>
@ -152,28 +144,21 @@ const TransactionsList = ({ customer, data, loading }) => {
</div>
<div className="flex">
{summaryElements.map(({ size, value }, idx) => (
<P
noMargin
key={idx}
className={classes.txSummaryValue}
style={{ width: size }}>
<P noMargin key={idx} className="h-4 mr-6" style={{ width: size }}>
{value}
</P>
))}
</div>
</div>
<div className={classes.titleWrapper}>
<div className={classnames(tableSpacingClasses)}>
{loading ? (
<H4>Loading</H4>
) : hasData ? (
''
) : (
<H4>No transactions so far</H4>
)}
</div>
<div className="flex mt-5">
{loading ? (
<H4>Loading</H4>
) : hasData ? (
<DataTable elements={tableElements} data={data} />
) : (
<H4>No transactions so far</H4>
)}
</div>
{hasData && <DataTable elements={tableElements} data={data} />}
</>
)
}