[DYN-6796] improve library node icons look (DynamoDS#222)

* fix: webpack publicPath loading resources and library.js on index.html properly

* feat: improve icons look increasing room between nodes

* 1.0.1

---------

Co-authored-by: enzo707 <[email protected]>

index.html

@@ -19,7 +19,7 @@
     <div id="libraryContainerPlaceholder"></div>
 
     <!-- The main library view compoment -->
-    <script src='./dist/librarie.js'></script>
+    <script src='./dist/build/librarie.js'></script>
     <!-- uncomment to debug in IE11 (polyfill fetch and promise)
     <script src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
     <script src='https://unpkg.com/[email protected]/dist/fetch.umd.js'></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/librariejs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Project that contains all hosted contents of Dynamo Windows client",
   "main": "index.js",
   "scripts": {

src/components/LibraryItem.tsx

@@ -159,11 +159,15 @@ export class LibraryItem extends React.Component<LibraryItemProps, LibraryItemSt
         this.props.data.itemType !== "coregroup" &&
         this.props.data.itemType !== "classType" &&
         this.props.data.itemType !== "none") {
-            return <img
-                className={"LibraryItemIcon"}
-                src={this.props.data.iconUrl}
-                onError={this.onImageLoadFail}
-            />;
+            return (
+                <div className="LibraryItemIconWrapper">
+                    <img
+                        className={"LibraryItemIcon"}
+                        src={this.props.data.iconUrl}
+                        onError={this.onImageLoadFail}
+                    />
+                </div>
+            );
         }
 
          // If it is a section, display the icon (if given) and provide a click interaction.

src/resources/LibraryStyles.css

@@ -197,12 +197,19 @@ button {
 	-webkit-user-drag: none;
 }
 
+.LibraryItemContainerNone .LibraryItemIconWrapper {
+	width: 2.5rem;
+	height: 2.5rem;
+	margin: 0rem 0.3rem;
+}
+
 .LibraryItemContainerNone .LibraryItemIcon {
 	align-self: flex-start;
-	padding-left: 0.5rem;
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+	padding: 0rem;
 	padding-right: 0.5rem;
-	width: 2.5rem;
-	height: 2.5rem;
 	-webkit-user-drag: none;
 }
 

webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
     output: {
         filename: productionBuild ? "librarie.min.js" : "librarie.js",
         path: path.join(__dirname, '/dist/build'),
-        publicPath: "./dist/build",
+        publicPath: "./dist/build/",
         libraryTarget: "umd",
         library: "LibraryEntryPoint",
     },