[SDC] Onboarding 1710 rebase.

Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>

24 files changed, 436 insertions, 258 deletions

diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 71e7cee575..8c45d8ec58 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -35,7 +35,7 @@
     .tab-content {
       padding: 50px;
       .field-section {
-        @extend .body-2-medium;
+        @extend .body-2-semibold;
         margin-bottom: 23px;
         width: 400px;
         color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 5ea84e98c4..5de757bf64 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -25,7 +25,7 @@
     .validation-form-content {
       padding: 50px;
       .field-section {
-        @extend .body-2-medium;
+        @extend .body-2-semibold;
         margin-bottom: 23px;
         width: 400px;
         color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index 6912e19bcd..3d65be6274 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -5,7 +5,7 @@
   .validation-form-content {
     padding: 50px;
     .field-section {
-      @extend .body-2-medium;
+      @extend .body-2-semibold;
       margin-bottom: 23px;
       width: 400px;
       color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 4ec7c8d3af..5c74e82d83 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -27,7 +27,7 @@
           margin-top:5px;
         }
         .vendor-name {
-          @extend .heading-3-medium;
+          @extend .heading-4-semibold;
           text-transform: none;
           padding-bottom: 15px;
           border-bottom: 1px solid $tlv-light-gray;
@@ -137,7 +137,7 @@
         background-color: $tlv-gray;
         .summary-count-item {
           @extend .flex;
-          @extend .heading-4-medium;
+          @extend .heading-5-semibold;
           padding-top: 5px;
           padding-left: 45px;
           padding-right: 45px;
@@ -349,7 +349,7 @@
             .additional-data {
               padding-left: 50px;
               .additional-data-name {
-                @extend .body-1-medium;
+                @extend .body-1-semibold;
               }
             }
             .additional-data-col-border {
@@ -373,7 +373,7 @@
           .vlm-list-item-title {
             @extend .flex;
             .item-name {
-              @extend .heading-5-medium;
+              @extend .heading-5-semibold;
               flex: 0 1 auto;
               margin-bottom: 4px;
             }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 37068975a2..bab2872691 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -8,8 +8,7 @@
 			border-bottom: 1px solid $light-gray;
 			& > li {
 				& > a {
-					font-size: 24px;
-					font-weight: lighter;
+					@extend .heading-2;
 					padding-left: 0;
 					padding-right: 0;
 					margin-right: 40px;
@@ -55,7 +54,7 @@
 .vsp-attachments-heat-validation {
   @extend .body-1;
   display: flex;
-  .svg-icon.exclamation-triangle-line {
+  .svg-icon.exclamationTriangleFull {
     fill: $orange;
     width: 15px;
     height: 15px;
@@ -88,7 +87,7 @@
         margin-left: 20px;
       }
       .tree-header-title-text {
-        @extend .heading-4-medium;
+        @extend .heading-4-semibold;
         padding-left: 32px;
         cursor: pointer;
         &.tree-header-title-selected{
@@ -121,7 +120,7 @@
         .error-text, .warning-text {
           @extend .body-3;
           &.large {
-            @extend .heading-4-medium;
+            @extend .heading-4-semibold;
           }
         }
       }
@@ -146,9 +145,11 @@
           justify-content: space-between;
           height: 40px;
           align-items: center;
-          .svg-icon.chevron-down, .svg-icon.chevron-up {
-            height: 10px;
-            width: 10px;
+          .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp {
+            .svg-icon {
+              height: 10px;
+              width: 10px;
+            }
           }
 
           &:after {
@@ -227,7 +228,7 @@
         margin-left: 15px;
       }
       .error-file-name {
-        @extend .body-1-medium;
+        @extend .body-1-semibold;
         margin-right: 5px;
       }
     }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index 67d76f5454..6c5bcee03c 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -3,8 +3,11 @@
     .one-line-textarea {
       height: 30px;
     }
-    .multi-line-textarea > textarea {
-      height: 113px;
+    .multi-line-textarea {
+      height: calc(100% - 25px);
+      textarea {
+        height: inherit;
+      }
     }
   }
   .additional-validation-form {
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
new file mode 100644
index 0000000000..068404fcb6
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -0,0 +1,58 @@
+.image-modal-new {
+  .modal-dialog {
+    width: 600px;
+  }
+  .image-filename {
+    width: 480px;
+  }
+}
+
+.image-modal-edit {
+  .modal-dialog {
+    width: 910px;
+  }
+  .image-filename {
+    width: 550px;
+  }
+}
+
+.image-modal-edit, .image-modal-new {
+  .modal-body {
+    padding: 0;
+  }
+  .vsp-components-image-editor {
+
+    .image-format, .image-md5, .image-version {
+      width: 200px;
+    }
+    .image-version {
+      padding-left: 30px;
+    }
+    .section-title {
+      text-transform: capitalize;
+      font-size: 18px;
+    }
+  }
+}
+
+.vsp-components-image {
+  .list-editor-item-view-content {
+    flex:1;
+    min-width: 0;
+  }
+  .list-editor-item-view-controller {
+    padding-top: 5px;
+  }
+  .image-filename-cell {
+    display: flex;
+    .image-filename {
+      white-space: nowrap;
+      overflow: hidden;
+      display: inline-block;
+      text-overflow: ellipsis;
+       span {
+        @include ellipsis(100%);
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index e14ab02fcd..402918bc5e 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -10,24 +10,39 @@
   }
   .list-editor-view {
     margin-top: 50px;
+    .manual-title {
+      @extend .body-1-semibold;
+    }
   }
 }
-.network-nic-modal {
-  .modal-body {
-    padding: 0;
-  }
+.network-nic-modal-create {
+	.network-type-radio {
+		display: flex;
+	}
+}
+.network-nic-modal-edit, .network-nic-modal-create {
+    .modal-body {
+      padding: 0;
+    }
+	.validation-form-content {
+		padding-left: 50px;
+		padding-right: 50px;
+		padding-top: 20px;
+	}
+}
+.network-nic-modal-edit {
+    .modal-dialog {
+		width: 900px;
+    }
   .vsp-components-network-editor {
     .editor-data {
-      padding-left: 50px;
-      padding-right: 50px;
-      padding-top: 20px;
       height: 500px;
       .grid-section {
         padding-bottom: 15px;
         .section-title {
           @extend .heading-5;
           padding-bottom: 10px;
-          padding-left: 0px;
+          padding-left: 0;
         }
       }
       .part-title {
@@ -38,7 +53,7 @@
       .part-title-small {
         @extend .heading-3;
         padding-bottom: 10px;
-        padding-left: 0px;
+        padding-left: 0;
       }
       .network-radio label {
         font-size: 15px;
@@ -51,7 +66,7 @@
         .top-row {
           display: flex;
           .part-title-small {
-            padding-left: 0px;
+            padding-left: 0;
             &.packets {
               flex: 0 0 52%;
             }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index a6613190fd..be4caacfb5 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -5,4 +5,8 @@
   .component-process-description > textarea {
     height: 113px;
   }
+}
+
+.software-product-landing-view-right-side.vsp-components-processes-page {
+	overflow-y: initial;
 }
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
index deac736cfa..b788a86e44 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -15,7 +15,7 @@
           flex: 45%;
           .validation-input-wrapper {
             .field-section {
-              @extend .body-2-medium;
+              @extend .body-2-semibold;
               margin-bottom: 23px;
               color: $black;
             }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 01a50dd741..8fb739234f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -15,11 +15,11 @@
             color: $dark-blue;
         }
     }
-    .select-action-table-view {        
+    .select-action-table-view {
         min-width: 770px;
     }
     .select-action-table-header {
-        @extend .body-1-medium;
+        @extend .body-1-semibold;
         color: $text-black;
     }
-}
\ No newline at end of file
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
new file mode 100644
index 0000000000..e0de8fc969
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -0,0 +1,55 @@
+.deployment-flavor-editor {
+	.modal-dialog {
+		width: 780px;
+	}
+	.grid-section {
+		padding-bottom: 25px;
+	}
+	.deployment-feature-groups-section.no-feature-groups {
+		padding-bottom: 0;
+		.form-group {
+			margin-bottom: 5px;
+		}
+	}
+	.deployment-feature-group-warning-section {
+			padding-bottom: 30px;
+			span {
+				@extend .body-2;
+				color: $red;
+			}
+	}
+	.grid-section.vfc-table {
+		.section-title {
+			padding-bottom: 10px;
+		}
+	}
+	.modal-content {
+		.modal-body {
+			padding: 0;
+			.validation-form-content {
+				.grid-col-1 {
+					flex-basis: 35%;
+				}
+
+				.Select-value, .Select-placeholder {
+					font-family: omnes-regular, sans-serif;
+				}
+
+				.grid-section.vfc-table {
+					padding-bottom: 50px;
+					.Select-menu {
+						max-height: 100px;
+					}
+
+				}
+
+				.grid-col-3 {
+					flex-basis: 65%;
+				}
+				padding-left: 54px;
+				padding-right: 33px;
+				overflow-y: visible;
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index e75b110425..56860101b2 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -3,11 +3,11 @@
   padding-right: 30px;
   padding-bottom: 10px;
   .title {
-    @extend .body-1-medium;
+    @extend .body-1-semibold;
   }
   .file-name {
     padding-left: 5px;
-    @extend .body-1-medium;
+    @extend .body-1-semibold;
   }
 }
 
@@ -28,7 +28,7 @@
     .missing-license {
       display: flex;
       align-items: baseline;
-      .svg-icon.exclamation-triangle-full {
+      .svg-icon-wrapper.exclamationTriangleFull .svg-icon{
         fill: $orange;
       }
       .warning-text {
@@ -46,7 +46,7 @@
     }
   }
   .name {
-    @extend .body-1-medium;
+    @extend .body-1-semibold;
   }
   .software-product-landing-view-right-side {
     @extend .flex;
@@ -76,7 +76,7 @@
           @extend  .flex-column;
           &.title-section {
             flex: 0.8;
-            @extend .heading-5-medium;
+            @extend .heading-5-semibold;
           }
           &.title-text {
             margin-bottom: 24px;
@@ -125,7 +125,7 @@
           }
         }
         .title {
-          @extend .body-1-medium;
+          @extend .body-1-semibold;
         }
         .software-product-landing-view-heading-title {
           @extend .section-title;
@@ -181,7 +181,7 @@
             }
             .drag-text {
               color: $blue;
-              font-weight: bolder;
+              @extend .body-1-semibold;
             }
             .or-text {
               margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 4956616687..d75e7447ab 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -25,13 +25,11 @@
 
       align-items: center;
       .upload-btn {
-        padding: 20px;
-        padding-top: 7px;
-        padding-bottom: 3px;
+        padding: 4px 20px;
       }
       .drag-text {
         color: $blue;
-        font-weight: bolder;
+        @extend .body-1-semibold;
       }
       .or-text {
         margin-top: 10px;
@@ -39,11 +37,9 @@
       }
     }
     .vsp-processes-editor-data {
-      padding: 28px 54px;
       transition: border .2s;
       .vsp-process-dropzone-view {
         background-color: transparent;
-        padding: 15px;
         &.active-dragging {
           border: 3px dashed $dark-blue;
           border-radius: 20px;
@@ -53,7 +49,7 @@
         }
         .grid-section {
           .section-title {
-            padding-bottom: 0px;
+            padding-bottom: 0;
           }
         }
       }
@@ -66,7 +62,8 @@
   }
 }
 
-.vsp-processes-page {
+.software-product-landing-view-right-side.vsp-processes-page {
+	overflow-y: initial;
   .processes-list {
     @extend .flex-column;
   }
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 04cb3c2051..ceae4a00de 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,45 +1,47 @@
 .vsp-components-load-balancing {
-	.svg-icon-wrapper {
-		position: relative;
-    top: -3px;
-		.svg-icon.chevron-up, .svg-icon.chevron-down {
-			width: 10px;
-			height: 10px;
-		}
+  .svg-icon-wrapper {
+	position: relative;
+	top: -3px;
+	&.chevronUp, &.chevronDown {
+	  .svg-icon {
+		width: 10px;
+		height: 10px;
+	  }
 	}
+  }
 
   .halb-data {
-    .load-balancing-page-title {
-      @extend .section-title;
-      &:first-child {
-        padding: 0 0 40px 0;
-      }
-    }
-    .question {
-      padding-top: 10px;
-      &:first-child {
-        padding-top: 0;
-      }
-    }
-    .title {
-      @extend .body-1-medium;
-      margin-bottom: 8px;
-			cursor: pointer;
-      .svg-icon {
-        @include transition(transform 0.3s);
-        margin-right: 5px;
-        position: relative;
-        top: 4px;
-      }
-    }
-    .add-padding {
-      padding-bottom: 20px;
-    }
-    .new-line {
-      margin-left: 16px;
-    }
-    textarea.form-control {
-      height: 90px;
-    }
+	.load-balancing-page-title {
+	  @extend .section-title;
+	  &:first-child {
+		padding: 0 0 40px 0;
+	  }
+	}
+	.question {
+	  padding-top: 10px;
+	  &:first-child {
+		padding-top: 0;
+	  }
+	}
+	.title {
+	  @extend .body-1-semibold;
+	  margin-bottom: 8px;
+	  cursor: pointer;
+	  .svg-icon {
+		@include transition(transform 0.3s);
+		margin-right: 5px;
+		position: relative;
+		top: 4px;
+	  }
+	}
+	.add-padding {
+	  padding-bottom: 20px;
+	}
+	.new-line {
+	  margin-left: 16px;
+	}
+	textarea.form-control {
+	  height: 90px;
+	}
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
new file mode 100644
index 0000000000..ee8cfa5c7f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
@@ -0,0 +1,19 @@
+.vsp-component-computeFlavor-view {
+  .component-questionnaire-validation-form {
+    .vm-sizing-section {
+      .section-title {
+        text-transform: capitalize;
+        font-size: 18px;
+      }
+      .duplicate-title-line label.control-label{
+        height: 2.7em;
+      }
+    }
+  }
+}
+
+.compute-flavor-editor-modal-edit {
+  .modal-lg {
+    width: 1182px;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index c49e4f551d..4bcf7940eb 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -4,7 +4,7 @@
     .section-title {
       padding-bottom: 20px;
     }
-    &:first-child {
+    &:not(:last-child) {
       padding-bottom: 50px;
     }
     .software-product-landing-view-top-block-col-upl {
@@ -18,13 +18,11 @@
       padding: 25px 0;
       align-items: center;
       .upload-btn {
-        padding: 20px;
-        padding-top: 7px;
-        padding-bottom: 3px;
+        padding: 4px 20px;
       }
       .drag-text {
         color: $blue;
-        font-weight: bolder;
+        @extend .body-1-semibold;
       }
       .or-text {
         margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index d194c678b9..5696b354a7 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -25,7 +25,7 @@
       .vertical-flex {
         flex-direction: column;
         .control-label {
-          @extend .body-2-medium;
+          @extend .body-2-semibold;
         }
         .radio-options-content-row {
           display: flex;
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index 59e983686b..75d96b4c85 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -82,31 +82,35 @@
 					min-width: 0;
 				}
 
-				.svg-icon.trash-o {
+				.svg-icon-wrapper.trashO {
+				  .svg-icon {
 					fill: $dark-gray;
 					height: 18px;
 					width: 18px;
 					&:hover {
-						fill: $black;
+					  fill: $black;
 					}
+				  }
 				}
 				.module-title-by-type {
-					@extend .heading-5-medium;
+					@extend .heading-5-semibold;
 					margin-right: 3px;
 				}
 				.modules-list-item-filename {
 					display: flex;
 					align-items: center;
 
-					.svg-icon.pencil {
-						height: 15px;
-						width: 15px;
+					.svg-icon-wrapper.pencil {
+						.svg-icon {
+						  height: 15px;
+						  width: 15px;
+						}
 						margin-left: 3px;
 						opacity: 0;
 					}
 
 					.filename-text {
-						@extend .heading-5-medium;
+						@extend .heading-5-semibold;
 
 					}
 
@@ -120,7 +124,7 @@
 							padding: 0;
 							.name-edit {
 								padding: 4px;
-								@extend .heading-5-medium;
+								@extend .heading-5-semibold;
 								height: 100%;
 								border: 1px solid $light-gray;
 								width: 400px;
@@ -140,12 +144,14 @@
 								border-color: transparent;
 							}
 						}
-						.svg-icon.pencil {
+						.svg-icon-wrapper.pencil {
 							margin-left: 10px;
 							opacity: 1;
-							stroke: $dark-gray;
-							&:hover {
-								stroke: $black;
+							.svg-icon {
+							  stroke: $dark-gray;
+							  &:hover {
+							   stroke: $black;
+							  }
 							}
 						}
 					}
@@ -158,7 +164,7 @@
 				.Select-option {
 					@extend .body-1;
 					&.is-selected {
-						@extend .body-1-medium;
+						@extend .body-1-semibold;
 						background-color: $white;
 					}
 					&.is-focused {
@@ -220,7 +226,7 @@
 			}
 
 			.artifact-files-header {
-				@extend .heading-5-medium;
+				@extend .heading-5-semibold;
 				display: flex;
 				margin-bottom: 10px;
 				justify-content: space-between;
@@ -248,7 +254,6 @@
 	.unassigned-files {
 		margin-top: 30px;
 		border: 1px solid $light-gray;
-		width: 25%;
 		background-color: $white;
 		height: 250px;
 		width: 250px;
@@ -258,7 +263,7 @@
 		top: 10px;
 
 		.unassigned-files-title {
-			@extend .heading-5-medium;
+			@extend .heading-5-semibold;
 			background-color: $tlv-gray;
 			padding: 11px 0 9px 15px;
 		}
@@ -284,16 +289,20 @@
 					display: flex;
 					align-items: center;
 					margin-bottom: 10px;
-					.svg-icon.angle-right {
+					.svg-icon-wrapper.angleRight {
+					  .svg-icon {
 						height: 10px;
 						width: 10px;
 						margin-left: 7px;
 						fill: $blue;
+					  }
 					}
 					&:hover {
 						color: $dark-blue;
-						.svg-icon.angle-right {
+						.svg-icon-wrapper.angleRight {
+						  .svg-icon {
 							fill: $dark-blue;
+						  }
 						}
 					}
 				}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 5ce8e12ec3..07f86aba2a 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,8 +1,8 @@
 .catalog-tile {
-		&:hover {
-		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-		border: 1px solid $light-gray;
-	}
+  &:hover {
+	box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+	border: 1px solid $light-gray;
+  }
   .catalog-tile-top {
 	position: relative;
 	flex: 1;
@@ -11,48 +11,54 @@
 	padding-left: 10px;
 	align-items: flex-start;
 	flex-direction: column;
-		.catalog-tile-content {
-			margin-top: auto;
-			width: 180px;
-		}
-
+	.catalog-tile-content {
+	  margin-top: auto;
+	  width: 180px;
+	}
 
 	.catalog-tile-type {
-		display: block;
-    margin-top: -25px;
-		font-size: $heading-font-5;
-		&.license-model-type {
-			color: $purple;
-		}
-		&.software-product-type {
-			color: $blue;
-		}
+	  display: block;
+	  margin-top: -25px;
+	  font-size: $heading-font-5;
+	  &.license-model-type {
+		color: $purple;
+	  }
+	  &.software-product-type {
+		color: $blue;
+	  }
 	}
 	.catalog-tile-entity-details {
-		margin-top:23px;
-		.catalog-tile-version-info{
-			display: flex;
-			justify-content: space-between;
+	  margin-top: 20px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		flex: 0.8;
+	  .catalog-tile-version-info {
+		display: flex;
+		justify-content: space-between;
 
-			.catalog-tile-item-version {
-				@extend .body-2;
-				line-height: 6px;
-			}
-		}
-		.catalog-tile-vendor-name {
-			@extend .body-3-medium;
-			color: $gray;
-			line-height: 12px;
-			@include ellipsis(auto,inline-block,178px);
+		.catalog-tile-item-version {
+		  @extend .body-2;
+		  line-height: 6px;
 		}
+	  }
+	  .catalog-tile-vendor-name {
+		@extend .body-3;
+		flex: 0.4;
+		align-self: baseline;
+		color: $gray;
+		line-height: 10px;
+		@include ellipsis(auto, inline-block, 178px);
+	  }
 
-  }
-		.catalog-tile-item-name {
-			@extend .heading-5-medium;
-			color: $black;
-			@include ellipsis(auto,inline-block,175px);
-		}
 	}
+	.catalog-tile-item-name {
+	  @extend .heading-5-semibold;
+	  color: $black;
+	  @include ellipsis(auto, inline-block, 175px);
+	  line-height: inherit;
+	}
+  }
   .catalog-tile-icon {
 
 	width: 58px;
@@ -65,32 +71,39 @@
 	  align-self: center;
 	  height: 58px;
 	  width: 58px;
-		margin-left: 122px;
+	  margin-left: 122px;
 	  background-repeat: no-repeat;
-	  .svg-icon {
+	  .svg-icon-wrapper {
 		&.vendor {
-		  fill: $dark-gray;
-		  margin-top: 22px;
-		  width: 53px;
-		  height: 47px;
-		  &:hover {
+		  .svg-icon {
 			fill: $dark-gray;
+			width: 53px;
+			height: 47px;
+			&:hover {
+			  fill: $dark-gray;
+			}
 		  }
+		  margin-top: 22px;
+
 		}
 		&.vsp {
-		  fill: $light-blue;
+		  .svg-icon {
+			fill: $light-blue;
+			width: 60px;
+			height: 40px;
+		  }
 		  margin-top: 18px;
 		  margin-left: 3px;
-		  width: 60px;
-		  height: 40px;
 		}
 		&.vlm {
-		  fill: $purple;
 		  margin-top: 18px;
-		  width: 45px;
-		  height: 53px;
-		}
+		  .svg-icon {
+			fill: $purple;
 
+			width: 45px;
+			height: 53px;
+		  }
+		}
 	  }
 	}
   }
@@ -99,13 +112,17 @@
 	padding-top: 5px;
 	display: flex;
 	justify-content: space-between;
-	margin-top:2px;
+	margin-top: 2px;
 	padding-bottom: 3px;
-	@extend .body-2-medium;
-	.svg-icon.plus {
-	  height: 9px;
-	  width: 9px;
-	  fill: $blue;
+	@extend .body-2-semibold;
+	.svg-icon-wrapper {
+	  &.plus {
+		.svg-icon {
+		  height: 9px;
+		  width: 9px;
+		  fill: $blue;
+		}
+	  }
 	}
 	.catalog-tile-item-details {
 	  overflow: hidden;
@@ -113,27 +130,27 @@
 
 	.catalog-tile-add-new-vsp {
 	  color: $blue;
-	  margin-left:40px;
+	  margin-left: 40px;
 	}
 	.catalog-tile-locking-user-name {
 	  @extend .body-2;
-	  @include ellipsis(auto,inline-block,180px);
+	  @include ellipsis(auto, inline-block, 180px);
 	}
-		.catalog-tile-check-in-status {
-			.svg-icon-wrapper {
-				.svg-icon {
-					&.locked {
-					margin-left: 7px;
-					width: 11px;
-					fill: $gray;
-					}
-					&.unlocked {
-					margin-left: 7px;
-					width: 11px;
-					fill: $gray;
-					}
-				}
-			}
+	.catalog-tile-check-in-status {
+	  .svg-icon-wrapper {
+		&.locked {
+		  .svg-icon {
+			width: 11px;
+			fill: $gray;
+		  }
 		}
+		&.unlocked {
+		  .svg-icon {
+			width: 11px;
+			fill: $gray;
+		  }
+		}
+	  }
+	}
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index b9f83fc452..aa3cf04c4f 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -22,7 +22,7 @@
 	}
 	&:hover {
 		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-		
+
 		border: 1px solid $light-gray;
 	}
 	&:only-child {
@@ -33,7 +33,7 @@
 		margin: 0 0 15px 0;
 	  }
 	  .create-item-text {
-		@extend .heading-4-medium;
+		@extend .heading-4-semibold;
 	  }
 	}
 	.create-item-plus-icon{
@@ -42,14 +42,14 @@
 	  margin: -5px 12px 0 0;
 			.svg-icon.plus {
 			height: 19px;
-			width: 19px;		
+			width: 19px;
 		}
 	}
 	&.vlm-type {
 	  .create-item-text {
 		color: $purple;
 	  }
-	 
+
 	  .create-item-plus-icon {
 		fill: $purple;
 	  }
@@ -58,14 +58,14 @@
 	  .create-item-text {
 		color: $blue;
 	  }
-	 
+
 	  .create-item-plus-icon {
 		fill: $blue;
 	  }
 	}
 	.create-item-text {
 	  width: 140px;
-	  @extend .heading-5-medium;
+	  @extend .heading-5-semibold;
 	}
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index da4c017d39..32ebac98cf 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -15,7 +15,7 @@
 	flex-direction: row;
 	margin-left: 60px;
 	.onboard-header-tab {
-	  @extend .body-1-medium;
+	  @extend .body-1-semibold;
 	  margin-right: 40px;
 	  cursor: pointer;
 	  display: flex;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 79a64f84ee..5972bb2d67 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,87 +1,87 @@
 @mixin flipOverlayDirection($itemsInRow) {
-  &:nth-child(#{$itemsInRow}n){
-		.vsp-overlay-wrapper {
-			right: 74%;			
-			left: inherit;
-			.vsp-overlay-arrow {
-				border-right-color: transparent;
-				border-left-color: $tlv-light-gray;
-				border-right-width: 2px;
-				border-left-width: 6px;
-				left: 100%;
-				&:after {
-					border-left-color: $white;
-					border-right-color: transparent;
-					left: -11px;
-				}
-			}
+  &:nth-child(#{$itemsInRow}n) {
+	.vsp-overlay-wrapper {
+	  right: 74%;
+	  left: inherit;
+	  .vsp-overlay-arrow {
+		border-right-color: transparent;
+		border-left-color: $tlv-light-gray;
+		border-right-width: 2px;
+		border-left-width: 6px;
+		left: 100%;
+		&:after {
+		  border-left-color: $white;
+		  border-right-color: transparent;
+		  left: -11px;
 		}
+	  }
+	}
   }
 }
 
-
 .catalog-tile.vendor-type {
   position: relative;
   .catalog-tile-top {
-		.catalog-tile-item-name {
-			margin-top:21px;
-		}
-		.catalog-tile-vsp-count {
-			@extend .body-3-medium;
-			margin-top: 8px;
-			margin-left: 54px;
-			margin-bottom: 9px;
-			color: $dark-gray;
-			border: 1px solid $dark-gray;
-			padding: 0 15px 0 15px;
-			border-radius: 15px;
-			
-			&.clickable {
-				&:hover {
-					background-color: #eceff3;
-					color: $dark-gray ;
-				}	
-			}			
-			&.active {
-				background-color: $white;
-				color: $dark-gray ;				
-			}
+	.catalog-tile-item-name {
+	  margin-top: 21px;
+	  line-height: inherit;
+	}
+	.catalog-tile-vsp-count {
+	  @extend .body-3-semibold;
+	  margin-top: 8px;
+	  margin-left: 54px;
+	  margin-bottom: 9px;
+	  color: $dark-gray;
+	  border: 1px solid $dark-gray;
+	  padding: 0 15px 0 15px;
+	  border-radius: 15px;
+
+	  &.clickable {
+		&:hover {
+		  background-color: #eceff3;
+		  color: $dark-gray;
 		}
+	  }
+	  &.active {
+		background-color: $white;
+		color: $dark-gray;
+	  }
+	}
   }
 
   .catalog-tile-content {
-		flex-basis: auto;
-		max-height: 31px;
-		height: 31px;
-		text-align: center;
-		color: $blue;
-		display: block;
-		background-color: $white;
-		margin-bottom: 7px;
-		padding-bottom: 0px;
-		.create-new-vsp-button {
-			margin-top: 1px;
-		}
-		&:hover {
-			color: $dark-blue;
-			.svg-icon.plus {
-			fill: $dark-blue;
-			}
-		}
-		&.disabled {
-			cursor: default;
-		}
+	flex-basis: auto;
+	max-height: 31px;
+	height: 31px;
+	text-align: center;
+	color: $blue;
+	display: block;
+	background-color: $white;
+	margin-bottom: 7px;
+	padding-bottom: 0px;
+	.create-new-vsp-button {
+	  margin-top: 1px;
+	}
+	&:hover {
+	  color: $dark-blue;
+	  .svg-icon.plus {
+		fill: $dark-blue;
+	  }
+	}
+	&.disabled {
+	  cursor: default;
+	}
   }
-  @media (min-width: 1900px){
+  @media (min-width: 1900px) {
 	@include flipOverlayDirection($itemsInRow: 8);
   }
-  @media (min-width: 1586px) and (max-width: 1899px){
+  @media (min-width: 1586px) and (max-width: 1899px) {
 	@include flipOverlayDirection($itemsInRow: 7);
   }
-  @media (min-width: 1368px) and (max-width: 1585px){
+  @media (min-width: 1368px) and (max-width: 1585px) {
 	@include flipOverlayDirection($itemsInRow: 6);
   }
-  @media (max-width: 1367px){
+  @media (max-width: 1367px) {
 	@include flipOverlayDirection($itemsInRow: 5);
   }
   @import "vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index 8816ca5df9..80ed7385e0 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -41,7 +41,7 @@
 	flex-direction: column;
 	margin: 10px 0 10px 0;
 	.vsp-overlay-title {
-	  @extend .heading-5-medium;
+	  @extend .heading-5-semibold;
 	  margin-bottom: 15px;
 	  padding: 10px 20px 10px 20px;
 	  background: $highlight-gray;