1 files changed, 106 insertions, 90 deletions
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3511470bfb..3c30cdcc37 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,109 +1,125 @@
 .version-controller-bar {
-  .navbar-inverse {
-    @extend .body-1-medium;
+  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;
-    border-bottom: $tlv-light-gray thin solid;
-    padding-top: 14px;
-    padding-bottom: 12px;
-    margin-bottom: 0;
-    .container {
-      width: 100%;
-      padding: 0 52px;
+    justify-content: space-between;
+    padding-left: 16px;
+    padding-right: 40px;
+    .version-status-container {
+      display: flex;
       height: 30px;
-      .navbar-collapse {
-        padding-left: 0;
-        .items-in-left {
-          display: flex;
-          height: 30px;
-          .version-section {
-            .form-group {
-              margin-right: 5px;
-              .input-options {
-                border: none;
-                .input-options-select {
-                  padding-top: 4px;
-                }
-              }
+      .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: 14px;
-            border-left: $light-gray thin solid;
-            .status-text {
-              align-self: center;
-              display: flex;
-              padding-left: 3px;
-              .status-text-dash {
-                padding: 0 9px;
-              }
+        }
+      }
+      .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;
+
+          .version-controller-lock-closed {
+            fill: $dark-gray;
+            width: 21px;
+            height: 23px;
+            margin-top: -3px;
+            &.disabled {
+              fill: $light-gray;
             }
-            .onboarding-status-icon {
-              width: 25px;
-              height: 19px;
-              background-image: url('../images/ecomp/ASDC_Sprite.png');
-              background-position: -306px 674px;
-              align-self: center;
+            &:hover {
+              fill: $black;
             }
-            .checkout-status-icon {
-              display: flex;
-              & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon {
-                width: 25px;
-                height: 19px;
-                align-self: center;
-                margin-left: 5px;
-              }
+          }
+          .version-controller-lock-open {
+            fill: $dark-gray;
+            width: 24px;
+            height: 28px;
+            margin-top: -6px;
+            &:hover {
+              fill: $black;
             }
           }
-        }
-        .items-in-right {
-          display: flex;
-          height: 30px;
-          .action-buttons {
-            display: flex;
-            border-right: $gray thin solid;
-            padding: 0 13px;
-            .version-control-buttons {
-              display: flex;
+          .version-controller-submit {
+            fill: $blue;
+            &.disabled {
+              fill: $light-gray;
             }
-            .vc-nav-item-button {
-              border: 1px solid $light-gray;
-              border-radius: 5px;
-              cursor: pointer;
-              margin-right:10px;
-              padding: 6px 20px;
-              &:hover, &:focus {
-                background-color: lightgrey;
-              }
-              &.button-submit{
-                background-color: transparent;
-                color: $green;
-                border-color: $green;
-              }
-              &.button-checkin-checkout {
-                background-color: $white;
-                @extend .body-1;
-              }
+            &:hover {
+              fill: $dark-blue;
             }
-            .revert-btn, .save-btn {
-              height: 24px;
-              width: 24px;
-              align-self: center;
-              cursor: pointer;
-              margin-right: 10px;
+          }
+
+          .version-controller-revert {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
             }
           }
-          .vc-nav-item-close {
-            display: flex;
-            padding-left: 18px;
-            padding-top: 3px;
-            align-self: center;
-            @extend .body-1;
-            color: $gray;
-            cursor: pointer;
+          .version-controller-save {
+            fill: $dark-gray;
+            &.disabled {
+              fill: $light-gray;
+            }
+            &:hover {
+              fill: $black;
+            }
           }
         }
       }
+      .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;
+      }
     }
   }
 }