Moves content wrap to layout.tsx

1 files changed, 7 insertions, 7 deletions

diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index c71fcf9cb..828842064 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -3,8 +3,11 @@ import styled from 'styled-components';
 
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
+import { Main } from 'ts/@next/components/layout';
 import { GlobalStyles } from 'ts/@next/constants/globalStyle';
 
+// Note(ez): We'll define the theme and provide it via a prop
+// e.g. theme dark/light/etc.
 interface Props {
 
 }
@@ -14,12 +17,15 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
 
   return (
     <>
+      {/* GlobalStyles will be exposed the theme via provider,
+          same is true for all children of SiteWrap
+      */}
       <GlobalStyles />
 
       <Header />
 
       <Main>
-        {children}
+        { children }
       </Main>
 
       <Footer/>
@@ -27,11 +33,5 @@ const SiteWrap: React.StatelessComponent<Props> = props => {
   );
 };
 
-const Main = styled.main`
-  border: 1px solid blue;
-  width: calc(100% - 60px);
-  max-width: 1500px;
-  margin: 0 auto;
-`;
 
 export { SiteWrap };