LivePreview - fix UI (#3667)

* LivePreview - fix UI

* remove code color, add br to frame, change device width

---------

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Inbal-Tish

docuilib/src/components/UILivePreview.module.scss

@@ -1,13 +1,24 @@
-$preview-width: 350px;
-$preview-margin: 60px;
+$preview-width: 340px;
+$preview-margin: 50px;
 $editor-height: 700px;
 
 .container {
   display: flex;
+  background-color: #1D1E21;
+  border-radius: 8px;
+  padding: 50px
 }
 
 .liveEditor {
   height: $editor-height;
+
+  span {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: -0.028px;
+  }
 }
 
 .codeContainer {
@@ -21,6 +32,8 @@ $editor-height: 700px;
   pre {
     min-height: 100%;
     padding: 20px !important;
+    background-color: #1D1E21 !important;
+    border-right: 1px solid #D2D6D8;
   }
 }
 
@@ -29,14 +42,19 @@ $editor-height: 700px;
   bottom: 0;
   left: 0;
   right: 0;
+
+  pre {
+    background-color: rgba(255, 255, 255, 0.80) !important;
+    margin: 10px;
+  }
 }
 
 .preview {
   position: relative;
   width: $preview-width;
   margin-left: $preview-margin;
   border-radius: 36px;
-  border: 1px solid #ddd;
+  border: 10px solid rgba(255, 255, 255, 0.20);
   box-shadow: 0 0 15px rgba(110, 120, 129, 0.05);
   overflow: hidden;
 }
@@ -49,4 +67,5 @@ $editor-height: 700px;
   left: 0;
   border: 0;
   padding: 10;
+  background-color: #fff;
 }

docuilib/src/components/pageComponents/SectionHeader.tsx

@@ -1,7 +1,9 @@
 import React, {useMemo} from 'react';
-import '../ComponentPage.module.scss';
 import showdownMarkdown from 'showdown';
 import ReactHtmlParser from 'react-html-parser';
+import {isComponentSupported} from '../../utils/componentUtils';
+import '../ComponentPage.module.scss';
+
 
 export const SectionHeader = ({section, component}) => {
   const {title, description, type} = section;
@@ -26,6 +28,7 @@ export const SectionHeader = ({section, component}) => {
   };
 
   const getUsageTitle = () => {
+    const title = isComponentSupported(component.name) ? 'Playground' : 'Usage';
     if (component.snippet) {
       return (
         <div

docuilib/src/pages/livePreview.tsx

@@ -4,7 +4,7 @@ import {IFRAME_MESSAGE_TYPE} from '@site/src/components/UILivePreview';
 import ReactLiveScope from '../theme/ReactLiveScope';
 import styles from './livePreview.module.css';
 
-export default function UILivePreview() {
+export default function LivePreviewWrapper() {
   const [code, setCode] = useState(``);
 
   useEffect(() => {