[SDC] Full OnBoard health-check and NFoD support

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

17 files changed, 517 insertions, 293 deletions

diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 317f90800f..405e91a61b 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -1,4 +1,5 @@
 @import "modules/licenseModelOverview";
+@import "modules/licenseModelLimits";
 @import "modules/licenseAgreement";
 @import "modules/featureGroup";
 @import "modules/entitlementPools";
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
index 9301f1ed39..ad6b4f8aca 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
@@ -1,6 +1,7 @@
 .modal-content {
   .modal-header {
     border-top: 3px solid $blue;
+		padding-left: 50px;
     .modal-title {
       @extend .heading-2;
     }
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index dce623e15d..54f8b977a3 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -219,14 +219,10 @@ $browserPrefixes: webkit moz o ms;
   width: $size;
   height: $size;
   background: $bgcolor;
-  border: 3px solid $bgcolor;
-  &:after {
-    content: $content;
-    position: relative;
-    left: 9px;
-    top: 9px;
-    @extend .circle-icon-text;
-  }
+	border: 3px solid $bgcolor;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 /**/
@@ -306,3 +302,12 @@ $browserPrefixes: webkit moz o ms;
 @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
   @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
 }
+
+/* percent-plus-value */
+// @mixin
+//     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
+//     to a percentage of container height/width
+@mixin percent-plus-value($property, $value, $percent: 100%) {
+  $string: 'calc(' + $percent + ' + ' + $value + ')';
+  #{$property}: unquote($string);
+}
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index 593bb09d7d..d51a1b690e 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,5 +1,6 @@
 .customized-date-picker {
 	margin-bottom: 24px;
+	display: flex;
 	.date-picker-label {
 		&.required {
 			&:before {
@@ -13,27 +14,38 @@
 		color: $dark-gray;
 		margin-bottom: 8px;
 	}
+	.react-datepicker__input-container {
+		flex: 1;
+		cursor: pointer;
+	}
 	.datepicker-custom-input {
 		display: flex;
 		justify-content: space-between;
-		width: 243px;
+		align-items: center;
 		height: 30px;
 		border-radius: 2px;
 		color: $dark-gray;
 		border: 1px solid $light-gray;
-		padding: 6px 12px;
+		padding: 6px 8px 6px 12px;
+		.clear-input {
+				margin-left: auto;
+				margin-right: 8px;
+				.svg-icon {
+					fill: transparent;
+					height: 8px;
+					width: 8px;
+				}
+			}
 		&:hover {
 			border-color: $gray;
 			.clear-input {
-				&:before {
-					cursor: pointer;
-					content: 'x';
+				.svg-icon {
+					fill: initial;
 				}
 			}
 		}
 		.datepicker-text {
 			cursor: pointer;
-			width: 170px;
 			@extend .body-1;
 			&.placeholder {
 				color: $light-gray;
@@ -43,9 +55,13 @@
 		.calendar-input {
 			fill: $light-gray;
 		}
+		.svg-icon-wrapper.calendar {
+			.svg-icon {
+				fill: $dark-gray;
+				width: 17px;
+				height: 17px;
+			}
+		}
 	}
-
-
-
 }
 
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 4a1a940c34..4353ab39e8 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -7,8 +7,7 @@
 	}
 
   .dual-search-multi-select-section {
-    $multi-select-box-width: 398px;
-    width: $multi-select-box-width;
+    flex: 1;
     .dual-text-box-search-title, .dual-list-box-multi-select-text {
       @extend .body-1;
       color: $dark-gray;
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
index 7165e57ef9..5b10dee0ee 100644
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -18,6 +18,12 @@
     .modal-content .modal-header {
       border-top: 3px solid $red;
     }
+	}
+	
+	&.negative {
+    .modal-content .modal-header {
+      border-top: 3px solid $red;
+    }
   }
 
   &.warning {
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index 4e42b6ce5b..79a5432ef1 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -72,6 +72,11 @@
 				fill: $green;
 			  }
 			}
+			.svg-icon-wrapper.hideDelete {
+				.svg-icon {
+					fill: $white;
+				}
+			}
 			.select-action-table-row {
 				display: flex;
 				flex: 1;
@@ -80,6 +85,7 @@
 				&.has-error {
 					border-color: $red;
 				}
+
 				.select-action-table-cell {
 					flex: 1;
 					border-right: 1px solid;
@@ -127,10 +133,9 @@
 						border-bottom: 1px solid $blue;
 						overflow: auto;
 						.Select-menu {
-							display: inline-block;
 							.Select-option {
-								width: 100%;
-								display: inline-block;
+								overflow: hidden;
+								text-overflow: ellipsis;
 								border-bottom: 1px solid $light-gray;
 								&:hover {
 									background-color: $blue;
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 46269ad699..e4aac32b74 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -7,12 +7,10 @@ form {
     .validation-radio-wrapper {
       position: relative;
     }
-    .nav-tabs {
+    .sdc-tabs {
       position: relative;
-      .invalid-tab:not(.active) {
-        a {
+      .invalid-tab:not(.sdc-tab-active) {
           color: $red;
-        }
       }
     }
     .validation-error-message {
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 0e0a72a387..ad0bb77e8d 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,6 +1,5 @@
 
-.entitlement-pools-list-editor {
-
+.entitlement-pools-list-editor {  
   .list-editor-view-list {
     .list-editor-item-view {
       min-height: 110px;
@@ -8,13 +7,9 @@
     }
     .list-editor-item-view-field {
 
-      .entitlement-pools-count, .entitlement-parameters, .contract-number, .type{
+      .entitlement-pools-count, .contract-number, .type{
         color: $purple;
       }
-      .entitlement-parameters {
-        @include ellipsis;
-        margin-bottom: 2px;
-      }
       .entitlement-pools-count {
         @extend .heading-1;
         margin-top: -10px;
@@ -25,22 +20,29 @@
 }
 
 .entitlement-pools-modal {
-  .validation-form-content {
-    padding: 50px;
-  }
   .modal-body {
     padding: 0;
   }
+	.sdc-tab-content {
+		margin: 0;
+	}
   .entitlement-pools-form {
-    .tab-content {
-      padding: 50px;
-    }
 		.threshold-section {
 			display: flex;
 			justify-content: space-between;
 			.validation-input-wrapper {
 				flex: 0 0 46%;
 			}
+    }
+    .date-section {
+			display: flex;
+			justify-content: space-between;
+			.validation-input-wrapper {
+				flex: 0 0 46%;
+			}
+		}
+		.validation-form-content {
+			padding: 20px 50px;
 		}
   }
   .validation-buttons {
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 8c45d8ec58..9d395f98c8 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -32,6 +32,14 @@
       margin-top: 55px;
       color: $dark-gray;
     }
+		.validation-form-content {
+			padding: 0;
+		}
+
+		.nav.nav-tabs {
+			padding-left: 50px;
+		}
+		
     .tab-content {
       padding: 50px;
       .field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 5de757bf64..d072849c08 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -16,23 +16,3 @@
     }
   }
 }
-
-.license-key-groups-modal {
-  .modal-body {
-    padding: 0;
-  }
-  .license-key-groups-form {
-    .validation-form-content {
-      padding: 50px;
-      .field-section {
-        @extend .body-2-semibold;
-        margin-bottom: 23px;
-        width: 400px;
-        color: $black;
-      }
-    }
-    .validation-buttons {
-      padding: 20px 50px;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index 3d65be6274..fab091fe67 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,20 +1,53 @@
-.license-model-type-modal {
+.license-model-modal {
   .modal-body {
     padding: 0;
   }
-  .validation-form-content {
-    padding: 50px;
-    .field-section {
-      @extend .body-2-semibold;
-      margin-bottom: 23px;
-      width: 400px;
-      color: $black;
+	.modal-header {
+		border-bottom: none;
+		padding-bottom: 30px;
+	}
+  .modal-body {
+    padding: 0;
+  }
+	.sdc-tabs-list {
+		padding-left: 50px;
+		border-bottom: 1px solid $tlv-light-gray;
+		display: flex;
+		align-items: baseline;
+	}
+	.sdc-tab-content {
+		margin-top: 0;
+	}
+	.add-limit-button {
+		margin-left: auto;
+		margin-right: 50px;
+		padding-right: 0;
+		text-align: end;
+	}
+	.license-model-form {
+    .validation-form-content {
+      padding: 20px 50px;
+		}
+    .validation-buttons {
+      padding: 20px 50px;
     }
-    textarea {
-      height: 107px;
+		&.license-agreement-form, &.feature-group-form {
+			.validation-form-content {
+				padding: 0;
+			}
+			.sdc-tab-content {
+				padding: 20px 50px;
+			}
+		}
+	}
+	.license-model-modal-buttons {
+		padding: 21px 50px;
+    display: flex;
+    justify-content: flex-end;
+		background-color: $tlv-gray;
+		margin-top: 2px;
+    .sdc-button {
+      margin-left: 20px;
     }
-  }
-  .validation-buttons {
-    padding: 20px 50px;
-  }
+	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
new file mode 100644
index 0000000000..32fd128f2e
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -0,0 +1,121 @@
+.license-model-limits-view {
+	max-height: 490px;
+	overflow: auto;
+
+	.limit-editor-title {
+		padding: 10px 50px;
+		background-color: $blue;
+		color: $white;
+
+	}
+	.list-editor-view-add-title {
+		margin-right: 20px;
+	}
+
+	.no-limits-text {
+		padding-left: 50px;
+	}
+
+	.list-editor-view {
+		.list-editor-view-header {
+			border-bottom: none;
+			padding-top: 30px;
+			padding-bottom: 0;
+		}
+
+		.list-editor-view-list-scroller {
+			margin-top: 0;
+			margin-bottom: 30px;
+		}
+		.list-editor-view-list {
+			width: 100%;
+			.list-editor-item-view {
+				min-height: 50px;
+				height: 50px;
+				background-color: $tlv-light-gray;
+				border-color: transparent;
+				margin: 1px 0;
+				.list-editor-item-view-content {
+					padding-left: 0;
+				}
+				.svg-icon-wrapper.trashO {
+					margin-bottom: 0;
+					margin-right: 50px;
+					.svg-icon {
+						fill: $gray;
+						height: 16px;
+						width: 16px;
+						&:hover {
+								fill: $dark-gray;
+							}
+					}
+				}
+				&.selectable {
+					&:hover {
+						background-color: darken($tlv-light-gray, 4%);
+						cursor: pointer;
+					}
+				}
+				&:hover {
+					border-color: transparent;
+					cursor: default;
+				}
+				.list-editor-item-view-content {
+					.list-editor-item-view-field {
+						display: flex;
+    				align-items: center;
+						white-space: nowrap;
+						
+						&.limit-name {
+							.text.name {
+								@extend .body-1-semibold;
+								color: $blue;
+								text-transform: uppercase;
+								padding: 0px 10px;
+							}
+							
+							border-right: 1px solid $light-gray;
+							margin-right: 22px;
+							flex: 0.4;
+							display: flex;
+							justify-content: center;
+						}
+
+						&.limit-description {
+							max-width: 300px;
+							margin-right: 22px;
+						}
+
+						&.limit-metric-details {
+							max-width: 300px;
+						}
+
+						.text.description, .text.name {
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+					}
+
+				}			
+			}
+		}
+	}
+	.limit-editor{
+		.limit-editor-form {
+			.limit-editor-form-grid-section {
+				padding-bottom: 0;
+			}
+			.validation-form-content {
+				padding: 21px 45px;
+			}
+			.limit-editor-buttons {			
+				display: flex;
+				justify-content: flex-end;
+				.sdc-button {
+				margin-left: 20px;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 5c74e82d83..1c133a1dce 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -1,3 +1,21 @@
+$list-indentation: 20px;
+$arrow-margin: 30px;
+$icon-margin: 30px;
+$arrow-element-width: 30px;
+$list-item-padding: 15px;
+
+@mixin overview-tile-shadow() {
+	@include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+}
+
+// @mixin vlm-list-item-inset($color) {
+// 	@include box-shadow(inset 6px 0 0 0 $color);
+// }
+
+$la-color: $dark-blue;
+$fg-color: $blue;
+$lkg-ep-color: $light-blue;
+
 .license-model-overview {
   .overview-top-section {
     .overview-title{
@@ -20,60 +38,61 @@
       .vendor-data-view {
         @extend .flex-column;
         background-color: $tlv-gray;
-        padding: 20px 30px;
+        padding: 13px 30px;
         border: 1px solid $tlv-light-gray;
-        @include border-shadow();
+        @include overview-tile-shadow();
         .vendor-title {
           margin-top:5px;
         }
         .vendor-name {
           @extend .heading-4-semibold;
           text-transform: none;
-          padding-bottom: 15px;
+          padding-bottom: 10px;
           border-bottom: 1px solid $tlv-light-gray;
         }
-        .vendor-description {
+        .vendor-description, .vendor-description-readonly {
           @extend .flex;
           @extend .body-1;
           justify-content: space-between;
-          margin-top: 10px;
           overflow: hidden;
+					position: relative;
+					flex: initial;
+        }
+
+        &:not(.read-only) .vendor-description {
           border: 1px solid transparent;
-          position: relative;
-          left: -6px;
-          width: 101%;
+          padding: 2px 0 2px 6px;
+          margin-top: 10px;
 
+          $hover-padding-right: 16px;
+          @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
           &:hover {
-            border: 1px solid $tlv-light-gray;
-            background-position: 99% 12%;
-            background-size: 15px;
-            padding-right: 20px;
+            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;
-            cursor: pointer;
-          }
-          &.read-only {
-            border: none;
+            background-color: white;
+
+            .description-data:after {
+              background: white;
+            }
           }
-					.description-data {
-						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
-					}
         }
 
         .vendor-description-readonly {
-          @extend .flex;
-          @extend .body-1;
-          justify-content: space-between;
-          margin-top: 10px;
-          overflow: hidden;
-          border: none;
-          height: 49px;
-          margin-bottom: 15px;
-          padding: 6px;
-          position: relative;
-          left:-6px;
+          margin-top: 16px;
         }
 
+				.description-data {
+					@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+					flex: initial;
+				}
+
         .vendor-description-edit {
           @extend .flex;
           flex-direction: column;
@@ -84,6 +103,7 @@
           width: 101%;
           textarea {
             padding-left: 6px;
+            resize: vertical;
           }
           .buttons-row {
             @extend .flex;
@@ -133,12 +153,12 @@
         margin-left: 20px;
         justify-content: space-between;
         border: 1px solid $tlv-light-gray;
-        @include border-shadow();
+        @include overview-tile-shadow();
         background-color: $tlv-gray;
         .summary-count-item {
           @extend .flex;
-          @extend .heading-5-semibold;
-          padding-top: 5px;
+					@extend .heading-5-semibold;
+					align-items: center;
           padding-left: 45px;
           padding-right: 45px;
           border-bottom: 1px solid $tlv-light-gray;
@@ -184,9 +204,10 @@
       }
     }
   }
-  .vlm-list-tab-panel
-  {
-    @extend .flex;
+  .vlm-list-tab-panel {
+		
+		@extend .flex;
+		margin-bottom: 7px;
     .section-title {
       flex: 1;
     }
@@ -236,81 +257,33 @@
       }
       .vlm-list-view {
         .vlm-list {
-          .vlm-list-item {
-            @include border-shadow();
-            .list-item-icon-col {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              margin-left: 5px;
-            }
-            &.vlm-list-item-la {
-              margin-left: 0;
-              .list-item-icon-col {
-                padding-left: 22px;
+          .vlm-list-item.orphan-list-item {
+						@include overview-tile-shadow();
+						margin-left: 0;
+						
+						.vlm-list-item-title {
 
-              }
-              .la-icon {
-                background-color: $gray;
-                border-color: $gray;
-              }
-              .list-item-section {
-                &:first-child {
-                  background-color: gray;
-                }
-              }
-            }
-            &.vlm-list-item-fg {
-              cursor: default;
-              margin-left: 0;
-              border-left: 10px solid $gray;
-              .list-item-arrow-col {
-                margin-left: 0px;
-              }
-              .list-item-icon-col {
-                padding-left: 22px;
-              }
-              .fg-icon {
-                background-color: $gray;
-                border-color: $gray;
-              }
-            }
-            &.vlm-list-item-ep {
-              margin-left: 0;
-              border-left: 10px solid $gray;
-              .list-item-icon-col {
-                padding-left: 22px;
-              }
-              .ep-icon {
-                background-color: $gray;
-                border-color: $gray;
-              }
-              .list-item-section {
-                &:first-child {
-                  display: flex;
-                  color: $white;
-                  min-width: 34px;
-                }
-              }
-            }
-            &.vlm-list-item-lkg {
-              margin-left: 0;
-              border-left: 10px solid $gray;
-              .list-item-icon-col {
-                padding-left: 22px;
-              }
-              .lkg-icon {
-                background-color: $gray;
-                border-color: $gray;
-              }
-              .list-item-section {
-                &:first-child {
-                  display: flex;
-                  color: $white;
-                  min-width: 34px;
-                }
-              }
-            }
+							.item-name {
+								color: $dark-gray;
+							}
+						}
+						.list-item-icon-col {
+							.overview-list-icon {
+								background-color: $gray;
+								border-color: $gray;
+							}
+						}
+						.list-item-section {
+							&:first-child {
+								display: flex;
+								color: $white;
+								min-width: $arrow-element-width;
+							}
+							&.list-item-icon-col {
+								margin-left: 65px;
+								margin-right: 65px - $list-item-padding;
+							}
+						}
           }
         }
       }
@@ -328,18 +301,32 @@
           @extend .flex;
           border: 1px solid $tlv-light-gray;
           margin-bottom: 0px;
-          cursor: pointer;
-          .list-item-icon-col {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-
-          }
+          .clickable {
+						cursor: pointer;
+					}
+          
           .list-item-section {
-            padding: 10px;
+						.count-value {
+							@extend .body-3;
+						}
+						&.list-item-icon-col {
+							display: flex;
+							flex-direction: column;
+							justify-content: center;
+							align-items: center;
+							padding: 0;
+							margin-right: 40px - $list-item-padding;
+							margin-left: $icon-margin;
+							.overview-list-icon {
+								@extend .body-2;
+							}
+						}
+						padding: 15px;
+						&.list-item-arrow-col {
+							padding: 0;
+						}
             .children-count {
               @extend .body-1;
-              line-height: 20px;
               color: $gray;
               padding-left: 5px;
               .count-value {
@@ -347,9 +334,18 @@
               }
             }
             .additional-data {
-              padding-left: 50px;
+							padding-left: 60px;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+							*:last-child {
+								margin-top: 20px;
+							}
+							*:only-child {
+								margin-top: 0;
+							}
               .additional-data-name {
-                @extend .body-1-semibold;
+                @extend .body-2-semibold;
               }
             }
             .additional-data-col-border {
@@ -359,128 +355,140 @@
             }
           }
           .list-item-additional-data-col {
-            @extend .body-1;
+            @extend .body-2;
             @extend .flex;
-            align-items: center;
-            flex: 0.8;
+            align-items: stretch;
+						flex: 0.8;
+						margin-left: 30px;
+						padding-top: 17px;
+						padding-bottom: 11px;
           }
           .arrow-icon {
-            align-self: center;
+						align-self: center;
+						
           }
           .vlm-item-info {
             flex: 1;
           }
           .vlm-list-item-title {
-            @extend .flex;
+						@extend .flex;
+						align-items: baseline;
             .item-name {
               @extend .heading-5-semibold;
               flex: 0 1 auto;
-              margin-bottom: 4px;
+							margin-bottom: 4px;
+							text-transform: uppercase;
             }
           }
           .vlm-list-item-description {
             @extend .body-1;
-            overflow: hidden;
+						@include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
             max-height: 38px;
           }
           &.vlm-list-item-la {
             margin-top: 10px;
-            border-left: 10px solid $dark-blue;
             .la-icon {
-              @include create-circle($circle-icon-size,$dark-blue,'LA');
+              @include create-circle($circle-icon-size,$la-color,'LA');
               color: $white;
-            }
+						}
+						.vlm-list-item-title {
+							.item-name {
+								color: $la-color;
+							}
+						}
             .list-item-section {
 
               &:first-child {
                 display: flex;
-                color: $dark-blue;
-                min-width: 34px;
+                color: $la-color;
+                min-width: $arrow-element-width;
               }
             }
             .list-item-arrow-col {
               flex: 0.01;
-              margin-left: 14px;
-            }
-            .list-item-icon-col {
-              padding-left: 14px;
-              padding-right: 30px;
-              align-items: center;
+							margin-left: $arrow-margin;
+							justify-content: center;
             }
-
           }
           &.vlm-list-item-fg {
-            border-left: 10px solid $blue;
-            margin-left: 20px;
-            margin-top: 10px;
+            margin-left: $list-indentation;
+						margin-top: 10px;
+						.fg-pipeline-separator {
+							color: $dark-gray;
+							padding: 0 5px;
+						}
+						.list-item-icon-col {
+							margin-left: 29px;
+						}
             .fg-icon {
-              @include create-circle($circle-icon-size,$blue,'FG');
+              @include create-circle($circle-icon-size,$fg-color,'FG');
               color: $white;
-            }
+						}
+						
+						.vlm-list-item-title {
+							.item-name {
+								color: $fg-color;
+							}
+						}
             .list-item-section {
               &:first-child {
                 display: flex;
-                color: $blue;
-                min-width: 34px;
+                color: $fg-color;
+                min-width: $arrow-element-width;
 
               }
             }
             .list-item-arrow-col {
               flex: 0.01;
-              margin-left: 26px;
-            }
-            .list-item-icon-col {
-              padding-left: 22px;
-              padding-right: 30px;
-              align-items: center;
+							margin-left: $arrow-margin - $list-indentation;
+							padding-left: $list-indentation;
             }
           }
           &.vlm-list-item-ep {
-            margin-left: 40px;
+            margin-left: $list-indentation * 2;
             margin-top: 10px;
-            border-left: 10px solid $light-blue;
             cursor: default;
             .ep-icon {
-              @include create-circle($circle-icon-size,$light-blue,'EP');
+              @include create-circle($circle-icon-size,$lkg-ep-color,'EP');
               color: $white;
-            }
-            .list-item-icon-col {
-              padding-left: 72px;
-              padding-right: 30px;
-              align-items: center;
-            }
+						}
+						.vlm-list-item-title {
+							.item-name {
+								color: $lkg-ep-color;
+							}
+						}
             .list-item-section {
               &:first-child {
                 display: none;
-              }
-            }
-            .list-item-additional-data-col {
-              margin-right: 20px;
+							}
+							&.list-item-icon-col {
+								margin-left: 52px;
+							}
             }
+						
           }
           &.vlm-list-item-lkg {
             margin-top: 10px;
-            margin-left: 40px;
-            border-left: 10px solid $light-blue;
+            margin-left: $list-indentation * 2;
             cursor: default;
             .lkg-icon {
-              @include create-circle($circle-icon-size,$light-blue,'KG');
+              @include create-circle($circle-icon-size,$lkg-ep-color,'KG');
               color: $white;
-            }
-            .list-item-icon-col {
-              padding-left: 72px;
-              padding-right: 30px;
-              align-items: center;
-            }
+						}
+						.vlm-list-item-title {
+							.item-name {
+								color: $lkg-ep-color;
+							}
+						}
             .list-item-section {
               &:first-child {
                 display: none;
-              }
+							}
+							&.list-item-icon-col {
+								margin-left: 52px;
+							}
 
             }
-            .list-item-additional-data-col {
-              margin-right: 20px;
-            }
           }
         }
 
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 07f86aba2a..87a852f755 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -48,6 +48,9 @@
 		align-self: baseline;
 		color: $gray;
 		line-height: 10px;
+		&:first-letter {
+      text-transform: capitalize;
+    }
 		@include ellipsis(auto, inline-block, 178px);
 	  }
 
@@ -56,7 +59,10 @@
 	  @extend .heading-5-semibold;
 	  color: $black;
 	  @include ellipsis(auto, inline-block, 175px);
-	  line-height: inherit;
+		line-height: inherit;
+		&:first-letter {
+			text-transform: capitalize;
+		}
 	}
   }
   .catalog-tile-icon {
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 5972bb2d67..d490fd6e1c 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -24,7 +24,10 @@
   .catalog-tile-top {
 	.catalog-tile-item-name {
 	  margin-top: 21px;
-	  line-height: inherit;
+		line-height: inherit;
+		&:first-letter {
+      text-transform: capitalize;
+    }	
 	}
 	.catalog-tile-vsp-count {
 	  @extend .body-3-semibold;
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index d7d4586354..b49a7cb423 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -12,53 +12,73 @@
 div[data-reactroot].customized-date-picker-calendar {
   @import "common/variables";
   @import "common/typography";
-  border-radius: 2px;
   border-color: $light-gray;
   margin-top: -8px;
+	color: $black;
   .react-datepicker__triangle {
       margin-top: 0px;
   }
   .react-datepicker__navigation--previous {
-      border: none;      
-      width: 15px;
-      height: 15px; 
+      border: none;
+      width: 12px;
+      height: 12px;
       margin-top: 2px;
-      content: url(../images/angle-left.svg);               
+      content: url(../images/angle-left.svg);
   }
   .react-datepicker__navigation--next {
-      border: none;      
-      width: 15px;
-      height: 15px;
-      margin-top: 2px;      
-      content: url(../images/angle-right.svg);      
+      border: none;
+      width: 12px;
+      height: 12px;
+      margin-top: 2px;
+      content: url(../images/angle-right.svg);
   }
-  .react-datepicker__month-container {    
+  .react-datepicker__month-container {
 		.react-datepicker__header {
 			background-color: $background-gray;
       border-bottom: none;
       .react-datepicker__current-month {
-        @extend .heading-5;
+        @extend .body-1-semibold;
         background-color: $background-gray;
-        margin-bottom: 10px;         
+        margin-bottom: 10px;
       }
       .react-datepicker__day-names {
-        @extend .heading-5;
+        @extend .body-1;
         background-color: $white;
       }
 		}
-    .react-datepicker__day--selected {
-      @extend .heading-5;
-      border-radius: 20px;
+    .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
+      @extend .body-1;
       background-color: $blue;
-      &:hover {
-        background-color: $dark-blue;
-      }
+			color: $white;
     }
     .react-datepicker__day {
-      @extend .heading-5;
-      &:hover {
-        border-radius: 20px;
-      }
+			border-radius: 0px;
+			margin: 0;
+			flex: 1;
+      @extend .body-1;
+    }
+
+		.react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
+			background-color: $tlv-hover;
+			color: $black;
+			&.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
+				background-color: $blue;
+				color: $white;
+			}
+			&.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
+				background-color: lighten($blue, 40%);
+				color: $black;
+			}
+			&.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+			&.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+			&.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+				background-color: $blue;
+				color: $white;
+			}
+		}
+
+		.react-datepicker__week {
+			display: flex;
     }
 	}
 }
@@ -69,7 +89,7 @@ div[data-reactroot].tooltip {
   @import "common/typography";
 
   &.in {
-	opacity: 1;
+  	opacity: 1;
   }
   &.validation-error-message {
     &.bottom {
@@ -94,28 +114,33 @@ div[data-reactroot].tooltip {
     }
   }
   &.bottom {
-	.tooltip-arrow {
-	  border-bottom-color: $dark-gray !important;
-	}
+    .tooltip-arrow {
+      border-bottom-color: $dark-gray !important;
+    }
   }
   &.top {
-	.tooltip-arrow {
-	  border-top-color: $dark-gray !important;
-	}
+    .tooltip-arrow {
+      border-top-color: $dark-gray !important;
+    }
   }
   .tooltip-inner {
-	max-width: 100%;
-	background-color: $dark-gray;
+    @extend .body-1;
+    max-width: 100%;
+    background-color: $dark-gray;
+    padding: 6px 9px;
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 
   // activity log tooltip
   &.activity-log-message-tooltip {
-	@include base-font-regular;
-	font-size: $body-font-2;
-	.message-block {
-	  text-align: left;
-	  padding: 3px 12px;
-	}
+	  @include base-font-regular;
+    font-size: $body-font-2;
+    .message-block {
+      text-align: left;
+      padding: 3px 12px;
+    }
   }
   //dependency table error tooltip
   &.select-action-table-error-tooltip{
@@ -136,4 +161,11 @@ div[data-reactroot].tooltip {
       font-size: $body-font-2;
     }
   }
+
+  // for read-only mode, vendor description in VLM overview
+  &.vendor-description-tooltip {
+    .tooltip-inner {
+      max-width: 600px;
+    }
+  }
 }