Use basic styling from sample html

public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/Components/AddToCanvasInput/AddToCanvasInput.css

@@ -1,3 +1,11 @@
-.drag-container {
-    overflow: hidden;
+.add-to-canvas-input {
+    padding-left: 0.25em;
+}
+
+.add-to-canvas-input .desc {
+    padding: 0.5em 0;
+}
+
+.add-to-canvas-input input {
+    margin: 0.5em 0;
 }

src/Components/AddToCanvasInput/AddToCanvasInput.tsx

@@ -48,11 +48,16 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
         return (
             <div className="add-to-canvas-input">
                 <div className="add-text-input">
-                    <div className="desc">
-                        Add text
-                    </div>
-                    <input type="text" value={this.state.textInputValue} onChange={this.updateInputText} />
-                    <input type="button" value="Add" onClick={this.addTextNodeOnSubmit} />
+                    <h4>Text</h4>
+                    <input
+                        type="text"
+                        className="form-control"
+                        value={this.state.textInputValue}
+                        onChange={this.updateInputText}
+                    />
+                    <button id="addText" className="btn btn-default" onClick={this.addTextNodeOnSubmit} >
+                        Add Text
+                    </button>
                 </div>
             </div >
         );

src/Components/CanvasArea/CanvasArea.css

@@ -1,5 +1,13 @@
 .canvas-area {
-    float: right;
-    width: 80%;
-    height: 100%;
+    margin: 10px;
+    padding: 0;
+    box-shadow: 0px 0px 5px black;
+}
+
+.canvas-area .block {
+    position: relative;
+    width: 100%; 
+    height: 600px;
+    
+    border: 1px solid;
   }

src/Components/CanvasArea/CanvasArea.tsx

@@ -37,9 +37,9 @@ export class CanvasArea extends React.Component<CanvasAreaProps, CanvasAreaState
 
     render() {
         return (
-            <div className="canvas-area">
+            <div className="canvas-area col-sm-8 col-md-8 col-lg-8">
                 <DragContainer id={this.containerId} >
-                    <div className="drag-container-inner" style={{ width: '500px', height: '500px' }}>
+                    <div className="block">
                         {
                             this.renderDraggableNodes()
                         }

src/Components/Sidebar/Sidebar.css

@@ -1,5 +1,30 @@
 .sidebar {
+  height: 100%;
+  background: #E8E8EA;
+}
+
+.sidebar .form {
+  height: 80px;
+  margin: 10px 0;
+}
+
+.sidebar .assets {
+  width: 100%;
+}
+
+.sidebar .assets .text, .sidebar .assets .image {
+  margin: 10px 0;
+}
+
+.sidebar .assets .image ul li {
+  width: 50px;
+  height: 50px;
+  margin-right: 5px;
   float: left;
-    width: 20%;
+  overflow: hidden;
+}
+
+.sidebar .assets .image ul li img {
+  width: 100%;
   height: 100%;
 }

src/Components/Sidebar/Sidebar.tsx

@@ -18,9 +18,24 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
 
     render() {
         return (
-            <div className="sidebar">
+            <div className="sidebar col-sm-2 col-md-2 col-lg-2">
                 <UploadResourcesInput />
+
+                <div className="assets">
+                    <h3>Assets</h3>
+                    <div className="text">
                         <AddToCanvasInput addTextNode={this.props.addTextNode} />
+                        
+                    </div>
+                    <div className="image">
+                        <h4>Images</h4>
+                        <ul className="list-unstyled">
+                            {/* List of images here 
+                            <li><img src="images/sample.jpeg" class="img-rounded" /></li>  */}
+                        </ul>
+                    </div>
+                </div>
+
             </div>
 
         );

src/Helpers/index.ts

@@ -1,2 +1,2 @@
 export { DragContextProvider, DragStartFn, DragSharedInfo } from './DragContextProvider';
-export { XYPair } from './utils';
+export { XYPair, deppCloneNaive, CanvasTextNode } from './utils';

src/index.css

@@ -1,5 +1,17 @@
-body {
+*,*::before,*::after {
+  box-sizing: border-box;
+}
+
+* {
   margin: 0;
   padding: 0;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+
+body {
   font-family: sans-serif;
 }