Move away assets seection from sidebar to addtocanvasinput

src/Components/AddToCanvasInput/AddToCanvasInput.css

@@ -1,11 +1,20 @@
-.add-to-canvas-input {
+.add-to-canvas-input .assets {
-    padding-left: 0.25em;
+    width: 100%;
 }
 
-.add-to-canvas-input .desc {
+.add-to-canvas-input .assets .text, .add-to-canvas-input .assets .image {
-    padding: 0.5em 0;
+    margin: 10px 0;
 }
 
-.add-to-canvas-input input {
+.add-to-canvas-input .assets .image ul li {
-    margin: 0.5em 0;
+    width: 50px;
+    height: 50px;
+    margin-right: 5px;
+    float: left;
+    overflow: hidden;
+}
+
+.add-to-canvas-input .assets .image ul li img {
+    width: 100%;
+    height: 100%;
 }

src/Components/AddToCanvasInput/AddToCanvasInput.tsx

@@ -47,19 +47,29 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
     render() {
         return (
             <div className="add-to-canvas-input">
-                <div className="add-text-input">
+                <div className="assets">
-                    <h4>Text</h4>
+                    <h3>Assets</h3>
-                    <input
+                    <div className="text">
-                        type="text"
+                        <h4>Text</h4>
-                        className="form-control"
+                        <input
-                        value={this.state.textInputValue}
+                            type="text"
-                        onChange={this.updateInputText}
+                            className="form-control"
-                    />
+                            value={this.state.textInputValue}
-                    <button id="addText" className="btn btn-default" onClick={this.addTextNodeOnSubmit} >
+                            onChange={this.updateInputText}
-                        Add Text
+                        />
+                        <button id="addText" className="btn btn-default" onClick={this.addTextNodeOnSubmit} >
+                            Add Text
                     </button>
+                    </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 >
+            </div>
         );
     }
 }

src/Components/Sidebar/Sidebar.css

@@ -7,24 +7,3 @@
   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;
-  overflow: hidden;
-}
-
-.sidebar .assets .image ul li img {
-  width: 100%;
-  height: 100%;
-}

src/Components/Sidebar/Sidebar.tsx

@@ -20,22 +20,7 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
         return (
             <div className="sidebar col-sm-2 col-md-2 col-lg-2">
                 <UploadResourcesInput />
-
+                <AddToCanvasInput addTextNode={this.props.addTextNode} />
-                <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>
 
         );