From 6efb23b933f0bfab3cbfbe48c1332451f42a134f Mon Sep 17 00:00:00 2001
From: tonytc13579 <tony@trustless.computer>
Date: Tue, 2 Jan 2024 16:17:03 +0700
Subject: [PATCH] fix css

---
 src/app/blockchains/page.tsx             |  2 +-
 src/modules/iframe-tc/index.tsx          | 45 +++++++++++-------------
 src/modules/iframe-tc/styles.module.scss |  1 +
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/app/blockchains/page.tsx b/src/app/blockchains/page.tsx
index 14184b665..297aef659 100644
--- a/src/app/blockchains/page.tsx
+++ b/src/app/blockchains/page.tsx
@@ -30,7 +30,7 @@ const TCPage = () => {
       headerProps={{
         color: 'black',
         position: 'relative',
-        bgColor: 'white',
+        bgColor: '#F3F1E8',
       }}
     >
       <IframeTCDynamic iframeURL={`${iframeDomain}${pathUrl}`} />
diff --git a/src/modules/iframe-tc/index.tsx b/src/modules/iframe-tc/index.tsx
index ea4bbcffb..b4564dcda 100644
--- a/src/modules/iframe-tc/index.tsx
+++ b/src/modules/iframe-tc/index.tsx
@@ -22,45 +22,40 @@ const IframeTC = (props: IProps) => {
         elmHeader.click();
       }
     }
-    setIframeLoading(false);
     return () => window.removeEventListener('blur', blur);
   }, [document]);
 
   if (!document) {
     return <></>;
   }
-  if (iframeLoading) {
-    return (
-      <Flex
-        flex={1}
-        minHeight={'100%'}
-        justify={'center'}
-        align={'center'}
-        bgColor={'white'}
-      >
-        <Spinner color={'black'}></Spinner>
-      </Flex>
-    );
-  }
   return (
-    <div
-      className={s.container}
-      style={{
-        height:
-          heightWidth -
-          (elmHeader && elmHeader.offsetHeight ? elmHeader.offsetHeight : 80),
-      }}
-    >
+    <div className={s.container} style={{}}>
       <iframe
         id="TC_PAGE_IFRAME"
         src={props.iframeURL}
-        width="100%"
-        style={{ border: 'none' }}
-        onLoadedData={() => {}}
+        width={'100%'}
+        height={'100%'}
+        style={{ border: 'none', opacity: iframeLoading ? 0 : 1 }}
         onLoad={() => {
           setIframeLoading(false);
         }}
       />
+      {iframeLoading && (
+        <Flex
+          flex={1}
+          pos={'absolute'}
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          minHeight={'100vh'}
+          justify={'center'}
+          align={'center'}
+          bgColor={'#F3F1E8'}
+        >
+          <Spinner color={'black'}></Spinner>
+        </Flex>
+      )}
     </div>
   );
 };
diff --git a/src/modules/iframe-tc/styles.module.scss b/src/modules/iframe-tc/styles.module.scss
index 4f16db12d..2711888cf 100644
--- a/src/modules/iframe-tc/styles.module.scss
+++ b/src/modules/iframe-tc/styles.module.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
+  min-height: 100vh;
 }
 
 .iframeGame {