update theme configuration and fix some issues

QuickSwap · Dec 15, 2021 · 9d1856c · 9d1856c
1 parent 2d1d048
commit 9d1856c
Show file tree

Hide file tree

Showing 45 changed files with 551 additions and 436 deletions.
diff --git a/src/components/AccountDetails/AccountDetails.tsx b/src/components/AccountDetails/AccountDetails.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { useActiveWeb3React } from 'hooks';
 import { AppDispatch } from 'state';
 import { Box, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { clearAllTransactions } from 'state/transactions/actions';
 import { shortenAddress, getEtherscanLink } from 'utils';
 import { SUPPORTED_WALLETS } from 'constants/index';
@@ -56,6 +56,7 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
 }) => {
   const { chainId, account, connector } = useActiveWeb3React();
   const classes = useStyles();
+  const { palette } = useTheme();
   const dispatch = useDispatch<AppDispatch>();
 
   function formatConnectorName() {
@@ -81,7 +82,12 @@ const AccountDetails: React.FC<AccountDetailsProps> = ({
         <Typography variant='h5'>Account</Typography>
         <Close style={{ cursor: 'pointer' }} onClick={toggleWalletModal} />
       </Box>
-      <Box mt={2} padding={2} borderRadius={10} bgcolor='#282d3d'>
+      <Box
+        mt={2}
+        padding={2}
+        borderRadius={10}
+        bgcolor={palette.secondary.dark}
+      >
         <Box display='flex' justifyContent='space-between' alignItems='center'>
           {formatConnectorName()}
           {connector !== injected &&

diff --git a/src/components/AccountDetails/CopyHelper.tsx b/src/components/AccountDetails/CopyHelper.tsx
@@ -10,7 +10,7 @@ const useStyles = makeStyles(({ palette }) => ({
     display: 'flex',
     cursor: 'pointer',
     '&:hover, &:active, &:focus': {
-      color: palette.text.secondary,
+      color: 'white',
     },
   },
 }));

diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -7,7 +7,7 @@ import {
   ConfirmationModalContent,
   DoubleCurrencyLogo,
 } from 'components';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useWalletModalToggle } from 'state/application/hooks';
 import { TransactionResponse } from '@ethersproject/providers';
 import { BigNumber } from '@ethersproject/bignumber';
@@ -41,7 +41,7 @@ import {
 import { wrappedCurrency } from 'utils/wrappedCurrency';
 import { ReactComponent as AddLiquidityIcon } from 'assets/images/AddLiquidityIcon.svg';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   exchangeSwap: {
     cursor: 'pointer',
     display: 'flex',
@@ -58,10 +58,10 @@ const useStyles = makeStyles(({ breakpoints }) => ({
       fontSize: 18,
       fontWeight: 600,
       width: (props: any) => (props.showApproveFlow ? '48%' : '100%'),
-      backgroundImage: 'linear-gradient(to bottom, #448aff, #004ce6)',
+      backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
       '&.Mui-disabled': {
-        backgroundImage: 'linear-gradient(to bottom, #282d3d, #1d212c)',
-        color: '#696c80',
+        backgroundImage: `linear-gradient(to bottom, ${palette.secondary.dark}, #1d212c)`,
+        color: palette.text.secondary,
         opacity: 0.5,
       },
       '& .content': {
@@ -85,7 +85,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     '& p': {
       display: 'flex',
       alignItems: 'center',
-      color: '#c7cad9',
+      color: palette.text.primary,
       '& svg': {
         marginLeft: 8,
         width: 16,
@@ -106,6 +106,7 @@ const AddLiquidity: React.FC<{
   currency1?: Currency;
 }> = ({ currency0, currency1 }) => {
   const classes = useStyles({});
+  const { palette } = useTheme();
   const [addLiquidityErrorMessage, setAddLiquidityErrorMessage] = useState<
     string | null
   >(null);
@@ -398,7 +399,7 @@ const AddLiquidity: React.FC<{
             size={48}
           />
         </Box>
-        <Box mb={6} color='#c7cad9' textAlign='center'>
+        <Box mb={6} color={palette.text.primary} textAlign='center'>
           <Typography variant='h6'>
             Supplying {parsedAmounts[Field.CURRENCY_A]?.toSignificant()}&nbsp;
             {currencies[Field.CURRENCY_A]?.symbol}&nbsp;and&nbsp;
@@ -410,7 +411,7 @@ const AddLiquidity: React.FC<{
             {currencies[Field.CURRENCY_B]?.symbol} LP Tokens
           </Typography>
         </Box>
-        <Box mb={3} color='#696c80' textAlign='center'>
+        <Box mb={3} color={palette.text.secondary} textAlign='center'>
           <Typography variant='body2'>
             {`Output is estimated. If the price changes by more than ${allowedSlippage /
               100}% your transaction will revert.`}

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles(({ palette }) =>
       marginRight: 8,
       '& p': {
         fontSize: 12,
-        color: '#626680',
+        color: palette.text.disabled,
       },
     },
     yAxis: {
@@ -31,7 +31,7 @@ const useStyles = makeStyles(({ palette }) =>
       '& p': {
         fontSize: 10,
         fontWeight: 500,
-        color: '#626680',
+        color: palette.text.disabled,
       },
     },
   }),

diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
@@ -9,7 +9,7 @@ export interface BarChartProps {
   onHover: (index: number) => void;
 }
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   barChartItem: {
     background:
       'linear-gradient(to bottom, #64fbd3, #00cff3 34%, #0098ff 63%, #004ce6)',
@@ -28,7 +28,7 @@ const useStyles = makeStyles(({}) => ({
     marginRight: 8,
     '& p': {
       fontSize: 12,
-      color: '#626680',
+      color: palette.text.disabled,
     },
   },
 }));

diff --git a/src/components/ColoredSlider/ColoredSlider.tsx b/src/components/ColoredSlider/ColoredSlider.tsx
@@ -65,7 +65,7 @@ const ColoredSlider = withStyles((theme: Theme) => ({
   thumb: {
     height: 20,
     width: 20,
-    backgroundColor: '#448aff',
+    backgroundColor: theme.palette.primary.main,
     marginTop: -9,
     marginLeft: 0,
     boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.15)',
@@ -97,7 +97,7 @@ const ColoredSlider = withStyles((theme: Theme) => ({
   rail: {
     height: 2,
     borderRadius: 4,
-    background: '#1b1e29',
+    background: theme.palette.background.paper,
     width: 'calc(100% + 16px)',
   },
 }))(Slider);

diff --git a/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx b/src/components/ConfirmSwapModal/FormattedPriceImpact.tsx
@@ -1,4 +1,5 @@
 import { Typography } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { Percent } from '@uniswap/sdk';
 import React from 'react';
 import { ONE_BIPS } from '../../constants';
@@ -10,6 +11,7 @@ import { warningSeverity } from '../../utils/prices';
 const FormattedPriceImpact: React.FC<{ priceImpact?: Percent }> = ({
   priceImpact,
 }) => {
+  const { palette } = useTheme();
   const severity = warningSeverity(priceImpact);
   return (
     <Typography
@@ -22,7 +24,7 @@ const FormattedPriceImpact: React.FC<{ priceImpact?: Percent }> = ({
             ? 'yellow'
             : severity === 1
             ? 'black'
-            : '#0fc679',
+            : palette.success.main,
       }}
     >
       {priceImpact

diff --git a/src/components/ConfirmSwapModal/SwapModalHeader.tsx b/src/components/ConfirmSwapModal/SwapModalHeader.tsx
@@ -16,7 +16,7 @@ const useStyles = makeStyles(({ palette }) => ({
     flexDirection: 'column',
     alignItems: 'center',
     '& p': {
-      color: '#c7cad9',
+      color: palette.text.primary,
     },
     '& svg': {
       margin: '12px 0',
@@ -30,22 +30,22 @@ const useStyles = makeStyles(({ palette }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    color: palette.secondary.dark,
+    color: palette.primary.main,
     '& > div': {
       display: 'flex',
       alignItems: 'center',
     },
   },
   transactionText: {
     marginTop: '32px',
-    color: '#696c80',
+    color: palette.text.secondary,
     textAlign: 'center',
     '& p': {
       marginBottom: 16,
     },
   },
   swapButton: {
-    backgroundImage: 'linear-gradient(to bottom, #448aff, #004ce6)',
+    backgroundImage: `linear-gradient(to bottom, ${palette.primary.main}, #004ce6)`,
     width: '100%',
     height: 56,
     marginTop: 20,
@@ -98,28 +98,28 @@ const SwapModalHeader: React.FC<SwapModalHeaderProps> = ({
           {trade.outputAmount.currency.symbol}
         </Typography>
       </Box>
-      {showAcceptChanges && (
-        <Box className={classes.priceUpdate}>
-          <Box>
-            <AlertTriangle
-              size={20}
-              style={{ marginRight: '8px', minWidth: 24 }}
-            />
-            <Typography> Price Updated</Typography>
-          </Box>
-          <Button
-            style={{
-              padding: '.5rem',
-              width: 'fit-content',
-              fontSize: '0.825rem',
-              borderRadius: '12px',
-            }}
-            onClick={onAcceptChanges}
-          >
-            Accept
-          </Button>
+      {/* {showAcceptChanges && ( */}
+      <Box className={classes.priceUpdate}>
+        <Box>
+          <AlertTriangle
+            size={20}
+            style={{ marginRight: '8px', minWidth: 24 }}
+          />
+          <Typography> Price Updated</Typography>
         </Box>
-      )}
+        <Button
+          style={{
+            padding: '.5rem',
+            width: 'fit-content',
+            fontSize: '0.825rem',
+            borderRadius: '12px',
+          }}
+          onClick={onAcceptChanges}
+        >
+          Accept
+        </Button>
+      </Box>
+      {/* )} */}
       <Box className={classes.transactionText}>
         {trade.tradeType === TradeType.EXACT_INPUT ? (
           <Typography variant='body2'>

diff --git a/src/components/CurrencyInput/CurrencyInput.tsx b/src/components/CurrencyInput/CurrencyInput.tsx
@@ -8,11 +8,11 @@ import { CurrencySearchModal, CurrencyLogo } from 'components';
 import { useActiveWeb3React } from 'hooks';
 import useUSDCPrice from 'utils/useUSDCPrice';
 
-const useStyles = makeStyles(({ breakpoints }) => ({
+const useStyles = makeStyles(({ palette, breakpoints }) => ({
   swapBox: {
     padding: '16px 24px',
     borderRadius: 10,
-    background: '#282d3d',
+    background: palette.secondary.dark,
     zIndex: 1,
     position: 'relative',
     textAlign: 'left',
@@ -32,7 +32,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
         paddingLeft: 8,
         cursor: 'pointer',
         '& p': {
-          color: '#448aff',
+          color: palette.primary.main,
           fontWeight: 600,
         },
       },
@@ -42,12 +42,12 @@ const useStyles = makeStyles(({ breakpoints }) => ({
         boxShadow: 'none',
         outline: 'none',
         textAlign: 'right',
-        color: '#696c80',
+        color: palette.text.secondary,
         width: '100%',
         fontSize: 18,
         fontWeight: 600,
         '&::placeholder': {
-          color: '#696c80',
+          color: palette.text.secondary,
         },
       },
     },
@@ -70,14 +70,14 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     },
   },
   noCurrency: {
-    backgroundImage: 'linear-gradient(105deg, #448aff 3%, #004ce6)',
+    backgroundImage: `linear-gradient(105deg, ${palette.primary.main} 3%, #004ce6)`,
   },
   currencySelected: {
     backgroundColor: '#404557',
   },
   balanceSection: {
     '& p': {
-      color: '#696c80',
+      color: palette.text.secondary,
     },
   },
 }));
@@ -121,15 +121,7 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   return (
     <Box className={cx(classes.swapBox, showPrice && classes.priceShowBox)}>
       <Box display='flex' justifyContent='space-between' mb={2}>
-        <Box
-          display='flex'
-          flexDirection='row'
-          justifyContent='space-between'
-          width='100%'
-        >
-          <Typography>{title || 'You Pay:'}</Typography>
-          {/* <Typography style={{color: '#448aff', fontSize: '16px', cursor: 'pointer'}}>MAX</Typography> */}
-        </Box>
+        <Typography>{title || 'You Pay:'}</Typography>
         <Box display='flex'>
           {account && currency && showHalfButton && (
             <Box className='maxWrapper' onClick={onHalf}>

diff --git a/src/components/CurrencySearchModal/CommonBases.tsx b/src/components/CurrencySearchModal/CommonBases.tsx
@@ -5,14 +5,14 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SUGGESTED_BASES } from 'constants/index';
 import { CurrencyLogo, QuestionHelper } from 'components';
 
-const useStyles = makeStyles(({}) => ({
+const useStyles = makeStyles(({ palette }) => ({
   baseWrapper: {
     borderRadius: 18,
     display: 'flex',
     padding: '6px 10px',
     margin: '4px 8px 4px 0',
     alignItems: 'center',
-    backgroundColor: '#282d3d',
+    backgroundColor: palette.secondary.dark,
     '&:hover': {
       cursor: 'pointer',
     },
@@ -23,7 +23,7 @@ const useStyles = makeStyles(({}) => ({
   title: {
     '& span': {
       marginRight: 4,
-      color: '#696c80',
+      color: palette.text.secondary,
     },
   },
 }));