style(gatsby-theme-docz): improve Playground style (#1198)

Author: Kerumen

core/gatsby-theme-docz/src/components/Playground/LivePreviewWrapper.js

@@ -3,12 +3,10 @@ import { jsx } from 'theme-ui'
 import { useState } from 'react'
 import { useConfig } from 'docz'
 import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
-import { merge } from 'lodash/fp'
 import { Resizable } from 're-resizable'
 import copy from 'copy-text-to-clipboard'
 
 import { usePrismTheme } from '~utils/theme'
-import { LivePreviewWrapper } from './LivePreviewWrapper'
 import * as styles from './styles'
 import * as Icons from '../Icons'
 
@@ -35,18 +33,19 @@ export const Playground = ({
     return `<React.Fragment>${code}</React.Fragment>`
   }
 
-  const toggleCode = () => {
-    setShowingCode(s => !s)
-  }
+  const copyCode = () => copy(code)
+
+  const toggleCode = () => setShowingCode(s => !s)
 
   const resizableProps = {
     minWidth: 260,
     maxWidth: '100%',
     size: {
       width,
+      height: 'auto',
     },
     style: {
-      margin: '0 auto ',
+      margin: '0 auto',
     },
     enable: {
       top: false,
@@ -70,22 +69,16 @@ export const Playground = ({
         scope={scope}
         transformCode={transformCode}
         language={language}
-        theme={merge(theme, {
-          plain: {
-            fontFamily: 'Inconsolata',
-            fontSize: 18,
-            lineHeight: '1.5em',
-          },
-        })}
+        theme={theme}
       >
         <div sx={styles.previewWrapper}>
-          <LivePreviewWrapper showingCode={showingCode}>
+          <div sx={styles.previewInner(showingCode)}>
             {showLivePreview && (
               <LivePreview sx={styles.preview} data-testid="live-preview" />
             )}
-          </LivePreviewWrapper>
+          </div>
           <div sx={styles.buttons}>
-            <button sx={styles.button} onClick={() => copy(code)}>
+            <button sx={styles.button} onClick={copyCode}>
               <Icons.Clipboard size={12} />
             </button>
             <button sx={styles.button} onClick={toggleCode}>

core/gatsby-theme-docz/src/components/Playground/index.js

@@ -4,14 +4,11 @@ export const editor = theme => ({
   p: 2,
   border: t => `1px solid ${t.colors.border}`,
   borderRadius: '0 0 4px 4px',
-  overflow: 'hidden',
   background: theme.plain.backgroundColor,
   borderTop: 0,
   fontFamily: 'monospace',
   fontSize: 18,
   '* > textarea:focus': {
-    font: '400 18px Inconsolata !important',
-    lineHeight: '1.5em !important',
     outline: 'none',
   },
 })
@@ -29,10 +26,19 @@ export const previewWrapper = {
   position: 'relative',
 }
 
+export const previewInner = (showingCode, height = 'auto') => ({
+  height,
+  display: 'block',
+  minHeight: '100%',
+  width: 'calc(100% - 2px)',
+  bg: 'playground.bg',
+  border: t => `1px solid ${t.colors.playground.border}`,
+  borderRadius: showingCode ? '4px 4px 0 0' : '4px',
+})
+
 export const preview = {
   m: 0,
   p: '20px',
-  bg: 'playground.bg',
 }
 
 export const buttons = {

core/gatsby-theme-docz/src/components/Playground/styles.js

@@ -46,7 +46,7 @@ export const propName = {
 
 export const propType = {
   ...column,
-  colors: 'props.text',
+  color: 'props.text',
 }
 
 export const defaultValue = {

core/gatsby-theme-docz/src/components/Props/styles.js

@@ -1,5 +1,6 @@
 export default {
   plain: {
+    fontFamily: 'Inconsolata',
     color: '#d6deeb',
     backgroundColor: '#13161F',
   },

core/gatsby-theme-docz/src/theme/prism/dark.js

@@ -1,5 +1,6 @@
 export default {
   plain: {
+    fontFamily: 'Inconsolata',
     color: '#393A34',
     backgroundColor: '#f6f8fa',
   },