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

8 files changed, 143 insertions, 51 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index 051ef1634..7f1c9f35a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -99,7 +99,7 @@
 <!--Action - Add Custom Attribute - Modal-->
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
      aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+    <div class="modal-dialog  modal-dialog-scrollable" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalScrollableTitle">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 43f3818a0..c54673d8e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -259,8 +259,9 @@ button.rotate{
   text-decoration: none;
 }
 #board-paper svg{
-  top: 70px;
+  top: 30px;
   left: 0;
+  height: 95%;
 }
 .componentsList tspan{
   /* width:30px !important;  */
@@ -279,8 +280,9 @@ tspan#type{
 /*ACTIONS & COMPONENTS MENU*/
 .input-search-controller{
   height: 40px;
-  padding-left: 42px;
-  background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
+  padding-left: 36px;
+  background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
+  background-size: 4.5%;
   border-radius: 0;
   border: 0;
   border-bottom: solid 1px #D7E7F9;
@@ -289,7 +291,7 @@ tspan#type{
 }
 .input-search-controller::placeholder{
   color: #D0D7E4;
-  font-size: 11px;
+  font-size: 12px;
 }
 .input-search-controller:focus{
   background-color: #fff !important;
@@ -375,7 +377,11 @@ p.compType-4{
   font-size: 12px;
   color: #C3CDDB;
 }
-
+.controllerSidebar .joint-paper{
+  width: 98% !important;
+  height: 72vh !important;
+  margin: 0 !important;
+}
 .actionBtns .btn{
   margin: 0px 15px 16px -90px;
   /* padding: 9px 20px; */
@@ -390,7 +396,7 @@ p.compType-4{
 .new-action:hover{
   margin: 9px 0 4px 3px;
   padding: 6px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   color: #1B3E6F;
 }
@@ -424,6 +430,12 @@ p.compType-4{
   height: 65vh !important;
   overflow-y: auto;
 }
+.actionsList ul{
+  padding-left: 0;
+}
+.actionsList li{
+  list-style: none;
+}
 .componentsList .list-group-item{
   margin-bottom: 10px;
   padding-left: 40px;
@@ -699,6 +711,9 @@ p.compType-4{
 .add-attribute .btn:hover i::before{
   color: #fff;
 }
+.add-attribute .btn:focus{
+  box-shadow: none;
+}
 .icon-function-attribute{
   font-size: 18px;
 }
@@ -741,10 +756,12 @@ p.compType-4{
   font-size: 14px;
 }
 .attributesContainer label{
+  margin-bottom: 0;
   color: #1B3E6F;
   /* text-transform: uppercase; */
   font-size: 12px;
   font-weight: bold;
+  line-height: 32px;
 }
 .attributesContainer label.custom-control-label{
   text-transform: unset;
@@ -789,7 +806,7 @@ p.compType-4{
   border: 0;
 }
 .attributeOptions a:not(:first-child){
-  margin-left: 18px;
+  margin-left: 14px;
 }
 .attributeOptions i{
   color: #103D73 !important;
@@ -1000,9 +1017,9 @@ p.compType-4{
 
 
 .joint-paper{
-  width: 94% !important;
-  height: 100vh !important;
-  margin: 0 auto !important;
+  width: 96.4% !important;
+  height: 80vh !important;
+  margin: 60px auto 0 !important;
 }
 ul.templateLegend{
   margin: 0;
@@ -1049,9 +1066,94 @@ ul.editor{
   font-size: 12px;
 }
 /*Modal*/
-.modal-backdrop{z-index: -1}
-.modal-holder.modal-backdrop{z-index: 100}
-.modal-holder + .modal-dialog {z-index: 1000}
+.modal{
+  top: 60px;
+}
+.modal-backdrop{
+  z-index: 0 !important;
+  opacity: 0 !important;
+}
+/* .modal-holder.modal-backdrop{z-index: 100}
+.modal-holder + .modal-dialog {z-index: 1000} */
 .modal-dialog{
-  max-width: 680px;
-}
\ No newline at end of file
+  max-width: 50%;
+}
+.modal-body{
+  font-size: 14px;
+}
+.createAttributeTabs .nav-link{
+  padding-top: 0 !important;
+}
+.createAttributeTabs .nav-item a,
+.createAttributeTabs .nav-item a.active{
+  border-radius: 0 !important;
+}
+.createAttributeTabs .nav-link{
+  text-transform: uppercase !important;
+  border-radius: 0 !important;
+  border: 0 !important;
+}
+.createAttributeTabs .nav-link.active{
+  border-radius: 0 !important;
+  border-bottom: solid 1px #1B3E6F !important;
+}
+.createAttributeTabs .nav-item{
+  margin-left: 50px;
+}
+.createAttributeTabs .tab-content{
+  margin-top: 20px;
+  padding: 20px 50px;
+  border: solid 1px #F4F9FE;
+}
+/*FORM*/
+.create-form .col-form-label{
+  color: #1B3E6F;
+  font-size: 12px;
+  font-weight: bold;
+}
+.create-form .col-form-label span{
+  color: #FF6469;
+}
+.create-form .form-control{
+  margin-bottom: 9px;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0;
+  border: 0;
+  border-bottom: solid 1px #EFEFF4;
+  font-size: 13px;
+  box-shadow: none !important;
+  color: #1B3E6F;
+}
+.create-form .form-control::placeholder{
+  color: #C3CDDB;
+}
+.create-form .form-control:focus{
+  border-bottom-color: #1B3E6F;
+  -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+  -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+  box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
+  background-color: transparent !important;
+  text-shadow: none;
+}
+.list-group-item{
+  margin-bottom: 9px;
+  padding: 9px 1.25rem;
+  border-color: #E6EDF5;
+  font-size: 11px;
+  color: #1B3E6F;
+  font-weight: bold;
+  text-align: center;
+}
+.list-group-item.active{
+  color: #1B3E6F;
+  background-color: #C3CDDB;
+  border-color: #C3CDDB;
+}
+.list-group-horizontal .list-group-item + .list-group-item{
+  border-left-width: 1px;
+}
+.create-form .custom-control-input:checked ~ .custom-control-label{
+  background-color: transparent !important;
+  color: #1B3E6F;
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
index 537a0a8ca..e717d9019 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -11,8 +11,8 @@
                     <i class="fa fa-angle-right ml-2 mr-2"></i>
                     <li class="breadcrumb-item">
                         <a routerLink="/packages/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
-                        <button type="button" class="btn package-info-btn" data-toggle="modal"
-                                data-target="#exampleModalLong">
+                        <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
+                                data-target="#exampleModalLong" data-tooltip="Package Details">
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
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)">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index f81b02643..0ffa9780a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -6,9 +6,10 @@
         <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <!--Tour Starter-->
+            <div>
             <input id="clicker" [checked]="startTour" type="checkbox" />
             <label class="ml-1" for="clicker">Start the tour</label>
-
+        </div>
             <div class="panel-wrap packageWizard">
                 <div class="panel">
                     <button id="clicker1" class="close" type="button" (click)="stopTour()">
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index b215dd46a..252cb89b1 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -582,7 +582,7 @@ height: 40px;
 .packages-card [data-tooltip]:after {
   padding: 9px;
   font-size: 11px;
-  background: #fff;
+  background: #C3CDDB;
   border: solid 1px #E6EDF5;
   box-shadow: 0 0 12 rgba(0,0,0,0.8);
   border-radius: 3px;
@@ -1946,8 +1946,8 @@ ul.package-contributers{
 [data-tooltip]:after {
   z-index: 1000;
   padding: 8px 20px !important;
-  width: auto;
-  background-color: #fff !important;
+  width: max-content;
+  background-color: #C3CDDB !important;
   color: #1B3E6F;
   content: attr(data-tooltip);
   font-size: 12px;
@@ -2015,7 +2015,7 @@ ul.package-contributers{
   margin-right: -12px;
   margin-bottom: 0;
   border-top-color: transparent;
-  border-left-color: #fff;
+  border-left-color: #C3CDDB;
   /* border-left-color: hsla(0, 0%, 20%, 0.9); */
 }
 
@@ -2040,8 +2040,8 @@ ul.package-contributers{
   margin-top: -12px;
   margin-bottom: 0;
   border-top-color: transparent;
-  border-bottom-color: #DEE8F3;
-  border-bottom-color: rgba(222, 232, 243, 1.0);
+  border-bottom-color: #C3CDDB;
+  border-bottom-color: rgba(195, 205, 219, 1.0);
 }
 
 .tooltip-bottom:hover:before,
@@ -2064,7 +2064,7 @@ ul.package-contributers{
   margin-bottom: 0;
   margin-left: -12px;
   border-top-color: transparent;
-  border-right-color: #fff;
+  border-right-color: #C3CDDB;
   /* border-right-color: hsla(0, 0%, 20%, 0.9); */
 }
 
@@ -2100,8 +2100,7 @@ ul.package-contributers{
   width: 100% !important;
 }
 .tooltip .tooltip-inner{
-  width: auto !important;
-  max-width: 280px !important;
+  width: max-content !important;
   text-align: left!important;
   /* color:#1B3E6F;
   background-color: #fff !important; */
@@ -2140,8 +2139,8 @@ padding-left: 20px !important;
   border-radius: 20px !important;
 }
 .btn-primary{
-    background-color: #1273EB !important;
-    border-color: #1273EB !important;
+  background-color: #1273EB !important;
+  border-color: #1273EB !important;
 }
 .btn-primary:hover {
   background-color: #0069d9 !important;