From 75680a7215d2b8cd7b7ca95132df1eb6f90ef588 Mon Sep 17 00:00:00 2001
From: Sarah Abouzainah <sabouzainah.ext@orange.com>
Date: Thu, 16 Jul 2020 17:52:00 +0200
Subject: Add Help link and User profile menu

Issue-ID: CCSDK-2567

Signed-off-by: Sarah Abouzainah <sabouzainah.ext@orange.com>
Change-Id: I55d6cd47910ef72a2015c60cc20d8a19bf5cc10b
---
 .../configuration-dashboard.component.html         | 896 ++++++++++-----------
 .../packages/designer/designer.component.css       |  24 +-
 .../packages/designer/designer.component.html      |  16 +-
 .../source-view/source-view.component.html         |  33 +-
 .../imports-tab/imports-tab.component.html         |   4 +-
 .../package-creation.component.html                |   4 +-
 .../packages-header/packages-header.component.html |  66 +-
 .../shared-modules/header/header.component.html    |   8 +-
 .../designer-client/src/assets/icomoon/style.css   |   1 -
 .../designer-client/src/assets/img/img-user.jpeg   | Bin 0 -> 25183 bytes
 cds-ui/designer-client/src/styles.css              |  96 ++-
 11 files changed, 638 insertions(+), 510 deletions(-)
 create mode 100755 cds-ui/designer-client/src/assets/img/img-user.jpeg

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 fb2dce6c9..318b30c14 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
@@ -121,534 +121,508 @@
                                 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                 <div class="modal-dialog" role="document">
                                     <div class="modal-content">
-                                        <div class="modal-content">
-                                            <div class="modal-header">
-                                                <h5 class="modal-title" id="exampleModalLongTitle"></h5>
-                                                <button type="button" class="close" data-dismiss="modal"
-                                                    aria-label="Close" title="Close">
-                                                    <i class="icon-action-close"></i>
-                                                </button>
-                                            </div>
-                                            <div class="modal-body">
-                                                <div id="carouselExampleIndicators" class="carousel slide"
-                                                    data-ride="carousel" data-interval="false">
-                                                    <div class="carousel-inner" style="height: 480px">
-                                                        <!--OPTIONS SLIDE-->
-                                                        <div class="carousel-item active">
-                                                            <h1>Let’s create the 1st Action</h1>
-                                                            <div class="row">
-                                                                <!--Custom Action-->
-                                                                <div class="col-3 d-flex">
-                                                                    <a class="d-flex"
-                                                                        data-target="#carouselExampleIndicators"
-                                                                        data-slide-to="1">
-                                                                        <div class="card actionType custom">
-                                                                            <div class="card-body">
-                                                                                <h3>Custom</h3>
-                                                                                <p>Start with your own settings</p>
-                                                                                <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="1" class="btn">
-                                                                                    Create
-                                                                                </button>
-                                                                            </div>
-                                                                        </div>
-                                                                    </a>
-                                                                </div>
-                                                                <!--Default Action-->
-                                                                <div class="col-3 d-flex">
-                                                                    <a class="d-flex"
-                                                                        data-target="#carouselExampleIndicators"
-                                                                        data-slide-to="2">
-                                                                        <div class="card actionType default">
-                                                                            <div class="card-body">
-                                                                                <h3>Default</h3>
-                                                                                <p>Explore preset actions from CDS
-                                                                                    Action Catalog</p>
-                                                                                <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="2" class="btn">
-                                                                                    Select
-                                                                                </button>
-                                                                            </div>
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="exampleModalLongTitle"></h5>
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+                                                title="Close">
+                                                <i class="icon-action-close"></i>
+                                            </button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <div id="carouselExampleIndicators" class="carousel slide"
+                                                data-ride="carousel" data-interval="false">
+                                                <div class="carousel-inner">
+                                                    <!--OPTIONS SLIDE-->
+                                                    <div class="carousel-item active">
+                                                        <h3 class="mainHead">Create an action</h3>
+                                                        <h1>How would you like to get started?</h1>
+                                                        <div class="row">
+                                                            <!--Custom Action-->
+                                                            <div class="col-3 d-flex">
+                                                                <a class="d-flex"
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="1">
+                                                                    <div class="card actionType custom">
+                                                                        <div class="card-body">
+                                                                            <h3>Custom</h3>
+                                                                            <p>Start with your own settings</p>
+                                                                            <button
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="1" class="btn">
+                                                                                Create
+                                                                            </button>
                                                                         </div>
