feat: mobile header

defi-wonderland · Aug 9, 2024 · 0791afc · 0791afc
1 parent 2053f29
commit 0791afc
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 85 deletions.
diff --git a/public/locales/en/common.json b/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",

diff --git a/public/locales/es/common.json b/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",

diff --git a/src/assets/icons/closeDark.svg b/src/assets/icons/closeDark.svg
diff --git a/src/assets/icons/closeLight.svg b/src/assets/icons/closeLight.svg
diff --git a/src/assets/icons/menuDark.svg b/src/assets/icons/menuDark.svg
diff --git a/src/assets/icons/menuLight.svg b/src/assets/icons/menuLight.svg
diff --git a/src/components/TotalValueLocked.tsx b/src/components/TotalValueLocked.tsx
@@ -55,11 +55,11 @@ const MobileTvlContainer = ({ tvl }: TotalValueLockedProps) => {
 
       {/* Fifth item: half width */}
       <Grid item container xs={12} spacing={0.5}>
-        {renderTvlContent(tvl[4], 4, '5rem', 6)}
+        {renderTvlContent(tvl[4], 4, '5rem', 6, true, true)}
 
-        {/* Sixth item: two-thirds width */}
+        {/* Sixth item: two-thirds width +  others remaining */}
         <Grid item container xs={6} spacing={0.5}>
-          {renderTvlContent(tvl[5], 5, '5rem', 9)}
+          {renderTvlContent(tvl[5], 5, '5rem', 9, true, true)}
           <Grid item xs={3}>
             <GridContainer height='5rem'>
               <OthersBox>
@@ -99,18 +99,23 @@ const DesktopTvlContainer = ({ 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'>

diff --git a/src/components/TvlContentBox.tsx b/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',
   };
 });
diff --git a/src/containers/Header/DesktopHeader.tsx b/src/containers/Header/DesktopHeader.tsx
@@ -1,10 +1,9 @@
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 
-import { StyledHeader, LogoContainer, Logo, SIconButton } from '~/containers';
-import { HeaderProps } from '.';
-
+import { StyledHeader, LogoContainer, Logo, SIconButton, HeaderProps } from '~/containers';
 import { BasicSelect, SearchBar, Gas, SBox } from '~/components';
+
 import LogoDark from '~/assets/icons/logoDark.svg';
 import LogoLight from '~/assets/icons/logoLight.svg';
 import LightMode from '~/assets/icons/lightMode.svg';

diff --git a/src/containers/Header/MobileHeader.tsx b/src/containers/Header/MobileHeader.tsx
@@ -1,26 +1,25 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, IconButton, Drawer, List, ListItem } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
+import { Box, IconButton, Drawer, List, ListItem, Typography } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 
+import { StyledHeader, LogoContainer, Logo, HeaderProps } from '~/containers';
+import { BasicSelect, Gas } from '~/components';
+import { useCustomTheme } from '~/hooks';
+
 import LogoDark from '~/assets/icons/logoDark.svg';
 import LogoLight from '~/assets/icons/logoLight.svg';
 import LightMode from '~/assets/icons/lightMode.svg';
 import DarkMode from '~/assets/icons/darkMode.svg';
-import { BasicSelect, Gas, Icon } from '~/components';
-import { useCustomTheme } from '~/hooks';
 import SearchDark from '~/assets/icons/searchDark.svg';
 import SearchLight from '~/assets/icons/searchLight.svg';
+import MenuDark from '~/assets/icons/menuDark.svg';
+import MenuLight from '~/assets/icons/menuLight.svg';
+import CloseDark from '~/assets/icons/closeDark.svg';
+import CloseLight from '~/assets/icons/closeLight.svg';
 
