🔨 Refactored 🧠 Overmind Hacktober | /app/pages/Sandbox/ZenModeIntroductionModal/index.js (#2669)

* Refactor  /app/pages/Sandbox/ZenModeIntroductionModal/index.js

* Remove export default

* Remove export default

* Fix error

Author: NabeelahY

packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.js renamed to packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts

@@ -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>
+  );
+};