Refactor layout to functional component with hooks (codesandbox#1941)

Author: MichaelDeBoey

packages/homepage/src/components/layout.js

@@ -8,22 +8,18 @@ import Footer from '@codesandbox/common/lib/components/Footer';
 import '../css/typography.css';
 import '../css/global.css';
 
-// eslint-disable-next-line
-export default class TemplateWrapper extends React.Component {
-  render() {
-    const { children } = this.props;
-    return (
-      <ThemeProvider theme={theme}>
-        <div>
-          <div style={{ position: 'absolute', left: 0, right: 0, zIndex: 20 }}>
-            <Navigation />
-          </div>
-          <main style={{ maxWidth: '100vw', overflowX: 'hidden' }}>
-            {children}
-          </main>
-          <Footer />
-        </div>
-      </ThemeProvider>
-    );
-  }
-}
+const TemplateWrapper = ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <div>
+      <div style={{ position: 'absolute', left: 0, right: 0, zIndex: 20 }}>
+        <Navigation />
+      </div>
+
+      <main style={{ maxWidth: '100vw', overflowX: 'hidden' }}>{children}</main>
+
+      <Footer />
+    </div>
+  </ThemeProvider>
+);
+
+export default TemplateWrapper;