fix css

TrustlessComputer · Jan 2, 2024 · 6efb23b · 6efb23b
1 parent dffb70a
commit 6efb23b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 26 deletions.
diff --git 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
@@ -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
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
+  min-height: 100vh;
 }
 
 .iframeGame {