fix linting + code syntax for statless components

1 files changed, 18 insertions, 15 deletions

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
index 54340c9de..a1b066d85 100644
--- a/packages/dev-tools-pages/ts/components/Base.tsx
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -1,24 +1,27 @@
 import * as React from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import ThemeContext from 'ts/context';
-import GlobalStyles from 'ts/globalStyles';
-import Header from 'ts/components/Header';
-import Footer from 'ts/components/Footer';
+import { Footer } from 'ts/components/Footer';
+import { Header } from 'ts/components/Header';
+import { ThemeContext } from 'ts/context';
+import { GlobalStyles } from 'ts/globalStyles';
 
 interface BaseProps {
     context: any;
     children: React.ReactNode;
 }
 
-function Base(props: BaseProps) {
-    return (
-        <ThemeContext.Provider value={props.context}>
-            <GlobalStyles />
-            <Header />
-            {props.children}
-            <Footer />
-        </ThemeContext.Provider>
-    );
-}
+const Base: React.StatelessComponent<BaseProps> = props => (
+    <ThemeContext.Provider value={props.context}>
+        <ThemeProvider theme={props.context}>
+            <React.Fragment>
+                <GlobalStyles />
+                <Header />
+                {props.children}
+                <Footer />
+            </React.Fragment>
+        </ThemeProvider>
+    </ThemeContext.Provider>
+);
 
-export default Base;
+export { Base };