From 8522867dd87dda43964f77b7b0c4f5c70ca5476b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 3 Oct 2019 16:31:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Switch=20ZenModeIntroductionModa?=
 =?UTF-8?q?l=20to=20use=20useOvermind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ZenModeIntroductionModal/elements.ts      | 18 ++++++++++++------
 .../ZenModeIntroductionModal/index.tsx        | 19 +++++++++----------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts
index 84a80538392..39728b4fa58 100644
--- a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/elements.ts
+++ b/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`
diff --git a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx
index 3985426b855..2df6c042280 100644
--- a/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/ZenModeIntroductionModal/index.tsx
@@ -1,11 +1,11 @@
+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();
@@ -13,17 +13,16 @@ export const ZenModeIntroduction: FunctionComponent = () => {
   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>
   );