From 4eedfe91b01671c54a3efdbd2ce27926ce6d98af Mon Sep 17 00:00:00 2001
From: tonytc13579 <tony@trustless.computer>
Date: Wed, 3 Jan 2024 11:13:08 +0700
Subject: [PATCH] Modify css

---
 src/app/blockchains/page.tsx                 |  1 -
 src/config/index.ts                          |  2 +-
 src/layouts/Header/components/DesktopNav.tsx |  2 +-
 src/layouts/Header/components/MobileNav.tsx  |  2 +-
 src/layouts/Header/index.tsx                 | 36 ++++----------------
 src/modules/home/Section_2/index.tsx         |  2 +-
 src/modules/home/Section_3/index.tsx         |  2 +-
 src/modules/iframe-tc/index.tsx              |  7 +++-
 src/modules/iframe-tc/styles.module.scss     |  2 +-
 9 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/src/app/blockchains/page.tsx b/src/app/blockchains/page.tsx
index 781b70511..844b95602 100644
--- a/src/app/blockchains/page.tsx
+++ b/src/app/blockchains/page.tsx
@@ -20,7 +20,6 @@ const TCPage = () => {
     <MainLayout
       headerProps={{
         color: 'black',
-        position: 'relative',
         bgColor: '#F3F1E8',
       }}
     >
diff --git a/src/config/index.ts b/src/config/index.ts
index e78d4af51..23c06fbb1 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -11,6 +11,6 @@ export const isProduction: boolean = APP_ENV === 'production';
 export const isDevelop: boolean = APP_ENV === 'develop';
 export const isLocal: boolean = APP_ENV === 'local';
 
-export const CDN_URL_ICONS: string = CDN_URL + '/nbc/icons';
+export const CDN_URL_ICONS: string = CDN_URL + '/nbc/icons/bvm-icons';
 
 export { MetadataConfig, ViewportConfig };
diff --git a/src/layouts/Header/components/DesktopNav.tsx b/src/layouts/Header/components/DesktopNav.tsx
index f61fd1122..0e5a377e4 100644
--- a/src/layouts/Header/components/DesktopNav.tsx
+++ b/src/layouts/Header/components/DesktopNav.tsx
@@ -11,7 +11,7 @@ type Props = {
 
 export const DesktopNav = (props: Props) => {
   return (
-    <HStack direction={'row'} spacing={6}>
+    <HStack direction={'row'} spacing={['40px', '40px']}>
       {NAV_ITEMS.map((navItem) => (
         <Link
           key={navItem.label}
diff --git a/src/layouts/Header/components/MobileNav.tsx b/src/layouts/Header/components/MobileNav.tsx
index 16e538a37..19b098ee2 100644
--- a/src/layouts/Header/components/MobileNav.tsx
+++ b/src/layouts/Header/components/MobileNav.tsx
@@ -16,7 +16,7 @@ export const MobileNav = () => {
         <Link
           p={2}
           href={item.href ?? '#'}
-          fontSize={'16px'}
+          fontSize={['16px', '16px']}
           fontWeight={500}
           color={'#000'}
           _hover={{}}
diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx
index ac4fb2b2f..ba84a2fef 100644
--- a/src/layouts/Header/index.tsx
+++ b/src/layouts/Header/index.tsx
@@ -39,13 +39,9 @@ const Header = (props: HeaderProps) => {
         onClick={onToggle}
         icon={<Image src={'/icons/menu_ic.svg'} w={'24px'} h={'24px'} />}
         aria-label={'Toggle Menu'}
-        bgColor={'transparent'}
         _hover={{
           bgColor: 'transparent',
         }}
-        style={{
-          filter: primaryColor === 'white' ? 'invert(1)' : 'none',
-        }}
       />
     );
   };
@@ -53,22 +49,23 @@ const Header = (props: HeaderProps) => {
   return (
     <>
       <Box
-        position={position === 'absolute' ? 'absolute' : 'relative'}
+        position={position}
         bgColor={bgColor}
         display={'flex'}
         justifyContent={'center'}
         alignItems={'center'}
+        py={['20px', '20px']}
+        px={['160px', '160px']}
         top={0}
         left={0}
         right={0}
         zIndex={2}
       >
         <Flex
-          minH={'60px'}
+          minH={['40px', '40px']}
+          w={['311px', '311px']}
           className="maxWidth"
           alignSelf={'center'}
-          py={{ base: 2 }}
-          px={[4, null]}
           display={'flex'}
           flex={1}
           align={'center'}
@@ -83,29 +80,10 @@ const Header = (props: HeaderProps) => {
             }}
           >
             <Link href="/">
-              {/* <SvgInset
-                svgUrl={`${CDN_URL_ICONS}/logo_bvm.svg`}
-                size={200}
-                style={{
-                  filter: primaryColor === 'white' ? 'invert(1)' : 'black',
-                }}
-              /> */}
-
-              {/* <SvgInset
-                svgUrl={`/bvm-logo-short-orange.svg`}
-                size={200}
-                style={{
-                  filter: primaryColor === 'white' ? 'invert(1)' : 'black',
-                }}
-              /> */}
-
               {primaryColor === 'white' ? (
-                <Image src={'/icons/bvm-logo-long-orange.png'} w={[100, 300]} />
+                <Image src={`${CDN_URL_ICONS}/ic-bvm-logo-white.svg`} />
               ) : (
-                <Image
-                  src={'/icons/bvm-logo-long-orange-on-white.png'}
-                  w={[100, 300]}
-                />
+                <Image src={`${CDN_URL_ICONS}/ic-bvm-logo-black.svg`} />
               )}
             </Link>
           </Flex>
diff --git a/src/modules/home/Section_2/index.tsx b/src/modules/home/Section_2/index.tsx
index a74cb2525..1eb4bf7ef 100644
--- a/src/modules/home/Section_2/index.tsx
+++ b/src/modules/home/Section_2/index.tsx
@@ -114,7 +114,7 @@ const Section_2 = () => {
       justifyContent={'center'}
       alignContent={'center'}
     >
-      <Box className="maxWidth">
+      <Box className="maxWidth" alignSelf={'center'}>
         <Text
           textAlign={'left'}
           fontSize={['24px', '48px']}
diff --git a/src/modules/home/Section_3/index.tsx b/src/modules/home/Section_3/index.tsx
index c87749e32..db9904f04 100644
--- a/src/modules/home/Section_3/index.tsx
+++ b/src/modules/home/Section_3/index.tsx
@@ -71,7 +71,7 @@ const Section_3 = () => {
         <Box height={[2]} />
         <Text
           textAlign={'center'}
-          fontSize={[36, 60, 90]}
+          fontSize={[36, 60]}
           lineHeight={'110%'}
           wordBreak={'break-word'}
           whiteSpace="pre-line"
diff --git a/src/modules/iframe-tc/index.tsx b/src/modules/iframe-tc/index.tsx
index b4564dcda..30cfa8826 100644
--- a/src/modules/iframe-tc/index.tsx
+++ b/src/modules/iframe-tc/index.tsx
@@ -35,7 +35,12 @@ const IframeTC = (props: IProps) => {
         src={props.iframeURL}
         width={'100%'}
         height={'100%'}
-        style={{ border: 'none', opacity: iframeLoading ? 0 : 1 }}
+        style={{
+          border: 'none',
+          opacity: iframeLoading ? 0 : 1,
+          marginTop: '70px',
+          paddingBottom: '60px',
+        }}
         onLoad={() => {
           setIframeLoading(false);
         }}
diff --git a/src/modules/iframe-tc/styles.module.scss b/src/modules/iframe-tc/styles.module.scss
index 2711888cf..d5ff17ac5 100644
--- a/src/modules/iframe-tc/styles.module.scss
+++ b/src/modules/iframe-tc/styles.module.scss
@@ -1,8 +1,8 @@
 .container {
   display: flex;
   flex-direction: row;
-  overflow: hidden;
   min-height: 100vh;
+  background-color: #F3F1E8;
 }
 
 .iframeGame {