feat: fix layout on mobile market (#2149)

aave · Aug 13, 2024 · 5b70f23 · 5b70f23 · github-actions · Aug 13, 2024
1 parent 758a98a
commit 5b70f23
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 14 deletions.
diff --git a/public/gho-group.svg b/public/gho-group.svg
diff --git a/public/illustration-gho-logo-2.svg b/public/illustration-gho-logo-2.svg
diff --git a/public/loveGhost.svg b/public/loveGhost.svg
diff --git a/public/resting-gho-hat-purple.svg b/public/resting-gho-hat-purple.svg
diff --git a/src/components/ConnectWalletPaper.tsx b/src/components/ConnectWalletPaper.tsx
@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro';
-import { CircularProgress, Paper, PaperProps, Typography } from '@mui/material';
+import { Box, CircularProgress, Paper, PaperProps, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 
-import LoveGhost from '/public/loveGhost.svg';
+import LandingGhost from '/public/resting-gho-hat-purple.svg';
 
 import { ConnectWalletButton } from './WalletConnection/ConnectWalletButton';
 
@@ -31,7 +31,9 @@ export const ConnectWalletPaper = ({
         ...sx,
       }}
     >
-      <LoveGhost style={{ marginBottom: '16px' }} />
+      <Box>
+        <LandingGhost />
+      </Box>
       <>
         {loading ? (
           <CircularProgress />

diff --git a/src/locales/en/messages.js b/src/locales/en/messages.js
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
@@ -380,6 +380,7 @@ msgstr "At a discount"
 #: src/components/transactions/Withdraw/WithdrawModalContent.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/GhoBorrowAssetsListItem.tsx
+#: src/modules/markets/MarketsTopPanel.tsx
 msgid "Available"
 msgstr "Available"
 
@@ -591,6 +592,10 @@ msgstr "Borrowing this amount will reduce your health factor and increase risk o
 msgid "Borrowing {symbol}"
 msgstr "Borrowing {symbol}"
 
+#: src/modules/markets/MarketsTopPanel.tsx
+msgid "Borrows"
+msgstr "Borrows"
+
 #: src/components/transactions/GovDelegation/DelegationTypeSelector.tsx
 msgid "Both"
 msgstr "Both"
@@ -1495,6 +1500,7 @@ msgstr "Main"
 msgid "Manage analytics"
 msgstr "Manage analytics"
 
+#: src/modules/markets/MarketsTopPanel.tsx
 #: src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx
 msgid "Market"
 msgstr "Market"

diff --git a/src/modules/bridge/BridgeWrapper.tsx b/src/modules/bridge/BridgeWrapper.tsx
@@ -11,7 +11,7 @@ import { useBridgeTransactionHistory } from 'src/hooks/useBridgeTransactionHisto
 import { useModalContext } from 'src/hooks/useModal';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 
-import LoveGhost from '/public/loveGhost.svg';
+import LandingGhost from '/public/resting-gho-hat-purple.svg';
 
 import { BridgeTransactionListItemWrapper } from './BridgeTransactionListItem';
 import {
@@ -51,7 +51,7 @@ export function BridgeWrapper() {
           flex: 1,
         }}
       >
-        <LoveGhost style={{ marginBottom: '16px' }} />
+        <LandingGhost style={{ marginBottom: '16px' }} />
         <Typography variant={'h3'}>
           <Trans>You don&apos;t have any bridge transactions</Trans>
         </Typography>{' '}

diff --git a/src/modules/history/HistoryWrapper.tsx b/src/modules/history/HistoryWrapper.tsx
@@ -19,7 +19,7 @@ import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
 import { TRANSACTION_HISTORY } from 'src/utils/mixPanelEvents';
 
-import LoveGhost from '/public/loveGhost.svg';
+import LandingGhost from '/public/resting-gho-hat-purple.svg';
 
 import { downloadData, formatTransactionData, groupByDate } from './helpers';
 import { HistoryFilterMenu } from './HistoryFilterMenu';
@@ -130,7 +130,7 @@ export const HistoryWrapper = () => {
           flex: 1,
         }}
       >
-        <LoveGhost style={{ marginBottom: '16px' }} />
+        <LandingGhost style={{ marginBottom: '16px' }} />
         <Typography variant={downToMD ? 'h4' : 'h3'}>
           <Trans>Transaction history is not currently available for this market</Trans>
         </Typography>

diff --git a/src/modules/markets/Gho/GhoBanner.tsx b/src/modules/markets/Gho/GhoBanner.tsx
@@ -85,7 +85,7 @@ export const GhoBanner = ({ reserve }: GhoBannerProps) => {
       >
         <Box
           component="img"
-          src="/illustration-gho-logo-2.svg"
+          src="/gho-group.svg"
           alt="ghost and coin"
           sx={{
             ['@media screen and (min-width: 1125px)']: {

diff --git a/src/modules/markets/MarketsTopPanel.tsx b/src/modules/markets/MarketsTopPanel.tsx
@@ -60,7 +60,23 @@ export const MarketsTopPanel = () => {
         multiMarket={MULTIPLE_MARKET_OPTIONS.includes(currentMarket) ? true : false}
       >
         <Box sx={{ display: 'flex', gap: { xs: 3, xsm: 8 } }}>
-          <TopInfoPanelItem hideIcon title={<Trans>Total market size</Trans>} loading={loading}>
+          <TopInfoPanelItem
+            hideIcon
+            title={
+              <>
+                {downToSM ? (
+                  <>
+                    <Trans>Market</Trans>
+                  </>
+                ) : (
+                  <>
+                    <Trans>Total market size</Trans>
+                  </>
+                )}
+              </>
+            }
+            loading={loading}
+          >
             <FormattedNumber
               value={aggregatedStats.totalLiquidity.toString()}
               symbol="USD"
@@ -71,7 +87,21 @@ export const MarketsTopPanel = () => {
               symbolsVariant={symbolsVariant}
             />
           </TopInfoPanelItem>
-          <TopInfoPanelItem hideIcon title={<Trans>Total available</Trans>} loading={loading}>
+          <TopInfoPanelItem
+            hideIcon
+            title={
+              <>
+                {downToSM ? (
+                  <Trans>Available</Trans>
+                ) : (
+                  <>
+                    <Trans>Total available</Trans>
+                  </>
+                )}
+              </>
+            }
+            loading={loading}
+          >
             <FormattedNumber
               value={aggregatedStats.totalLiquidity.minus(aggregatedStats.totalDebt).toString()}
               symbol="USD"
@@ -82,7 +112,21 @@ export const MarketsTopPanel = () => {
               symbolsVariant={symbolsVariant}
             />
           </TopInfoPanelItem>
-          <TopInfoPanelItem hideIcon title={<Trans>Total borrows</Trans>} loading={loading}>
+          <TopInfoPanelItem
+            hideIcon
+            title={
+              <>
+                {downToSM ? (
+                  <Trans>Borrows</Trans>
+                ) : (
+                  <>
+                    <Trans>Total borrows</Trans>
+                  </>
+                )}
+              </>
+            }
+            loading={loading}
+          >
             <FormattedNumber
               value={aggregatedStats.totalDebt.toString()}
               symbol="USD"