Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.component.html
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.component.html	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.component.html	(revision 60211)
@@ -1,106 +1,109 @@
-<div page-content>
-  <admin-tabs tab = "class" header></admin-tabs>
-  <div inner class="admin-pages">
-  <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
-    <div class="show-options uk-float-right">
-      <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
-      <div uk-dropdown="mode: click">
-        <ul class="uk-nav uk-margin-left"
-            [attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-            title="Select at least one class">
-          <li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
-                 (click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
+<div page-content class="admin-pages">
+  <div header>
+    <admin-tabs tab="class" header></admin-tabs>
+    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
+      <div class="uk-width-1-1">
+        <ul class="uk-subnav uk-subnav-pill">
+          <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
+              (click)="filterForm.get('type').setValue('all')"><span
+              class="title">All portals</span></a></li>
+          <li *ngFor="let type of  portalUtils.portalTypes; let i=index"
+              [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
+              (click)="filterForm.get('type').setValue(type.value)"><span
+              class="title">{{type.label}}</span></a></li>
         </ul>
       </div>
+      <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
+        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
+             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div class="uk-margin-left show-options">
+          <button class="uk-button uk-button-secondary">Bulk Actions</button>
+          <div uk-dropdown="mode: click">
+            <ul class="uk-nav uk-margin-left"
+                [attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
+                title="Select at least one class">
+              <li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''"
+                     (click)="confirmDeleteSelectedDivIds()"><i></i> Delete </a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="uk-margin-left">
+          <a (click)="newDivId()"
+             class="uk-flex uk-flex-middle uk-text-uppercase">
+            <button class="large uk-icon-button uk-button-secondary">
+              <icon name="add"></icon>
+            </button>
+            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add class</button>
+          </a>
+        </div>
+      </div>
     </div>
-    <div class="uk-inline uk-width-medium  uk-float-right uk-margin-right" >
-      <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-      <div dashboard-input  [formInput]="filterForm.controls.keyword"
-           placeholder="Search"></div>
-    </div>
-    <ul     class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin  " >
-      <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
-        (click)="filterForm.get('type').setValue('all')"><span
-        class="title">All portals</span></a></li>
-      <li  *ngFor="let type of  portalUtils.portalTypes; let i=index"
-           [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
-        (click)="filterForm.get('type').setValue(type.value)"><span
-        class="title">{{type.label}}</span></a></li>
-    </ul>
   </div>
-
-
-    <div class="content-wrapper" id="contentWrapper">
-      <a  *ngIf="!showLoading && !errorMessage" (click)="newDivId()"
-          class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
-        <div class="uk-button-default large uk-icon-button uk-margin-small-right"  uk-icon="plus">
+  <div inner>
+    <div>
+      <div class="contentPanel">
+        <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
+          <a class="uk-alert-close" uk-close></a>
+          {{updateErrorMessage}}
         </div>
-        Add class
-      </a>
-      <div>
-        <div class="contentPanel">
-          <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-            <a class="uk-alert-close" uk-close></a>
-            {{updateErrorMessage}}
-          </div>
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
-               role="alert">{{errorMessage}}</div>
-          <div [style.display]="showLoading ? 'inline' : 'none'"
-               class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
+        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
+             role="alert">{{errorMessage}}</div>
+        <div [style.display]="showLoading ? 'inline' : 'none'"
+             class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
             class="uk-align-center loading-gif"></div>
 
-          <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
-            <div class="md-card-content">
-              <div class="uk-overflow-container">
+        <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
+          <div class="md-card-content">
+            <div class="uk-overflow-container">
 
-                <table class="uk-table uk-table-striped uk-table-large">
-                  <thead class="form-header">
-                  <tr>
-                    <th
-                      class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
-                    <th>Name</th>
-                    <th *ngIf="!selectedCommunityPid">Portal Type</th>
-                    <th>Page</th>
-                    <th>Actions</th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  <tr *ngFor="let check of checkboxes; let i=index">
-                    <td><input id="{{check.divId._id}}" class="checkBox" type="checkbox"
-                               name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
-                    </td>
-                    <td>
-                      <div class="name" href="#">{{check.divId.name}}</div>
-                    </td>
-                    <td *ngIf="!selectedCommunityPid">
-                      <div class="portalType" href="#">{{check.divId.portalType}}</div>
-                    </td>
-                    <td>
-                      <div class="pages" href="#">
+              <table class="uk-table uk-table-striped uk-table-large">
+                <thead class="form-header">
+                <tr>
+                  <th
+                      class="uk-width-small"><input id="allDivIdCheckbox" type="checkbox"
+                                                    (change)="toggleCheckBoxes($event)"></th>
+                  <th>Name</th>
+                  <th *ngIf="!selectedCommunityPid">Portal Type</th>
+                  <th>Page</th>
+                  <th>Actions</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let check of checkboxes; let i=index">
+                  <td><input id="{{check.divId._id}}" class="checkBox" type="checkbox"
+                             name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
+                  </td>
+                  <td>
+                    <div class="name" href="#">{{check.divId.name}}</div>
+                  </td>
+                  <td *ngIf="!selectedCommunityPid">
+                    <div class="portalType" href="#">{{check.divId.portalType}}</div>
+                  </td>
+                  <td>
+                    <div class="pages" href="#">
                   <span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span
-                    *ngIf="i<(check.divId.pages.length-1)">, </span></span>
-                      </div>
-                    </td>
-                    <td>
+                      *ngIf="i<(check.divId.pages.length-1)">, </span></span>
+                    </div>
+                  </td>
+                  <td>
 
-                      <div class="actions" href="#">
-                        <i class="clickable" uk-icon= "pencil" (click)="editDivId(i)"></i>
-                        <i class="clickable uk-text-danger" uk-icon= "trash"
-                           (click)="confirmDeleteDivId(check.divId._id)"></i>
-                      </div>
-                    </td>
-                  </tr>
-                  </tbody>
-                </table>
+                    <div class="actions" href="#">
+                      <i class="clickable" uk-icon="pencil" (click)="editDivId(i)"></i>
+                      <i class="clickable uk-text-danger" uk-icon="trash"
+                         (click)="confirmDeleteDivId(check.divId._id)"></i>
+                    </div>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
 
-                <div *ngIf="checkboxes.length==0" class="col-md-12">
-                  <div class="uk-alert-warning uk-alert" >No classes found</div>
+              <div *ngIf="checkboxes.length==0" class="col-md-12">
+                <div class="uk-alert-warning uk-alert">No classes found</div>
+              </div>
+              <div class="uk-width-1-1 uk-flex uk-flex-center ">
+                <div class="uk-width-small uk-button uk-button-default" (click)="newDivId()">
+                  <i class="" uk-icon="plus"></i>
                 </div>
-                <div class="uk-width-1-1 uk-flex uk-flex-center ">
-                  <div class="uk-width-small uk-button uk-button-default" (click)="newDivId()">
-                    <i class=""   uk-icon= "plus"></i>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -108,6 +111,7 @@
       </div>
     </div>
   </div>
+</div>
 
 <modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)"
              [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
@@ -121,9 +125,9 @@
     <mat-form-field class="example-chip-list uk-width-1-1  uk-margin-small-left">
       <mat-chip-list #chipList aria-label="Page selection">
         <mat-chip
-          *ngFor="let page of selectedPages"
-          [selectable]="true"
-          [removable]="true">
+            *ngFor="let page of selectedPages"
+            [selectable]="true"
+            [removable]="true">
           {{page.name}}
           <span (click)="remove(page)"
                 class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
@@ -138,7 +142,8 @@
       </mat-autocomplete>
     </mat-form-field>
 
-    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" uk-grid>
+    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
+         class="form-group" uk-grid>
       <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
         Class exists in:
       </div>
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.module.ts
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.module.ts	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/divId/divIds.module.ts	(revision 60211)
@@ -16,14 +16,22 @@
 import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
 import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
 import {ClassesRoutingModule} from "./classes-routing.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {IconsService} from "../../utils/icons/icons.service";
+import {add} from "../../utils/icons/icons";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule,
     AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
-    MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule
+    MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule
   ],
     declarations: [DivIdsComponent],
     exports: [DivIdsComponent]
 })
-export class DivIdsModule { }
+export class DivIdsModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([add]);
+  }
+}
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.component.html
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.component.html	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.component.html	(revision 60211)
@@ -1,129 +1,131 @@
-<div page-content>
-  <admin-tabs tab = "portal" header></admin-tabs>
-  <div inner class="admin-pages">
-    <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
-      <div class="show-options uk-float-right">
-        <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
-        <div uk-dropdown="mode: click">
-          <ul class="uk-nav uk-margin-left"
-              [attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-              title="Select at least one portal">
-            <li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
-                   (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
-          </ul>
+<div page-content class="admin-pages">
+  <div header>
+    <admin-tabs tab="portal"></admin-tabs>
+    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
+      <div class="uk-width-1-1">
+        <ul class="uk-subnav uk-subnav-pill">
+          <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
+              (click)="filterForm.get('type').setValue('all')"><span
+              class="title">All portals</span></a></li>
+          <li *ngFor="let type of  portalUtils.portalTypes; let i=index"
+              [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
+              (click)="filterForm.get('type').setValue(type.value)"><span
+              class="title">{{type.label}}</span></a></li>
+        </ul>
+      </div>
+      <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
+        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
+             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div class="uk-margin-left show-options">
+          <button class="uk-button uk-button-secondary">Bulk Actions</button>
+          <div uk-dropdown="mode: click">
+            <ul class="uk-nav uk-margin-left"
+                [attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
+                title="Select at least one portal">
+              <li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''"
+                     (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
+            </ul>
+          </div>
         </div>
+        <div class="uk-margin-left">
+          <a (click)="newCommunity()"
+             class="uk-flex uk-flex-middle uk-text-uppercase">
+            <button class="large uk-icon-button uk-button-secondary">
+              <icon name="add"></icon>
+            </button>
+            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add portal</button>
+          </a>
+        </div>
       </div>
-      <div class="uk-inline uk-width-medium  uk-float-right uk-margin-right" >
-        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-        <div dashboard-input  [formInput]="filterForm.controls.keyword"
-             placeholder="Search"></div>
-      </div>
-      <ul     class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin  " >
-        <li [class.uk-active]="filterForm.get('type').value === 'all'" class="uk-margin-small-bottom"><a
-          (click)="filterForm.get('type').setValue('all')"><span
-          class="title">All portals</span></a></li>
-        <li  *ngFor="let type of  portalUtils.portalTypes; let i=index"
-             [class.uk-active]="filterForm.get('type').value === type.value" class="uk-margin-small-bottom"><a
-          (click)="filterForm.get('type').setValue(type.value)"><span
-          class="title">{{type.label}}</span></a></li>
-      </ul>
     </div>
-
-    <div class="uk-margin-top">
-      <a  *ngIf="!showLoading && !errorMessage" (click)="newCommunity()"
-          class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
-        <div class="uk-button-default large uk-icon-button uk-margin-small-right"  uk-icon="plus">
-        </div>
-        Add portal
-      </a>
-      <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-        <a class="uk-alert-close" uk-close></a>
-        {{updateErrorMessage}}
-      </div>
-      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
-           role="alert">{{errorMessage}}</div>
-      <div [style.display]="showLoading ? 'inline' : 'none'"
-           class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
+  </div>
+  <div inner>
+    <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
+      <a class="uk-alert-close" uk-close></a>
+      {{updateErrorMessage}}
+    </div>
+    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
+         role="alert">{{errorMessage}}</div>
+    <div [style.display]="showLoading ? 'inline' : 'none'"
+         class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
         class="uk-align-center loading-gif"></div>
 
 
+    <div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
 
-      <div class=" uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
+      <div class="">
+        <div class="uk-overflow-container">
+          <table class="uk-table uk-table-striped uk-table-hover">
+            <thead class="form-header">
+            <tr>
+              <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Actions</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let check of checkboxes; let i=index">
+              <td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
+                         name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
+              </td>
+              <td>
+                <div class="name" href="#">{{check.community.name}}</div>
+              </td>
+              <td>
+                <div class="type" href="#">{{check.community.type}}</div>
+              </td>
+              <td>
+                <div class="actions" href="#">
+                  <i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
+                  <i class="clickable uk-text-danger" uk-icon="trash"
+                     (click)="confirmDeleteCommunity(check.community._id)"></i>
+                </div>
+              </td>
 
-        <div class="">
-          <div class="uk-overflow-container">
-            <table class="uk-table uk-table-striped uk-table-hover">
-              <thead class="form-header">
-              <tr>
-                <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Actions</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr *ngFor="let check of checkboxes; let i=index">
-                <td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
-                           name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
-                </td>
-                <td>
-                  <div class="name" href="#">{{check.community.name}}</div>
-                </td>
-                <td>
-                  <div class="type" href="#">{{check.community.type}}</div>
-                </td>
-                <td>
-                  <div class="actions" href="#">
-                    <i class="clickable" uk-icon="pencil" (click)="editCommunity(i)"></i>
-                    <i class="clickable uk-text-danger" uk-icon="trash"
-                       (click)="confirmDeleteCommunity(check.community._id)"></i>
-                  </div>
-                </td>
+            </tr>
 
-              </tr>
-
-              </tbody>
-            </table>
-            <div *ngIf="checkboxes.length==0" class="col-md-12">
-              <div class="uk-alert-warning" uk-alert>No portals found</div>
+            </tbody>
+          </table>
+          <div *ngIf="checkboxes.length==0" class="col-md-12">
+            <div class="uk-alert-warning" uk-alert>No portals found</div>
+          </div>
+          <!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
+            <div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
+              <i class="" uk-icon="plus"></i>
             </div>
-            <!--<div class="uk-width-1-1 uk-flex uk-flex-center ">
-              <div class="uk-width-small uk-button-default uk-button" (click)="newCommunity()">
-                <i class="" uk-icon="plus"></i>
-              </div>
-            </div>-->
-          </div>
+          </div>-->
         </div>
       </div>
     </div>
   </div>
-  </div>
+</div>
 
-  <modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)"
-               [okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)">
+<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)"
+             [okDisabled]="portalFG && (portalFG.invalid || !portalFG.dirty)">
 
-    <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
-    <form [formGroup]="portalFG">
-      <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.name"
-           type="text"
-           label="Portal Name">
-      </div>
-      <div [ngClass]="{'has-error':!portalFG.controls.type.valid && portalFG.controls.type.dirty}">
-        <label for="portalTypeTag">*Portal Type</label>
-        <select formControlName="type" id="portalTypeTag" class="form-control uk-select">
-          <option *ngFor="let option of portalUtils.portalTypes" [value]="option.value">{{option.label}}</option>
-        </select>
-      </div>
-      <div dashboard-input class="uk-margin-small-left " [formInput]="portalFG.controls.pid"
-           type="text"
-           label="Portal persistent id for portal">
-      </div>
-      <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.piwik"
-           type="text"
-           label="Piwik id">
-      </div>
-      <input type="hidden" formControlName="_id">
-    </form>
+  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
+  <form [formGroup]="portalFG">
+    <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.name"
+         type="text"
+         label="Portal Name">
+    </div>
+    <div [ngClass]="{'has-error':!portalFG.controls.type.valid && portalFG.controls.type.dirty}">
+      <label for="portalTypeTag">*Portal Type</label>
+      <select formControlName="type" id="portalTypeTag" class="form-control uk-select">
+        <option *ngFor="let option of portalUtils.portalTypes" [value]="option.value">{{option.label}}</option>
+      </select>
+    </div>
+    <div dashboard-input class="uk-margin-small-left " [formInput]="portalFG.controls.pid"
+         type="text"
+         label="Portal persistent id for portal">
+    </div>
+    <div dashboard-input class="uk-margin-small-left" [formInput]="portalFG.controls.piwik"
+         type="text"
+         label="Piwik id">
+    </div>
+    <input type="hidden" formControlName="_id">
+  </form>
 
-  </modal-alert>
-  <modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>
+</modal-alert>
+<modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.module.ts
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.module.ts	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/portal/portals.module.ts	(revision 60211)
@@ -9,14 +9,22 @@
 import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
 import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
 import {PortalsRoutingModule} from "./portals-routing.module";
+import {IconsService} from "../../utils/icons/icons.service";
+import {add} from "../../utils/icons/icons";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, AlertModalModule,
     ReactiveFormsModule,
-    RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule
+    RouterModule, AdminToolServiceModule, InputModule, AdminTabsModule, PageContentModule, PortalsRoutingModule, IconsModule, SearchInputModule
   ],
   declarations: [PortalsComponent],
   exports: [PortalsComponent]
 })
