Update mobile view of farm, dragon page, header and update background…

… of currency panel on landing page.
QuickSwap · Dec 22, 2021 · e043545 · e043545
1 parent 8fda465
commit e043545
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 172 deletions.
diff --git a/src/components/AddLiquidity/AddLiquidity.tsx b/src/components/AddLiquidity/AddLiquidity.tsx
@@ -103,7 +103,8 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
 const AddLiquidity: React.FC<{
   currency0?: Currency;
   currency1?: Currency;
-}> = ({ currency0, currency1 }) => {
+  currencyBg?: string;
+}> = ({ currency0, currency1, currencyBg }) => {
   const classes = useStyles({});
   const { palette } = useTheme();
   const [addLiquidityErrorMessage, setAddLiquidityErrorMessage] = useState<
@@ -472,6 +473,7 @@ const AddLiquidity: React.FC<{
         handleCurrencySelect={handleCurrencyASelect}
         amount={formattedAmounts[Field.CURRENCY_A]}
         setAmount={onFieldAInput}
+        bgColor={currencyBg}
       />
       <Box className={classes.exchangeSwap}>
         <AddLiquidityIcon />
@@ -496,6 +498,7 @@ const AddLiquidity: React.FC<{
         handleCurrencySelect={handleCurrencyBSelect}
         amount={formattedAmounts[Field.CURRENCY_B]}
         setAmount={onFieldBInput}
+        bgColor={currencyBg}
       />
       {currencies[Field.CURRENCY_A] &&
         currencies[Field.CURRENCY_B] &&

diff --git a/src/components/CurrencyInput/CurrencyInput.tsx b/src/components/CurrencyInput/CurrencyInput.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Currency } from '@uniswap/sdk';
 import { Box, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useCurrencyBalance } from 'state/wallet/hooks';
 import cx from 'classnames';
 import { CurrencySearchModal, CurrencyLogo } from 'components';
@@ -12,7 +12,6 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
   swapBox: {
     padding: '16px 24px',
     borderRadius: 10,
-    background: palette.secondary.dark,
     zIndex: 1,
     position: 'relative',
     textAlign: 'left',
@@ -94,6 +93,7 @@ interface CurrencyInputProps {
   showHalfButton?: boolean;
   showMaxButton?: boolean;
   showPrice?: boolean;
+  bgColor?: string;
 }
 
 const CurrencyInput: React.FC<CurrencyInputProps> = ({
@@ -108,8 +108,10 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   showHalfButton,
   title,
   showPrice,
+  bgColor,
 }) => {
   const classes = useStyles();
+  const { palette } = useTheme();
   const [modalOpen, setModalOpen] = useState(false);
   const { account } = useActiveWeb3React();
   const selectedCurrencyBalance = useCurrencyBalance(
@@ -119,7 +121,10 @@ const CurrencyInput: React.FC<CurrencyInputProps> = ({
   const usdPrice = Number(useUSDCPrice(currency)?.toSignificant()) || 0;
 
   return (
-    <Box className={cx(classes.swapBox, showPrice && classes.priceShowBox)}>
+    <Box
+      className={cx(classes.swapBox, showPrice && classes.priceShowBox)}
+      bgcolor={bgColor ?? palette.secondary.dark}
+    >
       <Box display='flex' justifyContent='space-between' mb={2}>
         <Typography>{title || 'You Pay:'}</Typography>
         <Box display='flex'>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -237,16 +237,24 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
       fontWeight: 600,
     },
   },
-  mobileMenu: {
+  mobileMenuContainer: {
     background: palette.secondary.dark,
     position: 'fixed',
     left: 0,
     bottom: 0,
     height: 64,
     width: '100%',
-    justifyContent: 'center',
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
+    padding: '0 16px',
+    justifyContent: 'center',
+  },
+  mobileMenu: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    maxWidth: 375,
+    width: '100%',
     '& a': {
       textDecoration: 'none',
       padding: '8px 12px',
@@ -381,52 +389,58 @@ const Header: React.FC = () => {
         </Box>
       )}
       {tabletWindowSize && (
-        <Box className={classes.mobileMenu}>
-          {menuItems.slice(0, 4).map((val, index) => (
-            <Link
-              to={val.link}
-              key={index}
-              className={val.link === pathname ? 'active' : 'menuItem'}
-            >
-              <Typography variant='body2'>{val.text}</Typography>
-            </Link>
-          ))}
-          <Box display='flex' className='menuItem'>
-            <ThreeDotIcon onClick={() => setOpenDetailMenu(!openDetailMenu)} />
-            {openDetailMenu && (
-              <Box
-                position='absolute'
-                bottom={72}
-                right={12}
-                width={209}
-                bgcolor={theme.palette.secondary.dark}
-                borderRadius={20}
-                py={1}
-                border={`1px solid ${theme.palette.divider}`}
+        <Box className={classes.mobileMenuContainer}>
+          <Box className={classes.mobileMenu}>
+            {menuItems.slice(0, 4).map((val, index) => (
+              <Link
+                to={val.link}
+                key={index}
+                className={val.link === pathname ? 'active' : 'menuItem'}
               >
-                <Box className='subMenu'>
-                  {menuItems.slice(4, menuItems.length).map((val, index) => (
-                    <Link
-                      to={val.link}
-                      key={index}
-                      className={val.link === pathname ? 'active' : 'menuItem'}
-                      onClick={() => setOpenDetailMenu(false)}
-                    >
-                      <Typography variant='body2'>{val.text}</Typography>
-                    </Link>
-                  ))}
-                  {outLinks.map((item, ind) => (
-                    <a
-                      href={item.link}
-                      key={ind}
-                      onClick={() => setOpenDetailMenu(false)}
-                    >
-                      <Typography variant='body2'>{item.text}</Typography>
-                    </a>
-                  ))}
+                <Typography variant='body2'>{val.text}</Typography>
+              </Link>
+            ))}
+            <Box display='flex' className='menuItem'>
+              <ThreeDotIcon
+                onClick={() => setOpenDetailMenu(!openDetailMenu)}
+              />
+              {openDetailMenu && (
+                <Box
+                  position='absolute'
+                  bottom={72}
+                  right={12}
+                  width={209}
+                  bgcolor={theme.palette.secondary.dark}
+                  borderRadius={20}
+                  py={1}
+                  border={`1px solid ${theme.palette.divider}`}
+                >
+                  <Box className='subMenu'>
+                    {menuItems.slice(4, menuItems.length).map((val, index) => (
+                      <Link
+                        to={val.link}
+                        key={index}
+                        className={
+                          val.link === pathname ? 'active' : 'menuItem'
+                        }
+                        onClick={() => setOpenDetailMenu(false)}
+                      >
+                        <Typography variant='body2'>{val.text}</Typography>
+                      </Link>
+                    ))}
+                    {outLinks.map((item, ind) => (
+                      <a
+                        href={item.link}
+                        key={ind}
+                        onClick={() => setOpenDetailMenu(false)}
+                      >
+                        <Typography variant='body2'>{item.text}</Typography>
+                      </a>
+                    ))}
+                  </Box>
                 </Box>
-              </Box>
-            )}
+              )}
+            </Box>
           </Box>
         </Box>
       )}

diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
@@ -133,10 +133,11 @@ const useStyles = makeStyles(({ palette }) => ({
   },
 }));
 
-const Swap: React.FC<{ currency0?: Currency; currency1?: Currency }> = ({
-  currency0,
-  currency1,
-}) => {
+const Swap: React.FC<{
+  currency0?: Currency;
+  currency1?: Currency;
+  currencyBg?: string;
+}> = ({ currency0, currency1, currencyBg }) => {
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const { palette } = useTheme();
   const { account } = useActiveWeb3React();
@@ -557,6 +558,7 @@ const Swap: React.FC<{ currency0?: Currency; currency1?: Currency }> = ({
         handleCurrencySelect={handleCurrencySelect}
         amount={formattedAmounts[Field.INPUT]}
         setAmount={handleTypeInput}
+        bgColor={currencyBg}
       />
       <Box className={classes.exchangeSwap}>
         <ExchangeIcon onClick={onSwitchTokens} />
@@ -570,6 +572,7 @@ const Swap: React.FC<{ currency0?: Currency; currency1?: Currency }> = ({
         handleCurrencySelect={handleOtherCurrencySelect}
         amount={formattedAmounts[Field.OUTPUT]}
         setAmount={handleTypeOutput}
+        bgColor={currencyBg}
       />
       {trade && trade.executionPrice && (
         <Box className={classes.swapPrice}>

diff --git a/src/components/TopMovers/TopMovers.tsx b/src/components/TopMovers/TopMovers.tsx
@@ -15,13 +15,6 @@ const useStyles = makeStyles(({ breakpoints }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    [breakpoints.down('sm')]: {
-      flexWrap: 'wrap',
-      justifyContent: 'flex-start',
-    },
-    [breakpoints.down('xs')]: {
-      flexDirection: 'column',
-    },
   },
 }));
 
@@ -69,12 +62,14 @@ const TopMovers: React.FC<TopMoversProps> = ({
         background === 'transparent' ? palette.background.paper : 'transparent'
       }`}
       borderRadius={10}
-      padding={2.5}
+      px={2.5}
+      pt={2.5}
+      pb={0.5}
     >
       <Typography variant='h6' style={{ color: palette.text.secondary }}>
         24h TOP MOVERS
       </Typography>
-      <Box width={1}>
+      <Box width={1} pb={2} style={{ overflowX: 'auto' }}>
         {topMoverTokens ? (
           <Box className={classes.content}>
             {topMoverTokens.map((token: any, index: number) => {
@@ -88,7 +83,7 @@ const TopMovers: React.FC<TopMoversProps> = ({
               const priceUpPercent = Number(token.priceChangeUSD).toFixed(2);
               return (
                 <Box
-                  mr={!smallWindowSize && index < topMoverTokens.length ? 2 : 0}
+                  mr={index < topMoverTokens.length ? 2 : 0}
                   width={smallWindowSize ? 180 : 'unset'}
                   mt={2}
                   key={token.id}