Fix long package name and apply mapping table style

Issue-ID: CCSDK-2321
Issue-ID: CCSDK-2322

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

11 files changed, 240 insertions, 132 deletions

diff --git a/cds-ui/designer-client/angular.json b/cds-ui/designer-client/angular.json
index a84b95e39..256c35c1e 100644
--- a/cds-ui/designer-client/angular.json
+++ b/cds-ui/designer-client/angular.json
@@ -61,10 +61,12 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [{
-                "replace": "src/environments/environment.ts",
-                "with": "src/environments/environment.prod.ts"
-              }],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -74,7 +76,8 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "budgets": [{
+              "budgets": [
+                {
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
@@ -122,10 +125,7 @@
               "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "./node_modules/font-awesome/css/font-awesome.css"
             ],
-            "scripts": [
-
-
-            ]
+            "scripts": []
           }
         },
         "lint": {
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index 9df5d033f..46997c4ab 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -361,6 +361,8 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
           "dependencies": {
@@ -2998,6 +3000,16 @@
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "blob": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
@@ -5142,6 +5154,13 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
       "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
@@ -6751,6 +6770,8 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
           "dependencies": {
@@ -8015,6 +8036,13 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
+    "nan": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -8060,6 +8088,11 @@
         "brace": "^0.11.1"
       }
     },
+    "ngx-bootstrap": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.6.1.tgz",
+      "integrity": "sha512-8fDs3VaaWgKpupakPKS0QaUc+1E/JMBGJDxUUODjyIkLtFr1A8vH4cjXiV3AfrPvhK27GH0oyTPyKWKcCjEtVg=="
+    },
     "ngx-file-drop": {
       "version": "8.0.8",
       "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-8.0.8.tgz",
@@ -11575,6 +11608,8 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
           "dependencies": {
@@ -12405,6 +12440,8 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
           "dependencies": {
diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index ffad818c0..ec968ba7a 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -41,6 +41,7 @@
     "lodash": "^4.17.15",
     "ng-sidebar": "^9.1.1",
     "ng2-ace-editor": "^0.3.9",
+    "ngx-bootstrap": "^5.6.1",
     "ngx-file-drop": "^8.0.8",
     "rxjs": "~6.4.0",
     "stream": "0.0.2",
diff --git a/cds-ui/designer-client/src/app/app.module.ts b/cds-ui/designer-client/src/app/app.module.ts
index d6e9b36df..da7ddfbd0 100644
--- a/cds-ui/designer-client/src/app/app.module.ts
+++ b/cds-ui/designer-client/src/app/app.module.ts
@@ -35,6 +35,7 @@ import {SharedModulesModule} from './modules/shared-modules/shared-modules.modul
 import {NgxFileDropModule} from 'ngx-file-drop';
 import {ResourceDictionaryModule} from './modules/feature-modules/resource-dictionary/resource-dictionary.module';
 
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -51,7 +52,7 @@ import {ResourceDictionaryModule} from './modules/feature-modules/resource-dicti
         SharedModulesModule,
         NgxFileDropModule,
         ResourceDictionaryModule,
-        SidebarModule
+        SidebarModule,
     ],
 
     providers: [ApiService],
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 1ff03b221..ceb2bd497 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -23,7 +23,7 @@
             <div class="container">
                 <div class="creat-action-container">
 
-                    <a href="#" class="action-button" (click)="editBluePrint()">
+                    <a href="#" class="action-button save" (click)="editBluePrint()">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </a>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
index de2b3831d..6622f6700 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -62,7 +62,7 @@
             <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags"
                 placeholder="Ex., vDNS-CDS">
         </div>
-        <div class="model-note-container tag-notes">Seprate tags with comma or space</div>
+        <div class="model-note-container tag-notes">Use ENTER to add tag</div>
         <div class="model-note-container tages-container">
             <span *ngFor="let tag of tags" class="single-tage">{{tag}}
                 <i (click)="removeTag(tag)" class="fa fa-times-circle"></i>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 1253dc10b..ee4368711 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -20,7 +20,7 @@
         <div class="container-fluid body-container">
             <div class="container">
                 <div class="creat-action-container">
-                    <a href="#" class="action-button" (click)="saveBluePrint()">
+                    <a href="#" class="action-button save" (click)="saveBluePrint()">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </a>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index a33087461..16c3101f2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -58,7 +58,7 @@
                         <a href="#" data-toggle="modal" (click)="allowedExt=[getFileExtension()]"
                             data-target="#templateModal"><b>Import
                                 File</b></a></div>
-                    <div class="editor-container">
+                    <div class="editor-container mb-4">
                         <app-source-editor (textChange)="textChanges($event,templateInfo.fileName)"
                             [(text)]="templateFileContent"></app-source-editor>
                     </div>
@@ -87,7 +87,7 @@
                             class="mapping-source-load">
                             <i class="icon-upload-attributes"></i>
                             <br />
-                            <div>Upload attribute list</div>
+                            <div>Upload Attributes List</div>
                             <div class="source-load-note">(Should be comma delimited file)</div>
                         </a>
                         <!-- <a href="#" class="mapping-source-load">
@@ -119,8 +119,8 @@
                         <tbody>
                             <tr *ngFor="let dict of resourceDictionaryRes">
                                 <td>
-                                    <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
-                                    <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
+                                    <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
+                                    <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
                                 </td>
                                 <td>{{ dict.name }}</td>
                                 <td>{{ dict.name }}</td>
@@ -166,8 +166,8 @@
                         <tbody>
                             <tr *ngFor="let dict of mappingRes">
                                 <td>
-                                    <i *ngIf="dict.definition?.property?.required" class="fa fa-check-square mx-2"></i>
-                                    <i *ngIf="!dict.definition?.property?.required" class="fa fa-square mx-2"></i>
+                                    <img *ngIf="dict.definition?.property?.required" src="/assets/img/icon-required-yes.svg">
+                                    <img *ngIf="!dict.definition?.property?.required" src="/assets/img/icon-required-no.svg">
                                 </td>
                                 <td>{{ dict['name'] }}</td>
                                 <td>{{ dict['name'] }}</td>
@@ -194,8 +194,8 @@
 
         </div>
         <div class="template-mapping-action">
-            <button class="btn btn-sm btn-outline-secondary">Cancel</button>
-            <button (click)="saveToStore()" class="btn btn-sm btn-primary">Submit</button>
+            <button class="btn btn-outline-secondary">Cancel</button>
+            <button (click)="saveToStore()" class="btn btn-primary">Submit</button>
         </div>
     </div>
 </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index ed67dff40..49c80d3ac 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -8,10 +8,12 @@
             <div class="card-footer row">
                 <div class="col text-center">
                     <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
-                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Package
+                        class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
+                        Package
                     </a>
-                    <br/>
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
+                    <br />
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i
+                            class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                 </div>
             </div>
@@ -19,102 +21,105 @@
     </div>
     <div class="col-lg-3 col-md-6 d-flex" *ngFor="let bluePrint of viewedPackages">
         <!--Card 1-->
-            <div class="card">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-9 pr-0">
-                            <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
-                                (click)="testDispatch(bluePrint)">
-                                <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
-                                {{bluePrint.artifactName}}<span>.vLB.CDS</span>
-                                <span class="package-version">Version 1.0.2</span>
-                            </a>
-
-                        </div>
-                        <div class="col-3">
+        <div class="card">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-10 pr-0">
+                        <a class="card-title" [routerLink]="['/packages/package', bluePrint.id]"
+                            (click)="testDispatch(bluePrint)">
+                            <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
+                            <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom">
+                                {{bluePrint.artifactName}}<span>.vLB.CDS</span></p>
+                            <span class="package-version">V 1.0.2</span>
+                        </a>
 
-                            <div class="dropdown">
-                                <input class="dropdown-toggle" type="text">
-                                <div class="dropdown-text">
-                                    <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
-                                    <i class="icon-menuDots" aria-hidden="true"></i>
-                                </div>
-                                <ul class="dropdown-content">
-                                    <li class="action-clone">
-                                        <a href="#">
-                                            <i class="icon-clone-sm" aria-hidden="true"></i>
-                                            Clone
-                                        </a>
-                                    </li>
-                                    <li class="action-archive">
-                                        <a href="#">
-                                            <i class="icon-archive-sm" aria-hidden="true"></i>
-                                            Archive
-                                        </a>
-                                    </li>
-                                    <li class="action-archive">
-                                        <a href="#">
-                                            <i class="icon-download" aria-hidden="true"></i>
-                                            Download
-                                        </a>
-                                    </li>
-                                    <li class="action-delete">
-                                        <a href="#">
-                                            <i class="icon-delete-sm" aria-hidden="true"></i>
-                                            Delete
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-
-                        </div>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
-                            </p>
-                            <p class="mb-2">By {{bluePrint.updatedBy}}</p>
-                            <p class="package-desc tooltip-bottom" data-tooltip="DESCRIPTION:
-                            The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.">Description text quisquam est dolorem, velit...</p>
-                            
-                            <ul class="package-contributers">
-                                <li>
-                                    <button type="button" class="border-fade" data-toggle="tooltip"
-                                        data-placement="bottom" title="User name">
-                                        <img src="/assets/img/img-user1.jpeg">
-                                    </button>
+                    <div class="col-2">
+                        <div class="dropdown">
+                            <input class="dropdown-toggle" type="text">
+                            <div class="dropdown-text">
+                                <!-- <img src="/assets/img/icon-menuDots.svg" title="Actions"> -->
+                                <i class="icon-menuDots" aria-hidden="true"></i>
+                            </div>
+                            <ul class="dropdown-content">
+                                <li class="action-clone">
+                                    <a href="#">
+                                        <i class="icon-clone-sm" aria-hidden="true"></i>
+                                        Clone
+                                    </a>
                                 </li>
-                                <li>
-                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                        title="User name">
-                                        <img src="/assets/img/img-user2.jpg">
-                                    </button>
+                                <li class="action-archive">
+                                    <a href="#">
+                                        <i class="icon-archive-sm" aria-hidden="true"></i>
+                                        Archive
+                                    </a>
                                 </li>
-                                <li>
-                                    <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                        title="User name">
-                                        <img src="/assets/img/img-user3.jpg">
-                                    </button>
+                                <li class="action-archive">
+                                    <a href="#">
+                                        <i class="icon-download" aria-hidden="true"></i>
+                                        Download
+                                    </a>
                                 </li>
-                                <li>
-                                    <a href="">5 contributors</a>
+                                <li class="action-delete">
+                                    <a href="#">
+                                        <i class="icon-delete-sm" aria-hidden="true"></i>
+                                        Delete
+                                    </a>
                                 </li>
                             </ul>
                         </div>
+
                     </div>
-                    <div class="card-footer">
-                        <div class="row">
-                            <div class="col">
-                                <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology" aria-hidden="true"></i>Designer Mode
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
+                        </p>
+                        <p class="mb-2">By {{bluePrint.updatedBy}}</p>
+                        <p class="package-desc" [delay]="300"
+                            tooltip="DESCRIPTION:
+                            The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
+                            placement="auto">Description text quisquam est dolorem, velitThe standard chunk of Lorem
+                            Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
+                            1.10.33 from de Finibus Bonorum et</p>
+                        <ul class="package-contributers">
+                            <li>
+                                <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom"
+                                    title="User name">
+                                    <img src="/assets/img/img-user1.jpeg">
                                 </button>
-                            </div>
-                            <div class="col">
-                                <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
-                            </div>
+                            </li>
+                            <li>
+                                <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
+                                    <img src="/assets/img/img-user2.jpg">
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
+                                    <img src="/assets/img/img-user3.jpg">
+                                </button>
+                            </li>
+                            <li>
+                                <a href="">5 contributors</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <div class="row">
+                        <div class="col">
+                            <button type="button" class="btn btn-card-topology"><i class="icon-btn-card-topology"
+                                    aria-hidden="true"></i>Designer Mode
+                            </button>
+                        </div>
+                        <div class="col">
+                            <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
+                                    class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
                         </div>
                     </div>
                 </div>
-
             </div>
+
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
index 7229891f5..7663fb8dc 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/shared-modules.module.ts
@@ -2,13 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HeaderComponent } from './header/header.component';
 import { RouterModule } from '@angular/router';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   declarations: [HeaderComponent],
   imports: [
     CommonModule,
     RouterModule,
+    TooltipModule.forRoot(),
   ],
-  exports : [HeaderComponent]
+  exports : [HeaderComponent, TooltipModule, ]
 })
 export class SharedModulesModule { }
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index b44a36235..0f79bc1b7 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -470,13 +470,14 @@ height: 40px;
 }
 .packages-card .card-title{
   margin-bottom: 0 !important;
-  font-size: 15px;
+  font-size: 13px;
   font-weight: bold;
   color: #1B3E6F;
 }
 .packages-card .card-title span{
   color: #1B3E6F;
   font-size: 11px;
+  vertical-align: bottom;
 }
 .packages-card p{
   font-size: 12px;
@@ -485,6 +486,10 @@ height: 40px;
 .packages-card p.package-desc{
   font-size: 13px;
   text-align: left;
+  display: -webkit-box;  
+  -webkit-line-clamp: 1; 
+  -webkit-box-orient: vertical;   
+  overflow: hidden;
 }
 .packages-card p.package-desc:hover{
   color: #1B3E6F !important;
@@ -1046,10 +1051,23 @@ height: 40px;
 }
 .packages-card .card-title{
   margin-bottom: 0 !important;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: bold;
 }
-.packages-card .card-title:hover{
+.packages-card .card-title .packageName{
+  margin-bottom: 0;
+  display: inline-block;
+  width: auto;
+  max-width: 76%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  vertical-align: bottom;
+  color: #1B3E6F;
+}
+.packages-card .card-title:hover,
+.packages-card .card-title:hover .packageName{
   text-decoration: none;
   color: #1273EB;
 }
@@ -1157,10 +1175,13 @@ height: 40px;
   background: #1B3E6F;
   box-shadow: none;
 }
+.package-version{
+  color: #C3CDDB !important;
+}
 .package-version::before{
   content: "|";
-  margin-left: 12px;
-  margin-right: 10px;
+  margin-left: 8px;
+  margin-right: 6px;
   vertical-align: text-bottom;
 }
 
@@ -1579,6 +1600,32 @@ ul.package-contributers{
   margin-left: 0;
   margin-bottom: -16px;
 }
+
+/*TooltipModule - Shady*/
+.tooltip:before,
+.tooltip:after{
+  width: 100% !important;
+}
+.tooltip .tooltip-inner{
+  max-width: 280px !important;
+  width: 100% !important;
+  text-align: left!important;
+  color:#1B3E6F;
+  background-color: #F4F9FE;
+  border: solid 1px #E6EDF5;
+  border-radius: 3px !important;
+  font-size: 11px;
+}  
+.bs-tooltip-bottom .arrow::before{
+  border-bottom-color:  #E6EDF5  !important;
+}
 
+.bs-tooltip-top .arrow::before{
+  border-top-color:  #E6EDF5  !important;
+}

+	
+
+
+
 .btn{
 padding-right: 20px !important;
 padding-left: 20px !important;
@@ -1911,6 +1958,9 @@ hr{
   font-size: 11px;
   color: #C3CDDB;
 }
+.action-button.save{
+  color: #1273EB;
+}
 .action-button.delete{
   color: #BABBC3;
 }
@@ -2494,6 +2544,8 @@ margin-right: 5px;
 }
 .template-mapping-action button{
   border-radius: 50px;
+  padding: 6px 20px;
+  font-size: 14px;
 }
 .template-mapping-action .btn-primary{
   background:#5DBDBA !important ;
@@ -2521,22 +2573,22 @@ margin-right: 5px;
 .dataTables_empty {
   display: none;
 }
-#DataTables_Table_0_length,
-#DataTables_Table_0_filter{
+.dataTables_length,
+.dataTables_filter{
   margin-bottom: 6px;
-  color: #1B3E6F;
+  color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
 }
 
-#DataTables_Table_0_filter input{
+.dataTables_filter input{
   color: #1B3E6F;
   background: url(../src/assets/img/icon-search.svg) 9px center no-repeat;
   padding: 4px 9px 4px 24px;
   border: solid 1px #ECEDF2;
   border-radius: 4px;
 }
-#DataTables_Table_0_filter input:focus{
+.dataTables_filter input:focus{
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
 #mapping-table th,
@@ -2565,41 +2617,45 @@ table.dataTable.no-footer{
   margin-bottom: 9px;
   border-bottom: solid 1px #ECEDF2 !important;
 }
-#DataTables_Table_0_info{
+.dataTables_info{
   padding-top: 12px;
-  color: #1B3E6F;
+  color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
 }
-#DataTables_Table_0_paginate,
-#DataTables_Table_0_paginate a{
+.dataTables_wrapper .dataTables_paginate,
+.dataTables_wrapper .dataTables_paginate a.paginate_button,
+.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
   margin-bottom: 3px;
   color: #1B3E6F !important;
   font-size: 13px;
   font-weight: bold;
+  border: 0 !important;
 }
-#DataTables_Table_0_paginate .paginate_button,
-#DataTables_Table_0_paginate .paginate_button:hover{
+.dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
   border: 0;
-  background: none;
+  color: #1B3E6F !important;
+  background: none !important;
 }
-.dataTables_wrapper .dataTables_paginate .paginate_button{
+.dataTables_wrapper .dataTables_paginate a.paginate_button{
   padding: 0.4em .9em !important;
 }
-#DataTables_Table_0_paginate .paginate_button.current{
+.dataTables_wrapper .dataTables_paginate a.paginate_button.current{
   color: #1B3E6F !important;
   background: #F4F9FE !important;
-  border: solid 1px #EEF4F9;
+  border: solid 1px #EEF4F9 !important;
   border-radius: 100% !important;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
   outline: 0;
 }
-#DataTables_Table_0_paginate a.paginate_button.disabled{
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{
   opacity: .6;
-  
 }
-#DataTables_Table_0_paginate a.paginate_button.disabled:hover{
+.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
   cursor: default;
+  background: none !important;
+  border: 0 !important;
 }
 #mapping-table .form-control,
 #mapping-table .custom-select{
@@ -2620,7 +2676,13 @@ table.dataTable.no-footer{
   background-color: #F4F9FE;
   color: #1B3E6F;
 }
-
+#mapping-table .form-control:disabled{
+  padding-left: 0;
+  box-shadow: none;
+  border: 0;
+  background: transparent;
+  color: #1B3E6F;
+}
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
   .page-title{