Add collaboration feature

Issue-ID: SDC-767
Change-Id: I14fb4c1f54086ed03a56a7ff7fab9ecd40381795
Signed-off-by: talig <talig@amdocs.com>

14 files changed, 585 insertions, 386 deletions

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;
+		}
+	}
 }