From 8e9c0653dd6c6862123c9609ae34e1206d86456e Mon Sep 17 00:00:00 2001
From: talig <talig@amdocs.com>
Date: Wed, 20 Dec 2017 14:30:43 +0200
Subject: Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>
---
 openecomp-ui/resources/scss/_components.scss       |   9 +-
 openecomp-ui/resources/scss/_modules.scss          |   4 +
 .../resources/scss/bootstrap-cust/_buttons.scss    |  13 -
 .../resources/scss/bootstrap-cust/_forms.scss      |  20 +-
 .../resources/scss/bootstrap-cust/_modals.scss     |   4 +
 .../resources/scss/bootstrap-cust/_navbar.scss     |   3 -
 .../resources/scss/bootstrap-cust/_navs.scss       |  30 --
 openecomp-ui/resources/scss/bootstrap.scss         |   6 -
 .../resources/scss/bootstrap/_button-groups.scss   |  12 -
 openecomp-ui/resources/scss/common/_base.scss      |   8 +-
 openecomp-ui/resources/scss/common/_layout.scss    |   8 +-
 .../resources/scss/common/_typography.scss         |   8 +-
 openecomp-ui/resources/scss/common/_utils.scss     |   3 +-
 openecomp-ui/resources/scss/common/_variables.scss |  68 +---
 .../resources/scss/components/_activityLog.scss    |   1 +
 .../resources/scss/components/_buttons.scss        |  30 --
 .../resources/scss/components/_commitModal.scss    |  10 +
 .../resources/scss/components/_dropzone.scss       |  23 ++
 .../resources/scss/components/_dualListBox.scss    |   8 +-
 openecomp-ui/resources/scss/components/_forms.scss |   4 +-
 openecomp-ui/resources/scss/components/_grid.scss  | 121 +++----
 openecomp-ui/resources/scss/components/_icon.scss  | 164 ---------
 .../resources/scss/components/_listEditorView.scss |  30 +-
 .../scss/components/_navigationSideBar.scss        |   5 +-
 .../resources/scss/components/_overlay.scss        |  26 ++
 openecomp-ui/resources/scss/components/_tree.scss  |  56 ++++
 .../scss/components/_userNotifications.scss        | 123 +++++++
 .../scss/components/_versionController.scss        | 370 +++++++++++++++------
 .../resources/scss/modules/_entitlementPools.scss  |  33 +-
 .../resources/scss/modules/_featureGroup.scss      |  43 ---
 .../resources/scss/modules/_licenseAgreement.scss  |  38 +--
 .../resources/scss/modules/_licenseKeyGroup.scss   |   5 -
 .../resources/scss/modules/_licenseModel.scss      |  16 +-
 .../scss/modules/_licenseModelOverview.scss        |  23 +-
 .../resources/scss/modules/_mergeEditor.scss       | 207 ++++++++++++
 .../resources/scss/modules/_onboardingCatalog.scss |  33 ++
 .../resources/scss/modules/_permissions.scss       |  55 +++
 .../resources/scss/modules/_revisions.scss         |  86 +++++
 .../modules/_softwareProductAttachmentPage.scss    |  28 +-
 .../modules/_softwareProductComponentGeneral.scss  |   3 -
 .../modules/_softwareProductComponentImage.scss    |  11 +-
 .../modules/_softwareProductComponentNetwork.scss  |  11 +-
 .../_softwareProductComponentProcessesPage.scss    |   3 -
 .../scss/modules/_softwareProductDependencies.scss |  25 +-
 .../scss/modules/_softwareProductDeployment.scss   |  13 +-
 .../scss/modules/_softwareProductLandingPage.scss  |  45 +--
 .../modules/_softwareProductProcessesPage.scss     |  40 +--
 .../_softwareproductComponentLoadBalancing.scss    |   6 -
 .../resources/scss/modules/_uploadScreen.scss      |  14 -
 .../resources/scss/modules/_versionsPage.scss      | 325 ++++++++++++++++++
 .../scss/modules/_vspComponentCompute.scss         |  13 -
 .../scss/modules/_vspComponentMonitoring.scss      |  28 --
 .../scss/modules/_vspComponentQuestionnaire.scss   |   9 +-
 .../modules/onboardingCatalog/_catalogHeader.scss  |   2 +-
 .../modules/onboardingCatalog/_onboardHeader.scss  |   5 +-
 .../modules/onboardingCatalog/_vspOverlay.scss     |   2 +-
 openecomp-ui/resources/scss/onboarding.scss        |  22 ++
 57 files changed, 1457 insertions(+), 854 deletions(-)
 delete mode 100644 openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss
 delete mode 100644 openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss
 delete mode 100644 openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
 delete mode 100644 openecomp-ui/resources/scss/components/_buttons.scss
 create mode 100644 openecomp-ui/resources/scss/components/_commitModal.scss
 delete mode 100644 openecomp-ui/resources/scss/components/_icon.scss
 create mode 100644 openecomp-ui/resources/scss/components/_overlay.scss
 create mode 100644 openecomp-ui/resources/scss/components/_tree.scss
 create mode 100644 openecomp-ui/resources/scss/components/_userNotifications.scss
 create mode 100644 openecomp-ui/resources/scss/modules/_mergeEditor.scss
 create mode 100644 openecomp-ui/resources/scss/modules/_permissions.scss
 create mode 100644 openecomp-ui/resources/scss/modules/_revisions.scss
 create mode 100644 openecomp-ui/resources/scss/modules/_versionsPage.scss

(limited to 'openecomp-ui/resources/scss')

diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index 7c726aa8dd..7f73047c91 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -1,5 +1,4 @@
 @import "components/punchOut";
-@import "components/buttons";
 @import "components/forms";
 @import "components/validationForm";
 @import "components/dualListBox";
@@ -19,6 +18,10 @@
 @import "components/activityLog";
 @import "components/selectActionTable";
 @import "components/datepicker";
+@import "components/tree";
+@import "components/commitModal";
+@import "components/userNotifications";
+@import "components/overlay";
 
 %noselect {
   -webkit-touch-callout: none;
@@ -70,10 +73,6 @@
   }
 }
 
