From 2f2a9b856a7101f7111a225853eb859c59d77ed2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Tue, 7 Jul 2020 21:42:04 -0700
Subject: [PATCH] feat: add preview styles for code block

---
 src/components/CodeBlock.js          |  5 +++--
 src/components/CodeBlock.module.scss | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
index f9d59f7f9..ab29f7bc7 100644
--- a/src/components/CodeBlock.js
+++ b/src/components/CodeBlock.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Button from './Button';
 import CodeEditor from './CodeEditor';
 import CodeHighlight from './CodeHighlight';
@@ -37,8 +38,8 @@ const CodeBlock = ({
 
   return (
     <LiveProvider code={code} scope={scope}>
-      {preview && <components.Preview />}
-      <div className={styles.container}>
+      {preview && <components.Preview className={styles.preview} />}
+      <div className={cx(styles.container, { [styles.withPreview]: preview })}>
         {live ? (
           <CodeEditor
             value={code}
diff --git a/src/components/CodeBlock.module.scss b/src/components/CodeBlock.module.scss
index 64cf13100..33bdd53d8 100644
--- a/src/components/CodeBlock.module.scss
+++ b/src/components/CodeBlock.module.scss
@@ -1,6 +1,11 @@
 .container {
   background: var(--color-nord-0);
   border-radius: 4px;
+
+  &.withPreview {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 }
 
 .statusBar {
@@ -44,3 +49,12 @@
   margin-top: 0.5rem;
   border-radius: 2px;
 }
+
+.preview {
+  padding: 2rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-neutrals-100);
+  box-shadow: var(--boxshadow);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}