bugRelease1 after changes

Issue-ID: SDC-1655
Change-Id: I0e049a77751c9df930d9d70bbe7ea6697df7a573
Signed-off-by: Yarin Dekel <yarind@amdocs.com>

4 files changed, 44 insertions, 32 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
index 76f3f658..ea5bba28 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
@@ -80,7 +80,7 @@
             }
             &__label {
                 text-transform: uppercase;
-                @include body-1-semibold;
+                @include body-1-emphasis;
             }
             &:hover {
                 color: $blue;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
index 6e8b3522..f11c2c0a 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
@@ -1,19 +1,19 @@
 .general-page {
     @include body-1;
-    padding: 0 131px 20px 100px;
+    padding: 35px 90px 0 50px;
     background-color: #fff;
 
     .general-page-title {
         height: 110px;
         line-height: 110px;
-        @include heading-1-semibold;
+        @include heading-1-emphasis;
         color: $dark-gray;
     }
 
     .general-page-content {
         display: grid;
-        grid-template-columns: 50% 50%;
-        grid-gap: 30px;
+        grid-template-columns: 60% 40%;
+        grid-gap: 40px;
         color: #444;
 
         .description-part textarea {
@@ -24,7 +24,7 @@
         .version-info-part {
             background-color: $light-silver;
             height: 200px;
-            margin-top: 25px;
+            margin-top: 22px;
             padding: 20px;
             box-sizing: border-box;
             .label {
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
index 8625403f..bc12a150 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -10,7 +10,7 @@
     &__title {
         height: 110px;
         line-height: 110px;
-        @include heading-1-semibold;
+        @include heading-1-emphasis;
         color: $dark-gray;
     }
 
@@ -26,7 +26,7 @@
 
     &__tab {
         padding: 12px;
-        @include body-1-semibold;
+        @include body-1-emphasis;
         @include border(1px, 1px, 0, 1px);
         background-color: $light-silver;
         color: $gray;
@@ -50,7 +50,7 @@
         overflow-y: auto;
         &__thead {
             background-color: $silver;
-            @include body-1-semibold;
+            @include body-1-emphasis;
             position: -webkit-sticky;
             position: sticky;
             top: 0px;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
index 67883fbb..24f632db 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
@@ -1,19 +1,32 @@
 .overview-page {
   @include body-1;
-  padding: 25px;
+  color: $dark-gray;
+  overflow-y: auto;
+  height: 100vh;
 
   .overview-content {
     display: flex;
     flex-wrap: wrap;
+    min-height: 775px;
+
+    .overview-separator {
+      border-left: 1px solid $silver;
+    }
 
     .workflow-details {
       @extend .flex;
-      padding: 20px 0 0 60px;
+      @media (min-width: 1076px) {
+        @include sticky(30px);
+      }
+      max-height: 600px;
+      padding: 0 45px 0 56px;
       flex-direction: column;
 
-      .description-part textarea{
-        height: 200px;
-        padding-top: 5px;
+      .description-part {
+        padding-top: 20px;
+        textarea{
+          height: 200px;
+        }
       }
 
       .save-description {
@@ -31,7 +44,10 @@
           margin-bottom: 5px;
         }
         .value {
-          margin-bottom: 10px;
+          margin-bottom: 20px;
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
       }
     }
@@ -45,7 +61,7 @@
   .overview-header {
     @include heading-1;
     text-transform: uppercase;
-    margin: 35px 0 35px 60px;
+    margin: 63px 0 35px 56px;
     color: $blue;
   }
 
@@ -56,24 +72,16 @@
   @mixin version-page-sub-title(){
     color: $text-black;
     text-transform: uppercase;
-    //background-color: $white;
     border-bottom: 1px solid $light-gray;
     padding: 12px 0 10px 45px;
   }
 
   .versions-page-view {
-    height: 100%;
-    overflow: auto;
-    padding: 0 35px 0 90px;
+    padding: 0 56px 0 45px;
     display: flex;
     flex: 2;
     flex-direction: column;
 
-    .svg-icon-wrapper {
-      justify-content: flex-start;
-      margin: 5px;
-    }
-
     .create-new-version {
       @extend .text-uppercase;
       display: flex;
@@ -104,7 +112,7 @@
 
     .versions-page-list-and-tree {
       display: flex;
-      margin-top: 20px;
+      margin-top: 10px;
 
       .version-tree-wrapper {
         display: flex;
@@ -113,7 +121,10 @@
         @include version-page-box-shadow();
 
         .version-tree-title-container {
-          @include body-1-semibold();
+          @include body-1-emphasis();
+          @media (min-width: 1076px) {
+            @include sticky(1px);
+          }
           background-color: $light-silver;
           display: flex;
           align-items: center;
@@ -143,7 +154,6 @@
 
     .version-list {
       @extend .flex;
-      color: $text-black;
       flex-direction: column;
 
       .version-list-items {
@@ -170,6 +180,7 @@
         padding: 15px 30px;
         @include version-page-box-shadow();
         height: 70px;
+        max-height: 70px;
 
         &:hover {
           background-color: $row-hover-color;
@@ -187,8 +198,10 @@
         &.header-row {
           height: 40px;
           background-color: $light-silver;
-
-          @include body-1-semibold();
+          @media (min-width: 1076px) {
+            @include sticky(1px);
+          }
+          @include body-1-emphasis();
           @include version-page-sub-title();
           padding: 15px 27px;
 
@@ -214,11 +227,10 @@
 
           &.item-description, &.item-last-edited {
             @include body-1;
-            color: $dark-gray;
           }
 
           &.item-description, &.header-description {
-            flex: 2 1 0;
+            flex: 1 1 0;
           }
 
           &.item-description > .description-text {