Modify css

TrustlessComputer · Jan 3, 2024 · 4eedfe9 · 4eedfe9
1 parent ef2728d
commit 4eedfe9
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -39,36 +39,33 @@ 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',
-        }}
       />
     );
   };
 
   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
@@ -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
@@ -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
@@ -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
@@ -1,8 +1,8 @@
 .container {
   display: flex;
   flex-direction: row;
-  overflow: hidden;
   min-height: 100vh;
+  background-color: #F3F1E8;
 }
 
 .iframeGame {