Modify code

src/components/Hydrated/index.tsx

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 export enum IframeEventName {
   topup = 'topup',
-  create_gamefi_wallet = 'create_gamefi_wallet',
-  import_gamefi_wallet = 'import_gamefi_wallet',
+  create_wallet = 'create_wallet',
+  import_wallet = 'import_wallet',
   hide_sidebar = 'hide_sidebar',
   open_sidebar = 'open_sidebar',
   trustless_computer_change_route = 'trustless-computer-change-route',

src/layouts/Header/components/DesktopNav.tsx

@@ -38,9 +38,7 @@ export const DesktopNav = (props: Props) => {
                 window.open(navItem.href, '_blank');
               }}
             >
-              <IcTW
-                fillColor={props?.primaryColor === 'white' ? 'white' : 'black'}
-              />
+              <IcTW fillColor={props?.primaryColor} />
             </Box>
           ) : (
             <Text

src/layouts/Header/components/DrawerMenu.tsx

@@ -12,12 +12,17 @@ import { MobileNav } from './MobileNav';
 
 export type HeaderProps = {
   isOpen: boolean;
+  onToggle: any;
 };
 
 const DrawerMobileMenu = (props: HeaderProps) => {
-  const { isOpen, onToggle } = useDisclosure();
   return (
-    <Drawer isOpen={isOpen} placement="right" onClose={onToggle} size={'sm'}>
+    <Drawer
+      isOpen={props.isOpen}
+      placement="right"
+      onClose={props.onToggle}
+      size={'sm'}
+    >
       <DrawerOverlay />
       <DrawerContent zIndex={3}>
         <DrawerBody bgColor={'#F3F1E8'}>{<MobileNav />}</DrawerBody>
@@ -33,7 +38,7 @@ const DrawerMobileMenu = (props: HeaderProps) => {
             width={50}
             height={50}
             alignSelf={'center'}
-            onClick={onToggle}
+            onClick={props.onToggle}
           />
         </DrawerFooter>
       </DrawerContent>

src/layouts/Header/index.tsx

@@ -72,8 +72,21 @@ const Header = (props: HeaderProps) => {
                 <IconButton
                   onClick={onToggle}
                   icon={
-                    <Image src={'/icons/menu_ic.svg'} w={'24px'} h={'24px'} />
+                    <Image
+                      src={'/icons/menu_ic.svg'}
+                      w={'24px'}
+                      h={'24px'}
+                      color={'white'}
+                      // filter={{
+                      //   base: 'invert(0)',
+                      //   lg: 'invert(100)',
+                      // }}
+                      filter={
+                        primaryColor === 'white' ? 'invert(100)' : 'invert(0)'
+                      }
+                    />
                   }
+                  color={'white'}
                   aria-label={'Toggle Menu'}
                   _hover={{
                     bgColor: 'transparent',
@@ -86,7 +99,7 @@ const Header = (props: HeaderProps) => {
           </Flex>
         </BoxContent>
       </Box>
-      <DrawerMobileMenu isOpen={isOpen} />
+      <DrawerMobileMenu isOpen={isOpen} onToggle={onToggle} />
     </>
   );
 };

src/modules/building-blocks/index.tsx

@@ -6,26 +6,17 @@ import s from './styles.module.scss';
 import Section1 from './Section_1';
 // import Section2 from './Section_2';
 import Section2 from './Section_2_vs2';
+import BoxContent from '@/layouts/BoxContent';
 
 const BuildingBlockModule = () => {
   return (
     <Box className={s.container}>
-      <Flex
-        className="maxWidth"
-        w={'100%'}
-        h={'100%'}
-        marginTop={'120px'}
-        paddingBottom={'120px'}
-        height={'100%'}
-        flexDirection={'column'}
-        alignItems={'flex-start'}
-        alignSelf={'center'}
-      >
-        <Box h={['20px', '40px']} />
+      <BoxContent>
+        <Box h={['20px', '140px']} />
         <Section1 />
         <Box h={['20px', '40px']} />
         <Section2 />
-      </Flex>
+      </BoxContent>
     </Box>
   );
 };

src/modules/building-blocks/styles.module.scss

@@ -2,5 +2,6 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
   background-color: #F3F1E8;
 }

src/modules/bvm/Section_1/index.tsx

@@ -10,21 +10,28 @@ const Section_1 = () => {
   return (
     <Flex
       w={'100%'}
-      flexDir={'row'}
+      flexDir={{
+        base: 'column',
+        lg: 'row',
+      }}
       align={'center'}
-      justify={'space-between'}
-      // bgColor={'#F7F9FB'}
       bgColor={'#fff'}
       px={['60px']}
       py={['30px']}
       minH={['300px']}
       borderRadius={'8px'}
-      className="maxWidth"
+      gap={{
+        base: '40px',
+        '2xl': '0px',
+      }}
     >
       <Flex
         flexDir={'column'}
         flex={1}
-        alignItems={'flex-start'}
+        alignItems={{
+          base: 'center',
+          lg: 'flex-start',
+        }}
         gap={['18px']}
       >
         <Text fontSize={['16px', '40px']} fontWeight={500} color={'#000'}>
@@ -63,9 +70,9 @@ const Section_1 = () => {
         <Image
           alignSelf={'center'}
           maxWidth="380"
-          color={'#1C1C1C'}
-          stroke={'#1C1C1C'}
           src={`/images/what_is_bvm.png`}
+          w={'100%'}
+          h="auto"
           // src={`${CDN_URL}/nbc/images/token_banner.svg`}
         />
       </Flex>

src/modules/bvm/Section_2/index.tsx

@@ -57,15 +57,16 @@ const Section_2 = () => {
 
   return (
     <Box bgColor={'#F3F1E8'} display={'flex'} flexDirection={'column'}>
-      <HStack
-        display={'flex'}
-        flexDirection={'row'}
-        className="maxWidth"
+      <Flex
+        flexDirection={{
+          base: 'column',
+          lg: 'row',
+        }}
         alignSelf={'center'}
-        spacing={['30px']}
+        gap={['30px']}
       >
         {Contents.map(renderItem)}
-      </HStack>
+      </Flex>
     </Box>
   );
 };

src/modules/bvm/index.tsx

@@ -5,26 +5,18 @@ import s from './styles.module.scss';
 
 import Section1 from './Section_1';
 import Section2 from './Section_2';
+import BoxContent from '@/layouts/BoxContent';
 
 const BVMModule = () => {
   return (
     <Box className={s.container}>
-      <Flex
-        className="maxWidth"
-        w={'100%'}
-        h={'100%'}
-        marginTop={'80px'}
-        paddingBottom={'80px'}
-        height={'100%'}
-        flexDirection={'column'}
-        alignItems={'flex-start'}
-        alignSelf={'center'}
-      >
-        <Box h={['20px', '80px']} />
+      <BoxContent>
+        <Box h={['20px', '140px']} />
         <Section1 />
         <Box h={['20px', '80px']} />
         <Section2 />
-      </Flex>
+        <Box h={['20px', '40px']} />
+      </BoxContent>
     </Box>
   );
 };

src/modules/bvm/styles.module.scss

@@ -2,5 +2,6 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
   background-color: #F3F1E8;
 }

src/modules/iframe-tc/index.tsx

@@ -4,6 +4,7 @@ import useWindowSize from '@/hooks/useWindowSize';
 import { Flex, Spinner } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import s from './styles.module.scss';
+import BoxContent from '@/layouts/BoxContent';
 
 interface IProps {
   iframeURL: string;
@@ -29,7 +30,7 @@ const IframeTC = (props: IProps) => {
     return <></>;
   }
   return (
-    <div className={s.container} style={{}}>
+    <div className={s.container}>
       <iframe
         id="TC_PAGE_IFRAME"
         src={props.iframeURL}
@@ -39,7 +40,6 @@ const IframeTC = (props: IProps) => {
           border: 'none',
           opacity: iframeLoading ? 0 : 1,
           marginTop: '70px',
-          paddingBottom: '60px',
         }}
         onLoad={() => {
           setIframeLoading(false);

src/modules/iframe-tc/styles.module.scss

@@ -1,10 +1,8 @@
 .container {
   display: flex;
-  flex-direction: row;
-  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 100dvh;
   background-color: #F3F1E8;
 }
-
-.iframeGame {
-  width: 100%;
-}