-export class PortalsModule { }
+export class PortalsModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([add]);
+  }
+}
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.component.html
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.component.html	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.component.html	(revision 60211)
@@ -1,120 +1,130 @@
-<div page-content>
-  <admin-tabs tab = "entity"  [portal]="selectedCommunityPid" header></admin-tabs>
-  <div inner class="admin-pages">
-    <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
-      <div class="show-options uk-float-right">
-        <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
-        <div uk-dropdown="mode: click">
-          <ul class="uk-nav uk-margin-left"
-              [attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-              title="Select at least one entity">
-            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
-                                                  (click)="toggleEntities(true, getSelectedEntities())"><i></i> Activate
-            </a></li>
-            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
-                                                  (click)="toggleEntities(false, getSelectedEntities())"><i></i> Deactivate
-            </a></li>
-            <li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
-                                                 (click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
-          </ul>
+<div page-content class="admin-pages">
+  <div header>
+    <admin-tabs tab="entity" [portal]="selectedCommunityPid"></admin-tabs>
+    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
+      <div class="uk-width-1-1">
+        <ul *ngIf="!isPortalAdministrator" class="uk-subnav uk-subnav-pill">
+          <li [class.uk-active]="filterForm.get('status').value === 'all'"><a
+              (click)="filterForm.get('status').setValue('all')"><span
+              class="title">All entities</span></a></li>
+          <li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a
+              (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
+          <li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a
+              (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
+        </ul>
+      </div>
+      <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
+        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
+             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div class="uk-margin-left show-options">
+          <button class="uk-button uk-button-secondary">Bulk Actions</button>
+          <div uk-dropdown="mode: click">
+            <ul class="uk-nav uk-margin-left"
+                [attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
+                title="Select at least one entity">
+              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
+                                                    (click)="toggleEntities(true, getSelectedEntities())"><i></i>
+                Activate
+              </a></li>
+              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
+                                                    (click)="toggleEntities(false, getSelectedEntities())"><i></i>
+                Deactivate
+              </a></li>
+              <li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
+                                                   (click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
+            </ul>
+          </div>
         </div>
+        <div *ngIf="isPortalAdministrator" class="uk-margin-left">
+          <a (click)="newEntity()"
+             class="uk-flex uk-flex-middle uk-text-uppercase">
+            <button class="large uk-icon-button uk-button-secondary">
+              <icon name="add"></icon>
+            </button>
+            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add entity</button>
+          </a>
+        </div>
       </div>
-      <div class="uk-float-right uk-margin-right uk-width-medium">
-        <div dashboard-input   [formInput]="filterForm.controls.keyword" placeholder="search entity"></div>
-      </div>
-      <ul *ngIf="!isPortalAdministrator"    class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin  " >
-        <li [class.uk-active]="filterForm.get('status').value === 'all'"><a
-          (click)="filterForm.get('status').setValue('all')"><span
-          class="title">All entities</span></a></li>
-        <li [class.uk-active]="filterForm.get('status').value === 'enabled'"><a (click)="filterForm.get('status').setValue('enabled')"><span class="title">Enabled</span></a></li>
-        <li [class.uk-active]="filterForm.get('status').value === 'disabled'"><a (click)="filterForm.get('status').setValue('disabled')"><span class="title">Disabled</span></a></li>
-      </ul>
-
     </div>
-
-    <div class="content-wrapper" id="contentWrapper">
-      <a  *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newEntity()"
-          class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom">
-        <div class="uk-button-default large uk-icon-button uk-margin-small-right"  uk-icon="plus">
+  </div>
+  <div inner>
+    <div class="contentPanel ">
+      <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
+        <div>
+          <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
+          Disable an entity to hide it from community dashboard portal.
         </div>
-        Add entity
-      </a>
-      <div class="contentPanel ">
-          <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
-            <div>
-              <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-              Disable an entity to hide it from community dashboard portal.
-            </div>
-            <div
-              class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
-            </div>
+        <div
+            class="uk-text-small">If an entity is disabled, all related search and advanced search pages will be
+          hidden from the community dashborad and a message "Can't find that page" will appear in case the url of that
+          page is loaded. If the related page belongs to the menu the link will be removed from menu, too.
+        </div>
 
-          </div>
-          <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-            <a class="uk-alert-close" uk-close></a>
-            {{updateErrorMessage}}
-          </div>
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
-               role="alert">{{errorMessage}}</div>
-          <div [style.display]="showLoading ? 'inline' : 'none'"
-               class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
-            class="uk-align-center loading-gif"></div>
+      </div>
+      <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
+        <a class="uk-alert-close" uk-close></a>
+        {{updateErrorMessage}}
+      </div>
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
+           role="alert">{{errorMessage}}</div>
+      <div [style.display]="showLoading ? 'inline' : 'none'"
+           class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
+          class="uk-align-center loading-gif"></div>
 
 
-          <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
-            <div class="md-card-content">
-              <div class="uk-overflow-container">
-                <table class="uk-table uk-table-striped uk-table-hover uk-table-large">
-                  <thead class="form-header">
-                  <tr>
-                    <th
-                      class="uk-width-small"><input id="allEntityCheckbox" type="checkbox"
-                                           (change)="toggleCheckBoxes($event)"></th>
-                    <th>Name</th>
-                    <th *ngIf="!isPortalAdministrator">Status</th>
-                    <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
-                    <th *ngIf="isPortalAdministrator">Actions</th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  <tr *ngFor="let check of checkboxes; let i=index">
-                    <td><input id="{{check.entity._id}}" class="checkBox" type="checkbox"
-                               name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
-                    </td>
-                    <td>
-                      <div class="name" href="#">{{check.entity.name}}</div>
-                    </td>
-                    <td *ngIf="!isPortalAdministrator">
-                      <div class="name" href="#">{{check.entity.isEnabled?"Enabled":"Disabled"}}</div>
-                    </td>
-                    <td *ngIf="!isPortalAdministrator">
-                      <mat-slide-toggle [checked]="check.entity.isEnabled"
-                                        (change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle>
-                    </td>
+      <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
+        <div class="md-card-content">
+          <div class="uk-overflow-container">
+            <table class="uk-table uk-table-striped uk-table-hover uk-table-large">
+              <thead class="form-header">
+              <tr>
+                <th
+                    class="uk-width-small"><input id="allEntityCheckbox" type="checkbox"
+                                                  (change)="toggleCheckBoxes($event)"></th>
+                <th>Name</th>
+                <th *ngIf="!isPortalAdministrator">Status</th>
+                <th *ngIf="!isPortalAdministrator">Enable/Disable</th>
+                <th *ngIf="isPortalAdministrator">Actions</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr *ngFor="let check of checkboxes; let i=index">
+                <td><input id="{{check.entity._id}}" class="checkBox" type="checkbox"
+                           name="entitiescb[]" value="{{check.entity._id}}" [(ngModel)]="check.checked">
+                </td>
+                <td>
+                  <div class="name" href="#">{{check.entity.name}}</div>
+                </td>
+                <td *ngIf="!isPortalAdministrator">
+                  <div class="name" href="#">{{check.entity.isEnabled ? "Enabled" : "Disabled"}}</div>
+                </td>
+                <td *ngIf="!isPortalAdministrator">
+                  <mat-slide-toggle [checked]="check.entity.isEnabled"
+                                    (change)="($event.source.checked = check.entity.isEnabled);toggleEntities(!check.entity.isEnabled,[check.entity._id])"></mat-slide-toggle>
+                </td>
 
-                    <td *ngIf="isPortalAdministrator">
-                      <div class="actions" href="#">
-                        <i class="clickable " uk-icon="pencil" (click)="editEntity(i)"></i>
-                        <i class="clickable uk-text-danger" uk-icon="trash"
-                           (click)="confirmDeleteEntity(check.entity._id)"></i>
-                      </div>
-                    </td>
-                  </tr>
-                  </tbody>
-                </table>
-                <div class="uk-width-1-1 uk-flex uk-flex-center " *ngIf="isPortalAdministrator">
-                  <div class="uk-width-small uk-button uk-button-default" (click)="newEntity()">
-                    <i class="" uk-icon="plus"></i>
+                <td *ngIf="isPortalAdministrator">
+                  <div class="actions" href="#">
+                    <i class="clickable " uk-icon="pencil" (click)="editEntity(i)"></i>
+                    <i class="clickable uk-text-danger" uk-icon="trash"
+                       (click)="confirmDeleteEntity(check.entity._id)"></i>
                   </div>
-                </div>
-                <div *ngIf="checkboxes.length==0" class="col-md-12">
-                  <div class="uk-alert-warning" uk-alert>No entities found</div>
-                </div>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+            <div class="uk-width-1-1 uk-flex uk-flex-center " *ngIf="isPortalAdministrator">
+              <div class="uk-width-small uk-button uk-button-default" (click)="newEntity()">
+                <i class="" uk-icon="plus"></i>
               </div>
             </div>
-
+            <div *ngIf="checkboxes.length==0" class="col-md-12">
+              <div class="uk-alert-warning" uk-alert>No entities found</div>
+            </div>
           </div>
         </div>
+
+      </div>
     </div>
   </div>
 </div>
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.module.ts
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.module.ts	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/entity/entities.module.ts	(revision 60211)
@@ -10,13 +10,21 @@
 import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
 import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
 import {EntitiesRoutingModule} from "./entities-routing.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {IconsService} from "../../utils/icons/icons.service";
+import {add} from "../../utils/icons/icons";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, AdminToolServiceModule,
-    AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule
+    AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, EntitiesRoutingModule, SearchInputModule, IconsModule
   ],
     declarations: [EntitiesComponent],
     exports: [EntitiesComponent]
 })
-export class EntitiesModule { }
+export class EntitiesModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([add]);
+  }
+}
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.component.html
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.component.html	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.component.html	(revision 60211)
@@ -1,85 +1,91 @@
-<div page-content>
-  <admin-tabs tab = "page" [portal]="selectedCommunityPid" header></admin-tabs>
-  <div inner class="admin-pages">
-    <div *ngIf="!errorMessage && !showLoading" class="filters" uk-sticky="offset:150">
-      <div class="show-options uk-float-right">
-        <button class="uk-button uk-button-primary " type="button">Bulk Actions</button>
-        <div uk-dropdown="mode: click">
-          <ul class="uk-nav  uk-margin-left"
-              [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-              title="Select at least one page">
-            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-                                                  (click)="togglePages(true, getSelectedPages())"> Activate
-            </a></li>
-            <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
-                                                  (click)="togglePages(false, getSelectedPages())">  Deactivate
-            </a></li>
-            <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
-          </ul>
+<div page-content class="admin-pages">
+  <div header>
+    <admin-tabs tab="page" [portal]="selectedCommunityPid"></admin-tabs>
+    <div *ngIf="!errorMessage && !showLoading" class="uk-grid filters" uk-grid>
+      <div class="uk-width-1-1">
+        <ul class="uk-subnav uk-subnav-pill">
+          <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
+              (click)="filterForm.get('type').setValue('all')"><span
+              class="title">All pages</span></a></li>
+          <li *ngFor="let type of typeOptions; let i=index"
+              [class.uk-active]="filterForm.get('type').value === type.value"><a
+              (click)="filterForm.get('type').setValue(type.value)"><span
+              class="title">{{type.label}}</span></a></li>
+        </ul>
+      </div>
+      <div class="uk-width-1-1 uk-flex uk-flex-right uk-flex-middle">
+        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
+             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div class="uk-margin-left show-options">
+          <button class="uk-button uk-button-secondary">Bulk Actions</button>
+          <div uk-dropdown="mode: click">
+            <ul class="uk-nav  uk-margin-left"
+                [attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
+                title="Select at least one page">
+              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
+                                                    (click)="togglePages(true, getSelectedPages())"> Activate
+              </a></li>
+              <li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
+                                                    (click)="togglePages(false, getSelectedPages())"> Deactivate
+              </a></li>
+              <li *ngIf="isPortalAdministrator"><a (click)="confirmDeleteSelectedPages()"> Delete </a></li>
+            </ul>
+          </div>
         </div>
+        <div *ngIf="isPortalAdministrator" class="uk-margin-left">
+          <a (click)="newPage()"
+             class="uk-flex uk-flex-middle uk-text-uppercase">
+            <button class="large uk-icon-button uk-button-secondary">
+              <icon name="add"></icon>
+            </button>
+            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add page</button>
+          </a>
+        </div>
       </div>
-      <div class="uk-inline uk-width-medium uk-float-right uk-margin-right">
-        <div dashboard-input [formInput]="filterForm.controls.keyword" placeholder="search page" ></div>
-      </div>
-      <ul     class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin  " >
-        <li [class.uk-active]="filterForm.get('type').value === 'all'"><a
-          (click)="filterForm.get('type').setValue('all')"><span
-          class="title">All pages</span></a></li>
-        <li  *ngFor="let type of typeOptions; let i=index"
-             [class.uk-active]="filterForm.get('type').value === type.value"><a
-          (click)="filterForm.get('type').setValue(type.value)"><span
-          class="title">{{type.label}}</span></a></li>
-      </ul>
-<!--      <input    class="uk-width-1-1  "-->
-<!--               placeholder="SEARCH FOR A COUNTRY" type="text" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true">-->
     </div>
-
-    <div class="content-wrapper uk-margin-top" id="contentWrapper">
-      <a  *ngIf="!showLoading && isPortalAdministrator && !errorMessage" (click)="newPage()"
-          class="uk-flex uk-flex-right uk-flex-middle uk-margin-small-bottom uk-width-1-1">
-        <div class="uk-button-default large uk-icon-button uk-margin-small-right"  uk-icon="plus">
+  </div>
+  <div inner>
+    <div class="contentPanel ">
+      <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
+        <div>
+          <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
+          Disable a page to hide it from community dashboard portal.
         </div>
-        Add page
-      </a>
-      <div class="contentPanel ">
-        <div *ngIf="!isPortalAdministrator" class="uk-alert uk-alert-primary uk-margin-top-large">
-          <div>
-            <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-            Disable a page to hide it from community dashboard portal.
-          </div>
-          <div
-            class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
-          </div>
+        <div
+            class="uk-text-small">If the page is disabled, a message "Can't find that page" will appear in case the url
+          of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.
+        </div>
 
-        </div>
-        <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-          <a class="uk-alert-close" uk-close></a>
-          {{updateErrorMessage}}
-        </div>
-        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
-             role="alert">{{errorMessage}}</div>
-        <div [style.display]="showLoading ? 'inline' : 'none'"
-             class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
+      </div>
+      <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
+        <a class="uk-alert-close" uk-close></a>
+        {{updateErrorMessage}}
+      </div>
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top"
+           role="alert">{{errorMessage}}</div>
+      <div [style.display]="showLoading ? 'inline' : 'none'"
+           class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img
           class="uk-align-center loading-gif"></div>
-        <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
-          <div class="md-card-content">
-            <div class="uk-overflow-container">
-              <ul class="uk-list pages">
-                <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
-                  <div class="uk-grid uk-padding">
+      <div class="md-card uk-margin-medium-bottom" *ngIf="!errorMessage && !showLoading">
+        <div class="md-card-content">
+          <div class="uk-overflow-container">
+            <ul class="uk-list pages">
+              <li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
+                <div class="uk-grid uk-padding">
                   <div class=""><input id="{{check.page._id}}" class="checkBox" type="checkbox"
-                             name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
+                                       name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
                   </div>
-                  <div  class="uk-width-expand">
+                  <div class="uk-width-expand">
                     <div class="title uk-margin-medium-bottom">Name</div>
                     <div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
                     <div *ngIf="check.page.entities && check.page.entities.length > 0"><span
-                      class="title">Entities: </span>
+                        class="title">Entities: </span>
                       {{check.page.entities.join(", ")}}</div>
                     <div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
-                    <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span class="title">Type: </span> {{check.page.type}}</div>
+                    <div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
+                        class="title">Type: </span> {{check.page.type}}</div>
                     <div *ngIf="!selectedCommunityPid" class=" uk-margin-small-bottom">
-                      <span class="title" >Portal type: </span>{{check.page.portalType}}
+                      <span class="title">Portal type: </span>{{check.page.portalType}}
                     </div>
                   </div>
                   <div *ngIf="isPortalAdministrator" class="uk-width-1-4">
@@ -102,8 +108,8 @@
                     </div>
                     <div>
                       <a *ngIf="pageWithDivIds.includes(check.page._id)" class="classHelpContents"
-                       [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
-                       routerLink="../../classContents">manage class contents</a>
+                         [queryParams]="{communityId: selectedCommunityPid, pageId: check.page._id}"
+                         routerLink="../../classContents">manage class contents</a>
                     </div>
                   </div>
                   <div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
@@ -111,19 +117,18 @@
                     <mat-slide-toggle [checked]="check.page.isEnabled"
                                       (change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"></mat-slide-toggle>
                   </div>
-                  </div>
-                </li>
-                
-              </ul>
+                </div>
+              </li>
 
-              <div *ngIf="checkboxes.length==0" class="col-md-12">
-                <div class="uk-alert-warning" uk-alert>No pages found</div>
+            </ul>
+
+            <div *ngIf="checkboxes.length==0" class="col-md-12">
+              <div class="uk-alert-warning" uk-alert>No pages found</div>
+            </div>
+            <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
+              <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
+                <i class="" uk-icon="plus"></i>
               </div>
-              <div *ngIf="isPortalAdministrator" class="uk-width-1-1 uk-flex uk-flex-center ">
-                <div class="uk-width-small uk-button uk-button-default" (click)="newPage()">
-                  <i class="" uk-icon="plus"></i>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -132,7 +137,8 @@
   </div>
 </div>
 
-<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)" [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
+<modal-alert #AlertModalSavePage (alertOutput)="pageSaveConfirmed($event)"
+             [okDisabled]="myForm && (myForm.invalid || !myForm.dirty)">
   <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
   <form [formGroup]="myForm">
 
@@ -153,9 +159,9 @@
     <mat-form-field class="example-chip-list uk-width-1-1  uk-margin-small-left">
       <mat-chip-list #chipList aria-label="Page selection">
         <mat-chip
-          *ngFor="let entity of selectedEntities"
-          [selectable]="true"
-          [removable]="true">
+            *ngFor="let entity of selectedEntities"
+            [selectable]="true"
+            [removable]="true">
           {{entity.name}}
           <span (click)="remove(entity)"
                 class=" notranslate mat-chip-remove mat-chip-trailing-icon " uk-icon="trash"></span>
@@ -170,7 +176,7 @@
       </mat-autocomplete>
     </mat-form-field>
 
-    <div class="form-group" >
+    <div class="form-group">
       <label class="uk-text-danger uk-margin-small-bottom">
         By disabling a position, all contents in this position will be deleted.
       </label>
@@ -178,7 +184,7 @@
       <div class=" uk-grid">
         <span dashboard-input class="" [formInput]="myForm.get('top')"
               type="checkbox"
-              label="Top" >
+              label="Top">
         </span>
         <span dashboard-input class="uk-margin-small-left" [formInput]="myForm.get('right')"
               type="checkbox"
@@ -194,7 +200,8 @@
         </span>
       </div>
     </div>
-    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group" >
+    <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}"
+         class="form-group">
       <div class="uk-width-1-1 uk-margin-small-bottom uk-text-bold uk-form-label">
         Page exists in:
       </div>
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.module.ts
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.module.ts	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/dashboard/page/pages.module.ts	(revision 60211)
@@ -10,13 +10,21 @@
 import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
 import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
 import {PagesRoutingModule} from "./pages-routing.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
+import {IconsModule} from "../../utils/icons/icons.module";
+import {IconsService} from "../../utils/icons/icons.service";
+import {add} from "../../utils/icons/icons";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, AdminToolServiceModule, InputModule,
-    MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule
+    MatAutocompleteModule, MatFormFieldModule, MatChipsModule, AdminTabsModule, PageContentModule, PagesRoutingModule, SearchInputModule, IconsModule
   ],
     declarations: [PagesComponent],
     exports: [PagesComponent]
 })
-export class PagesModule { }
+export class PagesModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([add]);
+  }
+}
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.ts
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.ts	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.ts	(revision 60211)
@@ -6,11 +6,11 @@
   selector: '[search-input]',
   styleUrls: ['search-input.component.css'],
   template: `
-    <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile" [ngClass]="colorClass">
-      <div *ngIf="control" class="uk-width-expand">
+    <div class="uk-flex uk-flex-middle uk-flex-center search-mobile" [ngClass]="colorClass">
+      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
         <form (ngSubmit)="search()">
           <input #input type="text" class="uk-width-1-1"
-                 [class.uk-animation-slide-right-medium]="showSearch && !control.value"
+                 [class.uk-animation-slide-right-medium]="showSearch"
                  [class.uk-hidden@m]="!showSearch"
                  [class.uk-hidden]="selected"
                  [placeholder]="placeholder"
@@ -40,7 +40,7 @@
         <span [ngClass]="colorClass" class="icon-bg">
           <icon class="uk-position-center" name="search"></icon>
         </span>
-        <span class="uk-text-uppercase space">search</span>
+        <span class="uk-text-uppercase overlay">search</span>
       </button>
       <button [disabled]="loading" class="search uk-flex uk-flex-middle uk-hidden@m"
               (mousedown)="$event.preventDefault()" (click)="search()">
@@ -47,7 +47,7 @@
         <span [ngClass]="colorClass" class="icon-bg">
           <icon class="uk-position-center" name="search"></icon>
         </span>
-        <span class="uk-text-uppercase space">search</span>
+        <span class="uk-text-uppercase overlay">search</span>
       </button>
     </div>`
 })
@@ -66,6 +66,8 @@
   list: any = null;
   @Input()
   colorClass: string = 'portal-color';
+  @Input()
+  bordered: boolean = false;
   @ViewChild('input') input: ElementRef;
   @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
   @Output()
Index: modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.css
===================================================================
--- modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.css	(revision 60210)
+++ modules/uoa-services-library/trunk/ng-openaire-library/src/app/sharedComponents/search-input/search-input.component.css	(revision 60211)
@@ -11,7 +11,13 @@
   font-weight: 600;
 }
 
-@media only screen and (max-width: 980px) {
+@media only screen and (min-width: 960px) {
+  .bordered {
+    border-bottom: 1px solid currentColor !important;
+  }
+}
+
+@media only screen and (max-width: 959px) {
   input {
     font-size: 14px;
   }
@@ -47,3 +53,8 @@
 .selected {
   color: #1a1a1a;
 }
+
+.overlay {
+  margin-left: -13px;
+  z-index: 1;
+}
