fix css styles

QuickSwap · Jan 25, 2024 · ceb8297 · ceb8297
1 parent b37294b
commit ceb8297
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 31 deletions.
diff --git a/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx b/src/components/RemoveLiquidityModal/RemoveLiquidityModal.tsx
@@ -387,7 +387,7 @@ const RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
           </small>
         </Box>
         <Box mt={2}>
-          <Button fullWidth className='removeButton' onClick={onRemove}>
+          <Button fullWidth className={styles.removeButton} onClick={onRemove}>
             {t('confirm')}
           </Button>
         </Box>

diff --git a/src/components/RewardSlider/RewardSliderItem.tsx b/src/components/RewardSlider/RewardSliderItem.tsx
@@ -11,6 +11,7 @@ import {
   getTVLStaking,
 } from 'utils';
 import { useTranslation } from 'next-i18next';
+import styles from 'styles/components/RewardSlider.module.scss';
 
 interface RewardSliderItemProps {
   info: StakingInfo | DualStakingInfo;
@@ -45,9 +46,9 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({
   }
 
   return (
-    <Box className='rewardsSliderItem bg-palette'>
+    <Box className={`${styles.rewardsSliderItem} bg-palette`}>
       <Box mb={4}>
-        <Box className='rewardIcon'>
+        <Box className={styles.rewardIcon}>
           <DoubleCurrencyLogo
             currency0={info.tokens[0]}
             currency1={info.tokens[1]}
@@ -79,7 +80,7 @@ const RewardSliderItem: React.FC<RewardSliderItemProps> = ({
           {t('apr')}
           <HelpIcon />
         </p>
-        <Box className='rewardApyWrapper'>
+        <Box className={styles.rewardApyWrapper}>
           <p className='text-success'>{apyWithFee}%</p>
         </Box>
       </Box>

diff --git a/src/components/StakeSyrupModal/StakeSyrupModal.tsx b/src/components/StakeSyrupModal/StakeSyrupModal.tsx
@@ -26,6 +26,7 @@ import {
   calculateGasMargin,
 } from 'utils';
 import { useTranslation } from 'next-i18next';
+import styles from 'styles/components/StakeQuickModal.module.scss';
 
 interface StakeSyrupModalProps {
   open: boolean;
@@ -254,7 +255,7 @@ const StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
         <Box mt={3} className='flex items-center justify-between'>
           <Box width='48%'>
             <Button
-              className='stakeButton'
+              className={styles.stakeButton}
               disabled={approving || approval !== ApprovalState.NOT_APPROVED}
               onClick={async () => {
                 setApproving(true);
@@ -271,7 +272,7 @@ const StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
           </Box>
           <Box width='48%'>
             <Button
-              className='stakeButton'
+              className={styles.stakeButton}
               disabled={
                 !!error || attempting || approval !== ApprovalState.APPROVED
               }

diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx
@@ -1140,13 +1140,16 @@ const SwapBestTrade: React.FC<{
               }}
             >
               {approval === ApprovalState.PENDING ? (
-                <Box className='content'>
-                  {t('approving')} <CircularProgress size={16} />
+                <Box className='flex items-center' gap='4px'>
+                  <small>{t('approving')}</small>
+                  <CircularProgress size={16} />
                 </Box>
               ) : approvalSubmitted && approval === ApprovalState.APPROVED ? (
-                t('approved')
+                <small>{t('approved')}</small>
               ) : (
-                `${t('approve')} ${currencies[Field.INPUT]?.symbol}`
+                <small>{`${t('approve')} ${
+                  currencies[Field.INPUT]?.symbol
+                }`}</small>
               )}
             </Button>
           </Box>

diff --git a/src/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx b/src/components/SwapTokenDetailsHorizontal/SwapTokenDetailsHorizontal.tsx
@@ -10,6 +10,7 @@ import { useActiveWeb3React } from 'hooks';
 import { getConfig } from 'config/index';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
+import styles from 'styles/pages/Swap.module.scss';
 
 const SwapTokenDetailsHorizontal: React.FC<{
   token: Token;
@@ -180,7 +181,7 @@ const SwapTokenDetailsHorizontal: React.FC<{
           </Grid>
           <Grid item xs={3}>
             <Box>
-              <small className='swapTxInfoHeader'>Price</small>
+              <small className={styles.swapTxInfoHeader}>Price</small>
               {loadingTokenData ? (
                 <Skeleton variant='rectangular' width={80} height={20} />
               ) : tokenData ? (
@@ -192,7 +193,7 @@ const SwapTokenDetailsHorizontal: React.FC<{
           </Grid>
           <Grid item xs={2}>
             <Box>
-              <small className='swapTxInfoHeader'>24h</small>
+              <small className={styles.swapTxInfoHeader}>24h</small>
               {loadingTokenData ? (
                 <Skeleton variant='rectangular' width={60} height={20} />
               ) : tokenData ? (

diff --git a/src/components/SyrupCard/SyrupAPR.tsx b/src/components/SyrupCard/SyrupAPR.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'next-i18next';
 import { useActiveWeb3React } from 'hooks';
 import { ChainId } from '@uniswap/sdk';
 import { OLD_DQUICK, OLD_QUICK } from 'constants/v3/addresses';
+import styles from 'styles/components/SyrupCard.module.scss';
 
 const SyrupAPR: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
   syrup,
@@ -26,7 +27,7 @@ const SyrupAPR: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
         {getTokenAPRSyrup(syrup).toLocaleString('us')}%
       </small>
       {isDQUICKStakingToken && (
-        <Box className='syrupAPR border-gray2' gap='4px'>
+        <Box className={`${styles.syrupAPR} border-gray2`} gap='4px'>
           <CurrencyLogo currency={OLD_QUICK[chainIdToUse]} size={12} />
           <span>
             {dQUICKAPY}% <span className='text-hint'>{t('apy')}</span>

diff --git a/src/components/SyrupCard/SyrupCard.tsx b/src/components/SyrupCard/SyrupCard.tsx
@@ -112,7 +112,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
         <SyrupCardDetails syrup={syrup} dQUICKAPY={dQUICKAPY} />
       )}
       {syrup.sponsored && syrup.sponsorLink && (
-        <Box className='syrupSponsoredLink'>
+        <Box className={styles.syrupSponsoredLink}>
           <Trans
             i18nKey='learnmoreproject'
             components={{

diff --git a/src/components/SyrupCard/SyrupCardDetails.tsx b/src/components/SyrupCard/SyrupCardDetails.tsx
@@ -24,6 +24,7 @@ import SyrupAPR from './SyrupAPR';
 import { useUSDCPriceToken } from 'utils/useUSDCPrice';
 import { ChainId } from '@uniswap/sdk';
 import CircleInfo from 'svgs/circleinfo.svg';
+import styles from 'styles/components/SyrupCard.module.scss';
 
 const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
   syrup,
@@ -109,14 +110,16 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
   };
 
   const StakeButton = () => (
-    <Box className='syrupButton' onClick={() => setOpenStakeModal(true)}>
+    <Box className={styles.syrupButton} onClick={() => setOpenStakeModal(true)}>
       <small>{t('stake')}</small>
     </Box>
   );
 
   const UnstakeButton = () => (
     <Box
-      className={`syrupButton${attemptingUnstake ? ' opacity-disabled' : ''}`}
+      className={`${styles.syrupButton} ${
+        attemptingUnstake ? 'opacity-disabled' : ''
+      }`}
       onClick={() => {
         if (!attemptingUnstake) {
           onWithdraw();
@@ -129,7 +132,9 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
 
   const ClaimButton = () => (
     <Box
-      className={`syrupButton${attemptingClaim ? ' opacity-disabled' : ''}`}
+      className={`${styles.syrupButton} ${
+        attemptingClaim ? 'opacity-disabled' : ''
+      }`}
       onClick={() => {
         if (!attemptingClaim) {
           onClaimReward();
@@ -280,7 +285,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
               )}
             </Box>
             {syrup.rewardRate?.greaterThan('0') && (
-              <Box className='dailyRateWrapper'>
+              <Box className={styles.dailyRateWrapper}>
                 <Box>
                   <Box display='flex' mr={1}>
                     <small className='text-secondary'>{t('yourRate')}:</small>

diff --git a/src/components/TransactionsTable/TransactionsTable.tsx b/src/components/TransactionsTable/TransactionsTable.tsx
@@ -128,19 +128,19 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
           <p>{t('totalValue')}</p>
           <p>${Number(txn.amountUSD).toLocaleString('us')}</p>
         </Box>
-        <Box className='mobileRow'>
+        <Box className={styles.mobileRow}>
           <p>{t('tokenAmount')}</p>
           <p>
             {formatNumber(txn.amount0)} {txn.pair.token0.symbol}
           </p>
         </Box>
-        <Box className='mobileRow'>
+        <Box className={styles.mobileRow}>
           <p>{t('tokenAmount')}</p>
           <p>
             {formatNumber(txn.amount1)} {txn.pair.token1.symbol}
           </p>
         </Box>
-        <Box className='mobileRow'>
+        <Box className={styles.mobileRow}>
           <p>{t('txn')}</p>
           {chainId ? (
             <a
@@ -159,7 +159,7 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
             <p className='text-primary'>{shortenTx(txn.transaction.id)}</p>
           )}
         </Box>
-        <Box className='mobileRow'>
+        <Box className={styles.mobileRow}>
           <p>{t('time')}</p>
           <p>{dayjs(Number(txn.transaction.timestamp) * 1000).fromNow()}</p>
         </Box>
@@ -225,7 +225,7 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
   return (
     <Box position='relative'>
       {isMobile && (
-        <Box className='txTableFilterMobile'>
+        <Box className={styles.txTableFilterMobile}>
           <Box onClick={() => setTxFilter(-1)}>
             <p className={txFilter === -1 ? '' : 'text-secondary'}>All</p>
           </Box>

diff --git a/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx b/src/components/UnstakeQuickModal/UnstakeQuickModal.tsx
@@ -15,6 +15,7 @@ import { useTranslation } from 'next-i18next';
 import { useActiveWeb3React } from 'hooks';
 import { ChainId } from '@uniswap/sdk';
 import { DLDQUICK, OLD_DQUICK } from 'constants/v3/addresses';
+import styles from 'styles/components/StakeQuickModal.module.scss';
 
 const web3 = new Web3();
 
@@ -150,7 +151,7 @@ const UnstakeQuickModal: React.FC<UnstakeQuickModalProps> = ({
         </Box>
         <Box mt={3}>
           <Button
-            className='stakeButton'
+            className={styles.stakeButton}
             disabled={!!error || attempting}
             onClick={onWithdraw}
           >

diff --git a/src/components/pages/pools/MyGammaPoolsV3/IncreaseGammaLiquidityModal.tsx b/src/components/pages/pools/MyGammaPoolsV3/IncreaseGammaLiquidityModal.tsx
@@ -359,7 +359,7 @@ export default function IncreaseGammaLiquidityModal({
         <Box mt={2}>
           <Button
             fullWidth
-            className={styles.gammaLiquidityItemButton}
+            className={styles.liquidityItemButton}
             onClick={addGammaLiquidity}
           >
             {t('confirm')}

diff --git a/src/components/pages/pools/MyGammaPoolsV3/WithdrawGammaLiquidityModal.tsx b/src/components/pages/pools/MyGammaPoolsV3/WithdrawGammaLiquidityModal.tsx
@@ -172,7 +172,7 @@ export default function WithdrawGammaLiquidityModal({
         <Box mt={2}>
           <Button
             fullWidth
-            className={styles.gammaLiquidityItemButton}
+            className={styles.removeLiquidityButton}
             onClick={withdrawGammaLiquidity}
           >
             {t('confirm')}

diff --git a/src/components/pages/pools/MySteerPoolsV3/IncreaseSteerLiquidityModal.tsx b/src/components/pages/pools/MySteerPoolsV3/IncreaseSteerLiquidityModal.tsx
@@ -30,6 +30,7 @@ import { TransactionResponse } from '@ethersproject/abstract-provider';
 import { SteerVault } from 'hooks/v3/useSteerData';
 import { WrappedCurrency } from 'models/types';
 import { useCurrencyBalance } from 'state/wallet/hooks';
+import styles from 'styles/pages/pools/AutomaticLPItemDetails.module.scss';
 
 interface IncreaseSteerLiquidityModalProps {
   open: boolean;
@@ -314,7 +315,7 @@ export default function IncreaseSteerLiquidityModal({
         <Box mt={2}>
           <Button
             fullWidth
-            className='steer-liquidity-item-button'
+            className={styles.liquidityItemButton}
             onClick={addSteerLiquidity}
           >
             {t('confirm')}
@@ -408,7 +409,7 @@ export default function IncreaseSteerLiquidityModal({
             }
           />
         </Box>
-        <Box mt={2} className='v3-increase-liquidity-input'>
+        <Box mt={2}>
           <CurrencyInputPanel
             value={deposit1}
             onUserInput={(val) => {
@@ -440,7 +441,7 @@ export default function IncreaseSteerLiquidityModal({
         </Box>
         <Box mt={2}>
           <Button
-            className='steer-liquidity-item-button'
+            className={styles.liquidityItemButton}
             disabled={buttonDisabled}
             onClick={() => (wrapAmount ? wrapETH() : setShowConfirm(true))}
             fullWidth

diff --git a/src/components/v3/IncreaseLiquidityV3/index.tsx b/src/components/v3/IncreaseLiquidityV3/index.tsx
@@ -343,7 +343,7 @@ export default function IncreaseLiquidityV3({
           })}
         </p>
       </Box>
-      <Button className='v3-increase-liquidity-button' onClick={onAdd}>
+      <Button className={styles.v3IncreaseLiquidityButton} onClick={onAdd}>
         {t('confirm')}
       </Button>
     </>

diff --git a/src/components/v3/swap/SwapModalFooter.tsx b/src/components/v3/swap/SwapModalFooter.tsx
@@ -4,6 +4,7 @@ import { Trade as V3Trade } from 'lib/trade';
 import SwapCallbackError from './SwapCallbackError';
 import { useTranslation } from 'next-i18next';
 import { Box, Button } from '@mui/material';
+import styles from 'styles/pages/Swap.module.scss';
 
 export default function SwapModalFooter({
   onConfirm,
@@ -17,7 +18,7 @@ export default function SwapModalFooter({
 }) {
   const { t } = useTranslation();
   return (
-    <Box mt={2} className='swapButtonWrapper'>
+    <Box mt={2} className={styles.swapButtonWrapper}>
       <Button onClick={onConfirm} disabled={disabledConfirm} fullWidth>
         {t('confirmSwap')}
       </Button>