-                                                                    </a>
-                                                                </div>
-                                                                <!--Recent Action-->
-                                                                <div class="col-3 d-flex">
-                                                                    <a class="d-flex"
-                                                                        data-target="#carouselExampleIndicators"
-                                                                        data-slide-to="3">
-                                                                        <div class="card actionType recent">
-                                                                            <div class="card-body">
-                                                                                <h3>Recent</h3>
-                                                                                <p>Re-use recent actions of your
-                                                                                    recent
-                                                                                    packages</p>
-                                                                                <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="3" class="btn">
-                                                                                    Select
-                                                                                </button>
-                                                                            </div>
+                                                                    </div>
+                                                                </a>
+                                                            </div>
+                                                            <!--Default Action-->
+                                                            <div class="col-3 d-flex">
+                                                                <a class="d-flex"
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="2">
+                                                                    <div class="card actionType default">
+                                                                        <div class="card-body">
+                                                                            <h3>Default</h3>
+                                                                            <p>Explore preset actions from CDS
+                                                                                Action Catalog</p>
+                                                                            <button
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="2" class="btn">
+                                                                                Select
+                                                                            </button>
                                                                         </div>
-                                                                    </a>
-                                                                </div>
-                                                                <!--Import Action-->
-                                                                <div class="col-3 d-flex">
-                                                                    <a class="d-flex"
-                                                                        data-target="#carouselExampleIndicators"
-                                                                        data-slide-to="4">
-                                                                        <div class="card actionType import">
-                                                                            <div class="card-body">
-                                                                                <h3>Import</h3>
-                                                                                <p>Import your own action files</p>
-                                                                                <button
-                                                                                    data-target="#carouselExampleIndicators"
-                                                                                    data-slide-to="4" class="btn">
-                                                                                    Browse</button>
-                                                                            </div>
+                                                                    </div>
+                                                                </a>
+                                                            </div>
+                                                            <!--Recent Action-->
+                                                            <div class="col-3 d-flex">
+                                                                <a class="d-flex"
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="3">
+                                                                    <div class="card actionType recent">
+                                                                        <div class="card-body">
+                                                                            <h3>Recent</h3>
+                                                                            <p>Re-use recent actions of your
+                                                                                recent
+                                                                                packages</p>
+                                                                            <button
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="3" class="btn">
+                                                                                Select
+                                                                            </button>
                                                                         </div>
-                                                                    </a>
-                                                                </div>
+                                                                    </div>
+                                                                </a>
                                                             </div>
-                                                            <div class="row">
-                                                                <div class="col text-center">
-                                                                    <button class="btn skip-btn"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)">Skip
-                                                                        to Designer Canvas</button>
-                                                                </div>
+                                                            <!--Import Action-->
+                                                            <div class="col-3 d-flex">
+                                                                <a class="d-flex"
+                                                                    data-target="#carouselExampleIndicators"
+                                                                    data-slide-to="4">
+                                                                    <div class="card actionType import">
+                                                                        <div class="card-body">
+                                                                            <h3>Import</h3>
+                                                                            <p>Import your own action files</p>
+                                                                            <button
+                                                                                data-target="#carouselExampleIndicators"
+                                                                                data-slide-to="4" class="btn">
+                                                                                Browse</button>
+                                                                        </div>
+                                                                    </div>
+                                                                </a>
                                                             </div>
                                                         </div>
-                                                        <!--Custom Action Form-->
-                                                        <div class="carousel-item">
-                                                            <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
-                                                                    class="icon-action-back"></i></button>
-                                                            <h1>Create Custom Action</h1>
-                                                            <div class="form-group text-center">
-                                                                <input type="text" [(ngModel)]="customActionName"
-                                                                    class="form-control customAction"
-                                                                    placeholder="Type Action Name" autofocus>
-                                                                <button type="button"
-                                                                    (click)="goToDesignerMode(viewedPackage.id)"
-                                                                    class="btn submit">Start</button>
+                                                        <div class="row">
+                                                            <div class="col text-center">
+                                                                <button class="btn skip-btn"
+                                                                    (click)="goToDesignerMode(viewedPackage.id)">Skip
+                                                                    to Designer Canvas</button>
                                                             </div>
-
                                                         </div>
