Actions list - UI

Issue-ID: CCSDK-2411

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

15 files changed, 286 insertions, 230 deletions

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 a31c95652..4abc93b55 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
@@ -62,7 +62,7 @@
                                 <div class="col-12 package-name deployed">
                                     {{viewedPackage.artifactName}}
                                     <img src="/assets/img/icon-deploy-inactive.svg" class="deply-status-icon">
-                                    <span class="package-version">Version 1.0.2</span>
+                                    <span class="package-version">v1.0.2</span>
                                 </div>
                                 <div class="col-12 package-description">
                                     Last modified {{ viewedPackage.createdDate | date:'short' }} By
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 a095b3dfc..5054a8e9e 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
@@ -12,6 +12,18 @@ body{
   color: #fff;
 }
 
+/*Bootstrap*/
+.controllerSidebar .nav-tabs{
+  border-bottom-width: 2px;
+}
+.controllerSidebar .nav-tabs .nav-link{
+  padding: 12px 0 !important;
+  text-align: center;
+}
+.controllerSidebar .nav-tabs .nav-link::before{
+  content: "";
+}
+
 /*Header*/
 header{
   position: relative;
@@ -240,9 +252,9 @@ tspan#type{
 }
 /*ACTIONS & COMPONENTS MENU*/
 .input-search-controller{
-  height: 50px;
-  padding-left: 30px;
-  background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
+  height: 40px;
+  padding-left: 42px;
+  background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
   border-radius: 0;
   border: 0;
   border-bottom: solid 1px #D7E7F9;
@@ -254,16 +266,11 @@ tspan#type{
   font-size: 11px;
 }
 .input-search-controller:focus{
-  
+  background-color: #fff !important;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  text-shadow: none;
   border-color: #DEE8F3;
 }
