Merge pull request #2 from oraichain/feat/detail

Feat/detail
oraidex · Jun 21, 2024 · 8ffd3c8 · 8ffd3c8
2 parents 25a9585 + 8a40a3b
commit 8ffd3c8
Show file tree

Hide file tree

Showing 16 changed files with 578 additions and 456 deletions.
diff --git a/src/components/NewPosition/MarketIdLabel/style.ts b/src/components/NewPosition/MarketIdLabel/style.ts
@@ -9,9 +9,10 @@ export const useLabelStyles = makeStyles()(() => {
       fontWeight: 400,
       lineHeight: '20px',
       letterSpacing: '-0.03px',
-      textAlign: 'right',
+      textAlign: 'left',
       color: `${colors.oraidex.textGrey} !important`,
-      paddingRight: 7
+      paddingRight: 7,
+      paddingTop: 8
     },
     clipboardIcon: {
       width: 15,

diff --git a/src/components/PositionDetails/LiquidationRangeInfo/LiquidationRangeInfo.tsx b/src/components/PositionDetails/LiquidationRangeInfo/LiquidationRangeInfo.tsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import useStyles from './style'
-import { Grid, Typography } from '@mui/material'
-import { formatNumbers, showPrefix } from '@store/consts/utils'
+import React from 'react';
+import useStyles from './style';
+import { Grid, Typography } from '@mui/material';
+import { formatNumbers, showPrefix } from '@store/consts/utils';
 
 interface ILiquidationRangeInfo {
-  label: string
-  amount: number
-  tokenX: string
-  tokenY: string
+  label: string;
+  amount: number;
+  tokenX: string;
+  tokenY: string;
 }
 
 const LiquidationRangeInfo: React.FC<ILiquidationRangeInfo> = ({
@@ -16,7 +16,7 @@ const LiquidationRangeInfo: React.FC<ILiquidationRangeInfo> = ({
   tokenX,
   tokenY
 }) => {
-  const { classes } = useStyles()
+  const { classes } = useStyles();
   return (
     <Grid>
       <Grid className={classes.infoTypeSwap}>
@@ -31,12 +31,12 @@ const LiquidationRangeInfo: React.FC<ILiquidationRangeInfo> = ({
             {showPrefix(amount)}
           </Typography>
           <Typography component='p' className={classes.infoSwapToken}>
-            {tokenY} per {tokenX}
+            {tokenY} / {tokenX}
           </Typography>
         </Grid>
       </Grid>
     </Grid>
-  )
-}
+  );
+};
 
-export default LiquidationRangeInfo
+export default LiquidationRangeInfo;
diff --git a/src/components/PositionDetails/LiquidationRangeInfo/style.ts b/src/components/PositionDetails/LiquidationRangeInfo/style.ts
@@ -1,73 +1,50 @@
-import { Theme } from '@mui/material'
-import { colors, typography } from '@static/theme'
-import { makeStyles } from 'tss-react/mui'
+import { Theme } from '@mui/material';
+import { colors, typography } from '@static/theme';
+import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme: Theme) => ({
   infoTypeLabel: {
-    textTransform: 'uppercase',
-    color: colors.oraidex.lightGrey,
-    ...typography.body2,
-    lineHeight: '35px',
-    [theme.breakpoints.down('md')]: {
-      ...typography.caption4,
-      lineHeight: '35px'
-    },
-    [theme.breakpoints.down('sm')]: {
-      ...typography.body2,
-      lineHeight: '35px'
-    }
+    // textTransform: 'uppercase',
+    color: colors.oraidex.neutralText,
+    ...typography.body4
+  },
+
+  infoSwap: {
+    textAlign: 'right'
   },
   infoTypeSwap: {
     display: 'flex',
-    backgroundColor: colors.oraidex.dark,
-    borderRadius: 13,
+    backgroundColor: colors.oraidex.newDark,
+    borderRadius: 12,
+    padding: 12,
+
     lineHeight: '20px',
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'space-between'
   },
   infoType: {
-    backgroundColor: colors.oraidex.light,
-    borderRadius: 13,
-    textAlign: 'center',
-    marginRight: 6,
-    width: 61,
-    padding: 2,
-    [theme.breakpoints.down('md')]: {
-      marginRight: 0
-    }
-  },
-  infoSwap: {
-    display: 'flex',
-    justifyContent: 'center',
-    fontSize: 16,
-    width: '100%'
+    borderRadius: 12,
+    textAlign: 'left',
+    marginRight: 6
   },
   infoAmount: {
+    textAlign: 'right',
     color: colors.oraidex.text,
-    paddingRight: 8,
-    ...typography.body1,
-    lineHeight: '35px',
+    ...typography.heading5
 
-    [theme.breakpoints.only('md')]: {
-      ...typography.body2,
-      lineHeight: '35px'
-    }
+    // [theme.breakpoints.only('md')]: {
+    //   ...typography.body2,
+    //   lineHeight: '35px'
+    // }
   },
   infoSwapToken: {
+    textAlign: 'right',
     color: colors.oraidex.lightGrey,
-    ...typography.body1,
+    ...typography.body4,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    lineHeight: '35px',
-    [theme.breakpoints.down('md')]: {
-      ...typography.caption3,
-      lineHeight: '35px'
-    },
-    [theme.breakpoints.down('sm')]: {
-      ...typography.caption1,
-      lineHeight: '35px'
-    }
+    whiteSpace: 'nowrap'
   }
-}))
+}));
 
-export default useStyles
+export default useStyles;