fix: infobox html color (#534)

* Fix infobox color * Fix iframe style --------- Co-authored-by: basel.issmail <[email protected]>
reearth · Mar 14, 2023 · c0e0a64 · c0e0a64
1 parent c4e9db0
commit c0e0a64
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/components/molecules/Visualizer/Block/HTML/index.tsx b/src/components/molecules/Visualizer/Block/HTML/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from
 
 import Icon from "@reearth/components/atoms/Icon";
 import { useT } from "@reearth/i18n";
-import { styled, useTheme } from "@reearth/theme";
+import { styled } from "@reearth/theme";
 import fonts from "@reearth/theme/fonts";
 
 import { Props as BlockProps } from "..";
@@ -19,7 +19,6 @@ export type Property = {
 
 const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, onClick }) => {
   const t = useT();
-  const theme = useTheme();
   const { html, title } = block?.property?.default ?? {};
 
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -90,7 +89,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
 
     frameWindow.addEventListener("load", () => {
       // Initialize styles
-      frameWindow.document.body.style.color = theme.main.text;
+      frameWindow.document.body.style.color = getComputedStyle(frameRef).color;
       frameWindow.document.body.style.margin = "0";
 
       if (isEditable) {
@@ -110,7 +109,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
       });
       resizeObserver.observe(frameWindow.document.body);
     });
-  }, [frameRef, theme.main.text, startEditing, isEditable, handleClick]);
+  }, [frameRef, startEditing, isEditable, handleClick]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);
 

diff --git a/src/core/Crust/Infobox/Block/HTML/index.tsx b/src/core/Crust/Infobox/Block/HTML/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from
 
 import Icon from "@reearth/components/atoms/Icon";
 import { useT } from "@reearth/i18n";
-import { styled, useTheme } from "@reearth/theme";
+import { styled } from "@reearth/theme";
 import fonts from "@reearth/theme/fonts";
 
 import { CommonProps as BlockProps } from "..";
@@ -17,7 +17,6 @@ export type Property = {
 
 const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, onClick }) => {
   const t = useT();
-  const theme = useTheme();
   const { html, title } = block?.property ?? {};
 
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -88,7 +87,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
 
     frameWindow.addEventListener("load", () => {
       // Initialize styles
-      frameWindow.document.body.style.color = theme.main.text;
+      frameWindow.document.body.style.color = getComputedStyle(frameRef).color;
       frameWindow.document.body.style.margin = "0";
 
       if (isEditable) {
@@ -108,7 +107,7 @@ const HTMLBlock: React.FC<Props> = ({ block, isSelected, isEditable, onChange, o
       });
       resizeObserver.observe(frameWindow.document.body);
     });
-  }, [frameRef, theme.main.text, startEditing, isEditable, handleClick]);
+  }, [frameRef, startEditing, isEditable, handleClick]);
 
   useLayoutEffect(() => initializeIframe(), [initializeIframe]);