Merge pull request #143 from invariant-labs/staging

Update mobile
invariant-labs · Jun 27, 2024 · 0ed16b3 · 0ed16b3
2 parents 23faabb + c378f67
commit 0ed16b3
Show file tree

Hide file tree

Showing 27 changed files with 86 additions and 39 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -97,7 +97,11 @@ export const Header: React.FC<IHeader> = ({
             justifyContent='flex-start'
             sx={{ display: { xs: 'block', md: 'none' } }}>
             <Grid container>
-              <CardMedia className={classes.logoShort} image={icons.LogoShort} />
+              <CardMedia
+                className={classes.logoShort}
+                image={icons.LogoShort}
+                onClick={() => navigate('/swap')}
+              />
             </Grid>
           </Grid>
         </Box>
@@ -124,7 +128,7 @@ export const Header: React.FC<IHeader> = ({
           ))}
         </Grid>
 
-        <Grid container item className={classes.buttons} wrap='nowrap' gap={1.5}>
+        <Grid container item className={classes.buttons} wrap='nowrap'>
           {typeOfNetwork === Network.Testnet ? (
             <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
               <Button

diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
@@ -19,7 +19,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     },
     logo: {
@@ -58,6 +58,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     buttons: {
       justifyContent: 'flex-end',
       flex: '1 1 0%',
+      gap: 12,
 
       [theme.breakpoints.up('lg')]: {
         minWidth: 350
@@ -68,11 +69,12 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       [theme.breakpoints.down('md')]: {
-        marginLeft: 0
+        marginLeft: 0,
+        justifyContent: 'center'
       },
 
-      [theme.breakpoints.down('md')]: {
-        justifyContent: 'center'
+      [theme.breakpoints.down('sm')]: {
+        gap: 4
       }
     },
     buttonsLgConnected: {

diff --git a/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx b/src/components/Inputs/DepositAmountInput/DepositAmountInput.tsx
@@ -116,7 +116,7 @@ export const DepositAmountInput: React.FC<IProps> = ({
             className={classes.input}
             classes={{ input: classes.innerInput }}
             inputRef={inputRef}
-            type={'text'}
+            type='number'
             value={value}
             disableUnderline={true}
             placeholder={placeholder}

diff --git a/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx b/src/components/Inputs/ExchangeAmountInput/ExchangeAmountInput.tsx
@@ -125,7 +125,7 @@ export const AmountInput: React.FC<IProps> = ({
           className={classNames(classes.amountInput, className)}
           classes={{ input: classes.input }}
           style={style}
-          type={'text'}
+          type='number'
           value={value}
           disableUnderline={true}
           placeholder={placeholder}

diff --git a/src/components/Inputs/RangeInput/RangeInput.tsx b/src/components/Inputs/RangeInput/RangeInput.tsx
@@ -137,6 +137,7 @@ export const RangeInput: React.FC<IRangeInput> = ({
           onBlur={onBlur}
           disableUnderline={true}
           disabled={disabled}
+          type='number'
         />
         {disabled ? null : (
           <Button className={classes.button} onClick={increaseValue} disableRipple>

diff --git a/src/components/Inputs/SimpleInput/SimpleInput.tsx b/src/components/Inputs/SimpleInput/SimpleInput.tsx
@@ -72,7 +72,7 @@ export const SimpleInput: React.FC<IProps> = ({
       className={classNames(classes.amountInput, className)}
       classes={{ input: classes.input }}
       style={style}
-      type={'text'}
+      type='number'
       value={value}
       disableUnderline={true}
       placeholder={placeholder}

diff --git a/src/components/Modals/AddTokenModal/style.ts b/src/components/Modals/AddTokenModal/style.ts
@@ -40,6 +40,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       maxWidth: 16,
       fontSize: 20,
       background: 'none',
+      color: colors.white.main,
       '&:hover': {
         background: 'none !important'
       }

diff --git a/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx b/src/components/Modals/SelectModals/SelectTokenModal/SelectTokenModal.tsx
@@ -67,7 +67,7 @@ export const SelectTokenModal: React.FC<ISelectTokenModal> = ({
   onHideUnknownTokensChange
 }) => {
   const { classes } = useStyles()
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'))
 
   const [value, setValue] = useState<string>('')
 

diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts
@@ -68,6 +68,11 @@ const useStyles = makeStyles()((theme: Theme) => {
       borderColor: colors.invariant.newDark,
       borderRadius: 15,
       padding: '18px 10px 17px 10px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: 32,
+
       '&::placeholder': {
         color: colors.invariant.light,
         ...typography.body1

diff --git a/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx b/src/components/NewPosition/ConcentrationTypeSwitch/ConcentrationTypeSwitch.tsx
@@ -18,7 +18,7 @@ export const ConcentrationTypeSwitch: React.FC<IProps> = ({
   disabled = false,
   currentValue
 }) => {
-  const isXs = useMediaQuery(theme.breakpoints.down('xs'))
+  const isXs = useMediaQuery(theme.breakpoints.down('sm'))
 
   const { classes: tabsClasses } = useTabsStyles({ value: currentValue })
   const { classes: singleTabClasses } = useSingleTabStyles()

diff --git a/src/components/NewPosition/DepositSelector/style.ts b/src/components/NewPosition/DepositSelector/style.ts
@@ -1,14 +1,18 @@
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 
-export const useStyles = makeStyles()(() => {
+export const useStyles = makeStyles()(theme => {
   return {
     wrapper: {
       borderRadius: 10,
       backgroundColor: colors.invariant.component,
       padding: 24,
       paddingTop: 16,
-      flex: '1 1 0%'
+      flex: '1 1 0%',
+
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px '
+      }
     },
     sectionTitle: {
       ...typography.heading4,

diff --git a/src/components/NewPosition/PoolInit/style.ts b/src/components/NewPosition/PoolInit/style.ts
@@ -7,7 +7,10 @@ const useStyles = makeStyles()(theme => {
       borderRadius: 10,
       backgroundColor: colors.invariant.component,
       padding: '16px 24px 8px 24px',
-      flex: '1 1 0%'
+      flex: '1 1 0%',
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px'
+      }
     },
     header: {
       ...typography.heading4,

diff --git a/src/components/NewPosition/RangeSelector/style.ts b/src/components/NewPosition/RangeSelector/style.ts
@@ -8,7 +8,10 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: colors.invariant.component,
       padding: '16px 24px 16px 24px',
       flex: '1 1 0%',
-      position: 'relative'
+      position: 'relative',
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 8px  16px 8px '
+      }
     },
     headerContainer: {
       marginBottom: 12
@@ -81,7 +84,8 @@ const useStyles = makeStyles()(theme => {
         right: 0,
         zIndex: 11,
         width: '100%',
-        borderRadius: 9
+        borderRadius: 9,
+        textAlign: 'center'
       }
     },
 

diff --git a/src/components/NoConnected/style.tsx b/src/components/NoConnected/style.tsx
@@ -16,7 +16,10 @@ export const useStyles = makeStyles()(() => ({
     justifyContent: 'center',
     paddingBottom: 25,
     width: '100%',
-    height: '100%'
+    height: '100%',
+    p: {
+      textAlign: 'center'
+    }
   },
   img: {
     paddingBottom: 25

diff --git a/src/components/PositionDetails/LiquidationRangeInfo/style.ts b/src/components/PositionDetails/LiquidationRangeInfo/style.ts
@@ -39,7 +39,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'center',
     fontSize: 16,
-    width: '100%'
+    width: '100%',
+    padding: '0 4px'
   },
   infoAmount: {
     color: colors.invariant.text,

diff --git a/src/components/PositionDetails/SinglePositionInfo/style.ts b/src/components/PositionDetails/SinglePositionInfo/style.ts
@@ -103,7 +103,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
   bottomGrid: {
     background: colors.invariant.component,
     marginTop: 20,
-    padding: 24,
+    padding: 8,
+    paddingTop: 16,
     borderRadius: 24,
     flexGrow: 1,
     display: 'flex',

diff --git a/src/components/PositionDetails/SinglePositionPlot/style.ts b/src/components/PositionDetails/SinglePositionPlot/style.ts
@@ -8,7 +8,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     backgroundColor: colors.invariant.component,
     padding: 24,
     paddingTop: 18,
-    borderRadius: 24
+    borderRadius: 24,
+    [theme.breakpoints.down('sm')]: {
+      padding: 8,
+      paddingTop: 16
+    }
   },
   headerContainer: {
     ...typography.heading4,

diff --git a/src/components/PositionsList/PositionItem/style.tsx b/src/components/PositionsList/PositionItem/style.tsx
@@ -20,6 +20,9 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     [theme.breakpoints.down('lg')]: {
       padding: 16,
       flexWrap: 'wrap'
+    },
+    [theme.breakpoints.down('sm')]: {
+      padding: 8
     }
   },
   icons: {
@@ -82,7 +85,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     [theme.breakpoints.down('sm')]: {
-      ...typography.caption1
+      ...typography.caption1,
+      padding: '0 4px'
     }
   },
   activeInfoText: {

diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx
@@ -103,7 +103,7 @@ export const PositionsList: React.FC<IProps> = ({
               onChange={handleChangeInput}
               value={searchValue}
             />
-            <Grid>
+            <Grid rowGap={1} justifyContent='space-between'>
               <Button
                 disabled={showNoConnected}
                 onClick={showNoConnected ? () => {} : handleRefresh}

diff --git a/src/components/PositionsList/style.ts b/src/components/PositionsList/style.ts
@@ -43,7 +43,12 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    flexWrap: 'nowrap'
+    flexWrap: 'wrap',
+    rowGap: '8px',
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'flex-end'
+    }
   },
   searchBar: {
     width: 221,
@@ -55,7 +60,8 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     color: colors.invariant.lightGrey,
     ...typography.body2,
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 200
+      width: '100%',
+      height: 48
     }
   },
   button: {

diff --git a/src/components/Snackbar/LoadingSnackbar/style.ts b/src/components/Snackbar/LoadingSnackbar/style.ts
@@ -26,7 +26,7 @@ export const StyledSnackbarContent = styled(SnackbarContent)(({ theme }) => ({
   },
 
   [theme.breakpoints.down('sm')]: {
-    maxWidth: 'none',
+    maxWidth: 'calc(100vw - 64px)',
     width: 'auto'
   }
 }))

diff --git a/src/components/Snackbar/style.ts b/src/components/Snackbar/style.ts
@@ -11,7 +11,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '4px 16px',
     minWidth: 100,
@@ -29,7 +29,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -40,7 +40,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '4px 16px',
     minWidth: 100,
@@ -58,7 +58,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -69,7 +69,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '6px 16px',
     minWidth: 100,
@@ -87,7 +87,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   },
@@ -98,7 +98,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
     borderColor: colors.invariant.component,
     borderRadius: 10,
     ...typography.body2,
-    maxWidth: 330,
+    maxWidth: '100vw',
     width: 330,
     padding: '6px 16px',
     minWidth: 100,
@@ -116,7 +116,7 @@ export const StyledMaterialDesignContent = styled(MaterialDesignContent)(({ them
       }
     },
     [theme.breakpoints.down('sm')]: {
-      maxWidth: 'none',
+      maxWidth: 'calc(100vw - 64px)',
       width: 'auto'
     }
   }

diff --git a/src/components/Swap/style.ts b/src/components/Swap/style.ts
@@ -7,7 +7,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     [theme.breakpoints.down('sm')]: {
-      padding: '0 16px'
+      padding: '0 8px'
     }
   },
   header: {
@@ -45,6 +45,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     border: 'none',
     minWidth: 'auto',
     color: colors.invariant.lightHover,
+    padding: 'none',
     '&:hover': {
       filter: 'brightness(1.15)',
       cursor: 'pointer'
@@ -93,7 +94,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     paddingInline: 24,
     paddingBottom: 22,
     paddingTop: 16,
-    width: 500
+    width: 500,
+    [theme.breakpoints.down('sm')]: {
+      padding: '16px 8px'
+    }
   },
 
   connectWalletButton: {

diff --git a/src/pages/ListPage/styles.ts b/src/pages/ListPage/styles.ts
@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => {
       },
 
       [theme.breakpoints.down('sm')]: {
-        paddingInline: 16
+        paddingInline: 8
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => { @@
           },
           [theme.breakpoints.down('sm')]: {
-            paddingInline: 16
+            paddingInline: 8
           }
         }
       }
@@ Expand Down @@