diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index f00b810..4c41b32 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -12,12 +12,11 @@ export const CardTitle = styled(Box)(({ theme }) => ({ })); export const CardWrapper = styled(Paper, { name: 'CardWrapper' })(({ theme }) => ({ - padding: theme.spacing(3), - borderRadius: 8, + padding: theme.spacing(2.5, 5), boxShadow: `0px 4px 12px 0px #9595953D`, - [theme.breakpoints.down('xxs')]: { - padding: theme.spacing(2), + [theme.breakpoints.down('sm')]: { + padding: theme.spacing(2.5), }, '&.guideActive': { diff --git a/src/components/Table/BorderedTable.tsx b/src/components/Table/BorderedTable.tsx index 75a23bd..768fc08 100644 --- a/src/components/Table/BorderedTable.tsx +++ b/src/components/Table/BorderedTable.tsx @@ -11,24 +11,27 @@ const borderRadius = 8; export const BorderedTable = styled(Table)(({ theme }) => ({ boxShadow: `0px 4px 12px 0px #9595953D`, borderRadius: borderRadius, + borderSpacing: 0, + borderCollapse: 'separate', + border: `1px solid #e8e8e8`, // FIXME: color should not be hardcoded '& td, & th': { background: theme.palette.background.paper, borderBottom: `1px solid ${theme.palette.background.content}`, - padding: theme.spacing(2, 2), + padding: theme.spacing(2.5, 2), }, '& td:first-child, & th:first-child': { paddingLeft: theme.spacing(5), - [theme.breakpoints.down('md')]: { - paddingRight: theme.spacing(2.5), + [theme.breakpoints.down('sm')]: { + paddingLeft: theme.spacing(2.5), }, }, '& td:last-child, & th:last-child': { paddingRight: theme.spacing(5), - [theme.breakpoints.down('md')]: { - paddingLeft: theme.spacing(2.5), + [theme.breakpoints.down('sm')]: { + paddingRight: theme.spacing(2.5), }, }, @@ -64,7 +67,7 @@ const ClickableStack = styled(Stack)(({ theme }) => ({ userSelect: 'none', })); -export function SortableHeaderCell({ +export function SortableHeaderCell({ sort, children, query, @@ -82,7 +85,8 @@ export function SortableHeaderCell({ if (query.sortBy === sortBy) { setQuery.sortDir(query.sortDir === SortDir.Asc ? SortDir.Desc : SortDir.Asc); } else { - setQuery.sortBy(sortBy as string); + setQuery.sortBy(sortBy); + setQuery.sortDir(SortDir.Desc); } }; @@ -91,13 +95,12 @@ export function SortableHeaderCell({ {children} - + diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx index 6c60974..489cfc1 100644 --- a/src/layouts/NetworkLayout/NetworkLayout.tsx +++ b/src/layouts/NetworkLayout/NetworkLayout.tsx @@ -147,9 +147,6 @@ export const ContentWrapper = styled('div', { padding: theme.spacing(7.5, 3), }, [theme.breakpoints.down('sm')]: { - padding: theme.spacing(7.5, 2), - }, - [theme.breakpoints.down('xxs')]: { padding: theme.spacing(3, 2), }, })); diff --git a/src/layouts/NetworkLayout/NetworkPageTitle.tsx b/src/layouts/NetworkLayout/NetworkPageTitle.tsx index 12cebeb..e4f499c 100644 --- a/src/layouts/NetworkLayout/NetworkPageTitle.tsx +++ b/src/layouts/NetworkLayout/NetworkPageTitle.tsx @@ -24,10 +24,6 @@ const PageTitleWrapper = styled('div', { '& .endAdornment': { marginLeft: 'auto', }, - - [theme.breakpoints.down('xxs')]: { - marginBottom: theme.spacing(4), - }, })); const PageDescription = styled(Typography)(({ theme }) => ({ diff --git a/src/pages/DashboardPage/Workers.tsx b/src/pages/DashboardPage/Workers.tsx index f43d150..84c5d1f 100644 --- a/src/pages/DashboardPage/Workers.tsx +++ b/src/pages/DashboardPage/Workers.tsx @@ -77,7 +77,7 @@ export function Workers() { const { workers, totalPages, page, isLoading } = useWorkers({ search: query.search, page: query.page, - perPage: 20, + perPage: 15, sortBy: query.sortBy as WorkerSortBy, sortDir: query.sortDir as SortDir, }); diff --git a/src/pages/WorkersPage/WorkerStatistics.tsx b/src/pages/WorkersPage/WorkerStatistics.tsx index c5b49fe..dc81a2f 100644 --- a/src/pages/WorkersPage/WorkerStatistics.tsx +++ b/src/pages/WorkersPage/WorkerStatistics.tsx @@ -9,17 +9,17 @@ import { Box, Divider, Stack, styled } from '@mui/material'; import { formatSqd } from '@api/contracts/utils'; import { BlockchainApiFullWorker } from '@api/subsquid-network-squid'; -import { Card } from '@components/Card'; import { useContracts } from '@network/useContracts'; import { UptimeGraph } from './UptimeGraph'; export const WorkerDescLabel = styled(Box, { name: 'WorkerDescLabel', -})(() => ({ +})(({ theme }) => ({ flex: 1, fontWeight: 500, whiteSpace: 'balance', + maxWidth: theme.spacing(25), })); export const WorkerColumn = styled(Box, { @@ -51,79 +51,88 @@ export const WorkerDescValue = styled(Box, { marginLeft: theme.spacing(2), })); +export const Title = styled(Box)(({ theme }) => ({ + fontWeight: 500, + fontSize: '1.5rem', + lineHeight: 1, + marginBottom: theme.spacing(5), +})); + export const WorkerStatistics = ({ worker }: { worker: BlockchainApiFullWorker }) => { const { SQD_TOKEN } = useContracts(); return ( - - - - } spacing={2}> - - Worker APR, 7d - - {worker.apr != null ? percentFormatter(worker.apr) : '-'} - - - - Bonded - {formatSqd(SQD_TOKEN, worker.bond, 2)} - - - Total rewards - {formatSqd(SQD_TOKEN, worker.totalReward, 2)} - + }> + + Bond + + + Worker APR, 7d + + {worker.apr != null ? percentFormatter(worker.apr) : '-'} + + + + Bonded + {formatSqd(SQD_TOKEN, worker.bond, 8)} + + + Total rewards + {formatSqd(SQD_TOKEN, worker.totalReward, 8)} + + + + + + Delegation + + + Delegator APR, 7d + + {worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'} + + + + Delegators + {worker.delegationCount} + + + Total delegated + {formatSqd(SQD_TOKEN, worker.totalDelegation, 8)} + + + + + + Statistics + + + Uptime, 24h / 90d + + {percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)} + + + + Queries, 24h / 90d + + {numberWithSpacesFormatter(worker.queries24Hours)} /{' '} + {numberWithSpacesFormatter(worker.queries90Days)} + - - - }> - - Delegator APR, 7d - - {worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'} - - - - Delegators - {worker.delegationCount} - - - Total delegated - {formatSqd(SQD_TOKEN, worker.totalDelegation, 2)} - + + Data served, 24h / 90d + + {bytesFormatter(worker.servedData24Hours)} / {bytesFormatter(worker.servedData90Days)} + - - - }> - - Uptime, 24h / 90d - - {percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)} - - - - Queries, 24h / 90d - - {numberWithSpacesFormatter(worker.queries24Hours)} /{' '} - {numberWithSpacesFormatter(worker.queries90Days)} - - - - Data served, 24h / 90d - - {bytesFormatter(worker.servedData24Hours)} /{' '} - {bytesFormatter(worker.servedData90Days)} - - - - Data stored - {bytesFormatter(worker.storedData)} - + + Data stored + {bytesFormatter(worker.storedData)} - - + - - + + + ); }; diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index 497f7b6..a29e2cb 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -544,9 +544,10 @@ export const useCreateTheme = (mode: PaletteType) => { }, MuiPaper: { styleOverrides: { - elevation1: { + root: { border: `1px solid ${colors.divider}`, boxShadow: 'none', + borderRadius: 8, }, }, },