chore(docz-theme-default): change default theme code blocks style

packages/docz-theme-default/src/components/Doc.tsx

@@ -3,6 +3,7 @@ import styled from 'react-emotion'
 import { DocObj } from 'docz'
 
 import * as colors from '../styles/colors'
+import { Render } from './Render'
 
 const Container = styled('div')`
   width: 960px;
@@ -15,7 +16,6 @@ const Title = styled('h1')`
   position: relative;
   font-size: 48px;
   font-weight: 200;
-  margin: 0;
 
   &:before {
     position: absolute;
@@ -30,6 +30,6 @@ const Title = styled('h1')`
 
 export const Doc: SFC<DocObj> = ({ id, component: Component }) => (
   <Container key={id}>
-    <Component components={{ h1: Title }} />
+    <Component components={{ h1: Title, Render }} />
   </Container>
 )

packages/docz-theme-default/src/components/Render.tsx

@@ -1,40 +1,31 @@
 import * as React from 'react'
-import { Component } from 'react'
-
-interface RenderProps {
-  render: (container: HTMLElement) => any
-}
-
-interface RenderState {
-  container: HTMLElement | null
-}
-
-export class Render extends Component<RenderProps, RenderState> {
-  private container: HTMLElement | null
-
-  constructor(props: RenderProps) {
-    super(props)
-    this.container = null
-
-    this.state = {
-      container: null,
-    }
-  }
-
-  public componentDidMount(): void {
-    if (this.container) {
-      this.setState({ container: this.container })
-    }
-  }
-
-  public render(): JSX.Element {
-    const { render } = this.props
-    const { container } = this.state
-
-    return (
-      <div ref={node => (this.container = node)}>
-        {container && render(container)}
-      </div>
-    )
+import { Fragment } from 'react'
+import { RenderComponent } from 'docz'
+import styled from 'react-emotion'
+
+import * as colors from '../styles/colors'
+
+const ComponentWrapper = styled('div')`
+  position: relative;
+  padding: 50px;
+  background: white;
+  border: 1px solid ${colors.GRAY};
+  border-radius: 3px 3px 0 0;
+`
+
+const CodeWrapper = styled('div')`
+  border: 1px solid ${colors.GRAY};
+  border-top: 0;
+  border-radius: 0 0 3px 3px;
+
+  pre {
+    border-radius: 0 0 3px 3px;
   }
-}
+`
+
+export const Render: RenderComponent = ({ component, code }) => (
+  <Fragment>
+    <ComponentWrapper>{component}</ComponentWrapper>
+    <CodeWrapper>{code}</CodeWrapper>
+  </Fragment>
+)

packages/docz-theme-default/src/components/View.tsx

@@ -1,20 +1,29 @@
 import React from 'react'
 import { Route } from 'react-router-dom'
 import { Docs } from 'docz'
+import styled from 'react-emotion'
 
 import { Doc } from './Doc'
 
+const Wrapper = styled('div')`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+`
+
 export const View = () => (
-  <Docs>
-    {({ docs }) =>
-      docs.map(doc => (
-        <Route
-          exact
-          key={doc.id}
-          path={doc.route}
-          render={() => <Doc {...doc} />}
-        />
-      ))
-    }
-  </Docs>
+  <Wrapper>
+    <Docs>
+      {({ docs }) =>
+        docs.map(doc => (
+          <Route
+            exact
+            key={doc.id}
+            path={doc.route}
+            render={() => <Doc {...doc} />}
+          />
+        ))
+      }
+    </Docs>
+  </Wrapper>
 )

packages/docz-theme-default/src/index.tsx

@@ -1,4 +1,5 @@
 import './styles'
+import './styles/prism-theme'
 
 import * as React from 'react'
 

packages/docz-theme-default/src/styles/index.ts

@@ -32,8 +32,7 @@ injectGlobal`
     font-size: 16px;
     line-height: 1.5;
     background: ${BACKGROUND};
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   body {

packages/docz-theme-default/src/styles/prism-github.ts → packages/docz-theme-default/src/styles/prism-theme.ts

@@ -2,18 +2,9 @@ import { injectGlobal } from 'react-emotion'
 
 // tslint:disable
 injectGlobal`
-/*
-
-Name:       Base16 Atelier Sulphurpool Light
-Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
-
-Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
-Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
-
-*/
 code[class*="language-"],
 pre[class*="language-"] {
-  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-family: "Hack", "Consolas", "Menlo", "Monaco", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
   font-size: 14px;
   line-height: 1.375;
   direction: ltr;