-                                                        <!--Default Actions Form-->
-                                                        <div class="carousel-item">
-                                                            <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
-                                                                    class="icon-action-back"></i></button>
-                                                            <h1>Choose Action(s) from CDS Default Package </h1>
-                                                            <div class="actionFormWrapper">
-                                                                <div class="row mb-3">
-                                                                    <div class="col sort-packages">
-                                                                        <label class="actionlabel">Version</label>
-                                                                        <div class="dropdown" style="width: 90px">
-                                                                            <input class="dropdown-toggle" type="text">
-                                                                            <div class="dropdown-text">1.6.2</div>
-                                                                            <ul class="dropdown-content">
-                                                                                <li>
-                                                                                    <a>1.1.8</a>
-                                                                                </li>
-                                                                                <li>
-                                                                                    <a>2.1.8</a>
-                                                                                </li>
-                                                                            </ul>
-                                                                        </div>
-                                                                    </div>
-                                                                    <div class="col">
-                                                                        <input type="text"
-                                                                            class="form-control searchInput"
-                                                                            placeholder="Search">
+                                                    </div>
+                                                    <!--Custom Action Form-->
+                                                    <div class="carousel-item">
+                                                        <button data-target="#carouselExampleIndicators"
+                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                class="icon-action-back"></i></button>
+                                                        <h1>Create Custom Action</h1>
+                                                        <div class="form-group text-center">
+                                                            <input type="text" [(ngModel)]="customActionName"
+                                                                class="form-control customAction"
+                                                                placeholder="Type Action Name" autofocus>
+                                                            <button type="button"
+                                                                (click)="goToDesignerMode(viewedPackage.id)"
+                                                                class="btn submit">Start</button>
+                                                        </div>
+
+                                                    </div>
+                                                    <!--Default Actions Form-->
+                                                    <div class="carousel-item">
+                                                        <button data-target="#carouselExampleIndicators"
+                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                class="icon-action-back"></i></button>
+                                                        <h1>Choose Action(s) from CDS Default Package </h1>
+                                                        <div class="actionFormWrapper">
+                                                            <div class="row mb-3">
+                                                                <div class="col sort-packages">
+                                                                    <label class="actionlabel">Version</label>
+                                                                    <div class="dropdown" style="width: 90px">
+                                                                        <input class="dropdown-toggle" type="text">
+                                                                        <div class="dropdown-text">1.6.2</div>
+                                                                        <ul class="dropdown-content">
+                                                                            <li>
+                                                                                <a>1.1.8</a>
+                                                                            </li>
+                                                                            <li>
+                                                                                <a>2.1.8</a>
+                                                                            </li>
+                                                                        </ul>
                                                                     </div>
                                                                 </div>
-                                                                <div class="row actionsListScroll">
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation1"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation1">config-assign</label>
-                                                                            </div>
+                                                                <div class="col">
+                                                                    <input type="text" class="form-control searchInput"
+                                                                        placeholder="Search">
+                                                                </div>
+                                                            </div>
+                                                            <div class="row actionsListScroll">
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation2"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation2">config-assign-test</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation3"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation3">config-deploy</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation4"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation4">config-modify</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
-                                                                <div class="row">
-                                                                    <div class="col text-center">
-                                                                        <p class="selectedActions">0 selected</p>
-                                                                        <button type="button"
-                                                                            (click)="goToDesignerMode(viewedPackage.id)"
-                                                                            class="btn submit">Start</button>
-                                                                    </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col text-center">
+                                                                    <p class="selectedActions">0 selected</p>
+                                                                    <button type="button"
+                                                                        (click)="goToDesignerMode(viewedPackage.id)"
+                                                                        class="btn submit">Start</button>
                                                                 </div>
                                                             </div>
                                                         </div>
-                                                        <!--Recent Actions Form-->
-                                                        <div class="carousel-item">
-                                                            <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
-                                                                    class="icon-action-back"></i></button>
-                                                            <h1>Choose Action(s) from Recent Packages</h1>
-                                                            <div class="actionFormWrapper">
-                                                                <div class="row mb-3">
-                                                                    <div class="col sort-packages">
-                                                                        <label class="actionlabel">Package
-                                                                            Name</label>
-                                                                        <div class="dropdown">
-                                                                            <input class="dropdown-toggle" type="text">
-                                                                            <div class="dropdown-text">CDS (v 1.0.0)
-                                                                            </div>
-                                                                            <ul class="dropdown-content">
-                                                                                <li>
-                                                                                    <a>Test Package (v 1.1.8)</a>
-                                                                                </li>
-                                                                                <li>
-                                                                                    <a>Test Package (v 1.1.8)</a>
-                                                                                </li>
-                                                                                <li>
-                                                                                    <a>Test Package (v 1.1.8)</a>
-                                                                                </li>
-                                                                                <li>
-                                                                                    <a>Test Package (v 1.1.8)</a>
-                                                                                </li>
-                                                                            </ul>
+                                                    </div>
+                                                    <!--Recent Actions Form-->
+                                                    <div class="carousel-item">
+                                                        <button data-target="#carouselExampleIndicators"
+                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                class="icon-action-back"></i></button>
+                                                        <h1>Choose Action(s) from Recent Packages</h1>
+                                                        <div class="actionFormWrapper">
+                                                            <div class="row mb-3">
+                                                                <div class="col sort-packages">
+                                                                    <label class="actionlabel">Package
+                                                                        Name</label>
+                                                                    <div class="dropdown">
+                                                                        <input class="dropdown-toggle" type="text">
+                                                                        <div class="dropdown-text">CDS (v 1.0.0)
                                                                         </div>
