From 3f812bd067fe0ad2aca9ee72963228ed52791b64 Mon Sep 17 00:00:00 2001
From: totop716 <totop716@gmail.com>
Date: Mon, 6 Dec 2021 11:20:08 +0800
Subject: [PATCH] update mobile view of landing/swap page and add function to
 invest button in reward slider of landing page

---
 src/components/Header/Header.tsx              | 23 ++++++----
 .../RewardSlider/RewardSliderItem.tsx         | 13 +++++-
 src/components/TopMovers/TopMovers.tsx        | 42 +++++++++++++------
 src/pages/AnalyticsPage/AnalyticsPage.tsx     |  3 +-
 src/pages/LandingPage/LandingPage.tsx         | 22 +++++-----
 src/pages/SwapPage/SwapPage.tsx               |  4 +-
 6 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 8623a1309..48eca41aa 100755
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -21,11 +21,10 @@ import WalletIcon from 'assets/images/WalletIcon.png';
 
 const useStyles = makeStyles(({ palette, breakpoints }) => ({
   header: {
-    padding: '0 40px',
+    padding: '0 24px',
     position: 'relative',
     display: 'flex',
     flexWrap: 'wrap',
-    alignItems: 'center',
     minHeight: 88,
     zIndex: 3,
     justifyContent: 'space-between',
@@ -58,6 +57,9 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
         },
       },
     },
+    [breakpoints.down('sm')]: {
+      alignItems: 'center',
+    },
     [breakpoints.down('xs')]: {
       padding: '0 16px',
     },
@@ -86,6 +88,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     transform: 'translateX(-50%)',
     display: 'flex',
     alignItems: 'center',
+    height: '100%',
     '& .menuItem': {
       borderRadius: 10,
       cursor: 'pointer',
@@ -149,7 +152,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
   },
   mobileMenuWrapper: {
-    background: 'white',
+    background: '#121319',
     position: 'absolute',
     top: 80,
     left: 0,
@@ -172,7 +175,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     height: 32,
     width: '100%',
     '& p': {
-      color: palette.primary.dark,
+      color: '#ebecf2',
     },
     '& svg, & img': {
       width: 32,
@@ -321,7 +324,7 @@ const Header: React.FC = () => {
         pendingTransactions={pending}
         confirmedTransactions={confirmed}
       />
-      <Link to='/'>
+      <Link to='/' onClick={() => setMenuOpen(false)}>
         <img src={QuickLogo} alt='QuickLogo' />
       </Link>
       {!mobileWindowSize && (
@@ -416,9 +419,13 @@ const Header: React.FC = () => {
           )}
         >
           {menuItems.map((val, index) => (
-            <Box key={index} className={classes.mobileMenuItemWrapper}>
+            <Box
+              key={index}
+              className={classes.mobileMenuItemWrapper}
+              onClick={() => setMenuOpen(false)}
+            >
               <Link to={val.link} key={index}>
-                <Typography variant='body2'>{val.text}</Typography>
+                <Typography variant='body1'>{val.text}</Typography>
               </Link>
             </Box>
           ))}
@@ -428,7 +435,7 @@ const Header: React.FC = () => {
               onClick={toggleWalletModal}
             >
               <img src={WalletIcon} alt='Wallet' />
-              <Typography variant='body2'>{shortenAddress(account)}</Typography>
+              <Typography variant='body1'>{shortenAddress(account)}</Typography>
             </Box>
           ) : (
             <Button
diff --git a/src/components/RewardSlider/RewardSliderItem.tsx b/src/components/RewardSlider/RewardSliderItem.tsx
index b9d22b85f..6852c1920 100755
--- a/src/components/RewardSlider/RewardSliderItem.tsx
+++ b/src/components/RewardSlider/RewardSliderItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box, Typography, Button } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
 import { JSBI, TokenAmount } from '@uniswap/sdk';
 import { makeStyles } from '@material-ui/core/styles';
 import { StakingInfo } from 'state/stake/hooks';
@@ -65,6 +66,7 @@ interface RewardSliderItemProps {
 
 const RewardSliderItem: React.FC<RewardSliderItemProps> = ({ info }) => {
   const classes = useStyles();
+  const history = useHistory();
   const token0 = info.tokens[0];
 
   const baseTokenCurrency = unwrappedToken(info.baseToken);
@@ -171,7 +173,16 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({ info }) => {
         </Typography>
         <Typography component='h5'>{apyWithFee}%</Typography>
       </Box>
-      <Button fullWidth color='primary' style={{ marginTop: '30px' }}>
+      <Button
+        fullWidth
+        color='primary'
+        style={{ marginTop: '30px' }}
+        onClick={() => {
+          history.push(
+            `/pools?currency0=${info.tokens[0].address}&currency1=${info.tokens[1].address}`,
+          );
+        }}
+      >
         Invest
       </Button>
     </Box>
diff --git a/src/components/TopMovers/TopMovers.tsx b/src/components/TopMovers/TopMovers.tsx
index d215441e5..a5d9eec32 100755
--- a/src/components/TopMovers/TopMovers.tsx
+++ b/src/components/TopMovers/TopMovers.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Typography, useMediaQuery } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { ArrowDropUp, ArrowDropDown } from '@material-ui/icons';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { Token, ChainId } from '@uniswap/sdk';
@@ -7,6 +8,22 @@ import { CurrencyLogo } from 'components';
 import { getEthPrice, getTopTokens } from 'utils';
 import { useTopTokens } from 'state/application/hooks';
 
+const useStyles = makeStyles(({ breakpoints }) => ({
+  content: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    [breakpoints.down('sm')]: {
+      flexWrap: 'wrap',
+      justifyContent: 'flex-start',
+    },
+    [breakpoints.down('xs')]: {
+      flexDirection: 'column',
+    },
+  },
+}));
+
 interface TopMoversProps {
   background: string;
   hideArrow?: boolean;
@@ -15,7 +32,10 @@ const TopMovers: React.FC<TopMoversProps> = ({
   background,
   hideArrow = false,
 }) => {
+  const classes = useStyles();
+  const theme = useTheme();
   const { topTokens, updateTopTokens } = useTopTokens();
+  const smallWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
 
   const topMoverTokens = useMemo(
     () => (topTokens && topTokens.length >= 5 ? topTokens.slice(0, 5) : null),
@@ -39,9 +59,10 @@ const TopMovers: React.FC<TopMoversProps> = ({
     <Box
       width='100%'
       display='flex'
+      flexWrap='wrap'
       flexDirection='column'
       justifyContent='center'
-      alignItems='flex-start'
+      alignItems={smallWindowSize ? 'center' : 'flex-start'}
       bgcolor={background}
       border={`1px solid ${
         background === 'transparent' ? '#1b1e29' : 'transparent'
@@ -52,16 +73,10 @@ const TopMovers: React.FC<TopMoversProps> = ({
       <Typography variant='h6' style={{ color: '#696c80' }}>
         24h TOP MOVERS
       </Typography>
-      <Box mt={2} width={1}>
+      <Box width={1}>
         {topMoverTokens ? (
-          <Box
-            width='100%'
-            display='flex'
-            flexDirection='row'
-            justifyContent='space-between'
-            alignItems='center'
-          >
-            {topMoverTokens.map((token: any) => {
+          <Box className={classes.content}>
+            {topMoverTokens.map((token: any, index: number) => {
               const currency = new Token(
                 ChainId.MATIC,
                 token.id,
@@ -72,10 +87,13 @@ const TopMovers: React.FC<TopMoversProps> = ({
               const priceUpPercent = Number(token.priceChangeUSD).toFixed(2);
               return (
                 <Box
+                  mr={!smallWindowSize && index < topMoverTokens.length ? 2 : 0}
+                  width={smallWindowSize ? 180 : 'unset'}
+                  mt={2}
                   key={token.id}
                   display='flex'
                   flexDirection='row'
-                  justifyContent='center'
+                  justifyContent={smallWindowSize ? 'flex-start' : 'center'}
                   alignItems='center'
                 >
                   <CurrencyLogo currency={currency} size='28px' />
diff --git a/src/pages/AnalyticsPage/AnalyticsPage.tsx b/src/pages/AnalyticsPage/AnalyticsPage.tsx
index 9f22b67d1..c143b553a 100755
--- a/src/pages/AnalyticsPage/AnalyticsPage.tsx
+++ b/src/pages/AnalyticsPage/AnalyticsPage.tsx
@@ -11,12 +11,11 @@ import AnalyticsTokenDetails from './AnalyticTokenDetails';
 
 const useStyles = makeStyles(({}) => ({
   topTab: {
-    width: 120,
     height: 46,
+    padding: '0 24px',
     borderRadius: 10,
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center',
     cursor: 'pointer',
     '& p': {
       color: '#626680',
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 7d0796434..be7eda971 100755
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -82,6 +82,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     width: '100%',
     position: 'relative',
     zIndex: 2,
+    justifyContent: 'center',
+    [breakpoints.down('md')]: {
+      flexWrap: 'wrap',
+    },
     '& > div': {
       background: palette.background.default,
       width: 'calc(25% - 24px)',
@@ -201,6 +205,9 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
   swapInfo: {
     textAlign: 'left',
     marginBottom: 60,
+    [breakpoints.down('sm')]: {
+      order: -1,
+    },
     '& h3': {
       marginBottom: 16,
     },
@@ -412,7 +419,6 @@ const LandingPage: React.FC = () => {
   const isnotMatic =
     ethereum && ethereum.isMetaMask && Number(ethereum.chainId) !== 137;
   const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
-  const smallWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
   const { initTransak } = useInitTransak();
   const allTokens = useAllTokens();
   const toggleWalletModal = useWalletModalToggle();
@@ -549,7 +555,7 @@ const LandingPage: React.FC = () => {
   }, [ethPrice, updateEthPrice, updateGlobalData]);
 
   return (
-    <Box>
+    <>
       {openStakeModal && (
         <StakeQuickModal
           open={openStakeModal}
@@ -611,11 +617,7 @@ const LandingPage: React.FC = () => {
           </Button>
         </Box>
       </Box>
-      <Box
-        className={classes.tradingInfo}
-        display='flex'
-        justifyContent={smallWindowSize ? 'center' : 'space-between'}
-      >
+      <Box className={classes.tradingInfo} display='flex'>
         <Box>
           {globalData ? (
             <Typography variant='h3'>
@@ -714,7 +716,7 @@ const LandingPage: React.FC = () => {
           </a>
         ))}
       </Box>
-      <Box mt={2}>
+      <Box mt={2} width={1}>
         <TopMovers background='transparent' />
       </Box>
       <Box className={classes.quickInfo}>
@@ -849,15 +851,15 @@ const LandingPage: React.FC = () => {
         <Box className='socialContent'>
           {socialicons.map((val, ind) => (
             <Box key={ind}>
-              {val.icon}
               <a href={val.link} target='_blank' rel='noreferrer'>
+                {val.icon}
                 <Typography>{val.title}</Typography>
               </a>
             </Box>
           ))}
         </Box>
       </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/src/pages/SwapPage/SwapPage.tsx b/src/pages/SwapPage/SwapPage.tsx
index 5735b3489..4d7951943 100755
--- a/src/pages/SwapPage/SwapPage.tsx
+++ b/src/pages/SwapPage/SwapPage.tsx
@@ -280,7 +280,7 @@ const SwapPage: React.FC = () => {
         </Box>
       </Box>
       <Grid container spacing={4}>
-        <Grid item sm={12} md={5}>
+        <Grid item xs={12} sm={12} md={5}>
           <Box className={classes.wrapper}>
             <Box display='flex' justifyContent='space-between'>
               <Box display='flex'>
@@ -338,7 +338,7 @@ const SwapPage: React.FC = () => {
             </Box>
           </Box>
         </Grid>
-        <Grid item sm={12} md={7}>
+        <Grid item xs={12} sm={12} md={7}>
           <Box display='flex' justifyContent='space-between' width='100%'>
             {currencies[Field.INPUT] && (
               <Box className={classes.swapTokenDetails}>