Add Help menu and Update Wizard style

Issue-ID: CCSDK-2705
Issue-ID: CCSDK-2709

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

13 files changed, 327 insertions, 188 deletions

diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json
index 4e8ef0aab..17de0a74f 100644
--- a/cds-ui/designer-client/proxy.conf.json
+++ b/cds-ui/designer-client/proxy.conf.json
@@ -1,12 +1,12 @@
 {
   "/controllerblueprint/*": {
-    "target": "https://localhost:3000",
+    "target": "https://41.128.168.198:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
   },
   "/resourcedictionary/*": {
-    "target": "https://localhost:3000",
+    "target": "https://41.128.168.198:3000",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
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 f79657af8..772923283 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
@@ -2,7 +2,7 @@
 
 <div class="new-wrapper">
     <div class="container-fluid main-container">
-        <header class="page-title" style="padding: 18px 30px 10px;">
+        <header class="page-title" style="padding: 16px 30px 12px;">
             <div class="row">
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
@@ -13,53 +13,46 @@
                 </h2>
                 <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>
+                      <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> -->
+                        <!--Help Menu-->
+                        <div class="nav-item dropdown helpMenu">
+                          <input class="dropdown-toggle" type="text">
+                          <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+                          <ul class="dropdown-content">
+                            <!-- <li>
+                              <i class="icon-get_started" aria-hidden="true"></i>
+                              <p>
+                                <input id="clicker3" [checked]="startTour" type="checkbox" />
+                                <label for="clicker">
+                                  Getting Started
+                                  <span>Quick steps to help you get started</span>
+                                </label>
+                              </p>
                             </li> -->
+                            <li>
+                              <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                                <i class="icon-user_guide" aria-hidden="true"></i>
+                                <p>
+                                  Tutorials
+                                  <span>CDS Designer's User Guide</span>
+                                </p>
+                              </a>
+                            </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">
+                        </div>
+                        <!--User Menu-->
+                        <div class="nav-item dropdown userMenu">
                           <input class="dropdown-toggle" type="text">
-                          <div class="dropdown-text">User name</div>
+                          <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>
@@ -70,9 +63,10 @@
                             </li>
                           </ul>
                         </div>
-                      </li>
-                    </ul> -->
-                </div>
+
+                      </ul>
+                    </nav>
+                  </div>
             </div>
         </header>
 
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 d42be1ff3..a09951cd2 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
@@ -2,7 +2,7 @@
 <tour-step-template></tour-step-template>
 <div class="new-wrapper">
   <div class="container-fluid main-container">
-    <header class="page-title">
+    <header class="page-title" style="padding: 16px 30px 12px;">
       <div class="row">
         <h2 class="col m-0 pb-0">
           <ul class="breadcrumb-header">
@@ -14,11 +14,34 @@
         <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">
+              <!--Help Menu-->
+              <div class="nav-item dropdown helpMenu">
+                <input class="dropdown-toggle" type="text">
+                <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+                <ul class="dropdown-content">
+                  <!-- <li>
+                    <i class="icon-get_started" aria-hidden="true"></i>
+                    <p>
+                      <input id="clicker3" [checked]="startTour" type="checkbox" />
+                      <label for="clicker">
+                        Getting Started
+                        <span>Quick steps to help you get started</span>
+                      </label>
+                    </p>
+                  </li> -->
+                  <li>
+                    <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                      <i class="icon-user_guide" aria-hidden="true"></i>
+                      <p>
+                        Tutorials
+                        <span>CDS Designer's User Guide</span>
+                      </p>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <!--User Menu-->
+              <div class="nav-item dropdown userMenu">
                 <input class="dropdown-toggle" type="text">
                 <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div>
                 <ul class="dropdown-content">
@@ -36,42 +59,8 @@
                   </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/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 5712f80a0..1390a7b78 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -13,7 +13,7 @@
                     </a>
                     <br />
                     <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
-                            tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
+                            class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
                 </div>
@@ -120,4 +120,4 @@
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 8391530d6..f81b02643 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -9,25 +9,31 @@
             <input id="clicker" [checked]="startTour" type="checkbox" />
             <label class="ml-1" for="clicker">Start the tour</label>
 
-            <div class="panel-wrap">
+            <div class="panel-wrap packageWizard">
                 <div class="panel">
                     <button id="clicker1" class="close" type="button" (click)="stopTour()">
-                        <label for="clicker">&times;</label>
+                        <label for="clicker"><img src="assets/img/icon-close.svg" /></label>
+                    </button>
+                    <br />
+                    <h3>Welcome to CDS Designer UI</h3>
+                    <p>CDS has new look and new way of delivering a reusable and simplified self-service experience.</p>
+                    <!-- <span>Tab through these quick steps to help you get started.</span>
+                    <br /> -->
+                    <button id="clicker2" class="closeWizard mr-2" type="button" (click)="stopTour()">
+                        <label for="clicker">No Thanks</label>
+                    </button>
+                    <button type="button" class="startTour float">
+                        <label (click)="start()" for="clicker" class="m-0">Start Tour</label>
                     </button>
-
-                    <h3>Welcome to CDS</h3>
-                    <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
-                    <button type="button" class="btn" style="background-color: #fff;margin:0">
-                        <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
                 </div>
             </div>
             <!---->
-            <nav class="row">
+            <nav class="row" tourAnchor="allTab">
                 <!--Nav Tabs-->
                 <div class="col pr-0">
                     <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                        <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
-                            href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+                            role="tab" aria-controls="nav-home" aria-selected="true">All</a>
                         <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                             role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
                         <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
@@ -53,4 +59,4 @@
             <app-sort-packages></app-sort-packages>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index c0a48d346..9e299a829 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -40,7 +40,34 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
         console.log('PackagesDashboardComponent');
 
-        this.tourService.initialize([...steps]);
+        this.tourService.initialize([
+            {
+                anchorId: 'allTab',
+                content: 'Package list is where you get access to your all and most recent CBA packages.',
+                title: 'Managing your CBA packages',
+            },
+            {
+                anchorId: 'search',
+                content: 'Search for Package by name, version, tags and type',
+                title: 'Search',
+            },
+            {
+                anchorId: 'tagFilter',
+                content: 'Filter Packages by tags',
+                title: 'Tag Filter',
+            },
+            {
+                anchorId: 'create',
+                content: 'Start creating a full CBA packages from built-in forms without programming.',
+                title: 'Create new package',
+            },
+            {
+                anchorId: 'metadataTab',
+                content: 'Set your package basic information',
+                title: 'Metadata Tab',
+                route: 'packages/createPackage'
+            },
+        ]);
         this.checkTour();
     }
 
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 5e04b71ac..936c2da8d 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,70 +1,59 @@
 <!--Page Title-->
 <header class="page-title" style="padding-top: 14px;padding-bottom: 13px;">
-    <div class="row">
-        <h2 class="col m-0" style="line-height: 33px;">CBA Packages
-            <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
-        </h2>
-        <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>
+  <div class="row">
+    <h2 class="col m-0" style="line-height: 33px;">CBA Packages
+      <span id="numberOfPackages">({{numberOfPackages}} packages)</span>
+    </h2>
+    <div class="col profile-help">
+      <nav class="navbar navbar-expand-lg navbar-light">
+        <ul class="navbar-nav ml-auto">
+          <!--Help Menu-->
+          <div class="nav-item dropdown helpMenu">
+            <input class="dropdown-toggle" type="text">
+            <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div>
+            <ul class="dropdown-content">
+              <!-- <li>
+                <i class="icon-get_started" aria-hidden="true"></i>
+                <p>
+                  <input id="clicker3" [checked]="startTour" type="checkbox" />
+                  <label for="clicker">
+                    Getting Started
+                    <span>Quick steps to help you get started</span>
+                  </label>
+                </p>
+              </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>
+                <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">
+                  <i class="icon-user_guide" aria-hidden="true"></i>
+                  <p>
+                    Tutorials
+                    <span>CDS Designer's User Guide</span>
+                  </p>
+                </a>
               </li>
-            </ul> -->
-        </div>
+            </ul>
+          </div>
+          <!--User Menu-->
+          <div class="nav-item dropdown userMenu">
+            <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>
+        </ul>
+      </nav>
     </div>
+  </div>
 </header>
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 7c88462a2..0ef083807 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index cb635c143..d5bbb8308 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -15,6 +15,8 @@
 <glyph unicode="&#xe905;" glyph-name="icon-file" horiz-adv-x="751" d="M731.195 731.764l-208.496 208.494c-12.729 12.731-29.652 19.742-47.655 19.742h-407.653c-37.16 0-67.391-30.232-67.391-67.391v-851.058c0-37.16 30.232-67.391 67.391-67.391h616.15c37.16 0 67.391 30.232 67.391 67.391v642.56c0 17.997-7.009 34.92-19.738 47.653zM652.324 728.944h-122.82c-5.309 0-9.627 4.319-9.627 9.627v122.818l132.447-132.445zM683.542 31.923h-616.15c-5.309 0-9.627 4.319-9.627 9.627v851.058c0 5.309 4.319 9.627 9.627 9.627h394.721v-163.665c0-37.16 30.232-67.391 67.391-67.391h163.665v-629.629c0-5.309-4.319-9.627-9.627-9.627z" />
 <glyph unicode="&#xe906;" glyph-name="icon-rectangle" d="M0 960h1024v-1024h-1024v1024z" />
 <glyph unicode="&#xe907;" glyph-name="icon-enrich" horiz-adv-x="723" d="M643.818 562.272h-240.316l20.882 363.431c1.945 33.821-43.138 47.578-60.352 18.306l-312.986-532.253c-12.694-21.586 2.893-48.888 27.965-48.888h240.317l-20.884-363.431c-1.945-33.823 43.14-47.574 60.352-18.306l312.986 532.251c12.692 21.589-2.895 48.89-27.965 48.89zM370.919 129.754l15.154 263.697c1.069 18.617-13.757 34.301-32.389 34.301h-217.964l216.186 367.635-15.152-263.698c-1.069-18.617 13.757-34.301 32.389-34.301h217.962l-216.186-367.633zM67.885 180.705l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.667-12.669 33.209-12.671 45.878 0l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.671-33.209 12.671-45.878 0zM67.885 714.493c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849zM654.942 180.705c-12.667 12.669-33.209 12.669-45.878 0s-12.669-33.209 0-45.878l56.849-56.849c12.667-12.669 33.209-12.671 45.878 0 12.669 12.669 12.669 33.209 0 45.878l-56.849 56.849zM654.942 714.493l56.849 56.849c12.669 12.669 12.669 33.209 0 45.878-12.667 12.669-33.209 12.669-45.878 0l-56.849-56.849c-12.669-12.669-12.669-33.209 0-45.878 12.665-12.667 33.209-12.669 45.878 0z" />
+<glyph unicode="&#xe908;" glyph-name="icon-get_started" d="M1003.008 959.872c-199.893 3.584-427.861-100.907-572.16-262.997-137.899-2.603-272.171-59.136-371.029-157.995-5.76-5.675-7.808-14.165-5.291-21.845 2.56-7.723 9.216-13.312 17.237-14.464l164.437-23.552-20.309-22.741c-7.552-8.448-7.168-21.291 0.853-29.312l274.219-274.219c4.139-4.139 9.6-6.229 15.104-6.229 5.077 0 10.155 1.792 14.208 5.419l22.741 20.309 23.552-164.437c1.152-8.021 7.467-13.909 15.104-16.469 1.963-0.64 4.011-0.939 6.101-0.939 6.059 0 12.245 2.645 16.512 6.869 97.493 97.493 154.027 231.765 156.629 369.664 162.261 144.597 267.605 372.48 262.955 572.117-0.299 11.349-9.472 20.523-20.864 20.821zM806.4 591.573c-20.779-20.779-48.085-31.189-75.435-31.189s-54.656 10.411-75.435 31.189c-41.557 41.6-41.557 109.269 0 150.869 41.6 41.6 109.269 41.6 150.869 0s41.6-109.312 0-150.869zM116.224 238.72c-45.653-45.653-108.331-251.904-115.328-275.243-2.261-7.509-0.171-15.659 5.333-21.205 4.096-4.096 9.515-6.272 15.104-6.272 2.048 0 4.096 0.299 6.144 0.896 23.339 6.997 229.589 69.675 275.243 115.328 51.413 51.413 51.413 135.083 0 186.496-51.456 51.413-135.083 51.371-186.496 0z" />
+<glyph unicode="&#xe909;" glyph-name="icon-user_guide" d="M182.318 221.526v738.474h-49.18c-72.456 0-131.404-58.948-131.404-131.404v-648.796c30.102 25.97 69.248 41.728 112.030 41.728h68.554zM795.95 450.1c6.458 0 12.862-0.236 19.214-0.66v510.56h-572.956v-738.474h273.492c26.68 130.278 142.202 228.574 280.25 228.574zM423.968 783.658h200.44v-59.89h-200.44zM356.262 653.638h335.852v-59.89h-335.852zM549.012 19.818h-395.51v59.89h369.092c-8.198 26.514-12.636 54.66-12.688 83.818h-396.142c-62.73 0-113.764-51.034-113.764-113.762 0-62.73 51.034-113.764 113.764-113.764h509.716c-29.982 22.73-55.356 51.222-74.468 83.818zM795.95 392.1c-125.748 0-228.052-102.302-228.052-228.050s102.304-228.050 228.052-228.050c125.746 0 228.050 102.304 228.050 228.050 0 125.748-102.304 228.050-228.050 228.050zM795.928 300.576c16.818 0 29.272-13.746 30-30 0.726-16.202-14.308-30-30-30-16.818 0-29.272 13.746-30 30-0.726 16.202 14.308 30 30 30zM825.996 47.13h-60v153.598h60z" />
 <glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
 <glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
 <glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index ab6b20e04..ea6de579c 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index cabebb884..5cb900050 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index fcf806c24..130115635 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?r3i568');
-  src:  url('fonts/icomoon.eot?r3i568#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?r3i568') format('truetype'),
-    url('fonts/icomoon.woff?r3i568') format('woff'),
-    url('fonts/icomoon.svg?r3i568#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?pqs8r8');
+  src:  url('fonts/icomoon.eot?pqs8r8#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?pqs8r8') format('truetype'),
+    url('fonts/icomoon.woff?pqs8r8') format('woff'),
+    url('fonts/icomoon.svg?pqs8r8#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -35,6 +35,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-get_started:before {
+  content: "\e908";
+}
+.icon-user_guide:before {
+  content: "\e909";
+}
 .icon-enrich:before {
   content: "\e907";
 }
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index a482660a8..1464cc295 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -963,6 +963,67 @@ height: 40px;
   text-decoration: none;
   background-color: transparent;
 }
