feat: add preview styles for code block

newrelic · Jul 8, 2020 · 2f2a9b8 · 2f2a9b8
1 parent ad7f59c
commit 2f2a9b8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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;
+}