v1/packages/roleypoly-ui/components/layout.js

38 lines
896 B
JavaScript

// @flow
import * as React from 'react'
import GlobalColors from './global-colors'
import SocialCards from './social-cards'
import HeaderBar from '../containers/header-bar'
import { type User } from '../stores/user'
import styled from 'styled-components'
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.Element<any>, user: User, noBackground: boolean, router: * }) => <>
<GlobalColors />
<SocialCards />
<LayoutWrapper>
<HeaderBar user={user} noBackground={noBackground} router={router} />
<ContentBox>
{children}
</ContentBox>
</LayoutWrapper>
</>
export default Layout