-                                                                    </div>
-                                                                    <div class="col">
-                                                                        <input type="text"
-                                                                            class="form-control searchInput"
-                                                                            placeholder="Search">
+                                                                        <ul class="dropdown-content">
+                                                                            <li>
+                                                                                <a>Test Package (v 1.1.8)</a>
+                                                                            </li>
+                                                                            <li>
+                                                                                <a>Test Package (v 1.1.8)</a>
+                                                                            </li>
+                                                                            <li>
+                                                                                <a>Test Package (v 1.1.8)</a>
+                                                                            </li>
+                                                                            <li>
+                                                                                <a>Test Package (v 1.1.8)</a>
+                                                                            </li>
+                                                                        </ul>
                                                                     </div>
                                                                 </div>
-                                                                <div class="row actionsListScroll">
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation1"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation1">config-assign</label>
-                                                                            </div>
+                                                                <div class="col">
+                                                                    <input type="text" class="form-control searchInput"
+                                                                        placeholder="Search">
+                                                                </div>
+                                                            </div>
+                                                            <div class="row actionsListScroll">
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation1" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation2"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation2">config-assign-test</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation2" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation3"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation3">config-deploy</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation3" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation4"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation4">config-modify</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation4" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-6">
-                                                                        <div class="actionName">
-                                                                            <div class="custom-control custom-checkbox">
-                                                                                <input type="checkbox"
-                                                                                    class="custom-control-input"
-                                                                                    id="customControlValidation5"
-                                                                                    required>
-                                                                                <label class="custom-control-label"
-                                                                                    for="customControlValidation5">config-assign1</label>
-                                                                            </div>
+                                                                </div>
+                                                                <div class="col-6">
+                                                                    <div class="actionName">
+                                                                        <div class="custom-control custom-checkbox">
+                                                                            <input type="checkbox"
+                                                                                class="custom-control-input"
+                                                                                id="customControlValidation5" required>
+                                                                            <label class="custom-control-label"
+                                                                                for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
-                                                                <div class="row">
-                                                                    <div class="col text-center">
-                                                                        <p class="selectedActions">0 selected</p>
-                                                                        <button type="button"
-                                                                            class="btn submit">Start</button>
-                                                                    </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col text-center">
+                                                                    <p class="selectedActions">0 selected</p>
+                                                                    <button type="button"
+                                                                        class="btn submit">Start</button>
                                                                 </div>
                                                             </div>
                                                         </div>
