🔨 Refactored 🧠 Overmind Hacktober | /app/pages/Sandbox/ZenModeIntroductionModal/index.js

packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import Row from '@codesandbox/common/lib/components/flex/Row';
+
+import { Container, Heading, Explanation } from './elements';
+
+export const ZenModeIntroduction: FunctionComponent = () => {
+  const {
+    actions: { modalClosed },
+  } = useOvermind();
+
+  return (
+    <Container>
+      <Heading>Zen Mode Explained</Heading>
+      <Explanation>
+        Zen Mode is perfect for giving instruction videos and presentations. You
+        can toggle the sidebar by double tapping <code>shift</code>. You can
+        leave Zen Mode by hovering over the file name above the editor and
+        clicking the icon on the right.
+      </Explanation>
+
+      <Row justifyContent="space-around">
+        <Button style={{ marginRight: '.5rem' }} onClick={() => modalClosed()}>
+          Close
+        </Button>
+      </Row>
+    </Container>
+  );
+};

yarn.lock

@@ -1144,7 +1144,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@codesandbox/template-icons@^1.0.1", "@codesandbox/template-icons@^1.01":
+"@codesandbox/template-icons@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.1.tgz#c29068ce93d7d1db8dfbf0c82d618ee7192d9fb8"
   integrity sha512-o7Zgw88GoV/xogZ56rwXFohIYoYsB2UiKERC49Y1yuwV6SFAshPLdUBx9GX6HAHLUQg5R0pOoRrSeEsan+dHEw==