Actions list - UI

Issue-ID: CCSDK-2411

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

7 files changed, 256 insertions, 220 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>