-                                                        <!--Import Actions Form-->
-                                                        <div class="carousel-item">
-                                                            <button data-target="#carouselExampleIndicators"
-                                                                data-slide-to="0" title="Back" class="btn back"><i
-                                                                    class="icon-action-back"></i></button>
-                                                            <h1>Import Action(s)</h1>
-                                                            <div class="actionFormWrapper">
-                                                                <div class="row">
-                                                                    <div class="col">
-                                                                        <ngx-file-drop accept=".json"
-                                                                            dropZoneLabel="Drop files here"
-                                                                            (onFileDrop)="dropped($event)"
-                                                                            (onFileOver)="fileOver($event)"
-                                                                            (onFileLeave)="fileLeave($event)">
-                                                                            <ng-template ngx-file-drop-content-tmp
-                                                                                let-openFileSelector="openFileSelector">
-                                                                                <div class="folder-upload">
-                                                                                    <img
-                                                                                        src="assets/img/folder-upload.svg" />
-                                                                                </div>
-                                                                                <div class="folder-upload-text">
-                                                                                    Drag & Drop file
-                                                                                </div>
-                                                                                <div class="folder-upload-text">or
-                                                                                    <button type="button"
-                                                                                        class="btn btn-sm btn-primary"
-                                                                                        (click)="openFileSelector()">Browse
-                                                                                        Files
-                                                                                    </button>
-                                                                                </div>
-                                                                                <div class="folder-upload-type">
-                                                                                    Allowed file
-                                                                                    type: json</div>
-                                                                            </ng-template>
-                                                                        </ngx-file-drop>
-                                                                        <div class="upload-table">
-                                                                            <table class="table">
-                                                                                <thead>
-                                                                                    <tr
-                                                                                        *ngFor="let item of uploadedFiles; let i=index">
-                                                                                        <th width="40"><img
-                                                                                                src="assets/img/icon-file-code.svg" />
-                                                                                        </th>
-                                                                                        <th>{{ item.name }}</th>
-                                                                                        <th width="40"
-                                                                                            class="text-right">
-                                                                                            <img
-                                                                                                src="assets/img/icon-remove-file.svg" />
-                                                                                        </th>
-                                                                                    </tr>
-                                                                                </thead>
-                                                                            </table>
-                                                                        </div>
+                                                    </div>
+                                                    <!--Import Actions Form-->
+                                                    <div class="carousel-item">
+                                                        <button data-target="#carouselExampleIndicators"
+                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                class="icon-action-back"></i></button>
+                                                        <h1>Import Action(s)</h1>
+                                                        <div class="actionFormWrapper">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <ngx-file-drop accept=".json"
+                                                                        dropZoneLabel="Drop files here"
+                                                                        (onFileDrop)="dropped($event)"
+                                                                        (onFileOver)="fileOver($event)"
+                                                                        (onFileLeave)="fileLeave($event)">
+                                                                        <ng-template ngx-file-drop-content-tmp
+                                                                            let-openFileSelector="openFileSelector">
+                                                                            <div class="folder-upload">
+                                                                                <img
+                                                                                    src="assets/img/folder-upload.svg" />
+                                                                            </div>
+                                                                            <div class="folder-upload-text">
+                                                                                Drag & Drop file
+                                                                            </div>
+                                                                            <div class="folder-upload-text">or
+                                                                                <button type="button"
+                                                                                    class="btn btn-sm btn-primary"
+                                                                                    (click)="openFileSelector()">Browse
+                                                                                    Files
+                                                                                </button>
+                                                                            </div>
+                                                                            <div class="folder-upload-type">
+                                                                                Allowed file
+                                                                                type: json</div>
+                                                                        </ng-template>
+                                                                    </ngx-file-drop>
+                                                                    <div class="upload-table">
+                                                                        <table class="table">
+                                                                            <thead>
+                                                                                <tr
+                                                                                    *ngFor="let item of uploadedFiles; let i=index">
+                                                                                    <th width="40"><img
+                                                                                            src="assets/img/icon-file-code.svg" />
+                                                                                    </th>
+                                                                                    <th>{{ item.name }}</th>
+                                                                                    <th width="40" class="text-right">
+                                                                                        <img
+                                                                                            src="assets/img/icon-remove-file.svg" />
+                                                                                    </th>
+                                                                                </tr>
+                                                                            </thead>
+                                                                        </table>
                                                                     </div>
                                                                 </div>
