react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

11 files changed, 490 insertions, 500 deletions

diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
index e3fc6a9143..1b6459a429 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss
@@ -13,7 +13,7 @@
         height: 34px;
         color: $blue;
         font-weight: bolder;
-        text-transform: uppercase;        
+        text-transform: uppercase;
     }
     .sdc-accordion {
         padding-left: 18px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index 0a234a5a96..429d6cc3d3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -1,33 +1,33 @@
 .catalog-header {
-  margin: 34px 0 29px 50px;
-  display: flex;
-  flex-direction: row;
-  .expandable-input-top {
-	margin-right: 60px;
-  }
-  &.workspace-header {
-	@extend .heading-1;
-	color: $blue;
-  }
-  .catalog-header-tabs {
-	display: flex;
-	flex-direction: row;
-	.tab-separator {
-	  position: relative;
-	  top: 8px;
-	}
-	.catalog-header-tab {
-	  @extend .heading-1;
-	  cursor: pointer;
-	  padding: 0 15px 0 15px;
-	  display: flex;
-	  align-items: center;
-	  &.active {
-		color: $blue;
-	  }
-	  &:first-child {
-		padding-left: 0;
-	  }
-	}
-  }
+    margin: 34px 0 29px 50px;
+    display: flex;
+    flex-direction: row;
+    .expandable-input-top {
+        margin-right: 60px;
+    }
+    &.workspace-header {
+        @extend .heading-1;
+        color: $blue;
+    }
+    .catalog-header-tabs {
+        display: flex;
+        flex-direction: row;
+        .tab-separator {
+            position: relative;
+            top: 8px;
+        }
+        .catalog-header-tab {
+            @extend .heading-1;
+            cursor: pointer;
+            padding: 0 15px 0 15px;
+            display: flex;
+            align-items: center;
+            &.active {
+                color: $blue;
+            }
+            &:first-child {
+                padding-left: 0;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
index 11a739d004..c632beb382 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss
@@ -1,39 +1,37 @@
 .catalog-list {
-  height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px 0 42px;
-  .catalog-title {
-	@extend .heading-1;
-	color: $blue;
-	margin:0 0 12px 18px;
-  }
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0 10px 0 42px;
+    .catalog-title {
+        @extend .heading-1;
+        color: $blue;
+        margin: 0 0 12px 18px;
+    }
 
-  .catalog-items {
-	display: flex;
-	flex-wrap: wrap;
-	@import "tile";
-	@import "createItemTile";
-	@import "catalogTile";
-	@import "vendorTile";
-	@import "vlmTile";
-	&:after {
-	  content: " ";
-	  height: 250px;
-	  display: block;
-	  width: 100%;
-	}
-	.venodor-tile-btn {
-		border: 1px solid $light-gray;
-		color: $black;
-		line-height: 20px;
-		&:hover {
-				background-color: $light-gray;
-		}
-	}
-  }
-
-  // Bottom spacing - cross browser solution
+    .catalog-items {
+        display: flex;
+        flex-wrap: wrap;
+        @import 'tile';
+        @import 'createItemTile';
+        @import 'catalogTile';
+        @import 'vendorTile';
+        &:after {
+            content: ' ';
+            height: 250px;
+            display: block;
+            width: 100%;
+        }
+        .venodor-tile-btn {
+            border: 1px solid $light-gray;
+            color: $black;
+            line-height: 20px;
+            &:hover {
+                background-color: $light-gray;
+            }
+        }
+    }
 
+    // Bottom spacing - cross browser solution
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 612ec495cd..a2c7997266 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,147 +1,144 @@
 .catalog-tile {
-  &: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;
-	display: flex;
-	padding-top: 29px;
-	padding-left: 10px;
-	align-items: flex-start;
-	flex-direction: column;
-	.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;
-	  }
-	}
-	.catalog-tile-entity-details {
-	  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;
-		flex: 0.4;
-		align-self: baseline;
-		color: $gray;
-		line-height: 10px;
-		&:first-letter {
-      text-transform: capitalize;
+    &:hover {
+        box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+        border: 1px solid $light-gray;
     }
-		@include ellipsis(auto, inline-block, 178px);
-	  }
-
-	}
-	.catalog-tile-item-name {
-	  @extend .heading-5-semibold;
-	  color: $black;
-	  @include ellipsis(auto, inline-block, 175px);
-		line-height: inherit;
-		&:first-letter {
-			text-transform: capitalize;
-		}
-	}
-  }
-  .catalog-tile-icon {
+    .catalog-tile-top {
+        position: relative;
+        flex: 1;
+        display: flex;
+        padding-top: 29px;
+        padding-left: 10px;
+        align-items: flex-start;
+        flex-direction: column;
+        .catalog-tile-content {
+            margin-top: auto;
+            width: 180px;
+        }
 
-	width: 58px;
-	height: 58px;
-	text-align: center;
-	justify-content: center;
-	display: flex;
+        .catalog-tile-type {
+            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: 20px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            flex: 0.8;
+            .catalog-tile-version-info {
+                display: flex;
+                justify-content: space-between;
 
-	.icon {
-	  align-self: center;
-	  height: 58px;
-	  width: 58px;
-	  margin-left: 122px;
-	  background-repeat: no-repeat;
-	  .svg-icon {
-		&.__vendor {
-			fill: $dark-gray;
-			&:hover {
-			  fill: $dark-gray;
-			}
-		  margin-top: 22px;
-		}
-		&.__vsp {
-			fill: $light-blue;
-		  }
-		  margin-top: 18px;
-		  margin-left: 3px;
-		&.__vlm {
-		  margin-top: 18px;
-			fill: $purple;
-		}
-	  }
-	}
-  }
-  .catalog-tile-content {
-	border-top: 1px solid $background-gray;
-	padding-top: 5px;
-	display: flex;
-	justify-content: space-between;
-	margin-top: 2px;
-	padding-bottom: 3px;
-	@extend .body-2-semibold;
-	.svg-icon {
-	  &.__plus {
-		  width: 20px;
-		  height: 20px;
-		  fill: $blue;
-	  }
-	}
-	.catalog-tile-item-details {
-	  overflow: hidden;
-	}
+                .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;
+                &:first-letter {
+                    text-transform: capitalize;
+                }
+                @include ellipsis(auto, inline-block, 178px);
+            }
+        }
+        .catalog-tile-item-name {
+            @extend .heading-5-semibold;
+            color: $black;
+            @include ellipsis(auto, inline-block, 175px);
+            line-height: inherit;
+            &:first-letter {
+                text-transform: capitalize;
+            }
+        }
+    }
+    .catalog-tile-icon {
+        width: 58px;
+        height: 58px;
+        text-align: center;
+        justify-content: center;
+        display: flex;
 
-	.catalog-tile-add-new-vsp {
-	  color: $blue;
-		.svg-icon {
-			&.__plus {
-				width: 20px;
-				height: 20px;
+        .icon {
+            align-self: center;
+            height: 58px;
+            width: 58px;
+            margin-left: 122px;
+            background-repeat: no-repeat;
+            .svg-icon {
+                &.__vendor {
+                    fill: $dark-gray;
+                    &:hover {
+                        fill: $dark-gray;
+                    }
+                    margin-top: 22px;
+                }
+                &.__vsp {
+                    fill: $light-blue;
+                }
+                margin-top: 18px;
+                margin-left: 3px;
+                &.__vlm {
+                    margin-top: 18px;
+                    fill: $purple;
+                }
+            }
+        }
+    }
+    .catalog-tile-content {
+        border-top: 1px solid $background-gray;
+        padding-top: 5px;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 2px;
+        padding-bottom: 3px;
+        @extend .body-2-semibold;
+        .svg-icon {
+            &.__plus {
+                width: 20px;
+                height: 20px;
+                fill: $blue;
+            }
+        }
+        .catalog-tile-item-details {
+            overflow: hidden;
+        }
 
-			}
-		}
-	  margin-left: 40px;
-	}
-	.catalog-tile-locking-user-name {
-	  @extend .body-2;
-	  @include ellipsis(auto, inline-block, 180px);
-	}
-	.catalog-tile-check-in-status {
-	  .svg-icon {
-		&.__locked {
-			fill: $gray;
-		}
-		&.__unlocked {
-			fill: $gray;
-		}
-	  }
-	}
-  }
+        .catalog-tile-add-new-vsp {
+            color: $blue;
+            .svg-icon {
+                &.__plus {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            margin-left: 40px;
+        }
+        .catalog-tile-locking-user-name {
+            @extend .body-2;
+            @include ellipsis(auto, inline-block, 180px);
+        }
+        .catalog-tile-check-in-status {
+            .svg-icon {
+                &.__locked {
+                    fill: $gray;
+                }
+                &.__unlocked {
+                    fill: $gray;
+                }
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index d17dcdd685..9838e65b10 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -1,73 +1,77 @@
 .create-catalog-item-wrapper {
-  width: 204px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  margin: 9px;
+    width: 204px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    margin: 9px;
 
-  .tile.create-catalog-item {
-	margin: 9px 0 9px 0;
-	display: flex;
-	background-color: $white;
-	&:first-child{margin-top: 0;}
-	&:last-child{margin-bottom: 0;}
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-	&.disabled {
-	  color: $gray;
-	  .create-item-plus-icon {
-		fill: $gray;
-	  }
-	}
-	&:hover {
-		box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
+    .tile.create-catalog-item {
+        margin: 9px 0 9px 0;
+        display: flex;
+        background-color: $white;
+        &:first-child {
+            margin-top: 0;
+        }
+        &:last-child {
+            margin-bottom: 0;
+        }
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        &.disabled {
+            color: $gray;
+            .create-item-plus-icon {
+                fill: $gray;
+            }
+        }
+        &:hover {
+            box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
 
-		border: 1px solid $light-gray;
-	}
-	&:only-child {
-	  text-align: center;
-	  flex-direction: column;
-	  justify-content: center;
-	  .create-item-plus-icon {
-		margin: 0 0 15px 0;
-	  }
-	  .create-item-text {
-		@extend .heading-4-semibold;
-	  }
-	}
-	.create-item-plus-icon{
-		margin: -5px 12px 0 0;
-		height: 19px;
-		width: 19px;
-		.svg-icon {
-			&.__plus {
-				width: 19px;
-				height: 19px;
-			}
-		}
-	}
-	&.vlm-type {
-	  .create-item-text {
-		color: $purple;
-	  }
+            border: 1px solid $light-gray;
+        }
+        &:only-child {
+            text-align: center;
+            flex-direction: column;
+            justify-content: center;
+            .create-item-plus-icon {
+                margin: 0 0 15px 0;
+            }
+            .create-item-text {
+                @extend .heading-4-semibold;
+            }
+        }
+        .create-item-plus-icon {
+            margin: -5px 12px 0 0;
+            height: 19px;
+            width: 19px;
+            .svg-icon {
+                &.__plus {
+                    width: 19px;
+                    height: 19px;
+                }
+            }
+        }
+        &.vlm-type {
+            .create-item-text {
+                color: $purple;
+            }
 
-	  .create-item-plus-icon {
-		fill: $purple;
-	  }
-	}
-	&.vsp-type {
-	  .create-item-text {
-		color: $blue;
-	  }
+            .create-item-plus-icon {
+                fill: $purple;
+            }
+        }
+        &.vsp-type {
+            .create-item-text {
+                color: $blue;
+            }
 
-	  .create-item-plus-icon {
-		fill: $blue;
-	  }
-	}
-	.create-item-text {
-	  width: 140px;
-	  @extend .heading-5-semibold;
-	}
-  }
+            .create-item-plus-icon {
+                fill: $blue;
+            }
+        }
+        .create-item-text {
+            width: 140px;
+            @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 f97641cbe3..5f8446b9ff 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -1,32 +1,32 @@
 .onboard-header {
-  padding-top: 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  background-color: $tlv-light-gray;
-  margin-bottom: 2px;
-  padding-left: 60px;
-  padding-right: 40px;
-  @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
-  .expandable-input-top {
-	margin-right: 20px;
-	margin-left: auto;
-  }
-  .onboard-header-tabs {
-	display: flex;
-	flex-direction: row;
-	.onboard-header-tab {
-	  @extend .body-1-semibold;
-	  margin-right: 40px;
-	  cursor: pointer;
-	  display: flex;
-	  padding-bottom: 5px;
-	  align-items: flex-end;
-	  &.active {
-		color: $blue;
-		padding-bottom: 2px;
-		border-bottom: 3px solid $blue;
-	  }
-	}
-  }
+    padding-top: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    background-color: $tlv-light-gray;
+    margin-bottom: 2px;
+    padding-left: 60px;
+    padding-right: 40px;
+    @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+    .expandable-input-top {
+        margin-right: 20px;
+        margin-left: auto;
+    }
+    .onboard-header-tabs {
+        display: flex;
+        flex-direction: row;
+        .onboard-header-tab {
+            @extend .body-1-semibold;
+            margin-right: 40px;
+            cursor: pointer;
+            display: flex;
+            padding-bottom: 5px;
+            align-items: flex-end;
+            &.active {
+                color: $blue;
+                padding-bottom: 2px;
+                border-bottom: 3px solid $blue;
+            }
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
index 217098fb97..fa513fb44d 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss
@@ -1,14 +1,14 @@
 .tile {
-  background-color: $white;
-  margin: 9px;
-  width: 204px;
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border: 1px solid $tlv-light-gray;
-  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
-  &:active {
-	border: 1px solid $light-blue;
-  }
+    background-color: $white;
+    margin: 9px;
+    width: 204px;
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    border: 1px solid $tlv-light-gray;
+    @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+    &:active {
+        border: 1px solid $light-blue;
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
index f1af28a0a0..a741764727 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss
@@ -1,21 +1,21 @@
 .vendor-page-header {
-  display: flex;
-  align-items: center;
-  margin-top: 34px;
-  margin-left: 9px;
-  margin-bottom: 29px;
-  .vendor-name {
-	@extend .heading-1;
-	color: $blue;
-	margin-left: 20px;
-	text-transform: uppercase;
-  }
-  .svg-icon-wrapper {
-	padding: 5px 18px 5px 0;
-	.svg-icon.back {
-	  height: 25px;
-	  width: 25px;
-	  fill: $blue;
-	}
-  }
+    display: flex;
+    align-items: center;
+    margin-top: 34px;
+    margin-left: 9px;
+    margin-bottom: 29px;
+    .vendor-name {
+        @extend .heading-1;
+        color: $blue;
+        margin-left: 20px;
+        text-transform: uppercase;
+    }
+    .svg-icon-wrapper {
+        padding: 5px 18px 5px 0;
+        .svg-icon.back {
+            height: 25px;
+            width: 25px;
+            fill: $blue;
+        }
+    }
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index d490fd6e1c..63fb236ec3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,91 +1,91 @@
 @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;
-		line-height: inherit;
-		&:first-letter {
-      text-transform: capitalize;
-    }	
-	}
-	.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;
+    position: relative;
+    .catalog-tile-top {
+        .catalog-tile-item-name {
+            margin-top: 21px;
+            line-height: inherit;
+            &:first-letter {
+                text-transform: capitalize;
+            }
+        }
+        .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;
-	  }
-	}
-  }
+            &.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;
-	}
-  }
-  @media (min-width: 1900px) {
-	@include flipOverlayDirection($itemsInRow: 8);
-  }
-  @media (min-width: 1586px) and (max-width: 1899px) {
-	@include flipOverlayDirection($itemsInRow: 7);
-  }
-  @media (min-width: 1368px) and (max-width: 1585px) {
-	@include flipOverlayDirection($itemsInRow: 6);
-  }
-  @media (max-width: 1367px) {
-	@include flipOverlayDirection($itemsInRow: 5);
-  }
-  @import "vspOverlay";
+    .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;
+        }
+    }
+    @media (min-width: 1900px) {
+        @include flipOverlayDirection($itemsInRow: 8);
+    }
+    @media (min-width: 1586px) and (max-width: 1899px) {
+        @include flipOverlayDirection($itemsInRow: 7);
+    }
+    @media (min-width: 1368px) and (max-width: 1585px) {
+        @include flipOverlayDirection($itemsInRow: 6);
+    }
+    @media (max-width: 1367px) {
+        @include flipOverlayDirection($itemsInRow: 5);
+    }
+    @import 'vspOverlay';
 }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
deleted file mode 100644
index 721a4f3f22..0000000000
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.catalog-tile.license-model-type {
-  .catalog-tile-top {
-    &:hover {
-      //background-color: $purple;
-      //color: $white;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index e0b72bf9ff..e2617b8b04 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -1,74 +1,73 @@
-.vsp-overlay-wrapper{
-  display:flex;
-  align-items: center;
-  position:absolute;
-  left: 68%;
-  top: 14%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 100;
-  .vsp-overlay-list {
-	padding: 0 20px;
-  }
-  .vsp-overlay-arrow {
-	border-style: solid;
-	position: relative;
-	bottom: -18px;
-	border-width: 6px;
-	border-left-width: 2px;
-	border-color: transparent;
-	border-right-color: $light-gray;
-	&:after {
-	  position: absolute;
-	  border-style: solid;
-	  bottom: -10px;
-	  left: -9px;
-	  border-width: 10px;
-	  border-color: transparent;
-	  border-right-color: $white;
-	  content:' ';
-	}
-  }
-  .vsp-overlay {
-	pointer-events: all;
-	width: 205px;
-	cursor: default;
-	background-color: $white;
-	@include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
-	border-radius: 6px;
-	padding: 0 0 10px 0;
-	display: flex;
-	flex-direction: column;
-	margin: 10px 0 10px 0;
-	.vsp-overlay-title {
-	  @extend .heading-5-semibold;
-	  margin-bottom: 15px;
-	  padding: 10px 20px 10px 20px;
-	  background: $highlight-gray;
-		color: $text-black;
-	  text-transform: uppercase;
-	  border-radius: 6px 6px 0 0;
-	}
-	.vsp-overlay-detail{
-	  @extend .body-2;
-	  &:hover {
-		color: $blue;
-	  }
-	  text-transform: none;
-	  @include ellipsis(auto, block);
-	  border-bottom: 1px solid $tlv-light-gray;
-	  cursor: pointer;
-	  padding: 5px 0 5px 0;
-	  &:last-child {
-		border-bottom: none;
-	  }
-	}
-	.vsp-overlay-see-more{
-	  color: $blue;
-	  cursor: pointer;
-	  margin-top: 12px;
-	  align-self:center;
-	}
-
-  }
+.vsp-overlay-wrapper {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 68%;
+    top: 14%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 100;
+    .vsp-overlay-list {
+        padding: 0 20px;
+    }
+    .vsp-overlay-arrow {
+        border-style: solid;
+        position: relative;
+        bottom: -18px;
+        border-width: 6px;
+        border-left-width: 2px;
+        border-color: transparent;
+        border-right-color: $light-gray;
+        &:after {
+            position: absolute;
+            border-style: solid;
+            bottom: -10px;
+            left: -9px;
+            border-width: 10px;
+            border-color: transparent;
+            border-right-color: $white;
+            content: ' ';
+        }
+    }
+    .vsp-overlay {
+        pointer-events: all;
+        width: 205px;
+        cursor: default;
+        background-color: $white;
+        @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25));
+        border-radius: 6px;
+        padding: 0 0 10px 0;
+        display: flex;
+        flex-direction: column;
+        margin: 10px 0 10px 0;
+        .vsp-overlay-title {
+            @extend .heading-5-semibold;
+            margin-bottom: 15px;
+            padding: 10px 20px 10px 20px;
+            background: $highlight-gray;
+            color: $text-black;
+            text-transform: uppercase;
+            border-radius: 6px 6px 0 0;
+        }
+        .vsp-overlay-detail {
+            @extend .body-2;
+            &:hover {
+                color: $blue;
+            }
+            text-transform: none;
+            @include ellipsis(auto, block);
+            border-bottom: 1px solid $tlv-light-gray;
+            cursor: pointer;
+            padding: 5px 0 5px 0;
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+        .vsp-overlay-see-more {
+            color: $blue;
+            cursor: pointer;
+            margin-top: 12px;
+            align-self: center;
+        }
+    }
 }