CodePreview still ugly but functional

Author: ChristianEdwardPadilla

src/components/CodePreview.tsx

@@ -7,10 +7,20 @@ class CodePreview extends Component {
   render(): JSX.Element {
     const { focusComponent, components } = this.props;
     return (
-      <div>
-        {/* <p> */}
-        <pre>{format(componentRender(focusComponent, components))}</pre>
-        {/* </p> */}
+      <div
+        style={{
+          width: '500px',
+          height: '290px',
+          direction: 'rtl',
+          paddingLeft: '20px',
+          color: '#D3D3D3',
+          fontSize: 16,
+          overflow: 'auto',
+        }}
+      >
+        <pre style={{ direction: 'ltr' }}>
+          {format(componentRender(focusComponent, components))}
+        </pre>
       </div>
     );
   }

src/components/KonvaStage.tsx

@@ -196,7 +196,7 @@ class KonvaStage extends Component {
                   imageSource={child.htmlElement == 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null}
                 />
               ))
-              .sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height) // shouldnt this be subtraction instead of < ? see MDN
+              .sort((rectA, rectB) => rectB.props.width * rectB.props.height - rectA.props.width * rectA.props.height)
             // reasoning for the sort:
             // Konva determines zIndex (which rect is clicked on if rects overlap) based on rendering order
             // as long as the smallest components are rendered last they will always be accessible over the big boys