Add and modify style elements of Designer components

Issue-ID: CCSDK-2823
Issue-ID: CCSDK-2800
Issue-ID: CCSDK-2780

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I20612659baf227f4d2543b4fc1312a988eab144a

3 files changed, 11 insertions, 21 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
index 7960e83d1..b7a0ff9d5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts
@@ -15,8 +15,8 @@ declare module 'jointjs' {
     }
 }
 
-const rectWidth = 616;
-const rectHeight = 381;
+const rectWidth = '100%';
+const rectHeight = '100%';
 // custom element implementation
 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
 const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeName, {
@@ -40,18 +40,8 @@ const ActionElement = joint.shapes.standard.Rectangle.define(ActionElementTypeNa
         <g id="7.2-Designer---Insert-Action" transform="translate(-395.000000, -137.000000)">
             <g id="workflow-container" transform="translate(401.000000, 137.000000)">
                 <g id="Card">
-                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#custom-action"></use>
-                    <use stroke="#1273EB" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" xlink:href="#custom-action"></use>
-                </g>
-                <g id="name">
-                    <path d="M2,0 L85,0 C86.1045695,-2.02906125e-16 87,
-                    0.8954305 87,2 L87,30 L87,30 L0,30 L0,
-                    2 C-1.3527075e-16,0.8954305 0.8954305,
-                    2.02906125e-16 2,0 Z" id="Rectangle"
-                    fill="#C3CDDB"></path>
-                    <text id="Action-1" font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="12" font-weight="bold" fill="#1B3E6F">
-                        <tspan id="label" x="20" y="20">Action 1</tspan>
-                    </text>
+                    <use fill="black" fill-opacity="0" filter="url(#filter-2)" xlink:href="#custom-action"></use>
+                    <use fill-rule="evenodd" xlink:href="#custom-action"></use>
                 </g>
             </g>
         </g>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
index 72019bfa0..7411eed49 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts
@@ -28,9 +28,9 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                 <g id="func-board-element-conponent" transform="translate(30.000000, 70.000000)">
                     <g id="execute" transform="translate(304.000000, 0.000000)">
                         <g id="Group" transform="translate(7.000000, 0.000000)">
-                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="330" height="84" rx="2"></rect>
-                            <g id="Group-4" transform="translate(20.000000, 20.000000)" fill="#FFFFFF">
-                                <g id="database0-copy" transform="translate(15.000000, 0.000000)" fill-rule="nonzero">
+                            <rect id="func-board-element-rectangle" fill="#1B3E6F" x="15" y="0" width="280" height="150" rx="3"></rect>
+                            <g id="Group-4" transform="translate(20.000000, 25.000000)" fill="#FFFFFF">
+                                <g id="database0-copy" transform="translate(115.000000, 5.000000)" fill-rule="nonzero">
                                     <path d="M35.544,6.00705882 C34.7265882,
                                     2.97882353 28.6425882,0 18,0 C7.35741176,
                                     0 1.27270588,2.97882353 0.456,6.00705882 C0.396705882,
@@ -304,8 +304,8 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionEl
                                     font-family="HelveticaNeue-Bold, Helvetica Neue"
                                     font-size="13"
                                 font-weight="bold" line-spacing="18">
-                                    <tspan id="label" x="64" y="18">execute</tspan>
-                                    <tspan id="type" x="64" y="40"
+                                    <tspan id="label" x="20" y="70">execute</tspan>
+                                    <tspan id="type" x="30" y="92"
                                     font-family="HelveticaNeue, Helvetica Neue" font-size="12"
                                     font-weight="normal"></tspan>
                                 </text>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
index 48a680982..25908b047 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts
@@ -20,7 +20,7 @@ declare module 'jointjs' {
 }
 
 const rectWidth = 260;
-const rectHeight = 60;
+const rectHeight = 50;
 // custom element implementation
 // https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup
 const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', {
@@ -45,7 +45,7 @@ const FunctionElement = joint.shapes.standard.Rectangle.define('palette.Function
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="7.1-Designer" transform="translate(-14.000000, -618.000000)">
-            <g id="controller" transform="translate(0.000000, 60.000000)">
+            <g id="controller" transform="translate(0.000000, 70.000000)">
                 <g id="functions" transform="translate(0.000000, 479.000000)">
                     <g id="list" transform="translate(8.000000, 51.000000)">
                         <g id="1" transform="translate(12.000000, 32.000000)">