fix(docs): fix bg color

gregberge · Dec 1, 2018 · cbca3f4 · cbca3f4
1 parent 18a92e2
commit cbca3f4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/BaseLayout.js b/src/components/BaseLayout.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { styled, th } from '@smooth-ui/core-sc'
+import { styled, th, css } from '@smooth-ui/core-sc'
 import { WebsiteHeader } from './WebsiteHeader'
 import { ProjectHeader } from './ProjectHeader'
 import { GlobalStyle } from './GlobalStyle'
@@ -18,9 +18,15 @@ const PageWrapper = styled.div`
   margin-top: ${th('headerHeight')};
   background-color: ${th('gray100')};
   min-height: calc(100vh - ${th('headerHeight')});
+
+  ${p =>
+    p.variant === 'light' &&
+    css`
+      background-color: ${th('white')};
+    `}
 `
 
-export const BaseLayout = ({ children, pageContext }) => (
+export const BaseLayout = ({ children, pageContext, variant = 'default' }) => (
   <ThemeProvider>
     <div>
       <GlobalStyle />
@@ -29,7 +35,7 @@ export const BaseLayout = ({ children, pageContext }) => (
         <WebsiteHeader />
         <ProjectHeader />
       </Headers>
-      <PageWrapper>{children}</PageWrapper>
+      <PageWrapper variant={variant}>{children}</PageWrapper>
     </div>
   </ThemeProvider>
 )
diff --git a/src/components/DocLayout.js b/src/components/DocLayout.js
@@ -16,7 +16,6 @@ const ArticleContainer = styled.div`
   flex-grow: 1;
   padding: 0 20px 50px;
   overflow: hidden;
-  background-color: ${th('white')};
 `
 
 const SidebarContainer = styled.div`
@@ -67,7 +66,7 @@ const SidebarWrapper = styled.div`
 
 export const DocLayout = ({ children, ...props }) => (
   <MenuProvider>
-    <BaseLayout {...props}>
+    <BaseLayout variant="light" {...props}>
       <Grid gutter={0}>
         <Wrapper>
           <ArticleContainer>