fix breakpoints

components/Adshares/Adshares.tsx

@@ -3,7 +3,7 @@ import { useMediaQuery, useTheme } from '@mui/material';
 
 const AdsSlider: React.FC = () => {
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   return (
     <div className='flex justify-center'>

components/CustomTable/CustomTable.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild } from 'react';
+import React from 'react';
 import {
   Box,
   useMediaQuery,
@@ -18,7 +18,7 @@ export interface CustomTableProps<T> {
   data: any;
   defaultOrderBy?: T;
   defaultOrder?: 'asc' | 'desc';
-  mobileHTML: (item: any, index: number) => ReactChild;
+  mobileHTML: (item: any, index: number) => React.ReactNode;
   desktopHTML: (
     item: any,
     index: number,
@@ -39,7 +39,7 @@ const CustomTable: React.FC<CustomTableProps<any>> = ({
   desktopHTML,
 }) => {
   const theme = useTheme();
-  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
+  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <Box className={styles.tableContainer}>

components/FarmCard/FarmCard.tsx

@@ -25,7 +25,7 @@ const FarmCard: React.FC<{
 }> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const [isExpandCard, setExpandCard] = useState(false);
 
   const lpStakingInfo = stakingInfo as StakingInfo;

components/FarmCard/FarmCardDetails.tsx

@@ -42,7 +42,7 @@ const FarmCardDetails: React.FC<{
 }> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const [stakeAmount, setStakeAmount] = useState('');
   const [attemptStaking, setAttemptStaking] = useState(false);
   const [attemptUnstaking, setAttemptUnstaking] = useState(false);

components/Header/index.tsx

@@ -41,7 +41,9 @@ const newTransactionsFirst = (a: TransactionDetails, b: TransactionDetails) => {
 const Header: React.FC = () => {
   const { t } = useTranslation();
   const router = useRouter();
-  const { pathname } = router;
+  const routerPathArr = router.pathname.split('/');
+  const pathname =
+    '/' + (routerPathArr.length > 1 ? router.pathname.split('/')[1] : '');
   const { account } = useActiveWeb3React();
   const isSupportedNetwork = useIsSupportedNetwork();
   const { ENSName } = useENSName(account ?? undefined);
@@ -61,8 +63,8 @@ const Header: React.FC = () => {
   const confirmed = sortedRecentTransactions
     .filter((tx: any) => tx.receipt)
     .map((tx: any) => tx.hash);
-  const tabletWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
-  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
+  const tabletWindowSize = useMediaQuery(theme.breakpoints.down('md'));
+  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
   const toggleWalletModal = useWalletModalToggle();
   const toggleNetworkSelectionModal = useNetworkSelectionModalToggle();
   const deviceWidth = useDeviceWidth();

components/PairsTable/PairsTable.tsx

@@ -357,7 +357,9 @@ const PairTable: React.FC<PairsTableProps> = ({
     const totalSpecificRows = [
       {
         html: (
-          <Box className='analyticsPairVersion'>{pair.isV3 ? 'V3' : 'V2'}</Box>
+          <Box className={styles.analyticsPairVersion}>
+            {pair.isV3 ? 'V3' : 'V2'}
+          </Box>
         ),
       },
     ];

components/PositionCard/PositionCard.tsx

@@ -105,7 +105,7 @@ export const MinimalPositionCard: React.FC<PositionCardProps> = ({
         <p>
           <span role='img' aria-label='wizard-icon'>
             ⭐️
-          </span>{' '}
+          </span>
           {t('addLiquidityDesc')}
         </p>
       )}

components/StakerEventCard/EternalFarmCard.tsx

@@ -102,7 +102,7 @@ export function EternalFarmCard({
       : undefined;
 
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   return (
     <Box

components/StakerMyStakes/FarmCard.tsx

@@ -24,7 +24,7 @@ export default function FarmCard({ el, poolApr, farmApr }: FarmCardProps) {
   const { t } = useTranslation();
   const { chainId } = useActiveWeb3React();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const tokenMap = useSelectedTokenList();
   const poolToken0 = el.pool.token0 as any;

components/StakerMyStakes/FarmStakeButtons.tsx

@@ -18,7 +18,7 @@ interface FarmCardDetailProps {
 export default function FarmStakeButtons({ el }: FarmCardDetailProps) {
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const isSmallDesktop = useMediaQuery(breakpoints.down('md'));
 
   const { v3Stake } = useV3StakeData();

components/StakerMyStakes/GammaFarmCard.tsx

@@ -23,7 +23,7 @@ const GammaFarmCard: React.FC<{
       : [];
   const [showDetails, setShowDetails] = useState(false);
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const farmAPR =
     rewardData && rewardData['apr'] ? Number(rewardData['apr']) : 0;

components/StakerMyStakes/GammaFarmCardDetails.tsx

@@ -48,7 +48,7 @@ const GammaFarmCardDetails: React.FC<{
   const [attemptUnstaking, setAttemptUnstaking] = useState(false);
   const [attemptClaiming, setAttemptClaiming] = useState(false);
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const masterChefContract = useMasterChefContract(
     pairData.masterChefIndex ?? 0,
     undefined,

components/StakerMyStakes/index.tsx

@@ -49,7 +49,7 @@ export const FarmingMyFarms: React.FC<{
   const { chainId, account } = useActiveWeb3React();
   const tokenMap = useSelectedTokenList();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const { v3FarmSortBy } = GlobalConst.utils;
   const [sortByQuick, setSortByQuick] = useState(v3FarmSortBy.pool);

components/SyrupCard/SyrupCard.tsx

@@ -16,7 +16,7 @@ const SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
 }) => {
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const [expanded, setExpanded] = useState(false);
 
   const currency = unwrappedToken(syrup.token);

components/SyrupCard/SyrupCardDetails.tsx

@@ -31,7 +31,7 @@ const SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
   const syrupCurrency = unwrappedToken(syrup.token);
   const { breakpoints } = useTheme();
   const { t } = useTranslation();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const [attemptingClaim, setAttemptingClaim] = useState(false);
   const [attemptingUnstake, setAttemptingUnstake] = useState(false);
   const [openStakeModal, setOpenStakeModal] = useState(false);

components/SyrupCard/SyrupTimerLabel.tsx

@@ -9,7 +9,7 @@ const SyrupTimerLabel: React.FC<{ exactEnd: number; isEnded: boolean }> = ({
   const { t } = useTranslation();
   const [currentTime, setCurrentTime] = useState(Math.floor(Date.now() / 1000));
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const MINUTE = 60;
   const HOUR = MINUTE * 60;

components/TransactionsTable/TransactionsTable.tsx

@@ -87,7 +87,7 @@ const TransactionsTable: React.FC<TransactionsTableProps> = ({ data }) => {
   ];
   const { chainId } = useActiveWeb3React();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const getTxString = (txn: any) => {
     const messageData = {
       token0Symbol: txn.pair.token1.symbol,

components/pages/analytics/AnalyticsHeader.tsx

@@ -28,7 +28,7 @@ const AnalyticsHeader: React.FC<AnalyticHeaderProps> = ({
   const router = useRouter();
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const chainIdToUse = chainId ?? ChainId.MATIC;
   const config = getConfig(chainIdToUse);
   const v3 = config['v3'];

components/pages/dragons/DragonsSyrup.tsx

@@ -37,7 +37,7 @@ const EARNED_COLUMN = 4;
 const DragonsSyrup: React.FC = () => {
   const { t } = useTranslation();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const [isEndedSyrup, setIsEndedSyrup] = useState(false);
   const [pageIndex, setPageIndex] = useState(0);
   const [sortBy, setSortBy] = useState(0);

components/pages/farms/FarmRewards.tsx

@@ -19,7 +19,7 @@ const FarmRewards: React.FC<{ bulkPairs: any }> = ({ bulkPairs }) => {
   const { breakpoints } = useTheme();
   const { chainId } = useActiveWeb3React();
   const defaultChainId = chainId ?? ChainId.MATIC;
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const farmData = useUSDRewardsandFees(
     currentTab === GlobalConst.v2FarmTab.LPFARM,

components/pages/farms/FarmsList.tsx

@@ -67,7 +67,7 @@ const FarmsList: React.FC<FarmsListProps> = ({ bulkPairs }) => {
     ? (router.query.sortBy as string)
     : POOL_COLUMN;
 
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const { chainId } = useActiveWeb3React();
   const [pageIndex, setPageIndex] = useState(0);
   const [farmSearch, setFarmSearch] = useState('');

components/pages/farms/GammaFarmsPage/GammaFarmCard/index.tsx

@@ -23,7 +23,7 @@ const GammaFarmCard: React.FC<{
       : [];
   const [showDetails, setShowDetails] = useState(false);
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const farmAPR =
     rewardData && rewardData['apr'] ? Number(rewardData['apr']) : 0;

components/pages/farms/GammaFarmsPage/GammaFarmCardDetails/index.tsx

@@ -48,7 +48,7 @@ const GammaFarmCardDetails: React.FC<{
   const [attemptUnstaking, setAttemptUnstaking] = useState(false);
   const [attemptClaiming, setAttemptClaiming] = useState(false);
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const tokenMap = useSelectedTokenList();
 

components/pages/farms/V3/Farms.tsx

@@ -23,7 +23,7 @@ export default function Farms() {
     ? (router.query.farmStatus as string)
     : 'active';
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const allGammaFarms = useMemo(() => {
     return chainId

components/pages/swap/LiquidityPoolRow.tsx

@@ -12,7 +12,7 @@ const LiquidityPoolRow: React.FC<{
 }> = ({ pair }) => {
   const { breakpoints } = useTheme();
   const daysCurrentYear = getDaysCurrentYear();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const isLg = useMediaQuery(breakpoints.only('lg'));
   const { t } = useTranslation();
 

components/pages/swap/LiquidityPools.tsx

@@ -13,7 +13,7 @@ const LiquidityPools: React.FC<{
   token2: Token;
 }> = ({ token1, token2 }) => {
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const isLg = useMediaQuery(breakpoints.only('lg'));
 
   const [liquidityPoolClosed, setLiquidityPoolClosed] = useState(isMobile);

components/pages/swap/SwapProTransactions.tsx

@@ -17,7 +17,7 @@ const SwapProTransactions: React.FC<SwapProTransactionsProps> = ({
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('xs'));
+  const mobileWindowSize = useMediaQuery(theme.breakpoints.down('sm'));
   const { chainId } = useActiveWeb3React();
   const [symbol1, setSymbol1] = useState('');
   const [symbol2, setSymbol2] = useState('');

pages/dragons/index.tsx

@@ -15,7 +15,7 @@ import { Adshares } from 'components';
 
 const DragonPage = (_props: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const { t } = useTranslation();
   //showing old dragons lair until we're ready to deploy
 

pages/farm/[version]/index.tsx

@@ -40,7 +40,7 @@ const FarmPage = (_props: InferGetStaticPropsType<typeof getStaticProps>) => {
   const cntFarms = useDefaultCNTFarmList(chainIdToUse);
   const dualFarms = useDefaultDualFarmList();
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const OTHER_FARM_LINK = process.env.NEXT_PUBLIC_OTHER_LP_CREATE_A_FARM_LINK;
 
   const pairLists = useMemo(() => {

pages/pools/[version]/index.tsx

@@ -27,7 +27,7 @@ const PoolsPage = (_props: InferGetStaticPropsType<typeof getStaticProps>) => {
   const v2 = config['v2'];
 
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const helpURL = process.env.NEXT_PUBLIC_HELP_URL;
   const allGammaPairs = chainId ? GammaPairs[chainId] : {};

pages/swap/index.tsx

@@ -31,7 +31,7 @@ const SwapPage = (_props: InferGetStaticPropsType<typeof getStaticProps>) => {
   const token2 = wrappedCurrency(currencies[Field.OUTPUT], chainIdToUse);
 
   const { breakpoints } = useTheme();
-  const isMobile = useMediaQuery(breakpoints.down('xs'));
+  const isMobile = useMediaQuery(breakpoints.down('sm'));
   const token1V3 = wrappedCurrencyV3(currenciesV3[Field.INPUT], chainIdToUse);
   const token2V3 = wrappedCurrencyV3(currenciesV3[Field.OUTPUT], chainIdToUse);