fix styles in home and swap pages

QuickSwap · Jul 20, 2023 · a335ec9 · a335ec9
1 parent 85b0087
commit a335ec9
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 64 deletions.
diff --git a/components/AccountDetails/CopyHelper.tsx b/components/AccountDetails/CopyHelper.tsx
@@ -18,7 +18,7 @@ const CopyHelper: React.FC<CopyHelperProps> = ({ toCopy }) => {
     <Box className={styles.copyIcon} onClick={() => setCopied(toCopy)}>
       {isCopied ? (
         <>
-          <CheckCircle size='18' />
+          <CheckCircle />
           <small>{t('copied')}</small>
         </>
       ) : (

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -43,7 +43,7 @@ const Footer: React.FC = () => {
             <Image
               src='/assets/images/quickLogo.png'
               alt='QUICK'
-              width={40}
+              width={130}
               height={40}
             />
             <Box mt={2} maxWidth='240px'>

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
@@ -212,7 +212,7 @@ const Header: React.FC = () => {
       id: 'bos-page-link',
       isExternal: true,
       target: '_blank',
-      externalLink: process?.env?.REACT_APP_BOS_URL || '',
+      externalLink: process?.env?.NEXT_PUBLIC_BOS_URL || '',
       isNew: true,
     });
   }

diff --git a/components/Swap/SwapBestTrade.tsx b/components/Swap/SwapBestTrade.tsx
@@ -1069,6 +1069,7 @@ const SwapBestTrade: React.FC<{
         )}
         <Box width={showApproveFlow ? '48%' : '100%'}>
           <Button
+            variant='contained'
             fullWidth
             disabled={
               (bonusRouteLoading ||

diff --git a/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx b/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx
@@ -139,22 +139,22 @@ const SwapTokenDetailsHorizontal: React.FC<{
       </Grid>
       <Grid item xs={3}>
         <Box>
-          <small className='swapTxInfoHeader'>Price</small>
+          <small className='text-secondary'>Price</small>
           {tokenData ? (
-            <Box>${formatNumber(tokenData.priceUSD)}</Box>
+            <p className='small'>${formatNumber(tokenData.priceUSD)}</p>
           ) : (
             <Skeleton variant='rectangular' width={80} height={20} />
           )}
         </Box>
       </Grid>
       <Grid item xs={2}>
         <Box>
-          <small className='swapTxInfoHeader'>24h</small>
+          <small className='text-secondary'>24h</small>
           {tokenData ? (
-            <Box className={`${priceUp ? 'text-success' : 'text-error'}`}>
+            <p className={`small ${priceUp ? 'text-success' : 'text-error'}`}>
               {priceUp ? '+' : ''}
               {priceUpPercent}%
-            </Box>
+            </p>
           ) : (
             <Skeleton variant='rectangular' width={60} height={20} />
           )}

diff --git a/components/pages/home/DragonLayerInfoCard.tsx b/components/pages/home/DragonLayerInfoCard.tsx
@@ -7,6 +7,7 @@ import { formatCompact, useLairDQUICKAPY } from 'utils';
 import { Skeleton } from '@mui/lab';
 import { StakeQuickModal } from 'components';
 import { useTranslation } from 'react-i18next';
+import styles from 'styles/pages/Home.module.scss';
 
 interface DragonLayerInfoCardProps {
   chainId: any;
@@ -57,7 +58,7 @@ const DragonLayerInfoCard: React.FC<DragonLayerInfoCardProps> = ({
         />
       )}
       {(oldLair || newLair) && (
-        <Box className='tradingSection' pt='20px'>
+        <Box className={styles.tradingSection} pt='20px'>
           {dQUICKAPY ? (
             <Box>
               <Box display='flex'>

diff --git a/components/pages/swap/SwapDefaultMode.tsx b/components/pages/swap/SwapDefaultMode.tsx
@@ -7,6 +7,7 @@ import { SwapBuySellMiniWidget } from './BuySellWidget';
 import LiquidityPools from './LiquidityPools';
 import SwapMain from './SwapMain';
 import SwapNewsWidget from './SwapNewWidget';
+import styles from 'styles/pages/Swap.module.scss';
 
 const SwapDefaultMode: React.FC<{
   token1: any;
@@ -38,8 +39,8 @@ const SwapDefaultMode: React.FC<{
             <Grid item>
               <Box
                 sx={{ display: { xs: 'none', lg: 'block' } }}
-                className={`btn-swap-widget ${
-                  disabledLeft ? 'btn-swap-widget-disabled' : ''
+                className={`${styles.btnSwapWidget} ${
+                  disabledLeft ? styles.btnSwapWidgetDisabled : ''
                 } `}
                 onClick={() => {
                   if (disabledLeft) return;
@@ -105,7 +106,7 @@ const SwapDefaultMode: React.FC<{
             )}
             <Grid item>
               <Box
-                className='btn-swap-widget'
+                className={styles.btnSwapWidget}
                 sx={{ display: { xs: 'none', lg: 'block' } }}
                 onClick={() => setRightOpen(!rightOpen)}
               >

diff --git a/components/pages/swap/SwapMain.tsx b/components/pages/swap/SwapMain.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Menu, MenuItem } from '@mui/material';
+import { Box, Menu, MenuItem } from '@mui/material';
 import { KeyboardArrowDown, Settings } from '@mui/icons-material';
 import { SettingsModal, Swap, ToggleSwitch } from 'components';
 import { SwapBestTrade } from 'components/Swap';
@@ -216,23 +216,18 @@ const SwapMain: React.FC = () => {
         <Box display='flex' width={1}>
           {!isProMode ? (
             <>
-              <Box display='flex' className='tabContainer'>
+              <Box display='flex' className={styles.tabContainer}>
                 {dropDownMenuText && (
-                  <Button
+                  <Box
                     id='swap-button'
-                    aria-controls={open ? 'swap-menu' : undefined}
-                    aria-haspopup='true'
-                    aria-expanded={open ? 'true' : undefined}
-                    variant='text'
-                    disableElevation
                     onClick={handleClickListItem}
-                    endIcon={<KeyboardArrowDown />}
-                    className={`tab tabMenu ${
-                      selectedIndex !== SWAP_CROSS_CHAIN ? 'activeTab' : ''
+                    className={`${styles.tab} ${styles.tabMenu} ${
+                      selectedIndex !== SWAP_CROSS_CHAIN ? styles.activeTab : ''
                     }`}
                   >
-                    {t(dropDownMenuText)}
-                  </Button>
+                    <p>{t(dropDownMenuText)}</p>
+                    <KeyboardArrowDown />
+                  </Box>
                 )}
                 <Menu
                   id='swap-menu'
@@ -259,16 +254,16 @@ const SwapMain: React.FC = () => {
                 </Menu>
                 {showCrossChain && (
                   <Box
-                    className={`tab ${
-                      selectedIndex === SWAP_CROSS_CHAIN ? 'activeTab' : ''
+                    className={`${styles.tab} ${
+                      selectedIndex === SWAP_CROSS_CHAIN ? styles.activeTab : ''
                     }`}
                     onClick={() => {
                       setSelectedIndex(SWAP_CROSS_CHAIN);
                       setAnchorEl(null);
                       redirectWithSwapType(SWAP_CROSS_CHAIN);
                     }}
                   >
-                    <p className='trade-btn'>{t('crossChain')}</p>
+                    <p className={styles.tradeBtn}>{t('crossChain')}</p>
                   </Box>
                 )}
               </Box>

diff --git a/components/pages/swap/SwapV3/index.tsx b/components/pages/swap/SwapV3/index.tsx
@@ -676,11 +676,12 @@ const SwapV3Page: React.FC = () => {
 
         <Box className={styles.swapButtonWrapper}>
           {!account ? (
-            <Button fullWidth onClick={toggleWalletModal}>
+            <Button variant='contained' fullWidth onClick={toggleWalletModal}>
               {t('connectWallet')}
             </Button>
           ) : showWrap ? (
             <Button
+              variant='contained'
               fullWidth
               disabled={
                 Boolean(wrapInputError) ||
@@ -702,6 +703,7 @@ const SwapV3Page: React.FC = () => {
             </Button>
           ) : routeNotFound && userHasSpecifiedInputOutput ? (
             <Button
+              variant='contained'
               fullWidth
               disabled={routeNotFound && userHasSpecifiedInputOutput}
             >
@@ -717,6 +719,7 @@ const SwapV3Page: React.FC = () => {
             <>
               <Box width='48%'>
                 <Button
+                  variant='contained'
                   fullWidth
                   onClick={handleApprove}
                   disabled={
@@ -775,6 +778,7 @@ const SwapV3Page: React.FC = () => {
               </Box>
               <Box width='48%'>
                 <Button
+                  variant='contained'
                   fullWidth
                   onClick={() => {
                     if (isExpertMode) {
@@ -809,6 +813,7 @@ const SwapV3Page: React.FC = () => {
             </>
           ) : (
             <Button
+              variant='contained'
               fullWidth
               onClick={() => {
                 if (isExpertMode) {

diff --git a/components/v3/CurrencyInputPanel/index.tsx b/components/v3/CurrencyInputPanel/index.tsx
@@ -5,7 +5,6 @@ import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { LockOutlined } from '@mui/icons-material';
 
 import { useActiveWeb3React } from 'hooks';
-import useUSDCPrice from 'hooks/v3/useUSDCPrice';
 import { WrappedCurrency } from 'models/types/Currency';
 import CurrencyLogo from 'components/CurrencyLogo';
 import { useCurrencyBalance } from 'state/wallet/hooks';
@@ -161,7 +160,7 @@ export default function CurrencyInputPanel({
           </Box>
         </Box>
         <Box className='flex justify-between'>
-          <Box display='flex'>
+          <Box display='flex items-center'>
             <small className='text-secondary'>
               {t('balance')}:{' '}
               {(showETH && ethBalance
@@ -170,12 +169,12 @@ export default function CurrencyInputPanel({
             </small>
 
             {account && currency && showHalfButton && (
-              <Box className='maxWrapper' onClick={onHalf}>
+              <Box className={styles1.maxWrapper} onClick={onHalf}>
                 <small>50%</small>
               </Box>
             )}
             {account && currency && showMaxButton && (
-              <Box className='maxWrapper' onClick={onMax}>
+              <Box className={styles1.maxWrapper} onClick={onMax}>
                 <small>{t('max')}</small>
               </Box>
             )}

diff --git a/connectors/index.ts b/connectors/index.ts
@@ -105,8 +105,6 @@ export const networkInfoMap: NetworkInfoChainMap = {
   },
 };
 
-const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY;
-
 const [web3Network, web3NetworkHooks] = initializeConnector<Network>(
   (actions) =>
     new Network({ actions, urlMap: RPC_PROVIDERS, defaultChainId: 137 }),

diff --git a/styles/_mui-overrides.scss b/styles/_mui-overrides.scss
@@ -24,7 +24,7 @@ html {
       height: 2px;
       width: calc(100% - 16px);
       padding: 13px 0;
-    
+
       & .MuiSlider-mark {
         width: 4px;
         height: 4px !important;
@@ -41,13 +41,13 @@ html {
             bottom: 14px;
             color: $textPrimary;
             font-family: 'DM Sans', sans-serif;
-            content: "Cheaper gas";
+            content: 'Cheaper gas';
             display: flex;
             align-items: center;
             margin-left: -50px;
             padding: 0.3em 1em;
             position: absolute;
-            z-index: 98
+            z-index: 98;
           }
           &::before {
             background-color: $bgColor;
@@ -59,38 +59,40 @@ html {
             border-left: transparent;
             color: $textPrimary;
             font-family: 'DM Sans', sans-serif;
-            content: "";
+            content: '';
             display: flex;
             align-items: center;
             margin-left: -4px;
             position: absolute;
             box-sizing: border-box;
             -webkit-transform: rotate(135deg);
             transform: rotate(135deg);
-            z-index: 99
+            z-index: 99;
           }
         }
       }
     }
-    
+
     .MuiSlider-mark {
       height: 8px;
-      background-color: #B4C2D5;
+      background-color: #b4c2d5;
     }
-    
+
     .MuiSlider-thumb {
       height: 20px;
       width: 20px;
       background-color: $primary;
       margin-top: -9px;
       margin-left: 0;
       box-shadow: 0px 2px 5px $grey21;
-
-      &:focus, &:hover, &.active {
+
+      &:focus,
+      &:hover,
+      &.active {
         box-shadow: inherit;
       }
     }
-    
+
     .MuiSlider-valueLabel {
       left: calc(-50% - 8px);
       top: -18px;
@@ -102,19 +104,25 @@ html {
         color: $textPrimary;
       }
     }
-    
+
     .MuiSlider-track {
       height: 2px;
       background: $blue5;
       border-radius: 4px;
       padding-right: 8px;
     }
-    
+
     .MuiSlider-rail {
       height: 2px;
       border-radius: 4px;
       background: $bgPalette;
       width: calc(100% + 16px);
     }
   }
+
+  .MuiButton-root {
+    &.Mui-disabled {
+      opacity: 0.3;
+    }
+  }
 }
diff --git a/styles/components/AccountDetails.module.scss b/styles/components/AccountDetails.module.scss
@@ -16,12 +16,19 @@
 .copyIcon {
   display: flex;
   cursor: pointer;
-  &:hover, &:active, &:focus {
+  &:hover,
+  &:active,
+  &:focus {
     color: white;
   }
   & small {
     margin-left: 4px;
   }
+  & svg {
+    width: 18px;
+    height: 18px;
+    color: $textSecondary;
+  }
 }
 
 .transactionState {
@@ -42,4 +49,4 @@
   &:hover {
     text-decoration: underline;
   }
-}
+}
diff --git a/styles/pages/Home.module.scss b/styles/pages/Home.module.scss
@@ -22,11 +22,10 @@
     color: $textSecondary;
   }
   & > button {
-    height: 56px;
+    height: 48px;
     width: 194px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    border-radius: 28px;
+    margin-top: 20px;
   }
 }