Merge pull request #6 from stormikph/testresizable

Theme/Resizable merger

Author: diegovazquezny

app/src/components/bottom/BottomPanel.tsx

@@ -11,15 +11,7 @@ const BottomPanel = () => {
     <Resizable
       enable={{
         top: true,
-        right: false,
-        bottom: false,
-        left: false,
-        topRight: false,
-        bottomRight: false,
-        bottomLeft: false,
-        topLeft: false
       }}
-      // style={style}
     >
       <div className="bottom-panel">
         <BottomTabs />
@@ -28,4 +20,4 @@ const BottomPanel = () => {
   );
 };
 
-export default BottomPanel;
+export default BottomPanel;

app/src/components/bottom/CodePreview.tsx

@@ -73,7 +73,7 @@ const CodePreview = () => {
         width="100%"
         height="100%"
         style={{
-          // border: '2px solid #33eb91',
+          border: '2px solid #33eb91',
           borderRadius: '8px'
         }}
         // onChange={code =>

app/src/components/left/ComponentPanel.tsx

@@ -66,7 +66,7 @@ const ComponentPanel = (): JSX.Element => {
 
   // Add a new component
   const createOption = (inputName: String) => {
-    // format name so first letter is capitalized and there are no whitespaces
+    // format name so first letter is capitalized and there are no white spaces
     let inputNameClean = inputName.replace(/\s+/g, '');
     const formattedName =
       inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);

app/src/containers/MainContainer.tsx

@@ -2,18 +2,19 @@ import React, { Component } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 
-// Main container contains the canvas which renders the components/elements on screen
-// and the bottom panel which displays the code for the component
+import { Resizable } from "re-resizable";
+
 class MainContainer extends Component {
   render() {
     return (
       <div className="main-container">
         <div className="main">
           <CanvasContainer />
         </div>
-
-        <BottomPanel />
-      </div>
+        {/* <Resizable minHeight={'25%'} enable={{ top: true }}> */}
+          <BottomPanel />
+        {/* </Resizable> */}
+    </div>
     );
   }
 }