🔨 Switch ZenModeIntroductionModal to use useOvermind

Author: MichaelDeBoey

packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts

@@ -1,11 +1,17 @@
-import styled from 'styled-components';
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
+import styled, { css } from 'styled-components';
+
+export const Button = styled(ButtonBase)`
+  margin-right: 0.5rem;
+`;
 
 export const Container = styled.div`
-  background-color: ${props => props.theme.background};
-  padding: 1rem;
-  margin: 0;
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  ${({ theme }) => css`
+    background-color: ${theme.background};
+    padding: 1rem;
+    margin: 0;
+    color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  `};
 `;
 
 export const Heading = styled.h2`

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

@@ -1,29 +1,28 @@
+import Row from '@codesandbox/common/lib/components/flex/Row';
 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';
+import { Button, Container, Explanation, Heading } from './elements';
 
-export const ZenModeIntroduction: FunctionComponent = () => {
+export const ZenModeIntroductionModal: 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.
+        can toggle the sidebar by double tapping <kbd>shift</kbd>. 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>
+        <Button onClick={() => modalClosed()}>Close</Button>
       </Row>
     </Container>
   );