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,7 +47,9 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
     render() {
         return (
             <div className="add-to-canvas-input">
-                <div className="add-text-input">
+                <div className="assets">
+                    <h3>Assets</h3>
+                    <div className="text">
                         <h4>Text</h4>
                         <input
                             type="text"
@@ -59,7 +61,15 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
                             Add Text
                     </button>
                     </div>
-            </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/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 />
-
-                <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>
 
         );