chore: minor tweaks and run prettier

src/components/CodeEditor/CodeEditor.js

@@ -65,8 +65,10 @@ class CodeEditor extends Component {
     }
 
     return (
-      <div css={{ flex: 1 }}>
-      <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
+      <div css={{flex: 1}}>
+        <LiveProvider
+          code={showJSX ? code : compiledES6}
+          mountStylesheet={false}>
           <div
             css={{
               [media.greaterThan('medium')]: {
@@ -234,7 +236,7 @@ class CodeEditor extends Component {
               </div>
             )}
           </div>
-      </LiveProvider>
+        </LiveProvider>
       </div>
     );
   }

src/components/CodeExample/CodeExample.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {colors, media} from 'theme';
 import CodeEditor from '../CodeEditor/CodeEditor';
 
@@ -7,16 +7,28 @@ class CodeExample extends Component {
     const {children, code, loaded} = this.props;
     return (
       <div
-      css={{
-        [media.greaterThan('xlarge')]: {
-          display: 'flex',
-          flexDirection: 'row',
-        },
+        css={{
+          marginTop: 40,
 
-        [media.lessThan('large')]: {
-          display: 'block',
-        },
-      }}>
+          '&:first-child': {
+            marginTop: 0,
+          },
+
+          [media.greaterThan('xlarge')]: {
+            marginTop: 80,
+          },
+        }}>
+        <div
+          css={{
+            [media.greaterThan('xlarge')]: {
+              display: 'flex',
+              flexDirection: 'row',
+            },
+
+            [media.lessThan('large')]: {
+              display: 'block',
+            },
+          }}>
           {children && (
             <div
               css={{
@@ -45,9 +57,14 @@ class CodeExample extends Component {
               {children}
             </div>
           )}
-          {loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
+          {loaded ? (
+            <CodeEditor code={code} />
+          ) : (
+            <h4>Loading code example...</h4>
+          )}
+        </div>
       </div>
-    )
+    );
   }
 }