bugRelease1 after changes

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

11 files changed, 72 insertions, 118 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
index cd5e6db5..edde536f 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
@@ -1,4 +1,5 @@
+@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss';
 @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss';
-@import 'common/customVariables';
 @import 'common/fonts';
 @import 'common/utils';
+@import 'common/customVariables';
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
index 9472fe68..1a532c88 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
@@ -1,90 +1,16 @@
 $cursor-disabled: not-allowed !default;
 $cursor-pointer: pointer;
 
-$heading-font-1: 28px;
-$heading-font-2: 24px;
-$heading-font-3: 20px;
-$heading-font-4: 16px;
-$heading-font-5: 14px;
-
-$body-font-1: 14px;
-$body-font-2: 13px;
-$body-font-3: 12px;
-$body-font-4: 10px;
-
-@mixin regular-font() {
-    font-family: OpenSans-Regular, Arial, sans-serif;
-    font-style: normal;
-    font-weight: 400;
-}
-
-@mixin italic-font() {
-    font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif;
-    font-style: italic;
-    font-weight: 400;
-}
-
-@mixin semibold-font() {
-    font-family: OpenSans-Semibold, Arial, sans-serif;
-    font-style: normal;
-    font-weight: 600;
-}
-
-@mixin body-1() {
-    @include regular-font;
-    font-size: $body-font-1;
-}
-
-@mixin body-1-semibold() {
-    @include semibold-font;
+@mixin body-1-emphasis() {
+    @include base-font-semibold;
     font-size: $body-font-1;
 }
 
-@mixin body-2() {
-    @include regular-font;
-    font-size: $body-font-2;
-}
-
-@mixin body-2-semibold() {
-    @include semibold-font;
-    font-size: $body-font-2;
-}
-
-@mixin body-3() {
-    @include regular-font;
-    font-size: $body-font-3;
-}
-
-@mixin body-4() {
-    @include regular-font;
-    font-size: $body-font-4;
-}
-
-@mixin heading-1() {
-    @include regular-font;
-    font-size: $heading-font-1;
-}
-
-@mixin heading-1-semibold() {
-    @include semibold-font;
+@mixin heading-1-emphasis() {
+    @include base-font-semibold;
     font-size: $heading-font-1;
 }
 
-@mixin heading-4() {
-    @include regular-font;
-    font-size: $heading-font-4;
-}
-
-@mixin heading-4-semibold() {
-    @include semibold-font;
-    font-size: $heading-font-4;
-}
-
-@mixin heading-5() {
-    @include regular-font;
-    font-size: $heading-font-5;
-}
-
 .flex {
     display: flex;
     flex: 1;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
index 3cf90bc9..7a35b38c 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
@@ -74,6 +74,11 @@ $browserPrefixes: webkit moz o ms;
   @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
 }
 
+@mixin sticky($value) {
+  position: sticky;
+  top: $value;
+}
+
 @mixin text-shadow($value) {
   @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
 }
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
index c0cc1091..6862d554 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -23,4 +23,12 @@
         pointer-events: none;
         opacity: 0.4;
     }
+
+    .selectable {
+        user-select: text;
+    }
+
+    .separator {
+        border-left: 1px solid $silver;
+    }
 }
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
index 6cff0561..c830c028 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
       flex-direction: column;
       background-color: $light-silver;
       .group-name {
-        @include heading-4-semibold;
+        @include heading-4-emphasis;
         @include ellipsis;
         display: block;
         padding: 24px 12px 13px 40px;
@@ -45,13 +45,13 @@
           @include ellipsis;
           white-space: normal;
           &.selected {
-            @include body-1-semibold;
+            @include body-1-emphasis;
             border-left: 4px solid $blue;
             padding-left: 18px;
             color: $blue;
           }
           &.bold-name {
-            @include body-1-semibold;
+            @include body-1-emphasis;
           }
         }
       }
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
index 6e1e9795..58f1f995 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -22,7 +22,7 @@
 
 		text {
 			text-anchor: end;
-			@include body-2-semibold;
+			@include body-2-emphasis;
 			fill: $blue;
 		}
 
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
index 45985a65..4fa8d841 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -7,10 +7,10 @@
 	.group-name-wrapper {
 		width: 245px;
 		.group-name {
-			@include heading-4-semibold;
+			@include heading-4-emphasis;
 			@include ellipsis;
 			display: block;
-			padding: 24px 12px 13px 40px;
+			padding: 24px 12px 13px 20px;
 			background-color: $white;
 		}
 	}
@@ -25,6 +25,7 @@
 		padding-left: 16px;
 		padding-right: 100px;
 		border-left: 1px solid #eaeaea;
+		height: 45px;
 
 		.vc-separator {
 			border-left: 1px solid $silver;
@@ -33,12 +34,13 @@
 
 		.version-status-container {
 			.version-selector-more-versions {
+				@include body-1-emphasis;
 				color: $blue;
 				cursor: pointer;
 			}
 
 			.version-selector {
-				margin-top: 0px;
+				margin-top: 0;
 				padding-right: 10px;
 				margin-right: 15px;
 				margin-left: 10px;
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 {