💄 MarketsTables: remove layout shift + change paddings

exactly · Apr 19, 2024 · 35ae4c9 · 35ae4c9
1 parent 1582929
commit 35ae4c9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 16 deletions.
diff --git a/components/common/ItemInfo.tsx b/components/common/ItemInfo.tsx
@@ -20,7 +20,7 @@ const ItemInfo: FC<ItemInfoProps> = ({ label, value, underLabel, tooltipTitle, x
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
-    <Grid item xs={isMobile ? 6 : xs ? xs : 0}>
+    <Grid xs={isMobile ? 6 : xs ? xs : 0} pl={4} pt={3}>
       <Tooltip title={tooltipTitle} arrow placement="top" sx={{ cursor: tooltipTitle ? 'pointer' : '' }}>
         <Box display="flex" gap={0.5}>
           <Typography variant="subtitle1" fontSize="10px" color="grey.500" textTransform="uppercase">

diff --git a/components/markets/MarketsTables/index.tsx b/components/markets/MarketsTables/index.tsx
@@ -49,7 +49,7 @@ const MarketTables: FC = () => {
       title: t('Asset'),
       width: '130px',
       sortKey: 'symbol',
-      sx: { pl: 1.5, pr: 3, pt: 1, pb: 1 },
+      sx: { pl: 3, pr: 3, pt: 1, pb: 1 },
     },
     {
       key: 'Total Deposits',
@@ -232,8 +232,6 @@ const MarketTables: FC = () => {
     <>
       <Grid
         my={2}
-        px={1.5}
-        pb={1}
         boxShadow={({ palette }) => (palette.mode === 'light' ? '0px 4px 12px rgba(175, 177, 182, 0.2)' : '')}
         borderRadius="8px 8px 0px 0px"
         bgcolor="components.bg"

diff --git a/components/markets/MarketsTables/poolTable/index.tsx b/components/markets/MarketsTables/poolTable/index.tsx
@@ -147,7 +147,7 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                   hover
                   data-testid={`markets-pool-row-${symbol}`}
                 >
-                  <TableCell component="th" scope="row" sx={{ pr: 3, pl: 1.5 }}>
+                  <TableCell component="th" scope="row" sx={{ pr: 3, pl: 3 }}>
                     <Grid container alignItems="center">
                       {isLoading ? (
                         <Skeleton variant="circular" width={24} height={24} />
@@ -168,17 +168,17 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                       </Typography>
                     </Grid>
                   </TableCell>
-                  <TableCell align="left" sx={{ width: '170px', py: 3, pl: 3, pr: 1.5 }}>
+                  <TableCell align="left" sx={{ width: '170px', py: '20px', pl: 3, pr: 1.5 }}>
                     <Typography fontWeight={700}>
                       {isLoading ? <Skeleton width={80} /> : `$${totalDeposited}`}
                     </Typography>
                     <Typography variant="subtitle2" color="grey.500">
                       {isLoading ? <Skeleton width={80} /> : `${depositedAssets} ${formatSymbol(symbol)}`}
                     </Typography>
                   </TableCell>
-                  <TableCell align="left" sx={{ width: '170px', py: 3, px: 1.5 }}>
+                  <TableCell align="left" sx={{ width: '170px', py: '20px', px: 1.5 }}>
                     {isLoading || depositAPR === undefined ? (
-                      <Skeleton width={110} height={50} />
+                      <Skeleton width={110} height={30} />
                     ) : (
                       <Box display="flex" flexDirection="column">
                         <Grid container alignItems="center" gap={1}>
@@ -237,15 +237,15 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                       </Tooltip>
                     )}
                   </TableCell>
-                  <TableCell align="left" sx={{ width: '170px', py: 3, pl: 3, pr: 1.5 }}>
+                  <TableCell align="left" sx={{ width: '170px', py: '20px', pl: 3, pr: 1.5 }}>
                     <Typography fontWeight={700}>
                       {isLoading ? <Skeleton width={80} /> : `$${totalBorrowed}`}
                     </Typography>
                     <Typography variant="subtitle2" color="grey.500">
                       {isLoading ? <Skeleton width={80} /> : `${borrowedAssets} ${formatSymbol(symbol)}`}
                     </Typography>
                   </TableCell>
-                  <TableCell align="left" sx={{ width: '170px', py: 3, px: 1.5 }}>
+                  <TableCell align="left" sx={{ width: '170px', py: '20px', px: 1.5 }}>
                     {isLoading || borrowAPR === undefined ? (
                       <Skeleton width={80} />
                     ) : (
@@ -274,12 +274,7 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                     sx={{ cursor: 'default', pl: 1.5, pr: 3, width: 'fit-content' }}
                   >
                     {isLoading ? (
-                      <Skeleton
-                        sx={{ margin: 'auto', borderRadius: '32px' }}
-                        variant="rounded"
-                        height={34}
-                        width={80}
-                      />
+                      <Skeleton sx={{ borderRadius: '32px' }} variant="rounded" height={34} width={80} />
                     ) : (
                       <Tooltip
                         title={t(