💄 headers: update align in mobile

exactly · Mar 26, 2024 · c462a19 · c462a19
1 parent b06f989
commit c462a19
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx
@@ -15,7 +15,7 @@ import { Address, formatEther, formatUnits } from 'viem';
 import useStETHNativeAPR from 'hooks/useStETHNativeAPR';
 import { toPercentage } from 'utils/utils';
 import { track } from 'utils/mixpanel';
-import { Typography } from '@mui/material';
+import { Typography, useMediaQuery, useTheme } from '@mui/material';
 import getSymbolDescription from 'utils/getSymbolDescription';
 import useContractAddress from 'hooks/useContractAddress';
 import { useWeb3 } from 'hooks/useWeb3';
@@ -42,6 +42,8 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
   } = useWeb3();
 
   const nativeAPR = useStETHNativeAPR();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const assetDescription = useCallback(
     (s: string) => {
@@ -103,7 +105,7 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
                 formatUnits(floatingDeposits + fixedDeposits - (floatingBorrows + fixedBorrows), decimals),
               )}`
             : undefined,
-        sx: { textAlign: 'center' },
+        ...(!isMobile && { sx: { textAlign: 'center' } }),
       },
       {
         label: t('Global Utilization'),
@@ -128,12 +130,13 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
     return { itemsInfo: items, totalUtilization: totalUti };
   }, [
     marketAccount,
-    t,
+    backupBorrows,
+    floatingBorrows,
     floatingDeposits,
     fixedDeposits,
-    floatingBorrows,
+    t,
     fixedBorrows,
-    backupBorrows,
+    isMobile,
     symbol,
     nativeAPR,
   ]);

diff --git a/components/markets/Header.tsx b/components/markets/Header.tsx
@@ -9,10 +9,13 @@ import { ItemInfoProps } from 'components/common/ItemInfo';
 import formatNumber from 'utils/formatNumber';
 import useAccountData from 'hooks/useAccountData';
 import { toPercentage } from 'utils/utils';
+import { useMediaQuery, useTheme } from '@mui/material';
 
 const MarketsHeader: FC = () => {
   const { t } = useTranslation();
   const { accountData } = useAccountData();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   const { totalDeposited, totalBorrowed, totalAvailable } = useMemo<{
     totalDeposited?: bigint;
@@ -75,7 +78,7 @@ const MarketsHeader: FC = () => {
     {
       label: t('Available for Withdrawal'),
       value: totalAvailable ? `$${formatNumber(formatUnits(totalAvailable, 18))}` : undefined,
-      sx: { textAlign: 'center' },
+      ...(!isMobile && { sx: { textAlign: 'center' } }),
     },
     {
       label: t('Global Utilization'),