-interface MobileHeaderProps {
-  theme: string;
-  goToHome: () => void;
-  handleChangeLanguage: (value: string) => void;
-  localesMap: Record<string, string>;
-  changeTheme: () => void;
-}
+interface MobileHeaderProps extends HeaderProps {}
 
 export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap, changeTheme }: MobileHeaderProps) => {
   const {
@@ -40,15 +39,25 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
         <Logo src={theme === 'dark' ? LogoDark : LogoLight} alt='ZK Chain Hub' />
       </LogoContainer>
       <IconsContainer>
-        <SearchIconButton>
-          <Icon darkIcon={SearchDark} lightIcon={SearchLight} alt='Search' size={20} />
-        </SearchIconButton>
-        <IconButton onClick={toggleDrawer(true)} aria-label='open menu'>
-          <MenuIcon />
-        </IconButton>
+        <SIconButton>
+          {theme === 'dark' ? (
+            <Image src={SearchDark} alt='search-icon' />
+          ) : (
+            <Image src={SearchLight} alt='search-icon' />
+          )}
+        </SIconButton>
+        <SIconButton onClick={toggleDrawer(true)}>
+          {theme === 'dark' ? <Image src={MenuDark} alt='menu-icon' /> : <Image src={MenuLight} alt='menu-icon' />}
+        </SIconButton>
       </IconsContainer>
-      <Drawer anchor='right' open={drawerOpen} onClose={toggleDrawer(false)}>
+      <Menu anchor='right' open={drawerOpen} onClose={toggleDrawer(false)}>
         <DrawerContent>
+          <DrawerHeader>
+            <Typography>{t('HOME.menu')}</Typography>
+            <SIconButton onClick={toggleDrawer(false)} aria-label='close menu'>
+              <Image src={theme === 'dark' ? CloseDark : CloseLight} alt='close icon' />
+            </SIconButton>
+          </DrawerHeader>
           <List>
             <ListItem>
               <Gas />
@@ -71,58 +80,57 @@ export const MobileHeader = ({ theme, goToHome, handleChangeLanguage, localesMap
             </ListItem>
           </List>
         </DrawerContent>
-      </Drawer>
+      </Menu>
     </StyledHeader>
   );
 };
 
 export default MobileHeader;
 
-// Styled components
-const StyledHeader = styled('header')({
-  display: 'flex',
-  height: '5.5rem',
-  padding: '1rem',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-});
-
-const LogoContainer = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  flexShrink: 0,
-});
-
-const Logo = styled(Image)({
-  width: '10rem',
-  height: 'auto',
-});
-
-const IconsContainer = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '1rem',
-});
-
-const SearchIconButton = styled(IconButton)({
-  padding: 0,
+const IconsContainer = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: currentTheme.gap,
+  };
 });
 
 const SIconButton = styled(IconButton)(() => {
   const { currentTheme } = useCustomTheme();
   return {
-    color: `${currentTheme.textPrimary}`,
-    backgroundColor: `${currentTheme.backgroundSecondary}`,
-    borderRadius: `${currentTheme.borderRadius}`,
-    padding: '1rem',
+    color: currentTheme.textPrimary,
+    backgroundColor: currentTheme.backgroundSecondary,
+    borderRadius: currentTheme.borderRadius,
+    padding: currentTheme.padding,
     width: '3.5rem',
     height: '3.5rem',
   };
 });
 
-const DrawerContent = styled(Box)({
-  width: '250px',
-  padding: '1rem',
+const Menu = styled(Drawer)(() => {
+  return {
+    width: '100%',
+  };
 });
+
+const DrawerContent = styled(Box)(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    width: '100%',
+    height: '100%',
+    backgroundColor: currentTheme.backgroundPrimary,
+    padding: currentTheme.padding,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  };
+});
+
+const DrawerHeader = styled(Box)(() => ({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+}));
diff --git a/src/containers/Header/index.tsx b/src/containers/Header/index.tsx
@@ -70,13 +70,15 @@ export const Header = () => {
   );
 };
 
-export const StyledHeader = styled('header')({
-  display: 'flex',
-  height: '5.5rem',
-  padding: '1rem',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
+export const StyledHeader = styled('header')(() => {
+  const { currentTheme } = useCustomTheme();
+  return {
+    display: 'flex',
+    padding: currentTheme.padding,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  };
 });
 
 export const LogoContainer = styled(Box)({
@@ -95,11 +97,11 @@ export const Logo = styled(Image)({
 export const SIconButton = styled(IconButton)(() => {
   const { currentTheme } = useCustomTheme();
   return {
-    color: `${currentTheme.textPrimary}`,
-    backgroundColor: `${currentTheme.backgroundSecondary}`,
-    borderRadius: `${currentTheme.borderRadius}`,
-    padding: '1rem',
-    gap: '0.5rem',
+    color: currentTheme.textPrimary,
+    backgroundColor: currentTheme.backgroundSecondary,
+    borderRadius: currentTheme.borderRadius,
+    padding: currentTheme.padding,
+    gap: currentTheme.gap,
     width: '3.5rem',
     height: '3.5rem',
   };