🔨 Switch NewSandbox to use useOvermind (codesandbox#3057)

Author: MichaelDeBoey

packages/app/src/app/pages/NewSandbox/elements.ts

@@ -0,0 +1,6 @@
+import MaxWidthBase from '@codesandbox/common/lib/components/flex/MaxWidth';
+import styled from 'styled-components';
+
+export const MaxWidth = styled(MaxWidthBase)`
+  height: 100vh;
+`;

packages/app/src/app/pages/NewSandbox/index.tsx

@@ -1,17 +1,18 @@
-import React, { useEffect } from 'react';
-import Media from 'react-media';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
-import MaxWidth from '@codesandbox/common/lib/components/flex/MaxWidth';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { Navigation } from 'app/pages/common/Navigation';
-import { useOvermind } from 'app/overmind';
+import React, { FunctionComponent, useEffect } from 'react';
+import Media from 'react-media';
 
 import {
   CreateSandbox,
   COLUMN_MEDIA_THRESHOLD,
 } from 'app/components/CreateNewSandbox/CreateSandbox';
+import { useOvermind } from 'app/overmind';
+import { Navigation } from 'app/pages/common/Navigation';
 
-export const NewSandbox: React.FC = () => {
+import {MaxWidth} from './elements'
+
+export const NewSandbox: FunctionComponent = () => {
   const {
     actions: { sandboxPageMounted },
   } = useOvermind();
@@ -21,13 +22,10 @@ export const NewSandbox: React.FC = () => {
   }, [sandboxPageMounted]);
 
   return (
-    <MaxWidth
-      css={`
-        height: 100vh;
-      `}
-    >
+    <MaxWidth>
       <Margin horizontal={1.5} style={{ height: '100%' }} vertical={1.5}>
         <Navigation title="New Sandbox" />
+
         <Margin top={5}>
           <Centered horizontal vertical>
             <Media query={`(min-width: ${COLUMN_MEDIA_THRESHOLD}px)`}>