Fix catalog/inputOutput styles

Issue-ID: SDC-1597
Change-Id: I19e0e18f556dc31d99a6b40e6e8b23b6a8294dd1
Signed-off-by: Malek <malek.zoabi@amdocs.com>

5 files changed, 48 insertions, 39 deletions

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 fc51e812..316412e4 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
@@ -1,20 +1,21 @@
 .workflow-app {
-  height: 100%;
-  * {
-    box-sizing: border-box;
-  }
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
 
-  .version-wrapper {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
+    * {
+        box-sizing: border-box;
+    }
 
-  .custom-textarea {
-    resize: none;
-  }
-}
+    .custom-textarea {
+        resize: none;
+    }
 
-#root {
-  height: 100%;
+    .version-wrapper {
+        display: grid;
+        grid-template-rows: 70px 1fr;
+        height: 100vh;
+    }
 }
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
index eb91d7c7..36488e93 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
@@ -7,6 +7,7 @@
       position: absolute;
       background-color: #E1E4E6;
       opacity: 0.5;
+      z-index: 99999;
     }
     .tlv-loader {
       height: 63px;
@@ -156,5 +157,3 @@
       }
     }
   }
-  
-  
\ No newline at end of file
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 e46e84c1..76f3f658 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
@@ -1,8 +1,10 @@
 .wf-catalog {
+    overflow: auto;
     background-color: $light-silver;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: 35px 1fr;
+    height: 100vh;
+    padding-bottom: 20px;
     .header {
         align-items: center;
         display: flex;
@@ -16,20 +18,19 @@
         }
     }
     .main {
-        flex: 1;
         &__header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 25px 60px;
             &__total {
-                @include body-1-semibold;
+                @include body-1;
                 color: $dark-gray;
             }
             &__order {
                 display: flex;
                 &__label {
-                    @include body-1-semibold;
+                    @include body-1;
                     color: $dark-gray;
                 }
                 &__alphabetical {
@@ -79,7 +80,7 @@
             }
             &__label {
                 text-transform: uppercase;
-                @include body-1;
+                @include body-1-semibold;
             }
             &:hover {
                 color: $blue;
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 68146f48..8625403f 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
@@ -4,8 +4,8 @@
         border-style: solid;
         border-color: $light-gray;
     }
-    padding: 0 100px 20px 100px;
-    flex: 1;
+    padding: 44px;
+    max-width: 1567px;
 
     &__title {
         height: 110px;
@@ -16,7 +16,6 @@
 
     &__header {
         display: flex;
-        @include body-1-semibold;
         &__right {
             flex: 1;
             display: flex;
@@ -27,6 +26,7 @@
 
     &__tab {
         padding: 12px;
+        @include body-1-semibold;
         @include border(1px, 1px, 0, 1px);
         background-color: $light-silver;
         color: $gray;
@@ -45,9 +45,18 @@
     }
 
     &__table {
+        min-height: 102px;
+        max-height: calc(100vh - 202px);
+        overflow-y: auto;
         &__thead {
             background-color: $silver;
             @include body-1-semibold;
+            position: -webkit-sticky;
+            position: sticky;
+            top: 0px;
+            z-index: 1;
+        }
+        &__tbody {
         }
     }
 
@@ -74,20 +83,22 @@
         flex: 1;
         display: flex;
         align-items: center;
-        padding: 25px 30px;
+        padding: 20px 17px;
         &--empty {
             padding: 20px;
             color: $dark-gray;
-            @include body-1-semibold;
+            @include body-1;
+            text-transform: uppercase;
             justify-content: center;
         }
 
         .input-output-select {
             width: 100%;
             height: 32px;
-            border: solid 1px #d2d2d2;
+            @include border();
             border-radius: 2px;
-            color: #5a5a5a;
+            padding-left: 5px;
+            color: $text-black;
         }
 
         .sdc-input {
@@ -110,14 +121,13 @@
 
     &__add {
         cursor: pointer;
+        @include body-1;
+        text-transform: uppercase;
         @include border(0, 0, 0, 1px);
         padding-left: 10px;
         margin-left: 10px;
     }
 
-    &__search {
-    }
-
     &__td,
     &__th {
         .sdc-checkbox {
@@ -127,10 +137,10 @@
             flex: unset;
             justify-content: center;
             text-align: center;
-            width: 140px;
+            width: 127px;
         }
         &--icon {
-            width: 100px;
+            width: 98px;
             .svg-icon-wrapper {
                 cursor: pointer;
                 &:hover {
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss
index 58d1df98..f959d17f 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss
@@ -1,6 +1,4 @@
 .workflow-view {
     display: grid;
     grid-template-columns: 245px 1fr;
-    height: auto;
-    flex: 1;
-}
\ No newline at end of file
+}