feat: responsiveness (#17)

public/locales/en/common.json

@@ -5,6 +5,7 @@
     "gasPrice": "L1 Gas Price",
     "transfer": "ERC-20 Transfer",
     "home": "Home",
+    "menu": "Menu",
     "LOCKEDASSETS": {
       "lockedAssets": "Locked assets",
       "lockedAssetsDescription": "Locked assets in Elastic Chain Ecosystem",

public/locales/es/common.json

@@ -5,6 +5,7 @@
     "gasPrice": "Precio del gas L1",
     "transfer": "Transferencia ERC-20",
     "home": "Inicio",
+    "menu": "Menú",
     "LOCKEDASSETS": {
       "lockedAssets": "Activos bloqueados",
       "lockedAssetsDescription": "Activos bloqueados en el ecosistema de Elastic Chain",

src/components/Breadcrumb.tsx

@@ -53,6 +53,7 @@ export const Breadcrumb = ({ isChain }: BreadcrumbProps) => {
 const BreadcrumbNav = styled('nav')({
   display: 'flex',
   alignItems: 'center',
+  marginBottom: '1.5rem',
 });
 
 const BreadcrumbLink = styled(Link)(() => {

src/components/ChainInformation.tsx

@@ -99,14 +99,19 @@ export const ChainInformation = () => {
   );
 };
 
-export const DataContainer = styled(Box)(() => {
+export const DataContainer = styled(Box)(({ theme: muiTheme }) => {
   const { currentTheme, theme } = useCustomTheme();
+
   return {
     background: theme === 'dark' ? currentTheme.backgroundTertiary : currentTheme.backgroundSecondary,
     borderRadius: currentTheme.borderRadius,
     border: currentTheme.border,
     display: 'grid',
     gridTemplateColumns: 'repeat(4, 1fr)',
+
+    [muiTheme.breakpoints.down('sm')]: {
+      gridTemplateColumns: 'repeat(1, 1fr)',
+    },
   };
 });
 

src/components/FeeParams.tsx

@@ -17,7 +17,7 @@ export const FeeParams = () => {
   const { chainData } = useData();
 
   return (
-    <>
+    <article>
       <STitle>{t('CHAIN.FEEPARAMS.title')} </STitle>
       <DataContainer>
         <InfoBox
@@ -56,6 +56,6 @@ export const FeeParams = () => {
           alt='max-icon'
         />
       </DataContainer>
-    </>
+    </article>
   );
 };

src/components/Table.tsx

@@ -78,7 +78,7 @@ export const DataTable = ({ chains }: TableProps) => {
 export const STableContainer = styled(TableContainer)(() => {
   const { currentTheme } = useCustomTheme();
   return {
-    width: '75rem',
+    width: '100%',
     borderRadius: currentTheme.borderRadius,
     border: currentTheme.border,
     overflow: 'hidden',

src/components/TitleBanner.tsx

@@ -22,14 +22,22 @@ export const TitleBanner = () => {
   );
 };
 
-const TitleBox = styled(Box)(() => {
+const TitleBox = styled(Box)(({ theme }) => {
   const { currentTheme } = useCustomTheme();
 
   return {
     display: 'flex',
     alignItems: 'center',
     alignSelf: 'flex-start',
     gap: currentTheme.gap,
+    justifyContent: 'center',
+    textAlign: 'center',
+    [theme.breakpoints.down('sm')]: {
+      display: 'grid',
+      gridTemplateColumns: 'auto 1fr',
+      justifyContent: 'start',
+      textAlign: 'left',
+    },
   };
 });
 
@@ -44,9 +52,15 @@ const Bold = styled('span')({
   fontWeight: 700,
 });
 
-const Subtitle = styled(Typography)(() => ({
-  fontSize: '3rem',
-  fontWeight: 700,
-  lineHeight: '4rem',
-  letterSpacing: '-0.03em',
-}));
+const Subtitle = styled(Typography)(({ theme }) => {
+  return {
+    fontSize: '3rem',
+    fontWeight: 700,
+    lineHeight: '4rem',
+    letterSpacing: '-0.03em',
+    gridColumn: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      gridColumn: 'span 2',
+    },
+  };
+});

src/components/TotalValueLocked.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Grid, styled } from '@mui/material';
+import { Box, Typography, Grid, styled, useMediaQuery, useTheme } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 import { TvlData } from '~/types';
 import { TvlContentBox } from '~/components';
@@ -9,17 +9,78 @@ interface TotalValueLockedProps {
 }
 
 export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <>
+      {isMobile && <MobileTvlContainer tvl={tvl} />}
+      {!isMobile && <DesktopTvlContainer tvl={tvl} />}
+    </>
+  );
+};
+
+const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => {
+  const { t } = useTranslation();
+
+  const renderTvlContent = (
+    data: TvlData,
+    index: number,
+    height: string,
+    xs: number,
+    smallCard?: boolean,
+    isLast?: boolean,
+  ) => (
+    <Grid item xs={xs} key={index}>
+      <GridContainer imageUrl={data.imageUrl} height={height} smallCard={smallCard}>
+        <TvlContentBox
+          avatar={data.imageUrl}
+          token={data.token}
+          total={data.total}
+          tokenName={data.tokenName}
+          isLast={isLast}
+        />
+      </GridContainer>
+    </Grid>
+  );
+
+  return (
+    <TvlContainer container spacing={0.5}>
+      {/* First item: full width */}
+      {renderTvlContent(tvl[0], 0, '12rem', 12)}
+
+      {/* Second item: full width, half height */}
+      {renderTvlContent(tvl[1], 1, '6rem', 12)}
+
+      {/* Third and Fourth items: half width each */}
+      <Grid item container xs={12} spacing={0.5}>
+        {renderTvlContent(tvl[2], 2, '6rem', 6)}
+        {renderTvlContent(tvl[3], 3, '6rem', 6)}
+      </Grid>
+
+      {/* Fifth item: half width */}
+      <Grid item container xs={12} spacing={0.5}>
+        {renderTvlContent(tvl[4], 4, '5rem', 6, true, true)}
+
+        {/* Sixth item: two-thirds width +  others remaining */}
+        <Grid item container xs={6} spacing={0.5}>
+          {renderTvlContent(tvl[5], 5, '5rem', 9, true, true)}
+          <Grid item xs={3}>
+            <GridContainer height='5rem'>
+              <OthersBox>
+                <OthersText>{t('HOME.LOCKEDASSETS.others')}</OthersText>
+              </OthersBox>
+            </GridContainer>
+          </Grid>
+        </Grid>
+      </Grid>
+    </TvlContainer>
+  );
+};
+
+const DesktopTvlContainer = ({ tvl }: TotalValueLockedProps) => {
   const { t } = useTranslation();
 
-  /**
-   * Renders the TVL content within a grid container.
-   * @param data - The TVL data.
-   * @param index - The index of the item in the array.
-   * @param height - The height of the container.
-   * @param xs - The grid size for the container.
-   * @param smallCard - Whether the card is small or not.
-   * @param isLast - Whether the card is the last one or not.
-   */
   const renderTvlContent = (
     data: TvlData,
     index: number,
@@ -43,18 +104,23 @@ export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
 
   return (
     <TvlContainer container spacing={0.5}>
+      {/* First item: full width */}
       {renderTvlContent(tvl[0], 0, '12rem', 12)}
 
       <Grid item container xs={12} spacing={0.5}>
+        {/* Second item: half width */}
         {renderTvlContent(tvl[1], 1, '12rem', 6)}
 
         <Grid item container xs={6} spacing={0.5}>
+          {/* Third and fourth items: one-third width each*/}
           {tvl.slice(2, 4).map((data, index) => renderTvlContent(data, index + 2, '12rem', 4, true))}
 
           <Grid item container xs={4} direction='column'>
+            {/* Fifth item: one-third width and half height */}
             {renderTvlContent(tvl[4], 4, '5.85rem', 6, true)}
 
             <Grid item container xs={6} spacing={0.5}>
+              {/* Sixth item: three-fourths width and halft height + others remaining width same height*/}
               {renderTvlContent(tvl[5], 5, '5.85rem', 9, true, true)}
               <Grid item xs={3}>
                 <GridContainer height='5.85rem'>
@@ -74,7 +140,7 @@ export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
 const TvlContainer = styled(Grid)({
   display: 'flex',
   flexWrap: 'wrap',
-  width: '75rem',
+  alignItems: 'flex-start',
 });
 
 interface GridContainerProps {

src/components/TvlContentBox.tsx

@@ -16,12 +16,12 @@ export const TvlContentBox = ({ avatar, token, total, tokenName, isLast }: TvlCo
       <TopBox>
         <TokenLogo src={avatar} alt={token} isLast={isLast || false} />
         <TextBox>
-          <TokenName>{tokenName}</TokenName>
-          <TokenTicker>{token}</TokenTicker>
+          <TokenName isLast={isLast || false}>{tokenName}</TokenName>
+          <TokenTicker isLast={isLast || false}>{token}</TokenTicker>
         </TextBox>
       </TopBox>
 
-      <TvlAmount isLast={isLast || false}>{formatDataNumber(total, 0, true)}</TvlAmount>
+      <TvlAmount isLast={isLast ? isLast : false}>{formatDataNumber(total, 0, true)}</TvlAmount>
     </ContentBox>
   );
 };
@@ -33,6 +33,7 @@ const ContentBox = styled(Box)({
   alignItems: 'flex-start',
   zIndex: 1,
   width: '100%',
+  height: '100%',
 });
 
 const TopBox = styled(Box)(() => {
@@ -54,32 +55,32 @@ const TokenLogo = styled(Avatar)<TvlProps>(({ isLast }) => ({
 }));
 
 const TvlAmount = styled(Typography)<TvlProps>(({ isLast }) => ({
-  fontSize: `${isLast ? '0.85rem' : '1rem'}`,
+  fontSize: `${isLast ? '0.75rem' : '0.875rem'}`,
   fontWeight: 400,
 }));
 
 const TextBox = styled(Box)(() => {
-  const { currentTheme } = useCustomTheme();
   return {
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
-    gap: currentTheme.gap,
   };
 });
 
-const TokenName = styled(Typography)({
-  fontSize: '0.85rem',
+const TokenName = styled(Typography)<TvlProps>(({ isLast }) => ({
+  fontSize: `${isLast ? '0.75rem' : '0.875rem'}`,
   fontWeight: 400,
   whiteSpace: 'nowrap',
-});
+  margin: '0',
+}));
 
-const TokenTicker = styled(Typography)(() => {
+const TokenTicker = styled(Typography)<TvlProps>(({ isLast }) => {
   const { currentTheme } = useCustomTheme();
   return {
-    fontSize: '0.85rem',
+    fontSize: `${isLast ? '0.75rem' : '0.875rem'}`,
     fontWeight: 400,
     color: currentTheme.textSecondary,
     whiteSpace: 'nowrap',
+    margin: '0',
   };
 });