Add fonts and fix styles

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

diff --git a/workflow-designer-ui/src/main/frontend/package.json b/workflow-designer-ui/src/main/frontend/package.json
index dc2c229..529d909 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/package.json
+++ b/workflow-designer-ui/src/main/frontend/package.json
@@ -70,6 +70,7 @@
                "eslint-plugin-jest": "^21.17.0",
                "eslint-plugin-prettier": "^2.6.0",
                "eslint-plugin-react": "^7.7.0",
+               "file-loader": "^1.1.11",
                "html-webpack-plugin": "^3.2.0",
                "i18next-scanner": "^2.4.6",
                "identity-obj-proxy": "^3.0.0",

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff
new file mode 100644 (file)
index 0000000..5a604b3
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff differ

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2
new file mode 100644 (file)
index 0000000..a0965b7
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-600.woff2 differ

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff
new file mode 100644 (file)
index 0000000..cf8b191
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff differ

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2
new file mode 100644 (file)
index 0000000..bad9292
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-italic.woff2 differ

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff
new file mode 100644 (file)
index 0000000..e495e6f
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff differ

diff --git a/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2 b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2
new file mode 100644 (file)
index 0000000..c8050c2
Binary files /dev/null and b/workflow-designer-ui/src/main/frontend/resources/fonts/open-sans-v15-latin-regular.woff2 differ

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 6f4e6e9..cd5e6db 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
@@ -1,5 +1,4 @@
-@import 'common/fonts';
 @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss';
-@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss';
 @import 'common/customVariables';
+@import 'common/fonts';
 @import 'common/utils';

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 997e0a2..9472fe6 100644 (file)
--- 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,6 +1,90 @@
 $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;
+    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;
+    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;
@@ -36,9 +120,3 @@ $cursor-pointer: pointer;
     opacity: 0.7 !important;
     cursor: $cursor-disabled;
 }