-.actions-scroll{
-  max-height: 29vh;
-  overflow-y: auto;
-  margin-top: 12px;
-  margin-bottom: 20px;
-}
 .componentsList p{
   margin-bottom: 0;
   padding-left: 30px;
@@ -296,10 +303,37 @@ p.compType-4{
 
 .controllerSidebar{
   width: 320px;
+  padding: 0;
+  overflow: hidden !important;
   background: #F4F9FE;
   border: solid 1px #C1CDDD;
   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
 }
+.helpBox{
+  position : absolute;
+  bottom : 0;
+  width: 100%;
+  height : 40px;
+  margin-top : 24px;
+  padding-left: 20px;
+  background: #fff;
+  border-top: solid 1px #C1CDDD;
+  font-size: 14px;
+  line-height: 40px;
+  color: #0070F4;
+}
+.helpBox .icon-info{
+  margin-left: 0;
+  margin-right: 10px;
+}
+.helpBox .icon-info::before{
+  color: #0070F4 !important;
+}
+.controllerSidebar .row,
+.controllerSidebar .col{
+  margin: 0;
+  padding: 0;
+}
 .controllerSidebar h1{
   margin-bottom: 15px;
   padding: 12px 0 12px 12px;
@@ -315,6 +349,7 @@ p.compType-4{
   font-size: 12px;
   color: #C3CDDB;
 }
+
 .actionBtns .btn{
   margin: 0px 15px 16px -90px;
   /* padding: 9px 20px; */
@@ -325,24 +360,25 @@ p.compType-4{
   float: left;
   
 }
-.actionBtns .btn.insert-custom{
-  /* background: white; */
-  /* border: solid 1px #1B3E6F; */
+.new-action,
+.new-action:hover{
+  margin: 9px 0 4px 18px;
+  padding: 6px;
+  font-size: 13px;
+  font-weight: bold;
   color: #1B3E6F;
 }
-.actionBtns .btn.import-action{
-  border: solid 1px #D0DFF1;
-  color: #1B3E6F;
-  
+.new-action:hover{
+  background: #D7E7F9;
 }
-.actionsList,
 .componentsList{
-  padding: 0 12px 20px;
+  margin-top: 16px;
+  padding: 0 20px 10px;
 }
 .componentsList{
   padding-bottom: 0;
-  height: calc( 100vh - 218px)!important;
-  overflow: scroll;
+  /* height: calc( 100vh - 218px)!important;
+  overflow: scroll;*/
   background: #F4F9FE !important;
 }
 .custom-control.custom-checkbox:hover,
@@ -350,18 +386,18 @@ p.compType-4{
   cursor: pointer;
 }
 .custom-control{
-  padding-top: 10px;
-  width: 315px;
   height: 40px;
-  margin-left: -15px;
   font-size: 14px;
-  padding-bottom: 0;
+  line-height: 40px;
 }
 .custom-control:hover{
     background-color: white;
 }
-
-.actionsList .custom-checkbox,
+.actionsList,
+.componentsList{
+  height: 65vh !important;
+  overflow-y: auto;
+}
 .componentsList .list-group-item{
   margin-bottom: 10px;
   padding-left: 40px;
@@ -374,7 +410,7 @@ p.compType-4{
   padding: 6px;
   vertical-align: unset;
   color: #1B3E6F;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 20px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
@@ -409,6 +445,12 @@ p.compType-4{
   border: solid 1px #D9E6F2;
   color: #C3CDDB;
 }
+.controllerSidebar .custom-control label{
+  margin-bottom: 0;
+}
+.controllerSidebar .custom-control i{
+  margin-right: 9px;
+}
 /*Components List*/
 .componentsList .list-group-item{
   padding-left: 36px;
@@ -507,7 +549,7 @@ p.compType-4{
 .functionAttributeSidebar{
   width: 440px;
   padding: 0px;
-  margin-top: 50px;
+  margin-top: 45px;
 }
 .functionAttributeSidebar .attributesContainer{
   background: #fff;
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 52503cf53..2bd484258 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
@@ -33,11 +33,11 @@
                             </div>
                             <div class="modal-body">
                                 <div class="row package-info">
-                                    <div class="col-12">
+                                    <div class="col">
                                         <h3>Test Package
                                             <span class="package-version">Version 1.0.2</span></h3>
                                     </div>
-                                    <div class="col-12 mb-3">
+                                    <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>
@@ -100,7 +100,7 @@
     </div>
 </header>
 <div class="source-button editBar">
-    
+
     <div class="btn-group viewBtns" role="group">
         <!-- <button (click)="_toggleSidebar1()" class="topologySource active">
             <i style="font-size:24px" class="fa">&#xf101;</i> 
@@ -118,54 +118,43 @@
 
         <nav class="row">
             <!--Nav Tabs-->
-            <div class="col-12">
+            <div class="col">
                 <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                    <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab"
-                        href="#nav-action" role="tab" aria-controls="nav-action" aria-selected="false"
-                        autofocus #nameit >Actions</a>
-                    <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab"
-                        href="#nav-function" role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
+                    <a class="nav-item nav-link active col-6" id="nav-action-tab" data-toggle="tab" href="#nav-action"
+                        role="tab" aria-controls="nav-action" aria-selected="false" autofocus #nameit>Actions</a>
+                    <a class="nav-item nav-link col-6" id="nav-function-tab" data-toggle="tab" href="#nav-function"
+                        role="tab" aria-controls="nav-function" aria-selected="false">Functions</a>
                 </div>
             </div>
         </nav>
-
-
-        <div class="row mt-2">
-            <div class="col-12">
+        <div class="row">
+            <div class="col">
                 <div class="tab-content" id="nav-tabContent">
                     <div class="tab-pane fade show active" id="nav-action" role="tabpanel"
                         aria-labelledby="nav-action-tab">
                         <!--Action Search Box-->
-                        <div>
-                            <h1>Search</h1>
-                        </div>
+                        <input type="text" class="form-control input-search-controller" placeholder="Search Actions">
 
-                        <div class="btn-group actionBtns col-8" role="group">
-                            <button (click)="insertCustomActionIntoBoard()" type="button" class="btn insert-custom">
-                               + New Action
-                            </button> 
-                        </div>
-
-                            <div>
-                              <div *ngIf="showAction" class="custom-control">
-                                <label><span><i class="fa fa-file-o" aria-hidden="true" style="margin-right: 20px;"></i></span>
+                        <button (click)="insertCustomActionIntoBoard()" type="button" class="btn new-action">
+                            + &nbsp;&nbsp;New Action
+                        </button>
+                        <div class="actionsList">
+                            <div *ngIf="showAction" class="custom-control">
+                                <label><i class="icon-file" aria-hidden="true"></i>
                                     {{customActionName}} </label>
-                              </div>
                             </div>
-                    </div>
-
-                    <div class="tab-pane fade" id="nav-function" role="tabpanel"
-                        aria-labelledby="nav-function-tab">
-                        <div class="col-12 text-center p-0">
-                            <b>Drag and drop function to Action’s box</b>
-                            <div id="palette-paper" class="col-12 componentsList"> </div>
                         </div>
                     </div>
+                    <div class="tab-pane fade" id="nav-function" role="tabpanel" aria-labelledby="nav-function-tab">
+                        <!--Function Search Box-->
+                        <input type="text" class="form-control input-search-controller" placeholder="Search Functions">
+                        <div id="palette-paper" class="componentsList"> </div>
+                    </div>
+
                 </div>
             </div>
         </div>
-       
-   
+        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div>
     </ng-sidebar>
     <!-- Page content -->
 
@@ -242,7 +231,7 @@
                     <h1>Action Attributes</h1>
                     <div class="scrolll">
                         <div class="row m-0">
-                            <div class="col-12">
+                            <div class="col">
                                 <div class="form-group actionName">
                                     <label for="exampleInputEmail1">Action Name</label>
                                     <input type="text" class="form-control" placeholder="Action 1">
@@ -388,36 +377,36 @@
         </div>
     </ng-sidebar>
 
-        <!-- Function Attribute SideBar -->
-    <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '" [mode]="'push'"
-        [position]="'right'" #sidebarRight>
+    <!-- Function Attribute SideBar -->
+    <ng-sidebar [(opened)]="functionAttributeSidebar" [sidebarClass]="'demo-sidebar functionAttributeSidebar '"
+        [mode]="'push'" [position]="'right'" #sidebarRight>
         <div class="container-fluid0">
             <div class="row m-0">
                 <div class="col-2 pr-0">
                     <!-- <button (click)="sidebarRight.close()" class="closeBar"></button> -->
                 </div>
                 <div class="col-10 attributesContainer p-0">
-                   <div class="row m-0"> 
-                       <div class="col-12">
-                           <div class="col-3">
-                                 <button (click)="sidebarRight.close()" class="closeBar"></button>
-                           </div>
+                    <div class="row m-0">
+                        <div class="col">
+                            <div class="col-3">
+                                <button (click)="sidebarRight.close()" class="closeBar"></button>
+                            </div>
+
+                            <div class="function-attribute">
+                                <h6>Function Attributes
+                                    <span class="trash-span">
+                                        <i class="fa fa-trash" type="button" aria-hidden="true"></i>
+                                    </span>
+                                </h6>
+                            </div>
+
+
+                        </div>
+                    </div>
 
-                           <div class="function-attribute">
-                              <h6>Function Attributes 
-                                  <span class="trash-span">
-                                      <i class="fa fa-trash" type="button" aria-hidden="true"></i>
-                                  </span>
-                            </h6>         
-                           </div>
-                           
-                        
-                       </div>
-                   </div>
-                   
                     <div>
                         <div class="row m-0">
-                            <div class="col-12">
+                            <div class="col">
                                 <div class="form-group actionName">
                                     <label for="exampleInputEmail1">Function Name</label>
                                     <input type="text" class="form-control" placeholder="Function Name">
@@ -425,165 +414,172 @@
                             </div>
                         </div>
                         <div class="row m-0">
-                            <div class="col-12">
+                            <div class="col">
                                 <div class=" actionName">
                                     <label>Function Type</label>
                                     <div class="dropdown  w-100">
                                         <input class="dropdown-toggle" type="text">
-                                        <div class="dropdown-text">component-resource-resolution <i class="fa fa-caret-down"></i></div>
+                                        <div class="dropdown-text">component-resource-resolution <i
+                                                class="fa fa-caret-down"></i></div>
                                         <ul class="dropdown-content w-100">
                                             <li>
                                                 <div class="form-group ">
-                                                    <li>other component</li>
-                                                </div>
-                                            </li>
-                                        </ul>
+                                            <li>other component</li>
                                     </div>
+                                    </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
-                        <div class="accordion" id="accordionExample">
-                            <div class="card">
-                                <div class="card-header row" id="headingOne">
-                                    <h2 class="col-10 mb-0">
-                                        <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                            Interface
-                                        </button>
-                                    </h2>
-                                    <div class="col-2 p-0 text-center">
-                                        <button class="btn btn-addAttribute" type="button"></button>
-                                    </div>
+                    </div>
+                    <div class="accordion" id="accordionExample">
+                        <div class="card">
+                            <div class="card-header row" id="headingOne">
+                                <h2 class="col-10 mb-0">
+                                    <button class="btn btn-link" type="button" data-toggle="collapse"
+                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        Interface
+                                    </button>
+                                </h2>
+                                <div class="col-2 p-0 text-center">
+                                    <button class="btn btn-addAttribute" type="button"></button>
                                 </div>
+                            </div>
 
-                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                    data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Resoluton-key</label>
-                                            <input type="text" class="form-control">
+                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                data-parent="#accordionExample">
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-9">
+                                            <label for="exampleInputEmail1">ResourceResolutionComponent</label> &nbsp;
+                                            <button type="button" class="btn p-0">
+                                                <img src="/assets/img/icon-edit.svg">
+                                            </button>
                                         </div>
-                                        <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">Store result</label>
-                                        </div>
-                                        <div class="form-group">
-                                            <label>
-                                                <input class="with-gap radio-btn" name="group1" type="radio"/>
-                                                <span class="radio-btn">True</span>
-                                              </label>
-                                              <label class="radio-btn">
-                                                <input class="with-gap radio-btn" name="group1" type="radio"  />
-                                                <span class="radio-btn">False</span>
-                                              </label>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Target</label>
-                                            <input type="text" class="form-control" placeholder="">
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
-                                            <input type="text" class="form-control" placeholder="">
-
+                                        <div class="col-3">
+                                            <button type="button" class="btn btn-deleteAttribute">Delete</button>
                                         </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputEmail1">Resoluton-key</label>
+                                        <input type="text" class="form-control">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleFormControlTextarea1">Store result</label>
+                                    </div>
+                                    <div class="form-group">
+                                        <label>
+                                            <input class="with-gap radio-btn" name="group1" type="radio" />
+                                            <span class="radio-btn">True</span>
+                                        </label>
+                                        <label class="radio-btn">
+                                            <input class="with-gap radio-btn" name="group1" type="radio" />
+                                            <span class="radio-btn">False</span>
+                                        </label>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputEmail1">Target</label>
+                                        <input type="text" class="form-control" placeholder="">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleFormControlTextarea1">Artifact Prefix Name</label>
+                                        <input type="text" class="form-control" placeholder="">
 
                                     </div>
+
                                 </div>
                             </div>
-                            
                         </div>
 
-                        <div class="accordion" id="accordionExample">
-                            <div class="card">
-                                <div class="card-header row" id="headingOne">
-                                    <h2 class="col-10 mb-0">
-                                        <button class="btn btn-link" type="button" data-toggle="collapse"
-                                            data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                            Artifact
-                                        </button>
-                                    </h2>
-                                    <div class="col-2 p-0 text-center">
-                                        <button class="btn btn-addAttribute" type="button"></button>
-                                    </div>
+                    </div>
+
+                    <div class="accordion" id="accordionExample">
+                        <div class="card">
+                            <div class="card-header row" id="headingOne">
+                                <h2 class="col-10 mb-0">
+                                    <button class="btn btn-link" type="button" data-toggle="collapse"
+                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        Artifact
+                                    </button>
+                                </h2>
+                                <div class="col-2 p-0 text-center">
+                                    <button class="btn btn-addAttribute" type="button"></button>
                                 </div>
+                            </div>
 
-                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                                    data-parent="#accordionExample">
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">base config-template</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Type</label>
-                                            <div class="dropdown  w-100">
-                                                <input class="dropdown-toggle" type="text">
-                                                <div class="dropdown-text">artifact-template-velocity <i class="fa fa-caret-down"></i></div>
-                                                <ul class="dropdown-content w-100">
-                                                    <li>
-                                                        <div class="form-group ">
-                                                            <li>ddwd</li>
-                                                        </div>
-                                                    </li>
-                                                </ul>
-                                            </div>
+                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                data-parent="#accordionExample">
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-9">
+                                            <label for="exampleInputEmail1">base config-template</label> &nbsp;
+                                            <button type="button" class="btn p-0">
+                                                <img src="/assets/img/icon-edit.svg">
+                                            </button>
                                         </div>
-
-                                        <div style="height: 30px; margin-top: 30px;"><hr></div>
-
-                                        <div class="row">
-                                            <div class="col-9">
-                                                <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
-                                                <button type="button" class="btn p-0">
-                                                    <img src="/assets/img/icon-edit.svg">
-                                                </button>
-                                            </div>
-                                            <div class="col-3">
-                                                <button type="button" class="btn btn-deleteAttribute">Delete</button>
-                                            </div>
+                                        <div class="col-3">
+                                            <button type="button" class="btn btn-deleteAttribute">Delete</button>
                                         </div>
-                                        <div class="form-group">
-                                            <label for="exampleInputEmail1">Type</label>
-                                            <div class="dropdown  w-100">
-                                                <input class="dropdown-toggle" type="text">
-                                                <div class="dropdown-text">artifact-mapping resource <i class="fa fa-caret-down"></i></div>
-                                                <ul class="dropdown-content w-100">
-                                                    <li>
-                                                        <div class="form-group ">
-                                                            <li>ddwd</li>
-                                                        </div>
-                                                    </li>
-                                                </ul>
-                                            </div>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="exampleInputEmail1">Type</label>
+                                        <div class="dropdown  w-100">
+                                            <input class="dropdown-toggle" type="text">
+                                            <div class="dropdown-text">artifact-template-velocity <i
+                                                    class="fa fa-caret-down"></i></div>
+                                            <ul class="dropdown-content w-100">
+                                                <li>
+                                                    <div class="form-group ">
+                                                <li>ddwd</li>
                                         </div>
+                                        </li>
+                                        </ul>
+                                    </div>
+                                </div>
+
+                                <div style="height: 30px; margin-top: 30px;">
+                                    <hr>
+                                </div>
 
-                                        <div style="height: 30px; margin-top: 30px;"><hr></div>
+                                <div class="row">
+                                    <div class="col-9">
+                                        <label for="exampleInputEmail1">base config-mapping</label> &nbsp;
+                                        <button type="button" class="btn p-0">
+                                            <img src="/assets/img/icon-edit.svg">
+                                        </button>
+                                    </div>
+                                    <div class="col-3">
+                                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
                                     </div>
                                 </div>
+                                <div class="form-group">
+                                    <label for="exampleInputEmail1">Type</label>
+                                    <div class="dropdown  w-100">
+                                        <input class="dropdown-toggle" type="text">
+                                        <div class="dropdown-text">artifact-mapping resource <i
+                                                class="fa fa-caret-down"></i></div>
+                                        <ul class="dropdown-content w-100">
+                                            <li>
+                                                <div class="form-group ">
+                                            <li>ddwd</li>
+                                    </div>
+                                    </li>
+                                    </ul>
+                                </div>
+                            </div>
+
+                            <div style="height: 30px; margin-top: 30px;">
+                                <hr>
                             </div>
-                            
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
+        </div>
+        </div>
+        </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
+</ng-sidebar-container>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 3d10f99e7..9b8781d9b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -180,7 +180,7 @@ export class DesignerComponent implements OnInit, OnDestroy {
       this.palettePaper = new joint.dia.Paper({
         el: $('#palette-paper'),
         model: this.paletteGraph,
-        width: 300,
+        width: 318,
         height: $('#palette-paper').height(),
         // background: {
         //   color: 'rgba(0, 255, 0, 0.3)'
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
index 75274ba33..bc1890bdb 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.css
@@ -6,8 +6,6 @@ body{
   background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
   background-size: 6px 6px !important;  
 }
-
-
 /*Header*/
 header{
   height: 60px;
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 9c789941d..a7ce5ed4a 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
@@ -3,7 +3,7 @@
         <!--Add Package Card-->
         <div class="card addPaackage-card">
             <div class="card-body text-center">
-                <img src="/assets/img/icon-addPackage.svg" width="30%">
+                <img src="/assets/img/icon-addPackage.svg">
             </div>
             <div class="card-footer row">
                 <div class="col text-center">
@@ -30,7 +30,7 @@
                             <!-- <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> -->
                             <p class="packageName" tooltip="{{bluePrint.artifactName}}" placement="bottom">
                                 {{bluePrint.artifactName}}</p>
-                            <span class="package-version">version {{bluePrint.artifactVersion}}</span>
+                            <span class="package-version">v{{bluePrint.artifactVersion}}</span>
                         </a>
 
                     </div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
index b6fbf5939..41b13a601 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-dashboard/dictionary-list/dictionary-list.component.html
@@ -23,15 +23,15 @@
         <!--Add Package Card-->
         <div class="card addPaackage-card">
             <div class="card-body text-center">
-                <img src="/assets/img/icon-addPackage.svg" width="40%">
+                <img src="/assets/img/icon-addPackage.svg">
             </div>
             <div class="card-footer row">
                 <div class="col text-center">
                     <a routerLink="/resource-dictionary/createDictionary" role="button" aria-pressed="true"
                         class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create Dictionary
                     </a>
-                    <br/>
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float mb-3"><i class="icon-import-blue" aria-hidden="true"></i>Import Package
+                    <br />
+                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i class="icon-import-blue" aria-hidden="true"></i>Import Dictionary
                     </a> 
                 </div>
             </div>
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 01dd66cf8..46b2de673 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 6d0d75fd1..c966c1125 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -12,6 +12,7 @@
 <glyph unicode="&#xe902;" glyph-name="icon-enter-link" d="M677.571 421.241h-644.248c-18.395 0-33.323 14.929-33.323 33.323s14.929 33.323 33.323 33.323h644.248c18.395 0 33.323-14.929 33.323-33.323s-14.929-33.323-33.323-33.323zM499.849 243.519c-8.534 0-17.060 3.238-23.552 9.771-13.017 13.017-13.017 34.121 0 47.146l154.177 154.169-154.177 154.177c-13.017 13.017-13.017 34.129 0 47.146 13.025 13.017 34.129 13.017 47.146 0l177.722-177.73c13.017-13.017 13.017-34.121 0-47.137l-177.722-177.722c-6.533-6.582-15.059-9.82-23.593-9.82v0zM533.173-34.18c-202.21 0-380.728 121.651-454.884 309.957-6.753 17.060 1.684 36.431 18.793 43.184 17.060 6.663 36.48-1.643 43.232-18.842 64.027-162.573 218.245-267.652 392.859-267.652 232.726 0 422.098 189.372 422.098 422.098s-189.372 422.098-422.098 422.098c-174.614 0-328.832-105.079-392.859-267.652-6.801-17.199-26.172-25.505-43.232-18.842-17.109 6.753-25.546 26.123-18.793 43.184 74.156 188.306 252.675 309.957 454.884 309.957 269.475 0 488.744-219.27 488.744-488.744s-219.27-488.744-488.744-488.744z" />
 <glyph unicode="&#xe903;" glyph-name="icon-action-close" d="M1011.886 947.884c-16.154 16.154-42.344 16.154-58.498 0l-941.272-941.27c-16.154-16.154-16.154-42.344 0-58.498 8.076-8.080 18.664-12.116 29.25-12.116s21.172 4.039 29.25 12.119l941.27 941.27c16.152 16.152 16.152 42.342 0 58.496zM1011.884 6.612l-941.272 941.27c-16.152 16.154-42.344 16.154-58.496 0-16.154-16.152-16.154-42.342 0-58.496l941.272-941.272c8.076-8.078 18.664-12.117 29.25-12.117s21.174 4.039 29.248 12.115c16.15 16.156 16.15 42.346-0.002 58.5z" />
 <glyph unicode="&#xe904;" glyph-name="icon-action-back" horiz-adv-x="1422" d="M479.778 915.244c19.067 19.733 50.8 19.733 70.533 0 19.067-19.067 19.067-50.8 0-69.822l-357.644-357.644h1180.178c27.511-0.044 49.378-21.911 49.378-49.422s-21.867-50.089-49.378-50.089h-1180.178l357.644-356.978c19.067-19.733 19.067-51.511 0-70.533-19.733-19.733-51.511-19.733-70.533 0l-442.311 442.311c-19.733 19.067-19.733 50.8 0 69.822l442.311 442.356z" />
+<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="&#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 d08d2740b..b8c3e0106 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 b6d35bcac..169d6d61e 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 dc7de38e5..945d9d380 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?hdnbak');
-  src:  url('fonts/icomoon.eot?hdnbak#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?hdnbak') format('truetype'),
-    url('fonts/icomoon.woff?hdnbak') format('woff'),
-    url('fonts/icomoon.svg?hdnbak#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?rdm62r');
+  src:  url('fonts/icomoon.eot?rdm62r#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?rdm62r') format('truetype'),
+    url('fonts/icomoon.woff?rdm62r') format('woff'),
+    url('fonts/icomoon.svg?rdm62r#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -35,6 +35,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-file:before {
+  content: "\e905";
+  color: #1b3e6f;
+}
 .icon-action-back:before {
   content: "\e904";
   color: #1b3e6f;
diff --git a/cds-ui/designer-client/src/assets/img/icon-error.sketch b/cds-ui/designer-client/src/assets/img/icon-error.sketch
deleted file mode 100644
index 0a17404bc..000000000
--- a/cds-ui/designer-client/src/assets/img/icon-error.sketch
+++ /dev/null
diff --git a/cds-ui/designer-client/src/assets/img/icon-error.svg b/cds-ui/designer-client/src/assets/img/icon-error.svg
new file mode 100644
index 000000000..e26cad3f9
--- /dev/null
+++ b/cds-ui/designer-client/src/assets/img/icon-error.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
+    <title>signs</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="signs" fill-rule="nonzero">
+            <path d="M256,0 C114.835938,0 0,114.835938 0,256 C0,397.164062 114.835938,512 256,512 C397.164062,512 512,397.164062 512,256 C512,114.835938 397.164062,0 256,0 Z" id="Path" fill="#FF6469"></path>
+            <path d="M277.332031,384 C277.332031,395.78125 267.78125,405.332031 256,405.332031 C244.21875,405.332031 234.667969,395.78125 234.667969,384 C234.667969,372.21875 244.21875,362.667969 256,362.667969 C267.78125,362.667969 277.332031,372.21875 277.332031,384 Z" id="Path" fill="#ECEFF1"></path>
+            <path d="M277.332031,298.667969 C277.332031,310.441406 267.777344,320 256,320 C244.222656,320 234.667969,310.441406 234.667969,298.667969 L234.667969,128 C234.667969,116.222656 244.222656,106.667969 256,106.667969 C267.777344,106.667969 277.332031,116.222656 277.332031,128 L277.332031,298.667969 Z" id="Path" fill="#FAFAFA"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index a705b2744..164a459c3 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -74,6 +74,7 @@ body{
 .toast-error{
   border-left: solid 5px #FF6469 !important;
   background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important;
+  background-size: 18px !important;
 }
 /*ICONS*/
 .icon-menuDots{
@@ -555,12 +556,15 @@ height: 40px;
   border: solid 1px #D7E7F9 !important;
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important;
 }
+.addPaackage-card .card-body img{
+  width: 30%;
+}
 .addPaackage-card a{
   margin: 0;
   padding: 7px 15px;
   font-weight: bold;
   font-size: 12px;
-  border-radius: 2px;
+  border-radius: 18px;
   border-width: 0px;
   border-style: solid;
   background-position: 15px center;
@@ -1152,7 +1156,7 @@ height: 40px;
 }
 .btn-create-package,
 .btn-import-package{
-  width: 145px;
+  width: auto;
 }
 .btn-create-package{
   margin-bottom: 6px !important;
@@ -1235,9 +1239,7 @@ height: 40px;
   background: #1B3E6F;
   box-shadow: none;
 }
-.package-version{
-  /* color: #C3CDDB !important; */
-}
+
 .package-version::before{
   content: "|";
   margin-left: 8px;