Merge pull request #319 from invariant-labs/realigment-on-mobile-volu…

…me-24h-component Realigment on mobile volume 24h component
invariant-labs · Jan 14, 2025 · c3bb2cb · c3bb2cb
2 parents 7fa1228 + c8173b5
commit c3bb2cb
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 8 deletions.
diff --git a/src/components/Stats/volumeBar/VolumeBar.tsx b/src/components/Stats/volumeBar/VolumeBar.tsx
@@ -46,6 +46,7 @@ const VolumeBar: React.FC<Iprops> = ({
       className={classNames({ [classes.loadingOverlay]: isLoading })}>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Volume 24H:</Typography>
+
         <Typography className={classes.tokenContent}>
           ${formatNumber(isLoading ? Math.random() * 10000 : volume)}
         </Typography>
@@ -63,6 +64,7 @@ const VolumeBar: React.FC<Iprops> = ({
       </Box>
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>TVL 24H:</Typography>
+
         <Typography className={classes.tokenContent}>
           ${formatNumber(isLoading ? Math.random() * 10000 : tvlVolume)}
         </Typography>
@@ -78,6 +80,7 @@ const VolumeBar: React.FC<Iprops> = ({
           </Typography>
         )}
       </Box>
+
       <Box className={classes.tokenName}>
         <Typography className={classes.tokenHeader}>Fees 24H:</Typography>
         <Typography className={classes.tokenContent}>

diff --git a/src/components/Stats/volumeBar/style.ts b/src/components/Stats/volumeBar/style.ts
@@ -8,38 +8,103 @@ export const useStyles = makeStyles()(() => ({
     width: '100%',
     backgroundColor: colors.invariant.component,
     borderRadius: 22,
-    padding: 20,
+    padding: '20px 24px',
     display: 'flex',
-    whiteSpace: 'nowrap',
-    justifyContent: 'space-between'
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    justifyContent: 'space-between',
+
+    [theme.breakpoints.down('sm')]: {
+      padding: '12px 24px',
+      gap: 8,
+      flexDirection: 'column'
+    }
   },
 
   tokenName: {
     display: 'flex',
-    whiteSpace: 'nowrap',
+    alignItems: 'center',
+    minWidth: 'auto',
+    flex: '1 1 auto',
+    gap: 4,
 
     [theme.breakpoints.down('sm')]: {
+      justifyContent: 'space-between',
+
       '& p': {
-        ...typography.caption2
+        ...typography.body2,
+        whiteSpace: 'nowrap'
       }
     },
 
     [theme.breakpoints.down('xs')]: {
       '& p': {
-        ...typography.caption4
+        whiteSpace: 'nowrap'
+      },
+      flex: '0 0 auto',
+      width: '100%',
+      justifyContent: 'center'
+    },
+
+    '&:nth-of-type(3)': {
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+        justifyContent: 'center'
+      },
+      [theme.breakpoints.down('sm')]: {
+        justifyContent: 'space-between'
+      },
+      [theme.breakpoints.up('md')]: {
+        justifyContent: 'flex-end'
+      }
+    },
+
+    '&:nth-of-type(2)': {
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    '&:nth-of-type(1), &:nth-of-type(2)': {
+      [theme.breakpoints.down('md')]: {
+        justifyContent: 'center',
+        textAlign: 'center'
+      },
+
+      ' &:nth-of-type(3), &:nth-of-type(1), &:nth-of-type(2)': {
+        [theme.breakpoints.down('sm')]: {
+          justifyContent: 'space-between'
+        }
       }
     }
   },
 
   tokenHeader: {
     ...typography.heading4,
-    color: colors.invariant.textGrey
+    color: colors.invariant.textGrey,
+    whiteSpace: 'nowrap',
+
+    [theme.breakpoints.down('sm')]: {
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center'
+    }
   },
 
   tokenContent: {
     ...typography.heading4,
     color: colors.white.main,
-    padding: '0 0 0 5px'
+    whiteSpace: 'nowrap',
+    [theme.breakpoints.down('sm')]: {
+      display: 'flex',
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+
+      '&:nth-of-type(3)': {
+        justifyContent: 'flex-end',
+        textAlign: 'center'
+      }
+    }
   },
 
   tokenLow: {
@@ -51,6 +116,9 @@ export const useStyles = makeStyles()(() => ({
     color: colors.invariant.green,
     fontWeight: 400
   },
+  rightItems: {
+    display: 'flex'
+  },
   loadingOverlay: {
     position: 'relative',
     '&::after': {