+.userMenu.dropdown{
+  margin-left: 9px;
+  border-left: solid 1px #ECEDF2;
+}
+.helpMenu.dropdown{
+  width: 32px !important;
+}
+.helpMenu .dropdown-text{
+  text-indent: unset;
+  text-align: center;
+}
+.helpMenu li:not(:last-child){
+  margin-bottom: 9px;
+}
+.helpMenu .dropdown-text i{
+  text-align: center;
+  font-size: 19px;
+  color: #C3CDDB;
+  vertical-align: middle;
+}
+.helpMenu:hover .dropdown-text i{
+  color: #1B3E6F;
+}
+.helpMenu .dropdown-content{
+  padding: 6px;
+}
+.helpMenu .dropdown-content a{
+  padding: 0 12px;
+  text-align: left;
+  text-indent: 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+.helpMenu .dropdown-content p{
+  display: inline;
+  line-height: 15px;
+  font-weight: bold;
+}
+.helpMenu .dropdown-content p:hover{
+  cursor: pointer;
+}
+.helpMenu .dropdown-content p label{
+  display: inline;
+}
+.helpMenu .dropdown-content p input{
+  display: none;
+}
+.helpMenu .dropdown-content span{
+  display: inline-block;
+  padding-left: 18px;
+  font-size: 13px;
+  color: #C1CDDD;
+  font-weight: normal;
+}
+.helpMenu .dropdown-toggle:focus ~ .dropdown-text{
+  background-color: #F4F9FE;
+  border-radius: 50%;
+}
+.helpMenu .dropdown-content{
+  width: 262px;
+}
 .help-btn{
   border-right: solid 1px #ECEDF2;
 }
@@ -3284,29 +3345,35 @@ table.dataTable.no-footer{
 
 
 
-/* panel layout mechanics */
-.panel-wrap {
+/* Package Wizard panel */
+.packageWizard.panel-wrap{
   position: fixed;
   top: 100px;
   bottom: 0;
   right: 0;
-  width: 300px;
-  height: 180px;
+  width: 350px;
+  height: 200px;
   transform: translateX(100%);
   transition: .3s ease-out;
   z-index: 2000;
 }
-.panel {
+.packageWizard .panel{
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: #333;
-  color: #eee;
   overflow: auto;
-  padding: 1em;
-  font-size: 13px;
+  padding: 20px;
+  padding-top: 9px;
+  background: #fff;
+  color: #1B3E6F;
+  border-top: solid 6px #1273EB;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
+  border-radius: 3px !important;
+  /* border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important; */
+  text-align: center;
 }
 
 /* simulate panel state control --
@@ -3318,14 +3385,73 @@ for simplicity
 [type="checkbox"]:checked ~ .panel-wrap {
   transform: translateX(0%);
 }
-
-
-
-
-
-
-
-
+.packageWizard h3{
+  margin-bottom: 15px;
+  font-weight: bold !important;
+  font-size: 16px;
+}
+.packageWizard p{
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+.packageWizard span{
+  font-size: 13px;
+  color: #C3CDDB;
+}
+.startTour{
+  margin-top: 15px;
+  padding: 9px 21px;
+  font-weight: bold;
+  font-size: 12px;
+  border: 0;
+  border-radius: 18px;
+  background-color: #1273EB;
+  color: #fff;
+}
+.closeWizard{
+  margin-top: 12px;
+  border: 0;
+  background: none;
+  font-weight: normal;
+  color: #1273EB;
+  font-size: 12px;
+}
+/*Wizard Content*/
+.mat-menu-panel{
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
+  border-radius: 3px !important;
+  border-bottom: solid 3px #1273EB;
+}
+.mat-menu-panel::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid #fff;
+  left: 9px;
+  top: -8px;
+}
+.mat-card{
+  background: #fff !important;
+  color: #1B3E6F !important;
+  font-family: inherit !important;
+  border-radius: 0 !important;
+}
+.mat-card-content, 
+.mat-card-subtitle{
+  font-size: 13px;
+}
+.mat-card-title{
+  margin-bottom: 9px !important;
+  font-weight: bold !important;
+  font-size: 16px !important;
+}
+.mat-icon-button[disabled]{
+  color: rgba(27, 62, 111, .5) !important;
+}