-
-@mixin semi-bold() {
-    font-weight: 600;
-};
-
-

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
index 9d71cf7..f367c23 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
@@ -1,31 +1,26 @@
-/* Fonts */
 @font-face {
     font-family: 'OpenSans-Regular';
     font-style: normal;
     font-weight: 400;
-    src:
-            local('Open Sans Regular'),
-            local('OpenSans-Regular'),
-            url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff)  format('woff');
-  }
-  @font-face {
+    src: local('Open Sans Regular'), local('OpenSans-Regular'),
+        url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-regular.woff') format('woff');
+}
+
+@font-face {
     font-family: 'OpenSans-Italic';
-    font-style: normal;
+    font-style: italic;
     font-weight: 400;
-    src:
-            local('Open Sans Italic'),
-            local('OpenSans-Italic'),
-            url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'OpenSans-Semibold';
+    src: local('Open Sans Italic'), local('OpenSans-Italic'),
+        url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'OpenSans-SemiBold';
     font-style: normal;
-    font-weight: 400;
-    src:
-            local('Open Sans Semibold'),
-            local('OpenSans-Semibold'),
-            url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'),
-            url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff)   format('woff');
-  }
\ No newline at end of file
+    font-weight: 600;
+    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
+        url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'),
+        url('../fonts/open-sans-v15-latin-600.woff') format('woff');
+}

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 695dc6a..6cff056 100644 (file)
--- 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,10 +16,9 @@
       flex-direction: column;
       background-color: $light-silver;
       .group-name {
-        @include heading-4; 
-        @include semi-bold;       
-        @include ellipsis;        
-        display: block;        
+        @include heading-4-semibold;
+        @include ellipsis;
+        display: block;
         padding: 24px 12px 13px 40px;
         background-color: $white;
         border-bottom: 1px solid $silver;
@@ -46,15 +45,13 @@
           @include ellipsis;
           white-space: normal;
           &.selected {
-            @include body-1;
-            @include semi-bold;
+            @include body-1-semibold;
             border-left: 4px solid $blue;
             padding-left: 18px;
             color: $blue;
           }
           &.bold-name {
-            @include body-1;
-            @include semi-bold;
+            @include body-1-semibold;
           }
         }
       }

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 1847ff3..6e1e979 100644 (file)
--- 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,8 +22,7 @@
 
                text {
                        text-anchor: end;
-                       @include body-2;
-                       @include semi-bold;
+                       @include body-2-semibold;
                        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 fe397d3..eaa3d7d 100644 (file)
--- 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,8 +7,7 @@
        .group-name-wrapper {
                width: 245px;
                .group-name {
-                       @include heading-4;
-                       @include semi-bold;
+                       @include heading-4-semibold;
                        @include ellipsis;
                        display: block;
                        padding: 24px 12px 13px 40px;

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 debb8b8..e46e84c 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
@@ -23,15 +23,13 @@
             align-items: center;
             padding: 25px 60px;
             &__total {
-                @include body-1;
-                @include semi-bold;
+                @include body-1-semibold;
                 color: $dark-gray;
             }
             &__order {
                 display: flex;
                 &__label {
-                    @include body-1;
-                    @include semi-bold;
+                    @include body-1-semibold;
                     color: $dark-gray;
                 }
                 &__alphabetical {

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 f99b8aa..9189c87 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
@@ -6,8 +6,7 @@
     .general-page-title {
         height: 110px;
         line-height: 110px;
-        @include heading-1;
-        @include semi-bold;
+        @include heading-1-semibold;
         color: $dark-gray;
     }
 

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 4533803..68146f4 100644 (file)
--- 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,15 +10,13 @@
     &__title {
         height: 110px;
         line-height: 110px;
-        @include heading-1;
-        @include semi-bold;
+        @include heading-1-semibold;
         color: $dark-gray;
     }
 
     &__header {
         display: flex;
-        @include body-1;
-        @include semi-bold;
+        @include body-1-semibold;
         &__right {
             flex: 1;
             display: flex;
@@ -49,15 +47,14 @@
     &__table {
         &__thead {
             background-color: $silver;
-            @include body-1;
-            @include semi-bold;
+            @include body-1-semibold;
         }
     }
 
     &__tr {
         display: flex;
         @include border();
-        &:hover:not(.no-data) {
+        &:hover:not(&--no-hover) {
             background-color: $light-silver;
         }
         & + & {
@@ -81,8 +78,7 @@
         &--empty {
             padding: 20px;
             color: $dark-gray;
-            @include body-1;
-            @include semi-bold;
+            @include body-1-semibold;
             justify-content: center;
         }
 

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 b713b93..f384017 100644 (file)
--- 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,6 +1,5 @@
 .overview-page {
-  @include body-1;
-  @include base-font-regular;
+  @include body-1-semibold;
   padding: 25px;
 
   .overview-content {
@@ -112,7 +111,7 @@
         @include version-page-box-shadow();
 
         .version-tree-title-container {
-          @include base-font-semibold();
+          @include body-1-semibold();
           background-color: $light-silver;
           display: flex;
           align-items: center;
@@ -183,7 +182,7 @@
           height: 40px;
           background-color: $light-silver;
 
-          @include base-font-semibold();
+          @include body-1-semibold();
           @include version-page-sub-title();
           padding: 15px 27px;
 

diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx
index 1a4d753..af75c79 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/NoDataRow.jsx
@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const NoDataRow = ({ children }) => (
-    <div className="input-output__tr no-data">
+    <div className="input-output__tr input-output__tr--no-hover">
         <div className="input-output__td input-output__td--empty">
             {children}
         </div>

diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx
index 206f54a..37a8cb4 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/TableHead.jsx
@@ -21,7 +21,7 @@ export default class TableHead extends React.Component {
     render() {
         return (
             <div className="input-output__table__thead">
-                <div className="input-output__tr">
+                <div className="input-output__tr input-output__tr--no-hover">
                     <div className="input-output__th">
                         <Translate value="workflow.inputOutput.name" />
                     </div>

diff --git a/workflow-designer-ui/src/main/frontend/webpack.config.js b/workflow-designer-ui/src/main/frontend/webpack.config.js
index c724d9f..23f5334 100644 (file)
--- a/workflow-designer-ui/src/main/frontend/webpack.config.js
+++ b/workflow-designer-ui/src/main/frontend/webpack.config.js
@@ -125,6 +125,10 @@ module.exports = (env, argv) => {
                     test: /\.ts|\.tsx$/,
                     loader: ['babel-loader', 'awesome-typescript-loader'],
                     include: srcPath
+                },
+                {
+                    test: /\.woff|\.woff2$/,
+                    loader: 'file-loader'
                 }
             ]
         },