absolutely massive typescript porting time

packages/roleypoly-ui/components/layout.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import GlobalColors from './global-colors'
+import SocialCards from './social-cards'
+import HeaderBar from '../containers/header-bar'
+import { User } from '../stores/user'
+import styled from 'styled-components'
+import Router from 'next/router'
+
+const LayoutWrapper = styled.div`
+  transition: opacity 0.1s ease-out;
+  opacity: 0;
+
+  .wf-active &,
+  .force-active & {
+    opacity: 1;
+  }
+`
+
+const ContentBox = styled.div`
+  margin: 0 auto;
+  width: 960px;
+  max-width: 100vw;
+  padding: 5px;
+  padding-top: 50px;
+`
+
+const Layout = ({ children, user, noBackground, router }: {children: React.ReactElement<any>, user: User, noBackground: boolean, router: typeof Router }) => <>
+  <GlobalColors />
+  <SocialCards />
+  <LayoutWrapper>
+    <HeaderBar user={user} noBackground={noBackground} router={router} />
+    <ContentBox>
+      {children}
+    </ContentBox>
+  </LayoutWrapper>
+</>
+
+export default Layout