Merge pull request #253 from invariant-labs/dev

Update staging
invariant-labs · Jul 31, 2024 · bc72f9a · bc72f9a
2 parents 84e84a9 + dcbc87d
commit bc72f9a
Show file tree

Hide file tree

Showing 43 changed files with 317 additions and 120 deletions.
diff --git a/src/components/AnimatedButton/style.ts b/src/components/AnimatedButton/style.ts
@@ -54,7 +54,10 @@ const useStyles = makeStyles()(() => {
         '&:hover': {
           boxShadow: 'none',
           cursor: 'not-allowed',
-          filter: 'brightness(1.15)'
+          filter: 'brightness(1.15)',
+          '@media (hover: none)': {
+            filter: 'none'
+          }
         }
       }
     },
@@ -90,7 +93,7 @@ const useStyles = makeStyles()(() => {
       height: '100%',
       padding: 0,
       position: 'absolute',
-      animation: `${slideEndSuccess} 1.5s ease-out`
+      animation: `${slideEndSuccess} 0.5s ease-out`
     },
     backgroundApprovedWithFail: {
       top: 0,
@@ -99,7 +102,7 @@ const useStyles = makeStyles()(() => {
       height: '100%',
       padding: 0,
       position: 'absolute',
-      animation: `${slideEndFail} 1.5s ease-out`
+      animation: `${slideEndFail} 0.5s ease-out`
     },
     buttonContent: {
       position: 'relative',

diff --git a/src/components/EmptyPlaceholder/style.tsx b/src/components/EmptyPlaceholder/style.tsx
@@ -50,7 +50,11 @@ export const useStyles = makeStyles()(() => ({
 
     '&:hover': {
       background: colors.invariant.pinkLinearGradient,
-      boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)'
+      boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)',
+      '@media (hover: none)': {
+        background: colors.invariant.pinkLinearGradientOpacity,
+        boxShadow: 'none'
+      }
     }
   }
 }))
diff --git a/src/components/Footer/style.ts b/src/components/Footer/style.ts
@@ -18,7 +18,11 @@ const useStyles = makeStyles()(() => {
       transition: '.2s all',
       '&:hover': {
         opacity: 1,
-        transform: 'scale(1.1) rotate(10deg)'
+        transform: 'scale(1.1) rotate(10deg)',
+        '@media (hover: none)': {
+          opacity: 0.5,
+          transform: 'none'
+        }
       }
     },
     footerLink: {

diff --git a/src/components/Header/HeaderButton/style.ts b/src/components/Header/HeaderButton/style.ts
@@ -15,7 +15,10 @@ const useStyles = makeStyles()((theme: Theme) => {
       height: 32,
       boxShadow: 'none',
       '&:hover': {
-        background: colors.invariant.light
+        background: colors.invariant.light,
+        '@media (hover: none)': {
+          background: 'transparent'
+        }
       },
       '&:active': {
         '& #downIcon': {
@@ -46,7 +49,11 @@ const useStyles = makeStyles()((theme: Theme) => {
 
       '&:hover': {
         boxShadow: `0 0 15px ${colors.invariant.light}`,
-        backgroundColor: colors.invariant.light
+        backgroundColor: colors.invariant.light,
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
       }
     },
     headerButtonConnected: {
@@ -59,7 +66,10 @@ const useStyles = makeStyles()((theme: Theme) => {
       height: 40,
 
       '&:hover': {
-        background: colors.blue.deep
+        background: colors.blue.deep,
+        '@media (hover: none)': {
+          background: colors.invariant.light
+        }
       }
     },
     headerButtonTextEllipsis: {

diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts
@@ -64,6 +64,9 @@ const useStyles = makeStyles()((theme: Theme) => {
       gap: 8,
       flexWrap: 'nowrap',
       alignItems: 'center',
+      [theme.breakpoints.up(1600)]: {
+        flex: '1 1 0%'
+      },
 
       [theme.breakpoints.up('lg')]: {
         minWidth: 350
@@ -131,10 +134,6 @@ const useStyles = makeStyles()((theme: Theme) => {
 
       [theme.breakpoints.up(1600)]: {
         flex: '1 1 0%'
-      },
-
-      [theme.breakpoints.up(1600)]: {
-        width: 600
       }
     }
   }

diff --git a/src/components/Inputs/DepositAmountInput/style.ts b/src/components/Inputs/DepositAmountInput/style.ts
@@ -118,7 +118,10 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
     marginRight: 6,
 
     '&:hover': {
-      color: isSelected ? colors.white.main : ''
+      color: isSelected ? colors.white.main : '',
+      '@media (hover: none)': {
+        color: colors.invariant.lightHover
+      }
     }
   },
   maxButton: {
@@ -136,7 +139,11 @@ export const useStyles = makeStyles<{ isSelected: boolean }>()((theme: Theme, {
     '&:hover': {
       background: 'none',
       backgroundColor: colors.invariant.green,
-      boxShadow: '0px 0px 20px -10px white'
+      boxShadow: '0px 0px 20px -10px white',
+      '@media (hover: none)': {
+        background: ' rgba(46, 224, 154, 0.8)',
+        boxShadow: 'none'
+      }
     },
     [theme.breakpoints.down('md')]: {
       width: 26,

diff --git a/src/components/Inputs/ExchangeAmountInput/style.ts b/src/components/Inputs/ExchangeAmountInput/style.ts
@@ -31,7 +31,11 @@ export const useStyles = makeStyles<{ walletDisconnected: boolean }>()(
       '&:hover': {
         background: 'none',
         backgroundColor: colors.invariant.green,
-        boxShadow: '0px 0px 20px -10px white'
+        boxShadow: '0px 0px 20px -10px white',
+        '@media (hover: none)': {
+          background: ' rgba(46, 224, 154, 0.8)',
+          boxShadow: 'none'
+        }
       },
       [theme.breakpoints.down('md')]: {
         width: 26,

diff --git a/src/components/Inputs/RangeInput/style.ts b/src/components/Inputs/RangeInput/style.ts
@@ -63,7 +63,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
 
     '&:hover': {
       backgroundColor: colors.invariant.green,
-      boxShadow: `0 0 10px ${colors.invariant.green}`
+      boxShadow: `0 0 10px ${colors.invariant.green}`,
+      '@media (hover: none)': {
+        background: ' rgba(46, 224, 154, 0.8)',
+        boxShadow: 'none'
+      }
     }
   },
   buttonIcon: {

diff --git a/src/components/Inputs/Select/style.ts b/src/components/Inputs/Select/style.ts
@@ -21,7 +21,10 @@ export const useStyles = makeStyles()((theme: Theme) => {
 
       '&:hover': {
         filter: 'brightness(1)',
-        backgroundColor: colors.invariant.light
+        backgroundColor: colors.invariant.light,
+        '@media (hover: none)': {
+          filter: 'brightness(0.8)'
+        }
       },
 
       [theme.breakpoints.down('sm')]: {

diff --git a/src/components/Modals/ClosePositionWarning/styles.ts b/src/components/Modals/ClosePositionWarning/styles.ts
@@ -74,7 +74,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     marginBottom: 10,
 
     '&:hover': {
-      background: colors.invariant.greenLinearGradient
+      background: colors.invariant.greenLinearGradient,
+      '@media (hover: none)': {
+        background: colors.invariant.greenLinearGradientOpacity
+      }
     }
   },
   claimButton: {
@@ -86,7 +89,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     borderRadius: 18,
 
     '&:hover': {
-      background: colors.invariant.pinkLinearGradient
+      background: colors.invariant.pinkLinearGradient,
+      '@media (hover: none)': {
+        background: colors.invariant.pinkLinearGradientOpacity
+      }
     }
   },
   cancelButton: {
@@ -99,7 +105,10 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     marginBottom: 10,
 
     '&:hover': {
-      background: colors.invariant.lightHover
+      background: colors.invariant.lightHover,
+      '@media (hover: none)': {
+        background: colors.invariant.light
+      }
     }
   }
 }))

diff --git a/src/components/Modals/ConnectWallet/style.ts b/src/components/Modals/ConnectWallet/style.ts
@@ -26,7 +26,10 @@ const useStyles = makeStyles()(() => {
       alignItems: 'center',
       '&:hover': {
         color: colors.white.main,
-        background: colors.invariant.light
+        background: colors.invariant.light,
+        '@media (hover: none)': {
+          color: colors.invariant.lightGrey
+        }
       },
       '&:first-of-type': {
         marginBottom: '4px'

diff --git a/src/components/Modals/RoutesModal/index.tsx b/src/components/Modals/RoutesModal/index.tsx
@@ -28,7 +28,8 @@ export const RoutesModal: React.FC<IRoutesModal> = ({
   const { classes } = useStyles()
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
-    liquidity: [/^newPosition\/*/, /^position\/*/]
+    liquidity: [/^newPosition\/*/, /^position\/*/],
+    exchange: [/^exchange\/*/]
   }
 
   return (

diff --git a/src/components/Modals/SelectChain/style.ts b/src/components/Modals/SelectChain/style.ts
@@ -25,7 +25,11 @@ const useStyles = makeStyles()(() => {
       alignItems: 'center',
       '&:hover': {
         background: colors.invariant.light,
-        color: colors.white.main
+        color: colors.white.main,
+        '@media (hover: none)': {
+          background: colors.invariant.component,
+          color: colors.invariant.textGrey
+        }
       },
       '&:first-of-type': {
         marginBottom: '4px'

diff --git a/src/components/Modals/SelectModals/style.ts b/src/components/Modals/SelectModals/style.ts
@@ -120,7 +120,10 @@ const useStyles = makeStyles()((theme: Theme) => {
       },
 
       '&:hover': {
-        background: colors.invariant.light
+        background: colors.invariant.light,
+        '@media (hover: none)': {
+          background: colors.invariant.newDark
+        }
       }
     },
     commonTokenIcon: {
@@ -182,7 +185,10 @@ const useStyles = makeStyles()((theme: Theme) => {
         textDecoration: 'none',
 
         '&:hover': {
-          filter: 'brightness(1.2)'
+          filter: 'brightness(1.2)',
+          '@media (hover: none)': {
+            filter: 'none'
+          }
         },
         '& p': {
           color: colors.invariant.lightGrey,
@@ -294,7 +300,11 @@ const useStyles = makeStyles()((theme: Theme) => {
       '&:hover': {
         backgroundColor: colors.invariant.light,
         boxShadow: 'none',
-        color: colors.white.main
+        color: colors.white.main,
+        '@media (hover: none)': {
+          backgroundColor: colors.invariant.component,
+          color: colors.invariant.textGrey
+        }
       },
       '&:hover span': {
         color: colors.white.main

diff --git a/src/components/Modals/SelectNetwork/style.ts b/src/components/Modals/SelectNetwork/style.ts
@@ -25,7 +25,11 @@ const useStyles = makeStyles()(() => {
       alignItems: 'center',
       '&:hover': {
         background: colors.invariant.light,
-        color: colors.white.main
+        color: colors.white.main,
+        '@media (hover: none)': {
+          color: colors.invariant.textGrey,
+          background: colors.invariant.component
+        }
       },
       '&:first-of-type': {
         marginBottom: '4px'

diff --git a/src/components/Modals/SelectTestnetRPC/styles.ts b/src/components/Modals/SelectTestnetRPC/styles.ts
@@ -25,7 +25,11 @@ const useStyles = makeStyles()(() => {
       alignItems: 'center',
       '&:hover': {
         background: colors.invariant.light,
-        color: colors.white.main
+        color: colors.white.main,
+        '@media (hover: none)': {
+          color: colors.invariant.textGrey,
+          background: colors.invariant.component
+        }
       },
       '&first-of-type': {
         marginBottom: '4px'

diff --git a/src/components/Modals/Slippage/Slippage.tsx b/src/components/Modals/Slippage/Slippage.tsx
@@ -117,7 +117,7 @@ const Slippage: React.FC<Props> = ({
         }}>
         <Grid container className={classes.detailsWrapper}>
           <Grid container justifyContent='space-between' style={{ marginBottom: 6 }}>
-            <Typography component='h2'>{headerText ?? 'Exchange Transaction Settings'}</Typography>
+            <Typography component='h2'>{headerText ?? 'Exchange Settings'}</Typography>
             <Button className={classes.selectTokenClose} onClick={handleClose} />
           </Grid>
           <Typography className={classes.label}>Slippage tolerance</Typography>

diff --git a/src/components/Modals/Slippage/style.ts b/src/components/Modals/Slippage/style.ts
@@ -49,7 +49,7 @@ export const useStyles = makeStyles()(() => {
     },
     detailsInfoForm: {
       border: `1px solid ${colors.invariant.component}`,
-      color: colors.invariant.light,
+      color: colors.invariant.textGrey,
       borderRadius: 15,
       width: '100%',
       backgroundColor: colors.invariant.newDark,
@@ -82,7 +82,11 @@ export const useStyles = makeStyles()(() => {
         filter: 'brightness(1.15)',
         transition: ' .4s filter',
         boxShadow:
-          '0px 3px 1px -2px rgba(43, 193, 144, 0.2),0px 1px 2px 0px rgba(45, 168, 128, 0.14),0px 0px 5px 7px rgba(59, 183, 142, 0.12)'
+          '0px 3px 1px -2px rgba(43, 193, 144, 0.2),0px 1px 2px 0px rgba(45, 168, 128, 0.14),0px 0px 5px 7px rgba(59, 183, 142, 0.12)',
+        '@media (hover: none)': {
+          filter: 'none',
+          boxShadow: 'none'
+        }
       }
     },
     info: {
@@ -99,7 +103,11 @@ export const useStyles = makeStyles()(() => {
 
       '&:hover': {
         backgroundColor: colors.invariant.light,
-        color: colors.invariant.text
+        color: colors.invariant.text,
+        '@media (hover: none)': {
+          backgroundColor: colors.invariant.newDark,
+          color: colors.invariant.textGrey
+        }
       }
     },
     slippagePercentageButtonActive: {
@@ -109,6 +117,9 @@ export const useStyles = makeStyles()(() => {
     },
     inputAdornedEnd: {
       marginRight: 2
+    },
+    inputAdornedStart: {
+      color: colors.invariant.pink
     }
   }
 })

diff --git a/src/components/Navbar/style.ts b/src/components/Navbar/style.ts
@@ -16,7 +16,10 @@ const useStyles = makeStyles()(() => {
       '&:hover': {
         background: 'transparent',
         color: colors.invariant.lightGrey,
-        ...typography.body1
+        ...typography.body1,
+        '@media (hover: none)': {
+          color: colors.invariant.light
+        }
       }
     },
     active: {

diff --git a/src/components/NewPosition/ConcentrationTypeSwitch/style.ts b/src/components/NewPosition/ConcentrationTypeSwitch/style.ts
@@ -39,7 +39,10 @@ export const useSingleTabStyles = makeStyles()(() => {
       transition: 'color 300ms',
 
       '&:hover': {
-        color: colors.invariant.lightHover
+        color: colors.invariant.lightHover,
+        '@media (hover: none)': {
+          color: colors.invariant.light
+        }
       }
     },
     selected: {

diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
@@ -176,7 +176,7 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
       !tokenBInputState.blocked &&
       +tokenBInputState.value === 0
     ) {
-      return 'Add tokens to position'
+      return 'Enter token amounts'
     }
 
     return 'Add Position'