Skip to content

Commit a78619d

Browse files
p6tep6te
committed
fix mobile layout on stats page
1 parent 7e5d0d4 commit a78619d

File tree

4 files changed

+32
-34
lines changed

4 files changed

+32
-34
lines changed

‎src/components/Stats/PoolListItem/PoolListItem.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const PoolListItem: React.FC<IProps> = ({
6262
const { classes } = useStyles()
6363

6464
const navigate = useNavigate()
65-
const isXs = useMediaQuery(theme.breakpoints.down('xs'))
65+
const isSm = useMediaQuery(theme.breakpoints.down('sm'))
6666

6767
const handleOpenPosition = () => {
6868
navigate(
@@ -82,9 +82,9 @@ const PoolListItem: React.FC<IProps> = ({
8282
container
8383
classes={{ container: classes.container }}
8484
style={hideBottomLine ? { border: 'none' } : undefined}>
85-
{!isXs ? <Typography>{tokenIndex}</Typography> : null}
85+
{!isSm ? <Typography>{tokenIndex}</Typography> : null}
8686
<Grid className={classes.imageContainer}>
87-
{!isXs && (
87+
{!isSm && (
8888
<Box className={classes.iconsWrapper}>
8989
<img src={iconFrom} alt='Token from' />
9090
<img src={iconTo} alt='Token to' />
@@ -96,7 +96,7 @@ const PoolListItem: React.FC<IProps> = ({
9696
</Typography>
9797
</Grid>
9898
</Grid>
99-
{/* {!isXs ? (
99+
{/* {!isSm ? (
100100
<Typography>
101101
{`${apy > 1000 ? '>1000' : apy.toFixed(2)}%`}
102102
<Tooltip
@@ -139,22 +139,24 @@ const PoolListItem: React.FC<IProps> = ({
139139
<Typography>{fee}%</Typography>
140140
<Typography>{`$${formatNumbers()(volume.toString())}${showPrefix(volume)}`}</Typography>
141141
<Typography>{`$${formatNumbers()(TVL.toString())}${showPrefix(TVL)}`}</Typography>
142-
<Box className={classes.action}>
143-
<TooltipHover text='Exchange'>
144-
<button className={classes.actionButton} onClick={handleOpenSwap}>
145-
<img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
146-
</button>
147-
</TooltipHover>
148-
<TooltipHover text='Add position'>
149-
<button className={classes.actionButton} onClick={handleOpenPosition}>
150-
<img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
151-
</button>
152-
</TooltipHover>
153-
</Box>
142+
{!isSm && (
143+
<Box className={classes.action}>
144+
<TooltipHover text='Exchange'>
145+
<button className={classes.actionButton} onClick={handleOpenSwap}>
146+
<img width={32} height={32} src={icons.horizontalSwapIcon} alt={'Exchange'} />
147+
</button>
148+
</TooltipHover>
149+
<TooltipHover text='Add position'>
150+
<button className={classes.actionButton} onClick={handleOpenPosition}>
151+
<img width={32} height={32} src={icons.plusIcon} alt={'Open'} />
152+
</button>
153+
</TooltipHover>
154+
</Box>
155+
)}
154156
</Grid>
155157
) : (
156158
<Grid container classes={{ container: classes.container, root: classes.header }}>
157-
{!isXs && (
159+
{!isSm && (
158160
<Typography style={{ lineHeight: '11px' }}>
159161
N<sup>o</sup>
160162
</Typography>
@@ -241,7 +243,7 @@ const PoolListItem: React.FC<IProps> = ({
241243
<ArrowDropDownIcon className={classes.icon} />
242244
) : null}
243245
</Typography>
244-
<Typography align='right'>Action</Typography>
246+
{!isSm && <Typography align='right'>Action</Typography>}
245247
</Grid>
246248
)}
247249
</Grid>

‎src/components/Stats/PoolListItem/style.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,12 @@ export const useStyles = makeStyles()(() => ({
2323
},
2424

2525
[theme.breakpoints.down('sm')]: {
26+
gridTemplateColumns: '32.5% 17.5% 35% 15% ',
27+
2628
'& p': {
29+
justifyContent: 'flex-start',
2730
...typography.caption1
2831
}
29-
},
30-
31-
[theme.breakpoints.down('xs')]: {
32-
gridTemplateColumns: '28% 15% 30% 25%'
3332
}
3433
},
3534

@@ -72,8 +71,9 @@ export const useStyles = makeStyles()(() => ({
7271
display: 'block'
7372
},
7473

75-
[theme.breakpoints.down('xs')]: {
76-
marginLeft: 0
74+
[theme.breakpoints.down('sm')]: {
75+
marginLeft: 0,
76+
justifyContent: 'flex-start'
7777
}
7878
},
7979
icon: {

‎src/components/Stats/TokenListItem/TokenListItem.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const TokenListItem: React.FC<IProps> = ({
3939
const { classes } = useStyles()
4040
// const isNegative = priceChange < 0
4141

42-
const isXDown = useMediaQuery(theme.breakpoints.down('sm'))
42+
const isSm = useMediaQuery(theme.breakpoints.down('sm'))
4343
const hideName = useMediaQuery(theme.breakpoints.down('xs'))
4444

4545
return (
@@ -49,9 +49,9 @@ const TokenListItem: React.FC<IProps> = ({
4949
container
5050
classes={{ container: classes.container, root: classes.tokenList }}
5151
style={hideBottomLine ? { border: 'none' } : undefined}>
52-
{!hideName && <Typography component='p'>{itemNumber}</Typography>}
52+
{!hideName && !isSm && <Typography component='p'>{itemNumber}</Typography>}
5353
<Grid className={classes.tokenName}>
54-
{!isXDown && <img src={icon} alt='Token icon'></img>}
54+
{!isSm && <img src={icon} alt='Token icon'></img>}
5555
<Typography>
5656
{hideName ? symbol : name}
5757
{!hideName && <span className={classes.tokenSymbol}>{` (${symbol})`}</span>}
@@ -71,7 +71,7 @@ const TokenListItem: React.FC<IProps> = ({
7171
container
7272
style={{ color: colors.invariant.textGrey, fontWeight: 400 }}
7373
classes={{ container: classes.container, root: classes.header }}>
74-
{!hideName && (
74+
{!hideName && !isSm && (
7575
<Typography style={{ lineHeight: '12px' }}>
7676
N<sup>o</sup>
7777
</Typography>

‎src/components/Stats/TokenListItem/style.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
1212
whiteSpace: 'nowrap',
1313

1414
[theme.breakpoints.down('sm')]: {
15-
gridTemplateColumns: '5% 35% 15% 17.5% 16.5% 15%',
15+
gridTemplateColumns: '30% 22.5% 32.5% 15%',
1616
'& p': {
17-
...typography.caption2
17+
...typography.caption1
1818
}
19-
},
20-
21-
[theme.breakpoints.down('xs')]: {
22-
gridTemplateColumns: '15% 25% 35% 25%'
2319
}
2420
},
2521

0 commit comments

Comments
 (0)