Minor design changes for live preview

Author: ethanshar

Diff for: docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.20.0",
+  "version": "3.21.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

Diff for: docuilib/src/components/UILivePreview.module.scss

@@ -1,29 +1,26 @@
-$preview-width: 375px;
+$preview-width: 350px;
 $preview-margin: 60px;
+$editor-height: 700px;
 
 .container {
   display: flex;
 }
 
 .liveEditor {
-  height: 100%;
-
-  pre {
-    height: 100%;
-    border-radius: 0;
-    background-color: #13191E;
-  }
+  height: $editor-height;
 }
 
 .codeContainer {
   position: relative;
   flex: 1;
+  height: 100%;
   max-width: calc(100% - ($preview-width + $preview-margin));
-  border-radius: 4px;
-  overflow: hidden;
+  border-radius: 8px;
+  overflow-y: scroll;
 
   pre {
-    padding: 10px 20px;
+    min-height: 100%;
+    padding: 20px !important;
   }
 }
 
@@ -37,11 +34,10 @@ $preview-margin: 60px;
 .preview {
   position: relative;
   width: $preview-width;
-  height: 700px;
   margin-left: $preview-margin;
   border-radius: 36px;
-  border: 1px solid #eee;
-  box-shadow: 0 0 10px rgba(110, 120, 129, 0.2);
+  border: 1px solid #ddd;
+  box-shadow: 0 0 15px rgba(110, 120, 129, 0.05);
   overflow: hidden;
 }
 

Diff for: docuilib/src/pages/livePreview.module.css

@@ -6,6 +6,11 @@
 
 .fakeTopBar {
   height: 60px;
-  background-color: #ddd;
   margin-bottom: 1px;
+  border-bottom: 1px solid #eee;
+}
+
+.fakeSafeArea {
+  height: 40px;
+  border-top: 1px solid #eee;
 }

Diff for: docuilib/src/pages/livePreview.tsx

@@ -19,6 +19,7 @@ export default function UILivePreview() {
     <LiveProvider code={code} scope={ReactLiveScope}>
       <div className={styles.fakeTopBar}/>
       <LivePreview className={styles.mobileFlexContainer}/>
+      <div className={styles.fakeSafeArea}/>
     </LiveProvider>
   );
 }