Skip to content

Commit

Permalink
fix: some style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@belopash
belopash committed May 14, 2024
1 parent 4477caf commit 2eae8a2
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 91 deletions.
7 changes: 3 additions & 4 deletions src/components/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand Down
23 changes: 13 additions & 10 deletions src/components/Table/BorderedTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
},
},

Expand Down Expand Up @@ -64,7 +67,7 @@ const ClickableStack = styled(Stack)(({ theme }) => ({
userSelect: 'none',
}));

export function SortableHeaderCell<S>({
export function SortableHeaderCell<S extends string>({
sort,
children,
query,
Expand All @@ -82,7 +85,8 @@ export function SortableHeaderCell<S>({
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);
}
};

Expand All @@ -91,13 +95,12 @@ export function SortableHeaderCell<S>({
<ClickableStack
onClick={handleSortChange(sort)}
direction="row"
alignItems="center"
justifyContent="flex-start"
spacing={1}
alignItems="center"
>
<Box sx={{ width }}>{children}</Box>
<Box>
<SortIcon query={query as any} value={sort as string} />
<SortIcon query={query} value={sort} />
</Box>
</ClickableStack>
</TableCell>
Expand Down
3 changes: 0 additions & 3 deletions src/layouts/NetworkLayout/NetworkLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
},
}));
Expand Down
4 changes: 0 additions & 4 deletions src/layouts/NetworkLayout/NetworkPageTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,6 @@ const PageTitleWrapper = styled('div', {
'& .endAdornment': {
marginLeft: 'auto',
},

[theme.breakpoints.down('xxs')]: {
marginBottom: theme.spacing(4),
},
}));

const PageDescription = styled(Typography)(({ theme }) => ({
Expand Down
2 changes: 1 addition & 1 deletion src/pages/DashboardPage/Workers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand Down
145 changes: 77 additions & 68 deletions src/pages/WorkersPage/WorkerStatistics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down Expand Up @@ -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 (
<Box>
<Stack spacing={4}>
<Card noShadow title="Bond">
<Stack divider={<Divider orientation="horizontal" flexItem />} spacing={2}>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Worker APR, 7d</WorkerDescLabel>
<WorkerDescValue>
{worker.apr != null ? percentFormatter(worker.apr) : '-'}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Bonded</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.bond, 2)}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Total rewards</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.totalReward, 2)}</WorkerDescValue>
</Stack>
<Stack spacing={4} divider={<Divider orientation="horizontal" flexItem />}>
<Box>
<Title>Bond</Title>
<Stack spacing={2}>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Worker APR, 7d</WorkerDescLabel>
<WorkerDescValue>
{worker.apr != null ? percentFormatter(worker.apr) : '-'}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Bonded</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.bond, 8)}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Total rewards</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.totalReward, 8)}</WorkerDescValue>
</Stack>
</Stack>
</Box>

<Box>
<Title>Delegation</Title>
<Stack spacing={2}>
<Stack direction="row">
<WorkerDescLabel>Delegator APR, 7d</WorkerDescLabel>
<WorkerDescValue>
{worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Delegators</WorkerDescLabel>
<WorkerDescValue>{worker.delegationCount}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Total delegated</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.totalDelegation, 8)}</WorkerDescValue>
</Stack>
</Stack>
</Box>

<Box>
<Title>Statistics</Title>
<Stack spacing={2}>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Uptime, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Queries, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{numberWithSpacesFormatter(worker.queries24Hours)} /{' '}
{numberWithSpacesFormatter(worker.queries90Days)}
</WorkerDescValue>
</Stack>
</Card>
<Card noShadow title="Delegation">
<Stack spacing={2} divider={<Divider orientation="horizontal" flexItem />}>
<Stack direction="row">
<WorkerDescLabel>Delegator APR, 7d</WorkerDescLabel>
<WorkerDescValue>
{worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Delegators</WorkerDescLabel>
<WorkerDescValue>{worker.delegationCount}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Total delegated</WorkerDescLabel>
<WorkerDescValue>{formatSqd(SQD_TOKEN, worker.totalDelegation, 2)}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Data served, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{bytesFormatter(worker.servedData24Hours)} / {bytesFormatter(worker.servedData90Days)}
</WorkerDescValue>
</Stack>
</Card>
<Card noShadow title="Statistics">
<Stack spacing={2} divider={<Divider orientation="horizontal" flexItem />}>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Uptime, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Queries, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{numberWithSpacesFormatter(worker.queries24Hours)} /{' '}
{numberWithSpacesFormatter(worker.queries90Days)}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Data served, 24h / 90d</WorkerDescLabel>
<WorkerDescValue>
{bytesFormatter(worker.servedData24Hours)} /{' '}
{bytesFormatter(worker.servedData90Days)}
</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Data stored</WorkerDescLabel>
<WorkerDescValue>{bytesFormatter(worker.storedData)}</WorkerDescValue>
</Stack>
<Stack alignItems="center" direction="row" justifyContent="center">
<WorkerDescLabel>Data stored</WorkerDescLabel>
<WorkerDescValue>{bytesFormatter(worker.storedData)}</WorkerDescValue>
</Stack>
</Card>
</Stack>
</Stack>

<UptimeGraph worker={worker} />
</Box>
<UptimeGraph worker={worker} />
</Box>
</Stack>
);
};
3 changes: 2 additions & 1 deletion src/theme/theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,9 +544,10 @@ export const useCreateTheme = (mode: PaletteType) => {
},
MuiPaper: {
styleOverrides: {
elevation1: {
root: {
border: `1px solid ${colors.divider}`,
boxShadow: 'none',
borderRadius: 8,
},
},
},
Expand Down

0 comments on commit 2eae8a2

Please sign in to comment.