feat: add overlay warning to earth editor if browser width is too narrow

src/components/atoms/Icon/icons.ts

@@ -125,6 +125,7 @@ import Sun from "./Icons/sun.svg";
 import CheckCircle2 from "./Icons/checkCircle2.svg";
 import MailCircle from "./Icons/mailCircle.svg";
 import Tag from "./Icons/tag.svg";
+import Resize from "./Icons/resize.svg";
 
 // Plug-ins
 import Plugin from "./Icons/plugin.svg";
@@ -255,6 +256,7 @@ export default {
   menuForDevice: MenuForDevice,
   plugin: Plugin,
   tag: Tag,
+  resize: Resize,
   crosshair: Crosshair,
   ellipse: Ellipse,
   playRight: PlayRight,

src/components/atoms/Overlay/index.tsx

@@ -2,14 +2,15 @@ import { styled } from "@reearth/theme";
 
 type Props = {
   show?: boolean;
+  strong?: boolean;
 };
 
 const Overlay = styled.div<Props>`
   position: absolute;
   width: 100%;
   height: 100%;
   background: ${props => props.theme.modal.overlayBg};
-  opacity: ${({ show }) => (show ? 0.3 : 0)};
+  opacity: ${({ show, strong }) => (show ? (strong ? 0.7 : 0.3) : 0)};
   visibility: ${({ show }) => (show ? "visible" : "hidden")};
   transition: all 0.2s;
   transition-timing-function: ${({ show }) => (show ? "ease-in" : "ease-out")};

src/components/atoms/OverlayWithMessage/index.tsx

@@ -0,0 +1,57 @@
+import Overlay from "@reearth/components/atoms/Overlay";
+import { styled, useTheme } from "@reearth/theme";
+
+import Flex from "../Flex";
+import Icon, { Icons } from "../Icon";
+import Text from "../Text";
+
+export type Props = {
+  title?: string;
+  content?: string;
+  icon?: Icons;
+  show?: boolean;
+};
+
+const OverlayWithMessage: React.FC<Props> = ({ title, content, icon, show }) => {
+  const theme = useTheme();
+  return (
+    <>
+      <Overlay show={show} strong />
+      <Wrapper>
+        <Content direction="column" align="center" show={show}>
+          <Icon icon={icon} size={60} color={theme.main.danger} />
+          <Text size="l" color={theme.main.strongText}>
+            {title}
+          </Text>
+          <Text size="m">{content}</Text>
+        </Content>
+      </Wrapper>
+    </>
+  );
+};
+
+export default OverlayWithMessage;
+
+const Wrapper = styled.div`
+  position: absolute;
+  top: 35%;
+  left: 0;
+  right: 0;
+  z-index: 1;
+`;
+
+const Content = styled(Flex)<{ show?: boolean }>`
+  margin: 0 auto;
+  position: relative;
+  width: 292px;
+  opacity: ${({ show }) => (show ? 1 : 0)};
+  transition: opacity 0.2s;
+  visibility: ${({ show }) => (show ? "visible" : "hidden")};
+  transition: all 0.4s;
+  transition-timing-function: ${({ show }) => (show ? "ease-in" : "ease-out")};
+  text-align: center;
+
+  * {
+    margin-bottom: 16px;
+  }
+`;

src/components/molecules/Common/BrowserWidthWarning/index.tsx

@@ -0,0 +1,21 @@
+import { useMedia } from "react-use";
+
+import OverlayWithMessage from "@reearth/components/atoms/OverlayWithMessage";
+import { useT } from "@reearth/i18n";
+
+const BrowserWidthWarning: React.FC = () => {
+  const isSmallWindow = useMedia("(max-width: 900px)");
+  const t = useT();
+  return (
+    <OverlayWithMessage
+      title={t("Your browser is too small")}
+      content={t(
+        "Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.",
+      )}
+      icon="resize"
+      show={isSmallWindow}
+    />
+  );
+};
+
+export default BrowserWidthWarning;

src/components/pages/EarthEditor/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useParams } from "react-router-dom";
 
 import { withAuthenticationRequired, AuthenticationRequiredPage } from "@reearth/auth";
+import BrowserWidthWarning from "@reearth/components/molecules/Common/BrowserWidthWarning";
 import EarthEditorPage from "@reearth/components/molecules/EarthEditor/EarthEditorPage";
 import CanvasArea from "@reearth/components/organisms/EarthEditor/CanvasArea";
 import Header from "@reearth/components/organisms/EarthEditor/Header";
@@ -22,6 +23,7 @@ const EarthEditor: React.FC<Props> = () => {
 
   return (
     <AuthenticationRequiredPage>
+      <BrowserWidthWarning />
       <DndProvider>
         <EarthEditorPage
           loading={loading}

src/i18n/translations/en.yml

@@ -62,6 +62,8 @@ Select: Select
 Resource URL: Resource URL
 Account Settings: Account Settings
 Log out: Log out
+Your browser is too small: Your browser is too small
+Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.: Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.
 Create New Project: Create New Project
 Create: Create
 Project Name: Project Name

src/i18n/translations/ja.yml

@@ -58,6 +58,8 @@ Select: 選択
 Resource URL: リソースURL
 Account Settings: アカウント設定
 Log out: ログアウト
+Your browser is too small: ブラウザ幅が小さすぎます
+Re:Earth needs at least 900px width to be used effectively. Please resize your browser window.: 横幅が900px以上になるようブラウザ幅を調節してください。
 Create New Project: 新規プロジェクト作成
 Create: 作成
 Project Name: プロジェクト名