-                                                                <div class="row">
-                                                                    <div class="col text-center">
-                                                                        <button type="button"
-                                                                            class="btn submit mt-4">Import</button>
-                                                                    </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col text-center">
+                                                                    <button type="button"
+                                                                        class="btn submit mt-4">Import</button>
                                                                 </div>
                                                             </div>
                                                         </div>
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 22eeeeb32..f7cff5072 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
@@ -116,7 +116,7 @@ header{
 .btn-topology-action,
 .btn-topology-action:hover{
   margin: 0 6px;
-  padding: 4px 8px;
+  padding: 3px 8px;
   color: #fff;
   border-radius: 50%;
   border: solid .5px #fff;
@@ -125,9 +125,10 @@ header{
   margin-right: 0;
 }
 .btn-topology-action .fa{
-  width: 16px;
-  height: 16px;
+  /* width: 16px;
+  height: 16px; */
   text-align: center;
+  font-size: 14px;
 }
 .topology-actions .dropdown-text,
 .dropdown-toggle:hover ~ .dropdown-text, 
@@ -177,7 +178,7 @@ header{
   padding: 0 !important;
 }
 .package-info h3{
-  font-size: 15px;
+  font-size: 13px;
   font-weight: bold;
 }
 .package-info h3 span{
@@ -385,9 +386,9 @@ p.compType-4{
 }
 .new-action,
 .new-action:hover{
-  margin: 9px 0 4px 18px;
+  margin: 9px 0 4px 3px;
   padding: 6px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: bold;
   color: #1B3E6F;
 }
@@ -486,7 +487,7 @@ p.compType-4{
 /*CANVAS*/
 .source-button.editBar{
   position: absolute;
-  z-index: 9999999;
+  z-index: 1000 /*9999999*/;
   top: 60px;
   /* left: 50%; */
 }
@@ -527,6 +528,7 @@ p.compType-4{
 }
 .editBar .toggoleBtn.active,
 .editBar2 .toggoleBtn.active{
+  padding: 0 10px !important;
   background-color: #1B3E6F !important;
   color: #fff;
 }
@@ -791,7 +793,7 @@ p.compType-4{
   margin-top: 14px;
   padding-left: 30px!important;
   border: 0;
-  font-size: 12px;
+  font-size: 11px;
   color: #1B3E6F !important;
   background-color: #fff !important;
   background-repeat: no-repeat;
@@ -826,13 +828,14 @@ ul.templateLegend{
   color: #0ABDE3;
 }
 ul.editor{
-  margin-right: -40px;
+  /* margin-right: -40px; */
   margin-top: 16px;
 }
 .editor li{
   list-style: none;
 }
 .editor .btn {
+  padding: 0 8px !important;
   box-shadow: none;
 }
 .ace_editor{
@@ -848,3 +851,6 @@ ul.editor{
     margin-left: 12px;
     margin-right: 12px;
 } 
+.zoom-percent{
+  font-size: 12px;
+}
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 7f49d3cf3..6a432fec8 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
@@ -31,19 +31,23 @@
                                     <img src="assets/img/icon-close.svg" />
                                 </button>
                             </div>
-                            <div class="modal-body">
-                                <div class="row package-info">
+                            <div class="modal-body package-info">
+                                <div class="row">
                                     <div class="col">
                                         <h3>Test Package
                                             <span class="package-version">Version 1.0.2</span></h3>
                                     </div>
+                                </div>
+                                <div class="row">
                                     <div class="col mb-3">
                                         <span class="badge badge-primary">test</span>
                                         <span class="badge badge-primary">vDNS-CDS</span>
                                         <span class="badge badge-primary">SCALE-OUT</span>
                                         <span class="badge badge-primary">MARCO</span>
                                     </div>
-                                    <div class="col-2">
+                                </div>
+                                <div class="row">
+                                    <div class="col-2 pr-0">
                                         <img src="/assets/img/img-user3.jpg" class="creator-pic">
                                     </div>
                                     <div class="col-10 pl-0">
@@ -126,7 +130,7 @@
             <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
         </ul>
 
-        <ul class="editor navbar ml-auto">
+        <ul class="editor navbar">
             <li>
                 <button type="button" class="btn tooltip-bottom" data-tooltip="Undo">
                     <img src="/assets/img/icon-undoActive.svg">
@@ -141,14 +145,14 @@
             <li><button type="button" class="btn tooltip-bottom" data-tooltip="Zoom Out">
                     <img src="/assets/img/icon-zoomOut.svg">
                 </button></li>
-            <li>100%</li>
+            <li class="zoom-percent">100%</li>
             <li>
                 <button type="button" class="btn tooltip-bottom" data-tooltip="Zoom In">
                     <img src="/assets/img/icon-zoomIn.svg"> </button>
             </li>
         </ul>
 
-        <ul class="navbar ml-auto" style="list-style: none">
+        <ul class="navbar ml-2" style="list-style: none">
             <li class="nav-item">
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
index 270482f12..eedbe9f85 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
@@ -4,11 +4,11 @@
             <p class="logo mb-0"></p>
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb designer-breadcrumb mb-0">
-                    <li class="breadcrumb-item"> 
+                    <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i> 
-                    <li class="breadcrumb-item"> 
+                    <i class="fa fa-angle-right ml-2 mr-2"></i>
+                    <li class="breadcrumb-item">
                         <a href="/package/{{viewedPackage.id}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
                             data-target="#exampleModalLong">
@@ -30,19 +30,23 @@
                                     <img src="assets/img/icon-close.svg" />
                                 </button>
                             </div>
-                            <div class="modal-body">
-                                <div class="row package-info">
+                            <div class="modal-body package-info">
+                                <div class="row">
                                     <div class="col">
                                         <h3>Test Package
                                             <span class="package-version">Version 1.0.2</span></h3>
                                     </div>
+                                </div>
+                                <div class="row">
                                     <div class="col mb-3">
                                         <span class="badge badge-primary">test</span>
                                         <span class="badge badge-primary">vDNS-CDS</span>
                                         <span class="badge badge-primary">SCALE-OUT</span>
                                         <span class="badge badge-primary">MARCO</span>
                                     </div>
-                                    <div class="col-2">
+                                </div>
+                                <div class="row">
+                                    <div class="col-2 pr-0">
                                         <img src="/assets/img/img-user3.jpg" class="creator-pic">
                                     </div>
                                     <div class="col-10 pl-0">
@@ -120,11 +124,11 @@
                     </li>
                 </ul>
             </li>
-            
+
             <li class="nav-item">
                 <div class="btn-group viewBtns" role="group">
-                    <button (click)="convertAndOpenInDesingerView(viewedPackage.id)"
-                     type="button" class="btn btn-secondary topologySource">Designer</button>
+                    <button (click)="convertAndOpenInDesingerView(viewedPackage.id)" type="button"
+                        class="btn btn-secondary topologySource">Designer</button>
                     <button type="button" class="btn btn-secondary topologyView active">Scripting</button>
                 </div>
             </li>
@@ -148,9 +152,10 @@
         </div>
     </ng-sidebar>
 
-<div ng-sidebar-content id="board-paper">
-    <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
-        [theme]="'tomorrow_night_bright'" #editor style="height:500px">
-    </ace-editor>
+    <div ng-sidebar-content id="board-paper">
+        <ace-editor [(text)]="content" [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
+            [theme]="'tomorrow_night_bright'" #editor style="height:500px">
+        </ace-editor>
 
-   </div>
+    </div>
+    
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index 9ac7a058a..8f2b554d9 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -1,5 +1,5 @@
 <div class="import-container-all">
-    <div class="import-container">
+    <!-- <div class="import-container">
         <div class="import-container-input">
             <input placeholder="Enter file URL then ENTER" type="input" class="ng-pristine ng-valid ng-touched">
             <a class="enter-link" href="#"><i class="icon-enter-link"></i></a>
@@ -7,7 +7,7 @@
         <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
                 (click)="resetTheUploadedFiles()" data-target="#importModal"><b>Import File</b></a></span>
 
-    </div>
+    </div> -->
 
     <div class="accordion">
         <!-- <div class="card creat-card">
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 7afea6b9a..fc001b11b 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
@@ -41,8 +41,8 @@
                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
-                            <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                               role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
+                            <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
+                               role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> -->
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
                                aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
index 09dd4187f..5e04b71ac 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html
@@ -1,10 +1,70 @@
 <!--Page Title-->
-<header class="page-title">
+<header class="page-title" style="padding-top: 14px;padding-bottom: 13px;">
     <div class="row">
-        <h2 class="col m-0">CBA Packages
+        <h2 class="col m-0" style="line-height: 33px;">CBA Packages
             <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
         </h2>
-        <div class="col">
+        <div class="col profile-help">
+            <nav class="navbar navbar-expand-lg navbar-light">
+                  <ul class="navbar-nav ml-auto">
+                    <li class="nav-item help-btn">
+                      <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300"
+                      tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a>
+                    </li>
+                    <div class="nav-item dropdown">
+                        <input class="dropdown-toggle" type="text">
+                        <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
+                        <ul class="dropdown-content">
+                          <li>
+                            <a href="#">Username</a>
+                          </li>
+                          <li>
+                            <a href="#">Settings</a>
+                          </li>
+                          <li>
+                            <a href="#">Projects</a>
+                          </li>
+                          <li>
+                            <a href="#">Log out</a>
+                          </li>
+                        </ul>
+                      </div>
+                    <!-- <li class="nav-item dropdown">
+                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Dropdown
+                      </a>
+                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                      </div>
+                    </li> -->
+                  </ul>
+              </nav>
+            <!-- <ul class="menu-dropdown userProfile">
+                <li><button type="button" class="btn package-info-btn" data-toggle="modal"
+                  data-target="#exampleModalLong">
+                  <i class="icon-info" aria-hidden="true"></i>
+              </button></li>
+              <li>
+                <div class="dropdown">
+                  <input class="dropdown-toggle" type="text">
+                  <div class="dropdown-text">User name</div>
+                  <ul class="dropdown-content">
+                    <li>
+                      <a href="#">Settings</a>
+                    </li>
+                    <li>
+                      <a href="#">Projects</a>
+                    </li>
+                    <li>
+                      <a href="#">Log out</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul> -->
         </div>
     </div>
 </header>
diff --git a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
index bfccac7a0..5ecb38743 100644
--- a/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
+++ b/cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
@@ -49,12 +49,12 @@
           </li> -->
       </ul>
     </div>
-    <ul class="menu-dropdown userProfile">
+    <!-- <ul class="menu-dropdown userProfile">
       <li>
         <div class="dropdown">
           <input class="dropdown-toggle" type="text">
           <div class="dropdown-text">User name</div>
-          <!-- <ul class="dropdown-content">
+          <ul class="dropdown-content">
             <li>
               <a href="#">Settings</a>
             </li>
@@ -64,10 +64,10 @@
             <li>
               <a href="#">Log out</a>
             </li>
-          </ul> -->
+          </ul>
         </div>
       </li>
-    </ul>
+    </ul>-->
 
   </nav>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index 874f94a9b..fcf806c24 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -40,7 +40,6 @@
 }
 .icon-rectangle:before {
   content: "\e906";
-  color: #ff6b6b;
 }
 .icon-file:before {
   content: "\e905";
diff --git a/cds-ui/designer-client/src/assets/img/img-user.jpeg b/cds-ui/designer-client/src/assets/img/img-user.jpeg
new file mode 100755
index 000000000..8b9f98b03
Binary files /dev/null and b/cds-ui/designer-client/src/assets/img/img-user.jpeg differ
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 320ae139e..d4f56c3b0 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -915,6 +915,67 @@ height: 40px;
 .main-container{
   padding: 0 !important;
 }
+/*Profile & Help Area*/
+.profile-help .navbar{
+  padding: 0 !important;
+}
+.profile-help .dropdown{
+  width: 50px;
+}
+.profile-help .dropdown-text{
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  font-size: 13px;
+  /* text-indent: -999px; */
+}
+.profile-help .dropdown-text img{
+  width: 33px;
+  height: 33px;
+  border: solid 1px #fff;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.profile-help .dropdown-toggle:hover ~ .dropdown-text{
+  background: #fff;
+}
+.profile-help .dropdown-toggle:hover ~ .dropdown-text img{
+  box-shadow: 0 2px 6px 6px rgba(47, 83, 151, .17);
+}
+.profile-help .dropdown-content{
+  right: 0;
+  top: 47px;
+  padding: 4px 0;
+  background-color: #fff;
+  border: 1px solid #ECEDF2;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12) !important;
+}
+.profile-help .dropdown-content li:hover{
+  background-color: #ECEDF2;
+}
+.profile-help .dropdown-content a{
+  padding: 3px;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.profile-help .dropdown-content a:hover{
+  text-decoration: none;
+  background-color: transparent;
+}
+.help-btn{
+  border-right: solid 1px #ECEDF2;
+}
+.help-btn .nav-link{
+  padding: 7px 8px 0 !important;
+}
+.help-btn i{
+  font-size: 19px;
+  color: #C3CDDB;
+}
+.help-btn a:hover i{
+  color: #1B3E6F;
+}
 .header-button-save button{
   border-radius: 50px;
 }
@@ -1443,11 +1504,22 @@ ul.package-contributers{
   box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
   transition: 0.3s !important;
 }
+.createActionModal h3.mainHead{
+  text-transform: uppercase;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  color: #C1CDDD;
+}
 .createActionModal h1{
   margin-bottom: 21px;
   font-size: 22px;
+  font-weight: bold;
   text-align: center;
-  font-weight: normal;
+}
+.createActionModal .carousel-inner{
+  height: 510px;
 }
 .createActionModal .skip-btn{
   float: unset;
@@ -1458,6 +1530,12 @@ ul.package-contributers{
   border: solid 1px #F1F2FA;
   border-radius: 2px;
 }
+.createActionModal .skip-btn:hover{
+  background: #1273EB;
+  color: #fff;
+  box-shadow: 0 10px 20px 0 rgba(27,62,111,.1);
+}
+
 .actionType,
 .actionType:hover{
   text-align: center;
@@ -1932,9 +2010,11 @@ ul.package-contributers{
   width: auto !important;
   max-width: 280px !important;
   text-align: left!important;
+  /* color:#1B3E6F;
+  background-color: #fff !important; */
   color:#1B3E6F;
-  background-color: #fff !important;
-  border: solid 1px #E6EDF5;
+  background-color: #C3CDDB !important;
+  border: solid 1px #C3CDDB;
   border-radius: 3px !important;
   border-top-left-radius: 0 !important;
   font-size: 12px;
@@ -1942,16 +2022,16 @@ ul.package-contributers{
 } 
 
 .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
-  border-top-color: #E6EDF5 !important;
+  border-top-color: #C3CDDB !important;
 }
 .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
-  border-right-color: #E6EDF5 !important;
+  border-right-color: #C3CDDB !important;
 }
 .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
-  border-bottom-color: #E6EDF5 !important;
+  border-bottom-color: #C3CDDB !important;
 }
 .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
-  border-left-color: #E6EDF5 !important;
+  border-left-color: #C3CDDB !important;
 }
 
 .btn{
@@ -2732,7 +2812,7 @@ hr{
   border-right: 0px !important;
   color: #1B3E6F !important;
 }
-.ace-tm .ace_gutter-active-line{
+.ace_gutter-active-line{
   background-color: #265699 !important;
   color: #fff;
 }
-- 
cgit 1.2.3-korg