-.warning-icon {
-  margin-left: 50%;
-  color: $yellow;
-}
 
 .chevron::before {
   border-style: solid;
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 405e91a61b..6fe6e30ab6 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -23,4 +23,8 @@
 @import "modules/uploadScreen";
 @import "modules/vspHeatSetup";
 @import "modules/softwareProductDependencies";
+@import "modules/_permissions.scss";
+@import "modules/_revisions.scss";
 @import "modules/softwareProductDeployment";
+@import "modules/versionsPage";
+@import "modules/mergeEditor";
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss b/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss
deleted file mode 100644
index bf58006d89..0000000000
--- a/openecomp-ui/resources/scss/bootstrap-cust/_buttons.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-.btn {
-  height: 30px;
-  min-width: 95px;
-}
-
-.btn-default .fa {
-  color: $brand-primary;
-}
-
-.btn-info {
-  @include button-variant($text-black, $tlv-gray, $light-gray);
-}
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
index 60fd7ab07d..4ec2341011 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
@@ -1,6 +1,7 @@
 .form-group {
   .control-label {
     @extend .body-2-semibold;
+    font-weight: normal;
   }
   &.required {
     label:before {
@@ -28,6 +29,15 @@ label {
   margin-bottom: 8px;
 }
 
+.sdc-radio {
+  label {
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+  input[type="radio"] {
+    margin: 0;
+  }
+}
 select.form-control {
   display: block;
   width: 215px;
@@ -37,7 +47,7 @@ select[multiple] {
   background: none;
 }
 
-input[type="radio"], input[type="checkbox"] {
+input[type="checkbox"] {
   margin: 0;
 
   &:before {
@@ -77,14 +87,6 @@ input[type="radio"], input[type="checkbox"] {
   border-radius: 2px;
 }
 
-input[type=radio]:checked:before {
-  content: "\2022";
-  color: $blue;
-  font-size: 30px;
-  text-align: center;
-  line-height: 11px;
-  font-family: $radio-font-family;
-}
 
 input[type=checkbox]:checked:before {
   font-family: $icon-font-family;
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
index ad6b4f8aca..1f132043ab 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
@@ -11,9 +11,13 @@
     padding: 0;
     .validation-form-content {
       padding: 50px;
+      padding-bottom: 30px;
         overflow-y: auto;
         max-height: 490px;
     }
+    .validation-buttons {
+      padding-right: 50px;
+    }
   }
 
   .modal-footer {
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss
deleted file mode 100644
index acf2024b56..0000000000
--- a/openecomp-ui/resources/scss/bootstrap-cust/_navbar.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.navbar {
-  border: none;
-}
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
deleted file mode 100644
index 914a7794f1..0000000000
--- a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.nav {
-  > li {
-    > a {
-      padding: 10px 10px 3px;
-    }
-  }
-}
-
-.nav-tabs {
-  @include box-shadow(0px 2px 1px -1px $gray);
-  padding: 0 28px;
-
-  > li {
-    @extend .body-1;
-
-    > a {
-      color: $dark-gray;
-      text-transform: uppercase;
-    }
-
-    &.active > a {
-      &,
-      &:hover,
-      &:focus {
-        @extend .body-1-semibold;
-        border-bottom: 3px solid $blue;
-      }
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss
index 777f490a89..32890b35f0 100644
--- a/openecomp-ui/resources/scss/bootstrap.scss
+++ b/openecomp-ui/resources/scss/bootstrap.scss
@@ -20,18 +20,12 @@
 @import "bootstrap-cust/tables";
 @import "bootstrap/forms";
 @import "bootstrap-cust/forms";
-//@import "bootstrap/buttons";
-//@import "bootstrap-cust/buttons";
 // Components
 @import "bootstrap/component-animations";
 @import "bootstrap/dropdowns";
 @import "bootstrap-cust/dropdowns";
 @import "bootstrap/button-groups";
 @import "bootstrap/input-groups";
-@import "bootstrap/navs";
-@import "bootstrap-cust/navs";
-@import "bootstrap/navbar";
-@import "bootstrap-cust/navbar";
 @import "bootstrap/breadcrumbs";
 @import "bootstrap/pagination";
 @import "bootstrap/pager";
diff --git a/openecomp-ui/resources/scss/bootstrap/_button-groups.scss b/openecomp-ui/resources/scss/bootstrap/_button-groups.scss
index dc2906e44f..14ee0d348c 100644
--- a/openecomp-ui/resources/scss/bootstrap/_button-groups.scss
+++ b/openecomp-ui/resources/scss/bootstrap/_button-groups.scss
@@ -92,21 +92,9 @@
   outline: 0;
 }
 
-// Sizing
-//
-// Remix the default button sizing classes into new ones for easier manipulation.
 
-.btn-group-xs > .btn {
-  @extend .btn-xs;
-}
 
-.btn-group-sm > .btn {
-  @extend .btn-sm;
-}
 
-.btn-group-lg > .btn {
-  @extend .btn-lg;
-}
 
 // Split button dropdowns
 // ----------------------
diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss
index e901db000e..ff3a830e6b 100644
--- a/openecomp-ui/resources/scss/common/_base.scss
+++ b/openecomp-ui/resources/scss/common/_base.scss
@@ -11,10 +11,14 @@ body {
   @extend %noselect;
 }
 
+$scrollbar-width: 8px;
+$scrollbar-height: 8px;
+/* firefox */
+$ff-scrollbar-width: 17px;
 /* scrollbar styling for Google Chrome | Safari | Opera */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: $scrollbar-width;
+  height: $scrollbar-height;
 }
 
 ::-webkit-scrollbar-track {
diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss
index dc2a33ccc7..6c6a0cf165 100644
--- a/openecomp-ui/resources/scss/common/_layout.scss
+++ b/openecomp-ui/resources/scss/common/_layout.scss
@@ -26,4 +26,10 @@
   .modal-title {
     text-transform: uppercase;
   }
-}
\ No newline at end of file
+}
+.page-title {
+  @extend .heading-1;
+  @extend .text-uppercase !optional;
+  margin-bottom: 20px;
+  color: $blue;
+}
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 95d6d88595..c4ae856b5f 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -31,9 +31,9 @@ $body-font-2: 13px;
 $body-font-3: 12px;
 $body-font-4: 10px;
 
-$icon-font-size: 11px;
+$icon-font-size: 10px;
 $icon-font-family: Arial;
-$radio-font-family: Arial;
+
 
 .heading-1 {
   @include base-font-light;
@@ -133,10 +133,6 @@ $radio-font-family: Arial;
   font-size: $body-font-3;
 }
 
-.circle-icon-text {
-  @include base-font-semibold;
-  font-size: $body-font-1;
-}
 
 .warning-text {
   color: $yellow;
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index 88a9ece7a8..99b1ff5d9a 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -118,7 +118,6 @@ $browserPrefixes: webkit moz o ms;
   max-height: $lineHeight * $lineCount;
   text-align: justify;
   word-break: break-all;
-  white-space: nowrap;
   // margin-right: -1em;
   padding-right: 1em;
   &:before {
@@ -215,7 +214,7 @@ $browserPrefixes: webkit moz o ms;
   }
 }
 
-@mixin create-circle($size, $bgcolor, $content) {
+@mixin create-circle($size, $bgcolor) {
   border-radius: 50%;
   width: $size;
   height: $size;
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 3a3178c6b0..5125b652ea 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -21,12 +21,10 @@ $white: #ffffff;
 $red: #cf2a2a;
 $crimson: #a94442;
 
-$background-alice-blue: #e5f5fb;
 $background-gray: #f2f2f2;
 $text-black: #191919;
 $link-blue: #056bae;
 $functional-green: #007a3e;
-$functional-yellow: #ffb81c;
 $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
@@ -34,7 +32,7 @@ $highlight-gray: #eceff3;
 
 $content-background-color: $white;
 
-$scroll-bar-color: $text-black;//$light-gray;
+$scroll-bar-color: $text-black;
 $vc-status-text-color: #42b72a;
 
 // sizes
@@ -45,72 +43,8 @@ $tablet-max-width: 1024px;
 $laptop-min-width: 1224px;
 $desktop-min-width: 1824px;
 
-/* Textures */
-$images-folder-name: "../images";
-/*
-$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
-$interface-icon: $images-folder-name + "/interface.svg";
-$sdc-logo: $images-folder-name + "/logo.svg";
-$warning-icon: $images-folder-name + "/warning.svg";
-*/
 
-/* Icons */
-$icons-folder: "../images/icons";
-/*
-$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg";
-$interface-icon: $images-folder-name + "/interface.svg";
-$sdc-logo: $images-folder-name + "/logo.svg";
-$warning-icon: $images-folder-name + "/warning.svg";
-*/
-$pencil-icon: $images-folder-name + "/pencil_icon-01.svg";
-/*
-$vc-check-in-icon: $icons-folder + "/checked_in.png";
-$vc-checkout-icon: $icons-folder + "/checked_out.png";
-$vc-revert-icon: $icons-folder + "/reverticon.png";
-$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png";
-$vc-save-icon: $icons-folder + "/saveicon.png";
-$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png";
-$vc-submit-icon: $icons-folder + "/submiticonactive.png";
-$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png";
-$trash-icon: $images-folder-name + "/trash_icon.png";
-$download-icon: $images-folder-name + "/download_icon.png";
-$upload-icon: $images-folder-name + "/upload_icon.png";
-*/
 
-/*****
-// catalog icons
-$back-icon: $icons-folder + "/back_icon.png";
-// validation icons
-$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png";
-$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png";
-$chevron_down: $icons-folder + "/down_chevron.png";
-$error-icon-lg: $icons-folder + "/error_icon_big.png";
-$error-icon-sm: $icons-folder + "/error_icon_small.png";
-$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png";
-$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png";
-$network-selected-icon: $icons-folder + "/network_blue_icon.png";
-$network-icon: $icons-folder + "/network_icon.png";
-$others-selected-icon: $icons-folder + "/others_blue_icon.png";
-$others-icon: $icons-folder + "/others_icon.png";
-$volume-selected-icon: $icons-folder + "/volume_blue_icon.png";
-$volume-icon: $icons-folder + "/volume_icon.png";
-$warning-icon-lg: $icons-folder + "/warning_icon_big.png";
-$warning-icon-sm: $icons-folder + "/warning_icon_small.png";
-$zip-icon: $icons-folder + "/ZIP_icon.png";
-$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png";
-$heat-icon: $icons-folder + "/nested_heat_icon.png";
-$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png";
-$env-icon: $icons-folder + "/env_icon.png";
-$env-selected-icon: $icons-folder + "/env_icon_blue.png";
 
-// vlm summary icons
 
-$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png";
-$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png";
-$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png";
-$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png";
-$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png";
-$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png";
-$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png";
-*****/
 
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 5e9418ed7d..7a5b77b58c 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -23,6 +23,7 @@ $message-info-icon-size: 16px;
   .list-editor-view-list {
 	border: 1px solid $light-gray;
 	border-bottom: none;
+	overflow-y: hidden;
   }
   .activity-list-item {
 	display: flex;
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
deleted file mode 100644
index 357a799e93..0000000000
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.primary-btn{
-  border: 1px solid;
-  border-color: $blue;
-  color: $blue;
-  @extend .body-1-semibold;
-  text-align: center;
-  padding: 7px;
-  border-radius: 5px;
-  cursor: pointer;
-  align-self: center;
-  background-color: $white;
-  .primary-btn-text {
-    width: 100%;
-  }
-  &:hover {
-    color: $blue;
-    border-color: $blue;
-    background-color: $tlv-hover;
-    &:active {
-      color: $blue;
-      border-color: $blue;
-    }
-  }
-
-  &:focus:not(:hover) {
-    color: $blue;
-    border-color: $blue;
-    background-color: $white;
-  }
-}
diff --git a/openecomp-ui/resources/scss/components/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss
new file mode 100644
index 0000000000..e7f5d28933
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_commitModal.scss
@@ -0,0 +1,10 @@
+
+.comment-commit-form {
+  .commit-modal-text {
+    padding-bottom: 30px;
+  }
+  .validation-buttons .sdc-button-default{
+    min-width: 94px;
+    width: auto;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
index cad752d415..2479ae7f0c 100644
--- a/openecomp-ui/resources/scss/components/_dropzone.scss
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -6,3 +6,26 @@
     opacity: 0.5;
   }
 }
+.file-upload-box {
+  @extend .body-1;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  border: 2px dashed $light-gray;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  width: 382px;
+  align-items: center;
+  .upload-btn {
+    padding: 4px 20px;
+  }
+  .drag-text {
+    color: $blue;
+    @extend .body-1-semibold;
+  }
+  .or-text {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 4353ab39e8..0c7d82e31c 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -8,10 +8,7 @@
 
   .dual-search-multi-select-section {
     flex: 1;
-    .dual-text-box-search-title, .dual-list-box-multi-select-text {
-      @extend .body-1;
-      color: $dark-gray;
-    }
+
     .dual-text-box-search {
       margin: 5px 0 30px 0;
     }
@@ -30,6 +27,9 @@
           padding: 4px 0 4px 10px;
         }
       }
+      option:checked {
+        background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
+      }
     }
   }
   .dual-list-options-bar {
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index b662ce873c..58e843047f 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,8 +1,8 @@
 .section-title {
   @extend .heading-3-semibold;
-  padding: 50px 0 30px 0;
+  padding: 50px 0 20px 0;
   &:first-child {
-    padding: 0 0 30px 0;
+    padding-top: 0;
   }
 }
 
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index 9a76f97546..f210b64df6 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,66 +1,71 @@
-$gridItemSpace: 15%;
-
 .grid-section {
-		&:not(:last-of-type) {
-			padding-bottom: 30px;
-		}
-		.grid-items {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-		}
-
-		%grid-col-base {
-			flex-shrink: 0;
-			display: flex;
-		}
-
-		.grid-item {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-		}
-
-		.grid-item-stretch {
-			@extend .grid-item;
-			& *:last-child {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
+  $gridItemSpace: 15%;
 
-		.grid-col-1 {
-			@extend %grid-col-base;
-			flex-basis: 25%;
-      &:after {
-        flex-basis: $gridItemSpace;
+  @mixin gridCol($numOfCols, $flexBasis) {
+    .#{grid-col- + $numOfCols} {
+      @extend %grid-col-base;
+      flex-basis:  $flexBasis;
+      &:not(.last-col-in-row):after {
+        flex-basis: $gridItemSpace / $numOfCols;
         content: ' ';
       }
-		}
+    }
+  }
 
-		.grid-col-2 {
-			@extend %grid-col-base;
-			flex-basis: 50%;
-      &:after {
-        flex-basis: $gridItemSpace / 2;
-        content: ' ';
-      }
-		}
-		.grid-col-3 {
-			@extend %grid-col-base;
-			flex-basis: 75%;
-      &:after {
-        flex-basis: $gridItemSpace / 3;
-        content: ' ';
+  @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+    .#{grid-col- + $numOfCols} {
+      @extend %grid-col-base;
+      &:not(.last-col-in-row) {
+        flex-basis:  $flexBasis;
+        margin-right: 5%;
       }
-		}
-		.grid-col-4 {
-			@extend %grid-col-base;
-			flex-basis: 100%;
-      &:after {
-        flex-basis: $gridItemSpace / 4;
-        content: ' ';
+      &.last-col-in-row {
+        flex-basis:  $flexBasisLast;
       }
-		}
+    }
+  }
+
+  &:not(:last-of-type) {
+    padding-bottom: 30px;
+  }
+
+  .grid-items {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  %grid-col-base {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .grid-item-stretch {
+    @extend .grid-item;
+    & *:last-child {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &.has-last-col-set {
+    @include gridColWithLastColumn(1, 21%, 22%);
+    @include gridColWithLastColumn(2, 47%, 48%);
+    @include gridColWithLastColumn(3, 73%, 74%);
+    @include gridColWithLastColumn(4, 100%, 100%);
+  }
+
+  &:not(.has-last-col-set) {
+    @include gridCol(1, 25%);
+    @include gridCol(2, 50%);
+    @include gridCol(3, 75%);
+    @include gridCol(4, 100%);
+  }
 }
diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss
deleted file mode 100644
index c80055d055..0000000000
--- a/openecomp-ui/resources/scss/components/_icon.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-$image-icon-normal-size: 20px;
-
-.icon-component {
-  display: inline-flex;
-  align-items: center;
-
-  &.clickable:hover {
-    cursor: pointer;
-  }
-  .icon-label {
-    color: $blue;
-  }
-  &.disabled {
-    .icon-label {
-      color: $tlv-light-gray;
-			opacity: 0.7;
-    }
-  }
-  .icon {
-    width: $image-icon-normal-size;
-    height: $image-icon-normal-size;
-    margin: 0 6px;
-    background-repeat: no-repeat;
-
-    &.trash {
-      background-image: url($trash-icon);
-    }
-
-    &.artifacts {
-      background-image: url($artifacts-icon);
-    }
-
-    &.base {
-      background-image: url($base-module-icon);
-    }
-
-    &.module {
-      background-image: url($module-icon);
-    }
-
-    &.pencil {
-      background-image: url($pencil-icon);
-    }
-
-    &.check {
-      background-image: url($check-icon);
-      width: 30px;
-      height: 30px;
-    }
-
-    &.download {
-      background-image: url($download-icon);
-      width: 16px;
-      height: 14px;
-    }
-
-    &.upload {
-      background-image: url($upload-icon);
-      width: 16px;
-      height: 14px;
-    }
-    &.validation-artifacts {
-      width: 13px;
-      height: 17px;
-      position: relative;
-      top: 3px;
-      background-image: url($artifacts-regular-icon);
-      &.selected {
-        background-image: url($artifacts-selected-icon);
-      }
-    }
-    &.network {
-      background-image: url($network-icon);
-      width: 12px;
-      height: 12px;
-      &.selected {
-        background-image: url($network-selected-icon);
-      }
-    }
-    &.validation-other {
-      background-image: url($others-icon);
-      width: 12px;
-      height: 12px;
-      &.selected {
-        background-image: url($others-selected-icon);
-      }
-    }
-    &.volume {
-      width: 15px;
-      height: 16px;
-      background-image: url($volume-icon);
-      &.selected {
-        background-image: url($volume-selected-icon);
-      }
-    }
-    &.zip {
-      background-image: url($zip-icon);
-      height: 23px;
-      width: 29px;
-      &.selected {
-        background-image: url($zip-selected-icon);
-      }
-    }
-    &.heat {
-      background-image: url($heat-icon);
-      height: 14px;
-      width: 16px;
-      &.selected {
-        background-image: url($heat-selected-icon);
-      }
-    }
-    &.env {
-      background-image: url($env-icon);
-      height: 15px;
-      width: 16px;
-      &.selected {
-        background-image: url($env-selected-icon);
-      }
-    }
-    &.error {
-      width: 14px;
-      min-width: 14px;
-      height: 14px;
-      background-image: url($error-icon-sm);
-    }
-    &.warning {
-      height: 13px;
-      width: 15px;
-      min-width: 15px;
-      background-image: url($warning-icon-sm);
-    }
-    &.error-lg {
-      width: 17px;
-      min-width: 17px;
-      height: 17px;
-      background-image: url($error-icon-lg);
-    }
-    &.warning-lg {
-      width: 19px;
-      min-width: 19px;
-      height: 17px;
-      background-image: url($warning-icon-lg);
-    }
-    &.chevron-up {
-      background-image: url($chevron_down);
-      transform: rotate(180deg);
-      height: 7px;
-      width: 11px;
-    }
-    &.chevron-down {
-      background-image: url($chevron_down);
-      height: 7px;
-      width: 11px;
-    }
-    &.go-to-overview {
-      background-image: url($go-to-overview-icon);
-      height: 15px;
-      width: 18px;
-      &.disabled {
-        background-image: url($go-to-overview-disabled-icon);
-      }
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index c3e9fa6081..354a6a1f70 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -17,27 +17,6 @@
     .list-editor-view-title {
       @extend .heading-3-semibold;
     }
-    .list-editor-view-add-controller {
-      @extend .body-1-semibold;
-      color: $blue;
-      display: table;
-      cursor: pointer;
-      position: relative;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-left: auto;
-      .list-editor-view-add-title {
-        display: flex;
-      }
-      span {
-        display: table-cell;
-        vertical-align: middle;
-        margin-top:4px;
-        &:nth-child(2) {
-          padding-left: 10px;
-        }
-      }
-    }
   }
 
   .list-editor-view-list-scroller {
@@ -68,9 +47,6 @@
           overflow-wrap: break-word;
           white-space: initial;
 
-          .description {
-            @include multiline-ellipsis(1.3em, 3);
-          }
 
           .number-field {
             align-content: center;
@@ -82,6 +58,9 @@
               line-height: 0.9;
             }
           }
+          .description {
+            @include multiline-ellipsis(1.3em, 3);
+          }
           .text {
             @extend .body-1;
           }
@@ -105,9 +84,8 @@
           }
         }
         .svg-icon {
+          margin-top: 5px;
           transition: fill .3s;
-          height: 18px;
-          width: 18px;
           fill: $white;
         }
       }
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index daf5025bee..ab4d15fd90 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -18,9 +18,10 @@
       .group-name {
         @extend .heading-4-semibold;
         @include ellipsis;
-        min-height: 56px;
+        min-height: 70px;
         display: block;
-        padding: 18px 12px 13px 40px;
+        height: 70px;
+        padding: 24px 12px 13px 40px;
         background-color: $white;
         border-bottom: 1px solid $tlv-light-gray;
       }
diff --git a/openecomp-ui/resources/scss/components/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss
new file mode 100644
index 0000000000..7c310bf1a6
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_overlay.scss
@@ -0,0 +1,26 @@
+.onboarding-overlay {
+  z-index: 1000;
+  border: 1px solid $light-gray;
+  position: absolute;
+  background-color: $white;
+  border-radius: 2px;
+  box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-top: 5px;
+  margin-left: -86px;
+  .arrow-up {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    background-color: transparent;
+    border-bottom: 5px solid $blue;
+    margin-left: 114px;
+    margin-top: -5px;
+  }
+  .arrow-border {
+    border-top: 5px solid $blue;
+  }
+}
\ No newline at end of file
diff --git a/openecomp-ui/resources/scss/components/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss
new file mode 100644
index 0000000000..e03594ee64
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_tree.scss
@@ -0,0 +1,56 @@
+
+.tree-view {
+	overflow: hidden;
+
+	&.scrollable {
+		overflow: auto;
+	}
+
+	.node {
+		text-shadow: none;
+		stroke: none;
+
+		.outer-circle {
+			stroke: $blue;
+			stroke-width: 2px;
+			fill: $white;
+		}
+
+		.inner-circle {
+			fill: $blue;
+		}
+
+		text {
+			text-anchor: end;
+			@extend .body-2-semibold;
+			fill: $blue;
+		}
+
+		&.clickable {
+			cursor: pointer;
+		}
+
+		&.selectedNode {
+			.outer-circle {
+				fill: $blue;
+			}
+
+			.inner-circle {
+				fill: $blue;
+			}
+
+			text {
+				fill: $blue;
+			}
+		}
+	}
+
+
+	.link {
+		fill: none;
+		stroke: $dark-gray;
+		stroke-opacity: 0.4;
+		stroke-width: 1.5px;
+	}
+
+}
diff --git a/openecomp-ui/resources/scss/components/_userNotifications.scss b/openecomp-ui/resources/scss/components/_userNotifications.scss
new file mode 100644
index 0000000000..74cafae438
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -0,0 +1,123 @@
+
+.onboarding-notifications {
+  margin-left: 10px;
+  .notifications-icon {
+    display: flex;
+    @extend .clickable;
+    .notifications-count {
+      color: $white;
+      font-size: 11px;
+      text-align: center;
+      width: 16px;
+      height: 16px;
+      background-color: $orange;
+      border-radius: 50%;
+      position: relative;
+      right: 7px;
+      top: -2px;
+      &.hidden-count {
+        background-color: transparent;
+        color: transparent;
+      }
+    }
+  }
+  .onboarding-overlay {
+    width: 520px;
+    right: 39px;
+    margin-top: 18px;
+    .arrow-up {
+      margin-left: 487px;
+    }
+
+    .user-notifications {
+      .notifications-title {
+        color: $blue;
+        @extend .heading-5-semibold;
+        @extend .text-uppercase !optional;
+        padding: 13px 20px 10px 20px;
+        border-bottom: 1px solid $tlv-light-gray;
+      }
+      .notifications-list {
+        max-height: 600px;
+        overflow-y: auto;
+        .notification {
+          border-bottom: 1px solid $tlv-light-gray;
+          padding: 16px 20px 18px 20px;
+          display: flex;
+          &.unread {
+            background-color: lighten($gray, 38%);
+            .item-name {
+              display: flex;
+              @include base-font-bold;
+            }
+            .unread-circle-icon {
+              width: 8px;
+              height: 8px;
+              border-radius: 50%;
+              background-color: $blue;
+              align-self: center;
+              margin-bottom: 3px;
+              margin-left: 9px;
+            }
+          }
+          .notification-data {
+            width: 366px;
+            margin-right: 30px;
+            color: $dark-gray;
+            .item-name {
+              @extend .body-2-semibold;
+              @extend .text-uppercase !optional;
+              margin-bottom: 6px;
+            }
+            .flex-items {
+              display: flex;
+              margin: 6px 0 11px 0;
+              @extend .body-3;
+              line-height: 20px;
+              @extend .text-uppercase !optional;
+              color: $gray;
+              .separator {
+                border-left: 1px solid $dark-gray;
+                margin: 5px 8px;
+              }
+            }
+            .description {
+              @extend .body-3;
+              margin: 11px 0 8px 0;
+              .more-less {
+                font-size: $icon-font-size;
+                color: $blue;
+              }
+            }
+            .date {
+              font-size: $icon-font-size;
+              @include base-font-regular;
+              color: $gray;
+              margin-top: 8px;
+            }
+          }
+
+          .notification-action .action-button {
+            @extend .clickable;
+            width: 74px;
+            height: 28px;
+            color: $white;
+            background-color: $blue;
+            border-radius: 2px;
+            text-align: center;
+            line-height: 2;
+            margin-top: 4px;
+            &.active {
+              background-color: #0091c7;
+              border: solid 1px #006186;
+            }
+            &:hover {
+              background-color: #1ec2ff;
+              border: solid 1px #0091c8;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 57610986c3..11e5b41675 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,102 +1,272 @@
 .version-controller-bar {
-  display: flex;
-  min-height: 57px;
-  border-bottom: 1px solid $tlv-light-gray;
-  background-color: transparent;
-  .vc-container {
-    display: flex;
-    flex: 1;
-    align-self: center;
-    background-color: transparent;
-    justify-content: space-between;
-    padding-left: 16px;
-    padding-right: 40px;
-    .version-status-container {
-      display: flex;
-      height: 30px;
-      .version-selector {
-        border: none;
-        margin-top: 7px;
-        padding-right: 10px;
-        margin-right: 15px;
-        margin-left: 10px;
-        @extend .body-1;
-      }
-      .version-section {
-        .form-group {
-          margin-right: 20px;
-          .input-options {
-            border: none;
-            .input-options-select {
-              padding-top: 4px;
-            }
-          }
-        }
-      }
-      .vc-status {
-        display: flex;
-        padding-left: 20px;
-        border-left: $light-gray thin solid;
-        .status-text {
-          align-self: center;
-          margin-top: 2px;
-          @extend .heading-5;
-          color: $dark-gray;
-        }
-      }
-    }
-    .save-submit-cancel-container {
-      display: flex;
-      height: 30px;
-      .action-buttons {
-        display: flex;
-        padding: 0 13px;
-        .version-control-buttons {
-          display: flex;
-        }
-        .action-buttons-svg {
-          padding-top: 5px;
-          margin-right: 20px;
-          padding-bottom: 5px;
-
-
-          .svg-icon {
-            fill: $dark-gray;
-            &:hover {
-              fill: $black;
-            }
-            &.__versionControllerLockClosed {
-              margin-top: -3px;
-            }
-            &.__versionControllerLockOpen {
-              margin-top: -6px;
-            }
-            &.__versionControllerSubmit {
-              fill: $blue;
-              &:hover {
-                fill: $dark-blue;
-              }
-              &.disabled {
-                fill: $dark-gray;
-              }
-            }
-          }
-          }
-
-
-
-
-      }
-      .vc-nav-item-close {
-        display: flex;
-        padding-left: 18px;
-        padding-top: 3px;
-        align-self: center;
-        @extend .body-1;
-        color: $gray;
-        cursor: pointer;
-        border-left: $gray thin solid;
-      }
-    }
-  }
+	display: flex;
+	min-height: 70px;
+	border-bottom: 1px solid $tlv-light-gray;
+	background-color: transparent;
+
+	.vc-container {
+		display: flex;
+		flex: 1;
+		align-self: center;
+		background-color: transparent;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: 16px;
+		padding-right: 40px;
+
+		.vc-separator {
+			border-left: 1px solid $tlv-light-gray;
+			height: 37px;
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+
+		.version-status-container {
+			display: flex;
+			height: 30px;
+
+			.version-selector-more-versions {
+				color: $blue;
+				cursor: pointer;
+			}
+
+			.version-selector {
+				margin-top: 0px;
+				padding-right: 10px;
+				margin-right: 15px;
+				margin-left: 10px;
+				border-color: $light-gray;
+				border-radius: 2px;
+				width: 243px;
+				height: 30px;
+				@extend .body-1;
+			}
+
+			.version-section {
+				.form-group {
+					margin-right: 20px;
+
+					.input-options {
+						border: none;
+
+						.input-options-select {
+							padding-top: 4px;
+						}
+					}
+				}
+			}
+
+			.vc-status {
+				display: flex;
+				padding-left: 20px;
+				border-left: $light-gray thin solid;
+
+				.status-text {
+					align-self: center;
+					margin-top: 2px;
+					@extend .heading-5;
+					color: $dark-gray;
+				}
+			}
+		}
+
+		.save-submit-cancel-container {
+			display: flex;
+			align-items: center;
+			height: 100%;
+
+			.action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section {
+				display: flex;
+				align-items: center;
+				height: 100%;
+
+				.vc-submit-button {
+					border: 1px solid $dark-gray;
+					width: 94px;
+					height: 30px;
+					border-radius: 2px;
+					padding-top: 5px;
+					padding-left: 10px;
+					margin-left: 10px;
+					margin-right: 10px;
+
+					&:hover:not(.disabled) {
+						cursor: pointer;
+						background-color: $tlv-light-gray;
+					}
+
+					&.disabled {
+						border-color: $light-gray;
+					}
+
+					.vc-v-submit {
+						width: 11px;
+						height: 8px;
+						margin-right: 10px;
+						position: relative;
+						top: -1px;
+					}
+				}
+
+				.version-control-buttons {
+					display: flex;
+				}
+
+				.action-button-wrapper {
+					display: flex;
+					align-items: center;
+					height: 70px;
+
+					&:hover:not(.disabled) {
+						background-color: $tlv-light-gray;
+					}
+
+					&:active:not(.disabled) {
+						background-color: $light-gray;
+					}
+
+					.action-buttons-svg {
+						padding-left: 10px;
+						padding-right: 10px;
+
+						.svg-icon {
+							fill: $text-black;
+							height: 20px;
+
+							&, &.__version-controller-save { width: 20px; }
+							&.__version-controller-permissions { width: 32px; }
+							&.__version-controller-undo, &.__version-controller-revert { width: 20px; }
+							&.__version-controller-sync, &.__version-controller-commit { width: 28px; }
+						}
+					}
+
+					.version-controller-permissions {
+						width: 32px;
+						height: 20px;
+						fill: $dark-gray;
+					}
+				}
+
+				.action-button-label {
+					display: block;
+					font-size: $icon-font-size;
+					font-family: $icon-font-family;
+					height: 1em;
+					margin-top: 5px;
+					margin-bottom: 0;
+				}
+
+				.onboarding-overlay {
+					margin-top: -6px;
+					.permissions-overlay {
+						width: 237px;
+
+						.permissions-overlay-header {
+							text-align: left;
+							color: $blue;
+							padding-bottom: 15px;
+							padding-top: 15px;
+							border-bottom: 1px solid $light-gray;
+							.permissions-overlay-header-title {
+								margin-left: 20px;
+							}
+						}
+						.permissions-overlay-content {
+							max-height: 290px;
+							overflow-y: auto;
+							padding-left: 10px;
+							padding-right: 10px;
+							.contributor {
+								&:last-child {
+									border-bottom: none;
+								}
+								border-bottom: 1px solid $tlv-light-gray;
+								.contributor-content {
+									padding-top: 12px;
+									padding-bottom: 10px;
+									margin-left: 10px;
+									display: flex;
+									.contributor-icon-circle {
+										&.selected {
+											border: 1px solid $blue;
+										}
+
+										border-radius: 65px;
+										padding: 2px;
+										width: 32px;
+										height: 32px;
+										margin-top: 4px;
+										.contributer-icon {
+											width: 26px;
+											border-radius: 50px;
+											height: 26px;
+											margin-top: 0px;
+											.__user {
+												height: 18px;
+												width: 16px;
+												stroke: $blue;
+												fill: transparent;
+												margin-left: 5px;
+												margin-top: 3px;
+											}
+											&.selected {
+												border: 1px solid $blue;
+												background-color: $blue;
+												.__user {
+													stroke: $white;
+													margin-left: 4px;
+												}
+											}
+										}
+									}
+
+									.contributer-info {
+										padding-left: 11px;
+										.contributer-name {
+											@extend .body-2-semibold;
+											text-transform: uppercase;
+											color: $dark-gray;
+										}
+										.contributer-role {
+											@extend .body-3;
+											color: $gray;
+											display: flex;
+											text-transform: lowercase;
+											p:first-letter {
+												text-transform: uppercase;
+											}
+											justify-content: space-between;
+										}
+									}
+								}
+							}
+						}
+						.permissions-overlay-footer {
+							.manage-permissions-btn {
+								@extend .body-2-semibold;
+								margin-top: 20px;
+								padding-top: 10px;
+								padding-bottom: 10px;
+								color: $blue;
+								text-align: center;
+								cursor: pointer;
+								background-color: $tlv-gray;
+							}
+						}
+
+					}
+				}
+			}
+		}
+		.vc-nav-item-close {
+			display: flex;
+			padding-left: 18px;
+			padding-top: 3px;
+			align-self: center;
+			@extend .body-1;
+			color: $gray;
+			cursor: pointer;
+			border-left: $gray thin solid;
+		}
+	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index ad0bb77e8d..d9919c27e3 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,51 +1,22 @@
 
 .entitlement-pools-list-editor {  
-  .list-editor-view-list {
-    .list-editor-item-view {
-      min-height: 110px;
-      height: 110px;
-    }
     .list-editor-item-view-field {
 
-      .entitlement-pools-count, .contract-number, .type{
-        color: $purple;
-      }
       .entitlement-pools-count {
         @extend .heading-1;
-        margin-top: -10px;
-
-      }
+      color: $purple;
     }
   }
 }
 
 .entitlement-pools-modal {
-  .modal-body {
-    padding: 0;
-  }
-	.sdc-tab-content {
-		margin: 0;
-	}
   .entitlement-pools-form {
-		.threshold-section {
+    .threshold-section, .date-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 {
-    padding: 20px 50px;
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 5f98ed2c05..cf681b8758 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -37,48 +37,5 @@
   }
 }
 
-.feature-group-modal {
-  .modal-body {
-    padding: 0;
-  }
-  .feature-group-form {
-    .no-items-msg {
-      margin-top: 55px;
-      color: $dark-gray;
-    }
-		.validation-form-content {
-			padding: 0;
-		}
 
-		.nav.nav-tabs {
-			padding-left: 50px;
-		}
 
-    .tab-content {
-      padding: 50px;
-      .field-section {
-        @extend .body-2-semibold;
-        margin-bottom: 23px;
-        width: 400px;
-        color: $black;
-      }
-      .description-field {
-        height: 170px;
-      }
-      .list-editor-item-view-content {
-        white-space: nowrap;
-        overflow: hidden;
-        > div {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          &:not(:last-of-type) {
-            margin-right: 24px;
-          }
-        }
-      }
-    }
-    .validation-buttons {
-      padding: 20px 50px;
-    }
-  }
-}
diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
index 7a7b87677e..579e9bab2b 100644
--- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss
@@ -2,10 +2,6 @@
 .license-agreement-list-editor {
 
   .list-editor-view-list {
-    .list-editor-item-view {
-      min-height: 110px;
-      height: 110px;
-    }
     .list-editor-item-view-field {
       .list-editor-item-view-field-tight {
         vertical-align: top;
@@ -17,46 +13,14 @@
           overflow-wrap: break-word;
         }
       }
-      .feature-groups-count, .contract-number, .type {
+      .feature-groups-count, .type {
         color: $light-green;
       }
       .feature-groups-count {
         @extend .heading-1;
         padding-top: 2px;
-        text-align: center;
-      }
-      .contract-number {
-        margin-bottom: 8px;
       }
-    }
-  }
-}
 
-.license-agreement-modal {
-  .modal-body {
-    padding: 0;
-  }
-  .license-agreement-form {
-    .no-items-msg {
-      margin-top: 55px;
-      color: $dark-gray;
-    }
-    .tab-content {
-      padding: 50px;
-      .list-editor-item-view-content {
-        white-space: nowrap;
-        overflow: hidden;
-        > div {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          &:not(:last-of-type) {
-            margin-right: 24px;
-          }
-        }
-      }
-    }
-    .validation-buttons {
-      padding: 20px 50px;
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index d072849c08..bcb6abc83d 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -1,16 +1,11 @@
 .license-key-groups-list-editor {
   .list-editor-view-list {
-    .list-editor-item-view {
-      min-height: 110px;
-      height: 110px;
-    }
     .list-editor-item-view-field {
 
       .operational-scope, .type {
         color: $orange;
       }
       .operational-scope {
-        margin-bottom: 0px;
         @include ellipsis;
       }
     }
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index fab091fe67..e93ea989fd 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -6,9 +6,6 @@
 		border-bottom: none;
 		padding-bottom: 30px;
 	}
-  .modal-body {
-    padding: 0;
-  }
 	.sdc-tabs-list {
 		padding-left: 50px;
 		border-bottom: 1px solid $tlv-light-gray;
@@ -25,10 +22,7 @@
 		text-align: end;
 	}
 	.license-model-form {
-    .validation-form-content {
-      padding: 20px 50px;
-		}
-    .validation-buttons {
+		.validation-form-content, .validation-buttons {
       padding: 20px 50px;
     }
 		&.license-agreement-form, &.feature-group-form {
@@ -51,3 +45,11 @@
     }
 	}
 }
+.license-model-list-editor {
+	.list-editor-view-list {
+		.list-editor-item-view {
+			min-height: 110px;
+			height: 110px;
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 9246b5fcbf..21c5bd8007 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -4,17 +4,14 @@ $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;
+@mixin overview-tile-shadow() {
+  @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+}
 
 .license-model-overview {
   .overview-top-section {
@@ -185,11 +182,8 @@ $lkg-ep-color: $light-blue;
             width: 100%;
           }
           .svg-icon-wrapper {
-
             .svg-icon {
               &.__plusCircle {
-                width: 20px;
-                height: 20px;
                 margin-top: 3px;
                 margin-left: auto;
                 fill: $dark-gray;
@@ -197,7 +191,8 @@ $lkg-ep-color: $light-blue;
                   fill: $blue;
                 }
               }
-          }
+            }
+
           }
 
           .summary-name-and-count {
@@ -406,7 +401,7 @@ $lkg-ep-color: $light-blue;
           &.vlm-list-item-la {
             margin-top: 10px;
             .la-icon {
-              @include create-circle($circle-icon-size,$la-color,'LA');
+              @include create-circle($circle-icon-size, $la-color);
               color: $white;
 						}
 						.vlm-list-item-title {
@@ -439,7 +434,7 @@ $lkg-ep-color: $light-blue;
 							margin-left: 29px;
 						}
             .fg-icon {
-              @include create-circle($circle-icon-size,$fg-color,'FG');
+              @include create-circle($circle-icon-size, $fg-color);
               color: $white;
 						}
 
@@ -467,7 +462,7 @@ $lkg-ep-color: $light-blue;
             margin-top: 10px;
             cursor: default;
             .ep-icon {
-              @include create-circle($circle-icon-size,$lkg-ep-color,'EP');
+              @include create-circle($circle-icon-size, $lkg-ep-color);
               color: $white;
 						}
 						.vlm-list-item-title {
@@ -490,7 +485,7 @@ $lkg-ep-color: $light-blue;
             margin-left: $list-indentation * 2;
             cursor: default;
             .lkg-icon {
-              @include create-circle($circle-icon-size,$lkg-ep-color,'KG');
+              @include create-circle($circle-icon-size, $lkg-ep-color);
               color: $white;
 						}
 						.vlm-list-item-title {
diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
new file mode 100644
index 0000000000..96648dd20f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss
@@ -0,0 +1,207 @@
+$yours-bg-color: $tlv-gray;
+$theirs-bg-color: $tlv-light-gray;
+$error-text-color: $red;
+$selected-width: 1px;
+$selected-color: $blue;
+
+@mixin levels {
+	@for $i from 1 to 6 {
+		.level-#{$i} {
+			padding-left: 18px + 10 * $i;
+		}
+	}
+}
+
+.merge-editor-modal {
+	.modal-lg {
+		width: 1300px;
+	}
+}
+
+.merge-editor {
+	margin: 30px 40px;
+	max-height: 600px;
+	border: 1px solid $light-gray;
+	.grid-section {
+		&.conflict-titles-section {
+			@extend .body-1;
+			background-color: $blue;
+			height: 33px;
+			padding-top: 6px;
+			padding-bottom: 3px;
+			color: $white;
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			border-bottom: 1px solid $tlv-light-gray;
+			.grid-item {
+				padding-left: 10px;
+			}
+			.form-group {
+				margin-bottom: 0;
+				.checkbox {
+					label {
+						margin-right: 0;
+					}
+
+					text-align: right;
+
+					input[type="checkbox"] {
+						cursor: pointer;
+						margin-top: 1px;
+					}
+				}
+			}
+		}
+	}
+	.merge-editor-body {
+		max-height: 500px;
+		overflow-y: scroll;
+		padding: 10px;
+		.conflict-section {
+			margin-bottom: 0;
+			border-left: 0;
+			border-right: 0;
+			padding: 5px 0;
+
+			.conflict-resolve-btn {
+				align-self: flex-end;
+			}
+
+			.grid-items {
+				align-items: center;
+
+				input[type="radio"]:not(:checked) {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.collapsible-section {
+			display: flex;
+			cursor: pointer;
+
+			.conflict-title {
+				@extend .heading-5-semibold;
+				text-transform: uppercase;
+			}
+		}
+
+		.merge-chevron {
+			margin-right: 7px;
+			&.right {
+				transform: rotate(90deg);
+			}
+		}
+
+		.grid-section .grid-items .field-col:not(.grid-col-title) {
+			&.grid-col-yours {
+				border-top: $selected-width solid $yours-bg-color;
+				border-bottom: $selected-width solid $yours-bg-color;
+			}
+
+			&.theirs-color {
+				border-top: $selected-width solid $theirs-bg-color;
+				border-bottom: $selected-width solid $theirs-bg-color;
+			}
+		}
+
+		.merge-editor-text-field {
+			display: flex;
+			justify-content: space-between;
+			// margin: 0 0 10px 0;
+			margin: 0;
+
+			.field {
+				color: $text-black;
+
+				&.field-name:not(.field-object-name) {
+					color: $gray;
+				}
+			}
+
+			&.diff {
+				.field {
+					color: $red;
+				}
+			}
+
+			&.grid-section {
+				padding-bottom: 0;
+
+				.grid-items {
+					flex: 1;
+
+
+					.field-col {
+						padding: 7px 0;
+						height: 100%;
+
+						&:not(:first-child) {
+							padding-left: 8px;
+						}
+
+						&.grid-col-yours {
+							background-color: $yours-bg-color;
+						}
+
+						&.grid-col-theirs {
+							background-color: $theirs-bg-color;
+						}
+
+						@include levels;
+
+
+						.field {
+							@extend .body-1;
+							flex: 2;
+							min-width: 0;
+
+							&.field-name {
+								@include multiline-ellipsis($bgColor: white);
+								&.diff {
+									color: $red;
+								}
+								text-transform: uppercase;
+								&.field-object-name {
+									@extend .body-1-semibold;
+									margin-bottom: 5px;
+									margin-top: 10px;
+
+								}
+							}
+
+							&.field-yours {
+								@include multiline-ellipsis($bgColor: $yours-bg-color);
+							}
+
+							&.field-theirs {
+								@include multiline-ellipsis($bgColor: $theirs-bg-color);
+							}
+							&.field-name, &.field.field-yours, &.field.field-theirs {
+								word-break: break-word;
+								text-align: initial;
+							}
+							&.empty-field {
+								padding-top: 2px;
+							}
+						}
+
+						*::after {
+							bottom: 0;
+						}
+					}
+				}
+			}
+
+			&.field-error {
+				@extend .body-1;
+				color: $error-text-color;
+				min-width: 0;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
index 6c56d11049..4fb0f7c99e 100644
--- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
+++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss
@@ -8,6 +8,7 @@ $transitionLength: 0.6s;
 	@import "onboardingCatalog/catalogHeader";
 	@import "onboardingCatalog/vendorPageHeader";
 	@import "onboardingCatalog/catalogList";
+	@import "onboardingCatalog/vspOverlay";
 	.catalog-wrapper {
 		height: 100%;
 		overflow: auto;
@@ -19,6 +20,38 @@ $transitionLength: 0.6s;
 		.catalog-list {
 			overflow: hidden;
 			height: auto;
+			.sdc-tile {
+				margin: 9px;
+				.sdc-tile-header {
+					position: initial;
+					display: block;
+					flex-shrink: initial;
+					align-items: initial;
+					flex-direction: initial;
+				}
+				.sdc-tile-content {
+					position: initial;
+					flex: initial;
+					display: flex;
+					align-items: initial;
+					flex-direction: column;
+					justify-content: space-between;
+					overflow: initial;
+					.sdc-tile-info-line {
+						.with-overlay {
+							line-height: 1.2em;
+							@include ellipsis($width: initial, $max-width: 100%);
+						}
+					}
+				}
+				.sdc-tile-footer {
+					position: initial;
+					flex-shrink: initial;
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+				}
+			}
 		}
 	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss
new file mode 100644
index 0000000000..e652d9d82f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_permissions.scss
@@ -0,0 +1,55 @@
+.modal-content {
+	.modal-body {
+		.manage-permissions-page {
+			.validation-form-content {
+				overflow-y: visible;
+			}
+
+			.manage-permissions-title {
+				@extend .body-1-semibold;
+				margin-bottom: 10px;
+			}
+			.owner-details {
+				@extend .body-2;
+				display: flex;
+				margin-bottom: 30px;
+				.change-owner {
+					margin-left: auto;
+					color: $blue;
+					cursor: pointer;
+					&:hover {
+						color: $dark-blue;
+					}
+				}
+			}
+			.change-owner-wrapper {
+				.form-group {
+					margin-bottom: 30px;
+				}
+
+			}
+			.change-owner-title {
+				display: flex;
+				align-items: center;
+				margin-bottom: 10px;
+				.manage-permissions-title {
+					margin-bottom: 0;
+				}
+				.svg-icon-wrapper {
+					margin-left: 5px;
+					.svg-icon {
+						width: 13px;
+						height: 13px;
+						fill: $dark-gray;
+					}
+				}
+			}
+			.contributors-select {
+				.Select-menu {
+					max-height: 150px;
+					overflow-y: auto
+				}
+			}
+		}
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss
new file mode 100644
index 0000000000..2b196c132c
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_revisions.scss
@@ -0,0 +1,86 @@
+.manage-revisions-modal {
+  .modal-dialog {
+    width: 700px;
+  }
+  .modal-content {
+    .modal-body {
+      .validation-form-content {
+        padding-top: 30px;
+      }
+      //.selected {
+      //  .selectable {
+      //    border-color: $light-blue;
+      //  }
+      //  .selectable:hover{
+      //    border-color: hotpink;
+      //  }
+      //}
+
+      .revision-list-item {
+        &.selected {
+          .selectable, .selectable:hover {
+            border-width: 2px;
+            border-color: $light-blue;
+          }
+        }
+        .selectable:hover{
+          border-color: $gray;
+        }
+        .selectable:active {
+          border-color: $light-blue;
+        }
+      }
+
+      .list-editor-view-list-scroller {
+        margin-top : 0px;
+      }
+
+      .list-editor-view-header {
+        border-bottom: none;
+        .list-editor-view-title {
+          @extend .heading-5;
+          text-transform: none;
+          color: $blue;
+        }
+      }
+
+      .list-editor-item-view-content {
+        background-color: $background-gray;
+      }
+      .revision-list-item-fields {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        .revision-user {
+          flex-basis: 50%;
+          fill: transparent;
+          stroke: $blue;
+          .svg-icon-label {
+            margin-left: 13px;
+          }
+        }
+
+        .revision-date {
+          flex-basis: 50%;
+          text-align: right;
+          @extend .body-3;
+          color: $gray;
+          .revision-time {
+            margin-left: 5px;
+          }
+        }
+
+        .revision-message {
+          flex-basis: 100%;
+          margin-top: 5px;
+          @extend .body-2;
+          .more-less {
+            @extend .body-3;
+            color: $blue;
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index c8d8cf4e0b..0ae3f00a29 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -1,21 +1,25 @@
 
 .vsp-attachments-view {
   position: relative;
-  #attachments-tabs {
-    .nav-tabs {
+  .attachments-tabs {
+    .sdc-tabs-list {
+      padding-left: 28px;
       background-color: $tlv-gray;
       box-shadow: none;
       border-bottom: 1px solid $light-gray;
-      & > li {
-        & > a {
+      .sdc-tab {
           @extend .heading-2;
-          padding-left: 0;
-          padding-right: 0;
-          margin-right: 40px;
-        };
-        &.active > a {color: $blue;};
+        padding-top: 10px;
+        margin-top: 0;
+        &.sdc-tab-active {
+          color: $blue;
+          font-weight: bold;
+        }
       }
     }
+    .sdc-tab-content {
+      margin-top: 0;
+    }
   }
   .attachments-view-controllers {
     position: absolute;
@@ -91,6 +95,11 @@
       z-index: 1;
       padding-right: 20px;
       .counter {
+        .svg-icon {
+          &.__exclamationTriangleLine {
+            fill: $orange;
+          }
+        }
         display: flex;
         &:first-child {
           margin-right: 20px;
@@ -215,6 +224,7 @@
         .svg-icon {
           width: 20px;
           height: 20px;
+          fill: $orange;
         }
       }
       .error-item-file-type {
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index 6c5bcee03c..d31c7f0b92 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -10,7 +10,4 @@
       }
     }
   }
-  .additional-validation-form {
-    margin-top: 50px;
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index dad837f356..b67c448b54 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -23,9 +23,6 @@
 }
 
 .image-modal-edit, .image-modal-new {
-  .modal-body {
-    padding: 0;
-  }
   .vsp-components-image-editor {
 
     .image-format, .image-md5, .image-version {
@@ -35,13 +32,19 @@
       padding-left: 30px;
     }
     .section-title {
-      text-transform: capitalize;
+      text-transform: uppercase;
       font-size: 18px;
     }
   }
 }
 
 .vsp-components-image {
+  .list-editor-view {
+    margin-top: 50px;
+    .manual-title {
+      @extend .body-1-semibold;
+    }
+  }
   .list-editor-item-view-content {
     flex:1;
     min-width: 0;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index 402918bc5e..eaba47acb4 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -20,16 +20,7 @@
 		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;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index be4caacfb5..9476d7043d 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -1,7 +1,4 @@
 .edit-process-modal {
-  .vsp-process-dropzone-view .grid-section {
-    padding-bottom: 30px !important;
-  }
   .component-process-description > textarea {
     height: 113px;
   }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 8fb739234f..65c558fa0e 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -2,14 +2,22 @@
     .software-product-dependencies-title {
         @extend .heading-1;
         @extend .text-uppercase !optional;
+			position: sticky;
+			top: -30px;
+			z-index: 1;
+			background: $white;
         margin-bottom: 20px;
         color: $blue;
     }
     .select-action-table-controllers {
+			position: sticky;
+			top: 4px;
+			z-index: 1;
+			background: $white;
         justify-content: flex-end;
         cursor: pointer;
         color: $blue;
-        padding-right: 33px;
+			padding-right: 27px;
         margin-bottom: 3px;
         &:hover {
             color: $dark-blue;
@@ -18,8 +26,23 @@
     .select-action-table-view {
         min-width: 770px;
     }
+	.select-action-table-headers {
+		position: sticky;
+		top: 27px;
+		z-index: 1;
     .select-action-table-header {
         @extend .body-1-semibold;
         color: $text-black;
+		}
+	}
+	.select-action-table-row-wrapper {
+		.svg-icon {
+			&.__trashO, &.__plusCircle {
+				fill: $dark-gray;
+				&:hover {
+					fill: $black;
     }
+			}
+		}
+	}
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
index e0de8fc969..b5f9a546d9 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -2,9 +2,6 @@
 	.modal-dialog {
 		width: 780px;
 	}
-	.grid-section {
-		padding-bottom: 25px;
-	}
 	.deployment-feature-groups-section.no-feature-groups {
 		padding-bottom: 0;
 		.form-group {
@@ -25,15 +22,12 @@
 	}
 	.modal-content {
 		.modal-body {
-			padding: 0;
 			.validation-form-content {
+				overflow-y: visible;
 				.grid-col-1 {
-					flex-basis: 35%;
+					flex-basis: 30%;
 				}
 
-				.Select-value, .Select-placeholder {
-					font-family: omnes-regular, sans-serif;
-				}
 
 				.grid-section.vfc-table {
 					padding-bottom: 50px;
@@ -46,9 +40,6 @@
 				.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 28b54cc78f..99027d66ed 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -18,12 +18,7 @@
 
   .description {
     @extend .body-1;
-    // overflow: hidden;
     padding-right: 20px;
-    // text-overflow: ellipsis;
-    // display: -webkit-box;
-    // -webkit-line-clamp: 2;
-    // -webkit-box-orient: vertical;
 
     .missing-license {
       display: flex;
@@ -56,15 +51,9 @@
     }
   }
   .software-product-landing-view {
-    transition: border .2s;
     padding-bottom: 50px;
 
 
-    .list-editor-view {
-      padding-top: 50px;
-      padding-left: 0;
-      padding-right: 0;
-    }
     .software-product-landing-view-top {
       .details-container {
         @extend .flex-column;
@@ -110,6 +99,10 @@
           &:last-child {
             margin-right: 0;
           }
+          .software-product-landing-view-top-block-col-upl  {
+            height: 215px;
+            width: initial;
+          }
         }
         .col-md-6 {
           padding: 0;
@@ -134,16 +127,19 @@
           }
         }
         .software-product-landing-view-top-block {
+          &.clickable {
           cursor: pointer;
+            &:hover {
+              @extend .box-hover;
+            }
+          }
           border: 1px solid $light-gray;
           padding: 20px 18px 0 18px;
           height: 215px;
           display: flex;
           justify-content: space-between;
           background-color: $white;
-          &:hover {
-            @extend .box-hover;
-          }
+
           .col-md-6 {
             @extend .body-1;
           }
@@ -164,30 +160,12 @@
               color: $light-blue;
             }
           }
-        }
 
         .software-product-landing-view-top-block-col-upl {
           @extend .flex;
-          height: 215px;
-          text-align: center;
-          flex-direction: column;
-          justify-content: center;
-          border: 2px dashed $light-gray;
           margin-bottom: 20px;
-          @extend .body-1;
-          align-items: center;
-          .upload-btn {
-            padding: 15px 55px;
 
           }
-          .drag-text {
-            color: $blue;
-            @extend .body-1-semibold;
-          }
-          .or-text {
-            margin-top: 10px;
-            margin-bottom: 10px;
-          }
         }
       }
     }
@@ -195,6 +173,9 @@
 }
 
 .vsp-details-page {
+  .grid-section-general {
+    padding-bottom: 30px;
+  }
   .vsp-general-tab {
     .validation-form-content {
       margin: 0;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index d75e7447ab..3f2a2f9a69 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -1,10 +1,5 @@
 .edit-process-modal {
-  background-color: $white;
   height: 100%;
-  &.modal-body {
-    padding: 0;
-    background-color: $white;
-  }
   .vsp-processes-editor {
     padding-left: 0;
     padding-right: 0;
@@ -23,41 +18,22 @@
       padding-top: 20px;
       padding-bottom: 20px;
 
-      align-items: center;
-      .upload-btn {
-        padding: 4px 20px;
-      }
-      .drag-text {
-        color: $blue;
-        @extend .body-1-semibold;
-      }
-      .or-text {
-        margin-top: 10px;
-        margin-bottom: 10px;
+      .process-type {
+        width: 100%;
       }
     }
     .vsp-processes-editor-data {
-      transition: border .2s;
-      .vsp-process-dropzone-view {
-        background-color: transparent;
-        &.active-dragging {
-          border: 3px dashed $dark-blue;
-          border-radius: 20px;
-          .draggable-wrapper {
-            opacity: 0.5;
-          }
-        }
-        .grid-section {
-          .section-title {
-            padding-bottom: 0;
-          }
-        }
-      }
       .validation-input-wrapper {
         .form-group.vsp-process-description > textarea {
             height: 113px;
         }
       }
+      .process-type {
+        width: 100%;
+      }
+      .process-editor-file-box {
+        width: 380px;
+      }
     }
   }
 }
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index d1f3f488bd..440b2424df 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -5,12 +5,6 @@
   }
 
   .halb-data {
-	.load-balancing-page-title {
-	  @extend .section-title;
-	  &:first-child {
-		padding: 0 0 40px 0;
-	  }
-	}
 	.question {
 	  padding-top: 10px;
 	  &:first-child {
diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
index 4aa07f1580..23f41c8816 100644
--- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss
+++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss
@@ -5,20 +5,6 @@
       text-align: center;
       margin-bottom: 50px;
     }
-    .upload-screen-upload-block {
-      text-align: center;
-      padding: 50px;
-      border: 2px dashed lightgray;
-    }
-    .upload-screen-drop-zone {
-      &.active-dragging {
-        border: 3px dashed $dark-blue;
-        border-radius: 20px;
-        .draggable-wrapper {
-          opacity: 0.5;
-        }
-      }
-    }
   }
 
   .attachments-screen {
diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
new file mode 100644
index 0000000000..fa1dc11ec6
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -0,0 +1,325 @@
+.dox-ui-punch-out {
+  background-color: $content-background-color;
+}
+
+.dox-ui-punch-out.dox-ui-punch-out-full-page {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+}
+
+@mixin version-page-box-shadow() {
+	box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
+}
+
+@mixin version-page-sub-title(){
+	color: $text-black;
+	text-transform: uppercase;
+	background-color: $white;
+	border-bottom: 1px solid $light-gray;
+	padding: 12px 0 10px 23px;
+}
+
+.versions-tree-modal {
+	.modal-dialog {
+		width: 800px;
+	}
+
+	.tree-view {
+		display: flex;
+    align-items: center;
+	}
+}
+
+.versions-page-view {
+	height: 100%;
+	background-color: $background-gray;
+	overflow: auto;
+	padding: 35px 50px 20px 50px;
+
+	.svg-icon-wrapper {
+		justify-content: flex-start;
+	}
+
+	.versions-page-title {
+		@extend .heading-1;
+		text-transform: uppercase;
+		margin-bottom: 29px;
+		color: $blue;
+	}
+
+	.versions-page-permissions-view-wrapper {
+		@extend .body-1-semibold;
+		@include version-page-box-shadow();
+
+		.permissions-view-wrapper-title {
+			@include version-page-sub-title();
+		}
+
+		.svg-icon-wrapper.user-view {
+			fill: transparent;
+			stroke: $blue;
+			.svg-icon {
+				height: 18px;
+				width: 16px;
+				margin: 0 7px;
+			}
+			&.current-user {
+				.svg-icon {
+					background-color: $blue;
+					stroke: $white;
+					padding-top: 5px;
+					padding-bottom: 3px;
+					height: 29px;
+					width: 29px;
+					border-radius: 20px;
+					border: 1px solid $blue;
+					box-shadow: inset 0px 0px 0px 2px $white;
+					margin: 0;
+				}
+				.svg-icon-label {
+					margin-left: 7px;
+				}
+			}
+			.svg-icon-label {
+				@extend .body-2;
+				color: $dark-gray;
+				margin-left: 6px;
+			}
+		}
+
+		.permissions-view-content {
+			padding: 20px 40px 20px 25px;
+			background-color: $white;
+
+			height: 120px;
+			display: flex;
+		}
+
+		.permissions-view {
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			justify-content: space-around;
+
+			.permissions-view-title {
+				text-transform: uppercase;
+				color: $dark-gray;
+			}
+
+			.contributors-view, .owner-view {
+				display: flex;
+				height: 16px;
+				@extend .body-1-semibold;
+
+				.permissions-view-title {
+					width: 130px;
+					line-height: 16px;
+				}
+
+				.extra-contributors {
+					border-radius: 30px;
+					background-color: $gray;
+					width: 26px;
+					height: 26px;
+					padding-right: 2px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					color: $white;
+					cursor: default;
+					&:hover {
+						background-color: $dark-gray;
+					}
+				}
+
+				.user-view {
+					margin-right: 38px;
+				}
+
+				.manage-permissions {
+					color: $blue;
+					margin-left: auto;
+					cursor: pointer;
+
+					&:hover {
+						color: $dark-blue;
+					}
+				}
+			}
+		}
+	}
+
+	.versions-page-list-and-tree {
+		display: flex;
+		margin-top: 20px;
+
+		.version-tree-wrapper {
+			display: flex;
+			flex-direction: column;
+			margin-right:10px;
+			transition: all 1s ease;
+			@include version-page-box-shadow();
+
+			.version-tree-title-container {
+				display: flex;
+				align-items: center;
+				height: 40px;
+				@include version-page-sub-title();
+				padding-right: 10px;
+
+				.version-tree-full-screen {
+					margin-left: auto;
+				}
+			}
+
+			.tree-view {
+				background-color: $white;
+				flex: 1;
+			}
+		}
+	}
+
+	.version-list {
+		flex: 1;
+		@extend .body-1-semibold;
+		color: $text-black;
+		display: flex;
+		flex-direction: column;
+
+		.version-list-items {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.version-item-row {
+				border-bottom: 1px solid $tlv-light-gray;
+
+				&:last-child {
+					border-bottom: none;
+				}
+			}
+		}
+
+		.version-item-row {
+			$row-hover-color: lighten($blue, 54%);
+			$row-active-color: lighten($blue, 51%);
+
+			display: flex;
+			align-items: center;
+			padding: 15px 30px;
+			@include version-page-box-shadow();
+			background-color: $white;
+			height: 70px;
+
+			&:hover {
+				background-color: $row-hover-color;
+			}
+
+			&.selected {
+				box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
+				background-color: $row-active-color;
+				&:hover {
+					background-color: $row-hover-color;
+					box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
+				}
+			}
+
+			&.header-row {
+				height: 40px;
+
+				@extend .body-1-semibold;
+				@include version-page-sub-title();
+				padding: 15px 27px;
+
+				&:hover {
+					background-color: $white;
+					pointer-events: none;
+					&:active {
+						background-color: $white;
+						@include version-page-box-shadow();
+					}
+				}
+				.header-field.actions {
+					margin-right: 57px;
+				}
+			}
+
+			.version-item-field {
+				flex: 1;
+				display: flex;
+				margin-right: 10px;
+
+				&.item-version, &.item-status {
+					flex: 0 1 10%;
+					@extend .body-1-semibold;
+					color: $text-black;
+				}
+
+				&.item-description, &.item-last-edited {
+					@extend .body-1;
+					color: $dark-gray;
+				}
+
+				&.item-description, &.header-description {
+					flex: 2 1 0;
+				}
+
+				&.item-description > .description-text {
+					margin-right: 10px;
+					@include ellipsis($max-width: 300px);
+				}
+
+				&.item-actions {
+					display: flex;
+					flex: 1 1 3%;
+					justify-content: space-between;
+				}
+
+				&.item-select, &.item-create {
+					@extend .body-1;
+					flex: 0 1 auto;
+					margin-right: 0;
+
+					.svg-icon-wrapper {
+						fill: $blue;
+						color: $blue;
+
+						&[disabled] {
+							cursor: default;
+						}
+
+						.svg-icon {
+							width: 16px;
+							height: 16px;
+						}
+
+						&:hover:not([disabled]) {
+							fill: $dark-blue;
+							color: $dark-blue;
+						}
+					}
+				}
+
+			}
+
+			/* To keep ellipsis hider's background the same color as row background */
+			&:not(.selected):hover .item-description > .description-text:after {
+				background: $row-hover-color
+			}
+
+			&:hover:active .item-description > .description-text:after {
+				background: $row-active-color;
+			}
+
+		}
+
+	}
+
+	&.clickable {
+		cursor: pointer;
+	}
+}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
index ee8cfa5c7f..9f88e94393 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
@@ -1,16 +1,3 @@
-.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 {
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index bda8512f36..14bad18179 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,34 +1,9 @@
 
 .vsp-component-monitoring {
   .dropzone {
-    .section-title {
-      padding-bottom: 20px;
-    }
     &:not(:last-child) {
       padding-bottom: 50px;
     }
-    .software-product-landing-view-top-block-col-upl {
-      @extend .body-1;
-      width: 400px;
-      display: flex;
-      text-align: center;
-      flex-direction: column;
-      justify-content: center;
-      border: 2px dashed $light-gray;
-      padding: 25px 0;
-      align-items: center;
-      .upload-btn {
-        padding: 4px 20px;
-      }
-      .drag-text {
-        color: $blue;
-        @extend .body-1-semibold
-      }
-      .or-text {
-        margin-top: 10px;
-        margin-bottom: 10px;
-      }
-    }
 
     .monitoring-file {
       display: flex;
@@ -46,7 +21,4 @@
     }
   }
 
-  .delete-button {
-    min-width: 0;
-  }
 }
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index 5696b354a7..2a99263285 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -1,6 +1,6 @@
 
 .vsp-component-questionnaire-view {
-  input[type='radio'], input[type='checkbox'] {
+  input[type='checkbox'] {
     &:before {
       border: 1px solid $dark-gray;
       cursor: pointer;
@@ -30,14 +30,13 @@
         .radio-options-content-row {
           display: flex;
           margin-top: -4px;
-          .validation-input-wrapper {
-            width: 240px;
-            margin-right: 7px;
+          .validation-radio-wrapper {
+            margin-right: 20px;
 
             & > .form-group {
               display: flex;
             }
-            .form-group .radio {
+            .form-group .sdc-radio {
               width: auto;
               margin-right: 0;
             }
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
index d29a95d3d6..0a234a5a96 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss
@@ -14,7 +14,7 @@
 	flex-direction: row;
 	.tab-separator {
 	  position: relative;
-	  top: 13px;
+	  top: 8px;
 	}
 	.catalog-header-tab {
 	  @extend .heading-1;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index 32ebac98cf..f97641cbe3 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -5,15 +5,16 @@
   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: 60px;
+	margin-right: 20px;
 	margin-left: auto;
   }
   .onboard-header-tabs {
 	display: flex;
 	flex-direction: row;
-	margin-left: 60px;
 	.onboard-header-tab {
 	  @extend .body-1-semibold;
 	  margin-right: 40px;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index 80ed7385e0..e0b72bf9ff 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -54,7 +54,7 @@
 	  &:hover {
 		color: $blue;
 	  }
-	  text-transform: uppercase;
+	  text-transform: none;
 	  @include ellipsis(auto, block);
 	  border-bottom: 1px solid $tlv-light-gray;
 	  cursor: pointer;
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index fc05f7493e..2c7c55530d 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -130,6 +130,16 @@ div[data-reactroot].tooltip {
       border-top-color: $dark-gray !important;
     }
   }
+  &.right {
+    .tooltip-arrow {
+      border-right-color: $dark-gray !important;
+    }
+  }
+  &.left {
+    .tooltip-arrow {
+      border-left-color: $dark-gray !important;
+    }
+  }
   .tooltip-inner {
     @extend .body-1;
     max-width: 100%;
@@ -149,6 +159,18 @@ div[data-reactroot].tooltip {
       padding: 3px 12px;
     }
   }
+  // manage permisions modal
+  &.manage-permissions-owner-tooltip {
+    .tooltip-inner {
+      width: 400px;
+    }
+  }
+  // WS/Catalog Tile
+  &.tile-super-info {
+    .tooltip-inner {
+      font-size: $body-font-3;
+    }
+  }
   //dependency table error tooltip
   &.select-action-table-error-tooltip{
     @include base-font-regular;
-- 
cgit 1.2.3-korg