Merge "[SDC] OnBoard with enabled tests and features"

19 files changed, 278 insertions, 322 deletions

diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index c70b914187..7c726aa8dd 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -16,7 +16,6 @@
 @import "components/submitErrorResponse";
 @import "components/expandableInput";
 @import "components/grid";
-@import "components/icon";
 @import "components/activityLog";
 @import "components/selectActionTable";
 @import "components/datepicker";
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 2162b0b1b0..3a3178c6b0 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -47,14 +47,23 @@ $desktop-min-width: 1824px;
 
 /* Textures */
 $images-folder-name: "../images";
+/*
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";
+*/
 
 /* Icons */
 $icons-folder: "../images/icons";
-$artifacts-icon: $images-folder-name + "/artifacts_icon.png";
-$check-icon: $images-folder-name + "/v_icon.png";
-$base-module-icon: $images-folder-name + "/base_icon.png";
-$module-icon: $images-folder-name + "/module_icon.png";
+/*
+$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
+$interface-icon: $images-folder-name + "/interface.svg";
+$sdc-logo: $images-folder-name + "/logo.svg";
+$warning-icon: $images-folder-name + "/warning.svg";
+*/
 $pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
+/*
 $vc-check-in-icon: $icons-folder + "/checked_in.png";
 $vc-checkout-icon: $icons-folder + "/checked_out.png";
 $vc-revert-icon: $icons-folder + "/reverticon.png";
@@ -66,11 +75,12 @@ $vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
 $trash-icon: $images-folder-name + "/trash_icon.png";
 $download-icon: $images-folder-name + "/download_icon.png";
 $upload-icon: $images-folder-name + "/upload_icon.png";
+*/
 
-
-/* catalog icons */
+/*****
+// catalog icons
 $back-icon: $icons-folder + "/back_icon.png";
-/* validation icons */
+// validation icons
 $artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
 $artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
 $chevron_down: $icons-folder + "/down_chevron.png";
@@ -93,7 +103,7 @@ $heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
 $env-icon: $icons-folder + "/env_icon.png";
 $env-selected-icon: $icons-folder + "/env_icon_blue.png";
 
-/* vlm summary icons */
+// vlm summary icons
 
 $vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
 $vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
@@ -102,4 +112,5 @@ $vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
 $vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
 $vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
 $vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
+*****/
 
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 9ada804934..5e9418ed7d 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -39,11 +39,7 @@ $message-info-icon-size: 16px;
 	.svg-icon-wrapper {
 	  float: right;
 	}
