From 9e4ff9bf0dad545a94772e433bbb1a611014e1d9 Mon Sep 17 00:00:00 2001
From: franm <fran.marienhoff@gmail.com>
Date: Thu, 21 Mar 2024 18:14:27 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20headers:=20update=20align=20in?=
 =?UTF-8?q?=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/asset/Header.tsx    | 27 +++++++++++++++++++++------
 components/common/ItemInfo.tsx |  2 +-
 components/markets/Header.tsx  | 20 ++++++++++++++++++--
 i18n/es/translation.json       |  3 ++-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx
index f093a486f..dbcfc790e 100644
--- 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 { Box, Typography } from '@mui/material';
 import getSymbolDescription from 'utils/getSymbolDescription';
 import useContractAddress from 'hooks/useContractAddress';
 import { useWeb3 } from 'hooks/useWeb3';
@@ -92,7 +92,7 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
             : undefined,
       },
       {
-        label: t('Available for Withdrawal'),
+        label: t('Available'),
         value:
           floatingBorrows !== undefined &&
           fixedBorrows !== undefined &&
@@ -103,7 +103,22 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
                 formatUnits(floatingDeposits + fixedDeposits - (floatingBorrows + fixedBorrows), decimals),
               )}`
             : undefined,
-        sx: { textAlign: 'center' },
+        tooltipTitle: (
+          <Box display="flex" flexDirection="column" gap={0.5}>
+            <Typography fontSize={12} fontWeight={500}>
+              {t('Available for Withdrawal')}
+            </Typography>
+            <Typography fontSize={12} color="blue" sx={{ textDecoration: 'underline' }}>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://docs.exact.ly/guides/parameters#a.-reserve-factor"
+              >
+                {t('Learn more about reserve factor.')}
+              </a>
+            </Typography>
+          </Box>
+        ),
       },
       {
         label: t('Global Utilization'),
@@ -128,12 +143,12 @@ const AssetHeaderInfo: FC<Props> = ({ symbol }) => {
     return { itemsInfo: items, totalUtilization: totalUti };
   }, [
     marketAccount,
-    t,
+    backupBorrows,
+    floatingBorrows,
     floatingDeposits,
     fixedDeposits,
-    floatingBorrows,
+    t,
     fixedBorrows,
-    backupBorrows,
     symbol,
     nativeAPR,
   ]);
diff --git a/components/common/ItemInfo.tsx b/components/common/ItemInfo.tsx
index d969299ec..88f137736 100644
--- a/components/common/ItemInfo.tsx
+++ b/components/common/ItemInfo.tsx
@@ -10,7 +10,7 @@ export type ItemInfoProps = {
   label: string;
   value?: string | React.ReactNode;
   underLabel?: string;
-  tooltipTitle?: string;
+  tooltipTitle?: string | React.ReactNode;
   xs?: number;
   sx?: BoxProps['sx'];
 };
diff --git a/components/markets/Header.tsx b/components/markets/Header.tsx
index 464f7f222..03c6dae54 100644
--- a/components/markets/Header.tsx
+++ b/components/markets/Header.tsx
@@ -9,6 +9,7 @@ import { ItemInfoProps } from 'components/common/ItemInfo';
 import formatNumber from 'utils/formatNumber';
 import useAccountData from 'hooks/useAccountData';
 import { toPercentage } from 'utils/utils';
+import { Box, Typography } from '@mui/material';
 
 const MarketsHeader: FC = () => {
   const { t } = useTranslation();
@@ -73,9 +74,24 @@ const MarketsHeader: FC = () => {
       value: totalBorrowed ? `$${formatNumber(formatUnits(totalBorrowed, 18))}` : undefined,
     },
     {
-      label: t('Available for Withdrawal'),
+      label: t('Available'),
       value: totalAvailable ? `$${formatNumber(formatUnits(totalAvailable, 18))}` : undefined,
-      sx: { textAlign: 'center' },
+      tooltipTitle: (
+        <Box display="flex" flexDirection="column" gap={0.5}>
+          <Typography fontSize={12} fontWeight={500}>
+            {t('Available for Withdrawal')}
+          </Typography>
+          <Typography fontSize={12} color="blue" sx={{ textDecoration: 'underline' }}>
+            <a
+              target="_blank"
+              rel="noreferrer noopener"
+              href="https://docs.exact.ly/guides/parameters#a.-reserve-factor"
+            >
+              {t('Learn more about reserve factor.')}
+            </a>
+          </Typography>
+        </Box>
+      ),
     },
     {
       label: t('Global Utilization'),
diff --git a/i18n/es/translation.json b/i18n/es/translation.json
index 128f47c1e..3f593f29e 100644
--- a/i18n/es/translation.json
+++ b/i18n/es/translation.json
@@ -617,5 +617,6 @@
   "Term Structure of Interest Rates": "Estructura de Plazos de Tasas de Interés",
   "Rate": "Tasa",
   "Min": "Mín",
-  "Variable APR, Utilization and Global Utilization": "TNA Variable, Utilización y Utilización Global"
+  "Variable APR, Utilization and Global Utilization": "TNA Variable, Utilización y Utilización Global",
+  "Learn more about reserve factor.": "Aprende más sobre el factor de reserva."
 }