-	.checkCircle {
-	  fill: $green;
-	  width: 16px;
-	  height: 16px;
-	}
+
 	.status-icon.false:after {
 	  @include status-icon-class;
 	  float: right;
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 52b72d7c91..2484a73e8a 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,24 +1,21 @@
 .expandable-input-top {
 	display: flex;
 	height: 22px;
-	.svg-icon-wrapper {
-		height: 17px;
-		width: 17px;
-	}
 	.expandable-input-wrapper {
 		display: flex;
-		.svg-icon.search {
-			height: 17px;
-			width: 17px;
-		}
 		&.closed {
-			.svg-icon.search {
-				transition: fill 0.5s ease-in;
-				fill: $blue;
-				cursor: pointer;
-				&:hover {
+			.svg-icon
+			{
+				&.__search {
+					height: 17px;
+					width: 17px;
 					transition: fill 0.5s ease-in;
-					fill: $dark-blue;
+					fill: $blue;
+					cursor: pointer;
+					&:hover {
+						transition: fill 0.5s ease-in;
+						fill: $dark-blue;
+					}
 				}
 			}
 		}
@@ -26,17 +23,21 @@
 			.svg-icon-wrapper {
 				margin-left: 3px;
 			}
-			.svg-icon.search {
-				fill: $dark-blue;
+			.svg-icon {
+				&.__search {
+					height: 17px;
+					width: 17px;
+					fill: $dark-blue;
+				}
 			}
-			.svg-icon.close {
-				margin-left: 7px;
-				height: 10px;
-				width: 10px;
-				opacity: 0.6;
-				fill: $dark-gray;
-				&:hover {
-					opacity: 1;
+			.svg-icon {
+				&.__close {
+					margin-left: 7px;
+					opacity: 0.6;
+					fill: $dark-gray;
+					&:hover {
+						opacity: 1;
+					}
 				}
 			}
 		}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index 79a5432ef1..fa8eb3110c 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,15 +1,13 @@
 .select-action-table-view {
 	.svg-icon-wrapper {
 		flex-direction: row;
-
-		&::before {
-			content:"";
-		}
 		.svg-icon {
-			margin-left: 5px;
-			margin-right: 5px;
-			width:16px;
-			height:16px;
+			&:not(.__plus) {
+				margin-left: 5px;
+				margin-right: 5px;
+				width:16px;
+				height:16px;
+			}
 		}
 	}
 	.dummy-icon {
@@ -57,21 +55,6 @@
 			display: flex;
 			flex-direction: row;
     		margin-bottom: 14px;
-			.svg-icon-wrapper.trashO {
-				.svg-icon {
-				  fill: $dark-gray;
-				}
-			}
-		  	.svg-icon-wrapper.errorCircle {
-			  .svg-icon {
-				fill: $red;
-			  }
-			}
-		  	.svg-icon-wrapper.checkCircle {
-			  .svg-icon {
-				fill: $green;
-			  }
-			}
 			.svg-icon-wrapper.hideDelete {
 				.svg-icon {
 					fill: $white;
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index b917dfefeb..f045038193 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -26,14 +26,19 @@
       background-color: $tlv-gray;
       padding: 5px;
       cursor: pointer;
-      .chevronDown {
-        width:10px;
-        height:10px;
-        margin-right: 10px;
-        &.right {
-          transform: rotate(270deg);
+      .svg-icon {
+        &.__chevronDown {
+          margin-right: 10px;
         }
       }
+      .collapse-right {
+        .svg-icon {
+          &.__chevronDown {
+              transform: rotate(270deg);
+          }
+        }
+
+      }
 
     }
     .error-code-list-item {
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index e4aac32b74..e1adb5650f 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -75,7 +75,7 @@ form {
           flex: 0.2;
           content: ' ';
         }
-        @media (min-width: 1349px) {
+        @media (min-width: 1389px) {
           &.add-line-break {
             .control-label {
               &:after {
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index b454d3496b..57610986c3 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -59,56 +59,33 @@
           margin-right: 20px;
           padding-bottom: 5px;
 
-          .versionControllerLockClosed {
+
+          .svg-icon {
             fill: $dark-gray;
-            width: 21px;
-            height: 23px;
-            margin-top: -3px;
-            &.disabled {
-              fill: $light-gray;
-            }
             &:hover {
               fill: $black;
             }
-          }
-          .versionControllerLockOpen {
-            fill: $dark-gray;
-            width: 24px;
-            height: 28px;
-            margin-top: -6px;
-            &:hover {
-              fill: $black;
+            &.__versionControllerLockClosed {
+              margin-top: -3px;
             }
-          }
-          .versionControllerSubmit {
-            fill: $blue;
-            &.disabled {
-              fill: $light-gray;
+            &.__versionControllerLockOpen {
+              margin-top: -6px;
             }
-            &:hover {
-              fill: $dark-blue;
+            &.__versionControllerSubmit {
+              fill: $blue;
+              &:hover {
+                fill: $dark-blue;
+              }
+              &.disabled {
+                fill: $dark-gray;
+              }
             }
           }
-
-          .versionControllerRevert {
-            fill: $dark-gray;
-            &.disabled {
-              fill: $light-gray;
-            }
-            &:hover {
-              fill: $black;
-            }
-          }
-          .versionControllerSave {
-            fill: $dark-gray;
-            &.disabled {
-              fill: $light-gray;
-            }
-            &:hover {
-              fill: $black;
-            }
           }
-        }
+
+
+
+
       }
       .vc-nav-item-close {
         display: flex;
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 9d395f98c8..5f98ed2c05 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,23 +1,37 @@
 .feature-groups-list-editor {
-  .list-editor-view-list {
-    .list-editor-item-view {
-      min-height: 110px;
-      height: 110px;
-    }
-    .list-editor-item-view-field {
-      .feature-groups-count-field {
-        display: inline-block;
-        &:first-child {
-          margin-right: 95px;
-        }
-      }
-      .feature-groups-count-ep {
-        @extend .heading-1;
-        color: $light-blue;
+  .list-editor-view{
+    .list-editor-view-list {
+      .list-editor-item-view {
+        min-height: 110px;
+        height: 110px;
       }
-      .feature-groups-count-lk {
-        @extend .heading-1;
-        color: $light-green;
+      .list-editor-item-view-content {
+        .list-editor-item-view-field {
+          &.smaller-field {
+            flex: 0.35;
+          }
+          .feature-groups-count-field {
+            display: inline-block;
+            &:first-child {
+              margin-right: 95px;
+            }
+          }
+          .feature-groups-count-ep {
+            @extend .heading-1;
+            color: $light-blue;
+          }
+          .feature-groups-mrn-ep {
+            @extend .body-1;
+            color: $light-blue;
+          }
+          .feature-groups-count-lk {
+            @extend .heading-1;
+            color: $light-green;
+          }
+          .title-no-wrap {
+            white-space: nowrap;
+          }
+        }
       }
     }
   }
@@ -39,7 +53,7 @@
 		.nav.nav-tabs {
 			padding-left: 50px;
 		}
-		
+
     .tab-content {
       padding: 50px;
       .field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 1c133a1dce..15bb9a7033 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -61,26 +61,34 @@ $lkg-ep-color: $light-blue;
 
         &:not(.read-only) .vendor-description {
           border: 1px solid transparent;
+          width: 100%;
           padding: 2px 0 2px 6px;
           margin-top: 10px;
-
+          position: relative;
+          .svg-icon-wrapper {
+            position: absolute;;
+            right:0;
+            top:0;
+            opacity: 0;
+          }
           $hover-padding-right: 16px;
           @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
           &:hover {
             padding-right: $hover-padding-right;
-            width: 100%;
             border: 1px solid $light-gray;
             cursor: pointer;
 
-            background-position: calc(100% - 4px) 4px;
-            background-size: 14px;
-            background-image: url($pencil-icon);
-            background-repeat: no-repeat;
-            background-color: white;
-
+            background-color: $white;
+            .svg-icon-wrapper {
+              opacity: 1;
+              z-index: 10;
+            }
             .description-data:after {
               background: white;
             }
+            .description-data {
+              width: 100%;
+            }
           }
         }
 
@@ -167,20 +175,23 @@ $lkg-ep-color: $light-blue;
             flex-grow: 2;
             margin-left: 5px;
           }
-          .add-button {
-            cursor: pointer;
-            font-size: larger;
-            background-image: url($vlm-summary-plus);
-            background-size: 20px;
-            background-repeat: no-repeat;
-            width:20px;
-            height:20px;
-            margin-top: 3px;
-            margin-left: auto;
-            &:hover {
-              cursor: pointer;
-              background-image: url($vlm-summary-plus-blue);
-            }
+          .summary-name-and-count {
+            width: 100%;
+          }
+          .svg-icon-wrapper {
+
+            .svg-icon {
+              &.__plusCircle {
+                width: 20px;
+                height: 20px;
+                margin-top: 3px;
+                margin-left: auto;
+                fill: $dark-gray;
+                &:hover {
+                  fill: $blue;
+                }
+              }
+          }
           }
 
           .summary-name-and-count {
@@ -205,7 +216,7 @@ $lkg-ep-color: $light-blue;
     }
   }
   .vlm-list-tab-panel {
-		
+
 		@extend .flex;
 		margin-bottom: 7px;
     .section-title {
@@ -221,6 +232,7 @@ $lkg-ep-color: $light-blue;
         margin-left:10px;
         cursor: pointer;
       }
+      /**
       .vlm-list-icon {
         background-size: 32px;
         background-repeat: no-repeat;
@@ -237,7 +249,7 @@ $lkg-ep-color: $light-blue;
           background-image: url($vlm-summary-orphans-blue);
         }
       }
-
+      **/
     }
   }
 
@@ -260,7 +272,7 @@ $lkg-ep-color: $light-blue;
           .vlm-list-item.orphan-list-item {
 						@include overview-tile-shadow();
 						margin-left: 0;
-						
+
 						.vlm-list-item-title {
 
 							.item-name {
@@ -304,7 +316,7 @@ $lkg-ep-color: $light-blue;
           .clickable {
 						cursor: pointer;
 					}
-          
+
           .list-item-section {
 						.count-value {
 							@extend .body-3;
@@ -365,7 +377,7 @@ $lkg-ep-color: $light-blue;
           }
           .arrow-icon {
 						align-self: center;
-						
+
           }
           .vlm-item-info {
             flex: 1;
@@ -424,7 +436,7 @@ $lkg-ep-color: $light-blue;
               @include create-circle($circle-icon-size,$fg-color,'FG');
               color: $white;
 						}
-						
+
 						.vlm-list-item-title {
 							.item-name {
 								color: $fg-color;
@@ -465,7 +477,7 @@ $lkg-ep-color: $light-blue;
 								margin-left: 52px;
 							}
             }
-						
+
           }
           &.vlm-list-item-lkg {
             margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index bab2872691..0e092dd8bb 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -22,20 +22,7 @@
     right: 40px;
     top: 15px;
 		display: flex;
-		.icon-label {
-			color: $dark-gray;
-		}
 
-		.go-to-overview-icon {
-			.icon-label {
-				color: $blue;
-			}
-			&.disabled {
-				.icon-label {
-					color: $gray;
-				}
-			}
-		}
 
     .icon-component {
       margin-right: 30px;
@@ -104,6 +91,11 @@
       z-index: 1;
       padding-right: 20px;
       .counter {
+        .svg-icon {
+          &.__exclamationTriangleLine {
+            fill :$orange;
+          }
+        }
         display: flex;
         &:first-child {
           margin-right: 20px;
@@ -145,8 +137,8 @@
           justify-content: space-between;
           height: 40px;
           align-items: center;
-          .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp {
-            .svg-icon {
+          .svg-icon {
+            &.__chevronUp, &.__chevronDown {
               height: 10px;
               width: 10px;
             }
@@ -224,6 +216,13 @@
     .error-item {
       display: flex;
       margin: 10px 0;
+      .large {
+        .svg-icon {
+          width: 20px;
+          height: 20px;
+          fill: $orange;
+        }
+      }
       .error-item-file-type {
         margin-left: 15px;
       }
@@ -231,6 +230,9 @@
         @extend .body-1-semibold;
         margin-right: 5px;
       }
+
+
+
     }
 
   }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index 068404fcb6..dad837f356 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -16,6 +16,12 @@
   }
 }
 
+.vsp-components-image-editor {
+  .note-text {
+    color: $red;
+  }
+}
+
 .image-modal-edit, .image-modal-new {
   .modal-body {
     padding: 0;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 56860101b2..9b0375d24a 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -28,21 +28,19 @@
     .missing-license {
       display: flex;
       align-items: baseline;
-      .svg-icon-wrapper.exclamationTriangleFull .svg-icon{
-        fill: $orange;
+      .svg-icon{
+        margin-right: 7px;
+        margin-left: 3px;
+        &.__exclamationTriangleFull {
+          fill: $orange;
+            width: 17px;
+            height: 17px;
+        }
       }
       .warning-text {
         position: relative;
         top: -2px;
       }
-      .svg-icon-wrapper {
-        margin-right: 7px;
-        margin-left: 3px;
-        .svg-icon {
-          height: 17px;
-          width: 17px;
-        }
-      }
     }
   }
   .name {
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index ceae4a00de..d1f3f488bd 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,13 +1,7 @@
 .vsp-components-load-balancing {
   .svg-icon-wrapper {
 	position: relative;
-	top: -3px;
-	&.chevronUp, &.chevronDown {
-	  .svg-icon {
-		width: 10px;
-		height: 10px;
-	  }
-	}
+	top: -4px;
   }
 
   .halb-data {
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 4bcf7940eb..bda8512f36 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,6 +1,6 @@
 
 .vsp-component-monitoring {
-  .snmp-dropzone {
+  .dropzone {
     .section-title {
       padding-bottom: 20px;
     }
@@ -22,7 +22,7 @@
       }
       .drag-text {
         color: $blue;
-        @extend .body-1-semibold;
+        @extend .body-1-semibold
       }
       .or-text {
         margin-top: 10px;
@@ -30,6 +30,20 @@
       }
     }
 
+    .monitoring-file {
+      display: flex;
+      .filename {
+        opacity: 1;
+        width: auto;
+        border-right-style: none;
+      }
+      .delete {
+        display: flex;
+        width: 30px;
+        justify-content: center;
+        align-items: center;
+      }
+    }
   }
 
   .delete-button {
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index 75d96b4c85..bd216c794b 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -24,10 +24,12 @@
 		  position: relative;
 		  top: -2px;
 		}
+
 		.modules-list-wrapper {
-			padding-bottom: 20px;
-			margin-bottom: 20px;
-			border-bottom: 1px solid $tlv-light-gray;
+			&.modules-list-wrapper-divider {
+				border-bottom: 1px solid $tlv-light-gray;
+			}
+
 			ul {
 				.undefined-dragging {
 					opacity: 0.5;
@@ -36,7 +38,7 @@
 					display: flex;
 					justify-content: space-between;
 					flex-wrap: wrap;
-
+					padding-bottom: 3px;
 					.Select-value-label {
 						@include ellipsis(85%);
 					}
@@ -55,24 +57,6 @@
 				}
 			}
 
-			.modules-list-controllers {
-				text-align: right;
-				.btn-link {
-					&[disabled] {
-						color: $gray;
-					}
-					@extend .body-1;
-					color: $blue;
-					&:last-child {
-						padding-right: 0;
-					}
-					&:hover {
-						color: $dark-blue;
-						text-decoration: none;
-					}
-				}
-			}
-
 			.modules-list-item-controllers {
 				display: flex;
 				justify-content: space-between;
@@ -82,16 +66,15 @@
 					min-width: 0;
 				}
 
-				.svg-icon-wrapper.trashO {
-				  .svg-icon {
-					fill: $dark-gray;
-					height: 18px;
-					width: 18px;
-					&:hover {
-					  fill: $black;
+				.svg-icon {
+					&.__trashO {
+						fill: $dark-gray;
+						&:hover {
+							fill: $black;
+						}
 					}
-				  }
 				}
+
 				.module-title-by-type {
 					@extend .heading-5-semibold;
 					margin-right: 3px;
@@ -100,15 +83,15 @@
 					display: flex;
 					align-items: center;
 
-					.svg-icon-wrapper.pencil {
-						.svg-icon {
-						  height: 15px;
-						  width: 15px;
+					.svg-icon {
+						&.__pencil {
+							margin-left: 3px;
+							opacity: 0;
 						}
-						margin-left: 3px;
-						opacity: 0;
 					}
 
+
+
 					.filename-text {
 						@extend .heading-5-semibold;
 
@@ -144,14 +127,16 @@
 								border-color: transparent;
 							}
 						}
-						.svg-icon-wrapper.pencil {
-							margin-left: 10px;
-							opacity: 1;
-							.svg-icon {
-							  stroke: $dark-gray;
-							  &:hover {
-							   stroke: $black;
-							  }
+						.svg-icon {
+							&.__pencil {
+								margin-left: 10px;
+								opacity: 1;
+								.svg-icon {
+									stroke: $dark-gray;
+									&:hover {
+										stroke: $black;
+									}
+								}
 							}
 						}
 					}
@@ -173,23 +158,8 @@
 					}
 				}
 				.add-or-delete-volumes {
-					.svg-icon-wrapper {
-						margin-right: 8px;
-						.svg-icon {
-							height: 10px;
-							width: 10px;
-							fill: $blue;
-						}
-					}
-					cursor: pointer;
-					color: $blue;
+					margin-right: 8px;
 					margin-bottom: 11px;
-					&:hover {
-						color: $dark-blue;
-						.svg-icon {
-							fill: $dark-blue;
-						}
-					}
 				}
 				&:before {
 					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
@@ -208,7 +178,9 @@
 
 		.artifact-files {
 			@include modules-and-artifacts-list-items;
-			margin-top: 20px;
+			&.with-list-items {
+				margin-top: 10px;
+			}
 
 			&.nested {
 				.nested-list {
@@ -238,21 +210,20 @@
 					display: flex;
 				}
 
-				.add-all-unassigned {
-					@extend .body-1;
-					margin-bottom: 0;
-					color: $blue;
-					cursor: pointer;
-					&:hover {
-						color: $dark-blue;
-					}
-				}
 			}
 		}
 	}
 
+	.modules-list-header {
+		height: 30px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-end;
+		align-items: baseline;
+	}
+
 	.unassigned-files {
-		margin-top: 30px;
 		border: 1px solid $light-gray;
 		background-color: $white;
 		height: 250px;
@@ -283,26 +254,12 @@
 					@extend .heading-4;
 					margin-bottom: 10px;
 				}
-				.link {
-					color: $blue;
-					cursor: pointer;
-					display: flex;
-					align-items: center;
+				.svg-icon-wrapper {
 					margin-bottom: 10px;
-					.svg-icon-wrapper.angleRight {
-					  .svg-icon {
-						height: 10px;
-						width: 10px;
-						margin-left: 7px;
-						fill: $blue;
-					  }
-					}
-					&:hover {
-						color: $dark-blue;
-						.svg-icon-wrapper.angleRight {
-						  .svg-icon {
-							fill: $dark-blue;
-						  }
+					.svg-icon {
+						&.__angleRight {
+							width: 10px;
+							height: 10px;
 						}
 					}
 				}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 87a852f755..612ec495cd 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -79,36 +79,22 @@
 	  width: 58px;
 	  margin-left: 122px;
 	  background-repeat: no-repeat;
-	  .svg-icon-wrapper {
-		&.vendor {
-		  .svg-icon {
+	  .svg-icon {
+		&.__vendor {
 			fill: $dark-gray;
-			width: 53px;
-			height: 47px;
 			&:hover {
 			  fill: $dark-gray;
 			}
-		  }
 		  margin-top: 22px;
-
 		}
-		&.vsp {
-		  .svg-icon {
+		&.__vsp {
 			fill: $light-blue;
-			width: 60px;
-			height: 40px;
 		  }
 		  margin-top: 18px;
 		  margin-left: 3px;
-		}
-		&.vlm {
+		&.__vlm {
 		  margin-top: 18px;
-		  .svg-icon {
 			fill: $purple;
-
-			width: 45px;
-			height: 53px;
-		  }
 		}
 	  }
 	}
@@ -121,13 +107,11 @@
 	margin-top: 2px;
 	padding-bottom: 3px;
 	@extend .body-2-semibold;
-	.svg-icon-wrapper {
-	  &.plus {
-		.svg-icon {
-		  height: 9px;
-		  width: 9px;
+	.svg-icon {
+	  &.__plus {
+		  width: 20px;
+		  height: 20px;
 		  fill: $blue;
-		}
 	  }
 	}
 	.catalog-tile-item-details {
@@ -136,6 +120,13 @@
 
 	.catalog-tile-add-new-vsp {
 	  color: $blue;
+		.svg-icon {
+			&.__plus {
+				width: 20px;
+				height: 20px;
+
+			}
+		}
 	  margin-left: 40px;
 	}
 	.catalog-tile-locking-user-name {
@@ -143,18 +134,12 @@
 	  @include ellipsis(auto, inline-block, 180px);
 	}
 	.catalog-tile-check-in-status {
-	  .svg-icon-wrapper {
-		&.locked {
-		  .svg-icon {
-			width: 11px;
+	  .svg-icon {
+		&.__locked {
 			fill: $gray;
-		  }
 		}
-		&.unlocked {
-		  .svg-icon {
-			width: 11px;
+		&.__unlocked {
 			fill: $gray;
-		  }
 		}
 	  }
 	}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index aa3cf04c4f..d17dcdd685 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -37,12 +37,14 @@
 	  }
 	}
 	.create-item-plus-icon{
-	  width: 19px;
-	  height: 19px;
-	  margin: -5px 12px 0 0;
-			.svg-icon.plus {
-			height: 19px;
-			width: 19px;
+		margin: -5px 12px 0 0;
+		height: 19px;
+		width: 19px;
+		.svg-icon {
+			&.__plus {
+				width: 19px;
+				height: 19px;
+			}
 		}
 	}
 	&.vlm-type {
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index b49a7cb423..94dc223be3 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -23,14 +23,14 @@ div[data-reactroot].customized-date-picker-calendar {
       width: 12px;
       height: 12px;
       margin-top: 2px;
-      content: url(../images/angle-left.svg);
+      content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
   }
   .react-datepicker__navigation--next {
       border: none;
       width: 12px;
       height: 12px;
       margin-top: 2px;
-      content: url(../images/angle-right.svg);
+      content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
   }
   .react-datepicker__month-container {
 		.react-datepicker__header {