Index: modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.module.ts
===================================================================
--- modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.module.ts	(revision 60893)
+++ modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.module.ts	(revision 60894)
@@ -18,10 +18,13 @@
 import {QuickLookButtonsComponent} from './quickLook-buttons.component';
 import {MatFormFieldModule, MatSelectModule, MatSlideToggleModule} from '@angular/material';
 import {CustomizeButtonsComponent} from './customize-buttons.component';
+import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
+import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
+import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
 
 @NgModule({
   imports: [
-    CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule
+    CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule
   ],
   declarations: [
     CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent
@@ -34,4 +37,7 @@
   ]
 })
 export class CustomizationModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([reset, refresh]);
+  }
 }
Index: modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/Border.component.ts
===================================================================
--- modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/Border.component.ts	(revision 60893)
+++ modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/Border.component.ts	(revision 60894)
@@ -4,44 +4,41 @@
 @Component({
   selector: 'border',
   template: `
-    <div class="uk-grid uk-margin-remove">
-      <div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Radius (px):</div>
-      <div class="uk-width-small uk-padding-remove-left">
-        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />
+    <div class="uk-grid uk-child-width-1-2" >
+      <div class="uk-margin-remove">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>
+  <!--      <div class="uk-margin-bottom uk-form-hint ">hint</div>-->
+        <div class="input-box">
+           <input class="uk-input " [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />
+        </div>
       </div>
-    </div>
-    <div class="uk-grid uk-margin-remove">
-      <div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Width (px):</div>
-      <div class="uk-width-small uk-padding-remove-left">
-        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />
+      <div class="uk-margin-remove">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Button width (px)</div>
+        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
+        <div class="input-box">
+          <input class="uk-input  " [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0"  />
+        </div>
       </div>
-    </div>
-    <div class="uk-grid uk-margin-small-top">
-<!--      <div class="uk-width-small uk-margin-small-top uk-padding-remove-left"> Style:</div>-->
-<!--      <div class="uk-width-small uk-padding-remove-left">-->
-<!--&lt;!&ndash;        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="style" (ngModelChange)="borderChanged()"/>&ndash;&gt;-->
+      <div class="uk-margin-small-top">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>
+        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
+        <div class="input-box ">
+          <mat-form-field class="uk-width-1-1">
+            <mat-select class=""  [(ngModel)]="style" name="{{'select_type_'}}"
+                        (ngModelChange)="borderChanged()"
+                        [disableOptionCentering]="true"
+                        panelClass="">
+              <mat-option [value]="'solid'" >solid</mat-option>
+              <mat-option [value]="'dotted'" >dotted</mat-option>
+              <mat-option [value]="'dashed'" >dashed</mat-option>
 
-<!--        <select [(ngModel)]="style" name="{{'select_type_'}}"-->
-<!--                class="uk-select uk-width-small" (ngModelChange)="borderChanged()">-->
-<!--          <option [value]="'solid'" >solid</option>-->
-<!--          <option [value]="'dotted'" >dotted</option>-->
-<!--          <option [value]="'dashed'" >dashed</option>-->
-<!--        </select>-->
-
-<!--      </div>-->
-      <mat-form-field class="matSelectionFormField uk-width-1-1">
-        <mat-label>Style</mat-label>
-        <mat-select class="matSelection"  [(ngModel)]="style" name="{{'select_type_'}}"
-                    (ngModelChange)="borderChanged()"
-                    [disableOptionCentering]="true"
-                    panelClass="matSelectionPanel">
-          <mat-option [value]="'solid'" >solid</mat-option>
-          <mat-option [value]="'dotted'" >dotted</mat-option>
-          <mat-option [value]="'dashed'" >dashed</mat-option>
-
-        </mat-select>
-      </mat-form-field>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
     </div>
+    
+   
   `
 })
 
Index: modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customize-buttons.component.ts
===================================================================
--- modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customize-buttons.component.ts	(revision 60893)
+++ modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customize-buttons.component.ts	(revision 60894)
@@ -6,7 +6,7 @@
   selector: 'customize-buttons',
   template: `
  
-      <div class="uk-width-1-2@m uk-width-1-1@s">
+      <div class="">
         <border [style]="buttons.borderStyle" [width]=
           "buttons.borderWidth" [radius]=
                   "buttons.borderRadius" (borderChange)=
@@ -13,29 +13,38 @@
                   " buttons.borderStyle = $event.style;
                         buttons.borderRadius = $event.radius;
                         buttons.borderWidth = $event.width; "></border>
-        <color [color]="buttons.color" (colorChange)=
-          " buttons.color = $event; "
-               label="Fonts Color"
-               [addMargin]="true"></color>
-        <color [color]="buttons.backgroundColor" (colorChange)=
-          " buttons.backgroundColor = $event; "
-               label="Background Color" [addMargin]="true"></color>
-        <color [color]="buttons.borderColor" (colorChange)=
-          " buttons.borderColor = $event; "
-               label="Border Color"
-               [addMargin]="true"
-        ></color>
-        <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
-        <color [color]="buttons.onHover.color" (colorChange)=
-          " buttons.onHover.color = $event;" label="Fonts Color"
-        ></color>
-        <color [color]="buttons.onHover.backgroundColor"
-               (colorChange)=
-                 " buttons.onHover.backgroundColor = $event;"
-               label="Background Color" [addMargin]="true"></color>
-        <color [color]="buttons.onHover.borderColor" (colorChange)=
-          " buttons.onHover.borderColor = $event;"
-               label="Border Color" [addMargin]="true"></color>
+        <div class="uk-grid uk-child-width-1-2 uk-margin-top" >
+          <div class="">
+            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div>
+            <color [color]="buttons.color" (colorChange)=
+              " buttons.color = $event; "
+                   label="Fonts"
+                   ></color>
+            <color [color]="buttons.backgroundColor" (colorChange)=
+              " buttons.backgroundColor = $event; "
+                   label="Background" ></color>
+            <color [color]="buttons.borderColor" (colorChange)=
+              " buttons.borderColor = $event; "
+                   label="Border"
+                   
+            ></color>
+          </div>
+          <div>
+            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
+            <div class="">
+            <color [color]="buttons.onHover.color" (colorChange)=
+              " buttons.onHover.color = $event;" label="Fonts"
+            ></color>
+            <color [color]="buttons.onHover.backgroundColor"
+                   (colorChange)=
+                     " buttons.onHover.backgroundColor = $event;"
+                   label="Background" ></color>
+            <color [color]="buttons.onHover.borderColor" (colorChange)=
+              " buttons.onHover.borderColor = $event;"
+                   label="Border" ></color>
+            </div>
+              </div>
+          </div>
       </div>
      
       
Index: modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.html
===================================================================
--- modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.html	(revision 60893)
+++ modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.html	(revision 60894)
@@ -18,9 +18,9 @@
   <div header>
   </div>
   <div inner>
-<div class="">
+<div class="" >
   <div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card">
-    <div class = "uk-card-header">
+    <div class = "uk-card-header" style="z-index: 2"  uk-sticky="offset:100">
       <div class = " uk-margin-small-top uk-margin-small-bottom">
 
         <ng-container
@@ -29,13 +29,13 @@
       </div>
     </div>
     <div class="uk-padding">
-    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
+    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
       <li [class.uk-active]="menuSelected === 'identity'"
           uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
       ><a
         (click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
       <li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
-        class="title">Backgrounds & Buttons
+        class="title">Backgrounds & buttons
       </span></a></li>
 
     </ul>
@@ -43,8 +43,8 @@
     <div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
       <div class="customizationMenuItems uk-margin-small">
         <div class="uk-grid">
-          <div class="uk-width-1-2@m uk-width-1-1@s">
-            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> QUICK LOOK
+          <div class="uk-width-2-3@m uk-width-1-1@s">
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look
               <!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
               <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                    data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
@@ -61,18 +61,18 @@
             ></quick-look-backgrounds>
 
           </div>
-          <div class="uk-width-1-2@m uk-width-1-1@s">
+          <div class="uk-width-1-3@m uk-width-1-1@s">
 
             <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons
               <a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
               || hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
               && draftCustomizationOptions.backgroundsAndButtonsIsCustom"
-                 (click)="resetBackgroundsAndButtonsToPublished();"
+                 (click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
                  uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
-                 >  <span  uk-icon = "refresh"></span></a>
+                 >  <icon name="reset"></icon></a>
             </div>
 
-            <div >
+            <div class="uk-margin-top">
               <span>Custom style </span>
               <span >
               <mat-slide-toggle class="uk-margin-large-left"
@@ -87,31 +87,31 @@
             </div>
             <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
                  style="font-style: italic">
-              Backgrounds and buttons colors are set in the default values.
+              Backgrounds and buttons are set in the default values.
             </div>
 
-            <div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-top">
-
+            <div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
+              <div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>
               <color [color]="draftCustomizationOptions.backgrounds.dark.color"
-                     label="Dark background color"
+                     label="Dark"
                      (colorChange)=
                        " draftCustomizationOptions.backgrounds.dark.color = $event;"></color>
                       <span *ngIf="!isForLightBackground(draftCustomizationOptions.backgrounds.dark.color)">The selected color may has lower contrast.</span>
               <color [color]="draftCustomizationOptions.backgrounds.light.color"
-                     label="Light background color"
+                     label="Light"
                      (colorChange)=
                        " draftCustomizationOptions.backgrounds.light.color = $event;"></color>
               <span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.light.color)">The selected color may has lower contrast.</span>
               <color [color]="draftCustomizationOptions.backgrounds.form.color"
-                     label="Form background color"
+                     label="Form"
                      (colorChange)=
                        " draftCustomizationOptions.backgrounds.form.color = $event;"></color>
               <span *ngIf="isForLightBackground(draftCustomizationOptions.backgrounds.form.color)">The selected color
                 may has lower contrast.</span>
-
+              <div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
               <ul   class="uk-tab" uk-switcher>
-                <li><a href="#">On dark <br>background</a></li>
-                <li><a href="#">On light <br>background</a></li>
+                <li><a href="#">On dark background</a></li>
+                <li><a href="#">On light background</a></li>
               </ul>
               <ul class="uk-switcher uk-margin">
                 <li>
@@ -136,12 +136,10 @@
 
     <div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
       <div class=" customizationMenuItems uk-margin-small">
+
         <div class="uk-grid">
           <div class="uk-width-2-3@m uk-width-1-1@s">
-            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-              <!--<span class="uk-icon uk-link " (click)="resetIdentityToPublished(); ">
-                <span uk-icon = "refresh"></span>
-              </span>-->
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look
             </div>
             <div style="border-radius: 6px;" class="uk-alert uk-padding-small">
               <quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
@@ -150,14 +148,14 @@
           </div>
           <div class="uk-width-1-3@m uk-width-1-1@s">
 
-            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity Colors
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity
               <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
-              draftCustomizationOptions.identityIsCustom"
+              draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
                  uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
-               (click)="resetIdentityToPublished();">  <span uk-icon = "refresh"></span></a></div>
+               (click)="resetIdentityToPublished();">  <icon name="reset"></icon></a></div>
 
-            <div class="uk-form-controls">
-              <div>
+            <div class="uk-margin-top">
+              <div class="">
                 <span>Custom style</span>
                 <mat-slide-toggle class="uk-margin-large-left"
                                   [checked]="draftCustomizationOptions.identityIsCustom"
@@ -171,17 +169,16 @@
               </div>
               <div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
                    style="font-style: italic">
-                Identity colors are set in the default values.
+                Identity is set in the default values.
               </div>
             </div>
-            <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-top">
-              <!--              <div>Primary color</div>-->
+            <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
+              <div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>
               <color [color]="draftCustomizationOptions.identity.mainColor" (colorChange)=
                 " draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
-                     label="Primary color"></color>
-              <!--              <div class="uk-margin-small-top">Secondary color</div>-->
+                     label="Primary"></color>
               <color [color]="draftCustomizationOptions.identity.secondaryColor" (colorChange)=
-                " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary color"></color>
+                " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
             </div>
 
           </div>
@@ -194,16 +191,25 @@
 
     <div class=" uk-padding-small ">
       <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>
-      <button class="uk-button uk-button-small uk-button-primary uk-float-right"
-            [disabled]="!hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
-            [title]="(hasChanges(draftCustomizationOptions, appliedCustomizationOptions)?'Apply changes to preview on the right':'No changes to apply')"
-            (click)="applyLayout();">Apply
-      </button>
-      <div class="uk-padding-remove-left uk-width-1-1">
-        <!-- sandbox="allow-scripts allow-same-origin" -->
-        <iframe *ngIf="previewUrl" [src]="previewUrl" class="" width="100%" height="700px"
-                sandbox="allow-scripts allow-same-origin" ></iframe>
+      <div
+           class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
+        <div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
+             class="  uk-width-1-1  refresh-indicator"  >
+          <div class="uk-position-relative uk-height-1-1">
+            <div class="uk-position-center uk-text-center clickable"
+                 (click)="applyLayout()">
+              <div>
+                <icon name="refresh"></icon>
+              </div>
+              <span>Style has been changed. Click to refresh the view.</span>
+            </div>
+          </div>
+        </div>
+        <iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
+        ></iframe>
+
       </div>
+
     </div>
     </div>
   </div>
@@ -211,6 +217,7 @@
 </div>
   </div>
 </div>
+<!--
 <modal-alert #backAlert (alertOutput)="resetToAppliedOptions()">
   <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
   <div> Are you sure that you want to proceed?</div>
@@ -220,4 +227,5 @@
   <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
   <div> Are you sure that you want to proceed?</div>
 </modal-alert>
+-->
 
Index: modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.ts
===================================================================
--- modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.ts	(revision 60893)
+++ modules/uoa-admin-portal/branches/new-UI/src/app/pages/customization/customization.component.ts	(revision 60894)
@@ -16,6 +16,17 @@
 @Component({
   selector: 'customization',
   templateUrl: './customization.component.html',
+  styles:[`
+  .refresh-indicator {
+    background-color: rgba(0, 0, 0, 0.50);
+    border-radius: 4px;
+    position: absolute;
+    color: white;
+  }
+  iframe, .refresh-indicator{
+      height:900px;
+  }
+  `]
 })
 
 export class CustomizationComponent implements OnInit {
@@ -39,8 +50,8 @@
   public properties: EnvProperties = null;
 
   public enabled = true;
-  @ViewChild('backAlert') backAlert: AlertModal;
-  @ViewChild('exitAlert') exitAlert: AlertModal;
+/*  @ViewChild('backAlert') backAlert: AlertModal;
+  @ViewChild('exitAlert') exitAlert: AlertModal;*/
 
   constructor(private element: ElementRef,
               private route: ActivatedRoute,
@@ -178,8 +189,8 @@
     return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
   }
   getCommunityUrl() {
-    return 'http://spitoo.di.uoa.gr:4200';
-    // return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
+    // return 'http://spitoo.di.uoa.gr:4000';
+    return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
   }
 
   getCommunityUrlNewLayout(layout: string) {
@@ -191,7 +202,7 @@
     return JSON.parse(JSON.stringify(obj));
   }
 
-  back() {
+  /*back() {
     if (JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions) ||
       JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.appliedCustomizationOptions)) {
       this.menuSelected = 'main';
@@ -313,7 +324,7 @@
       xhr.send(formData);
     });
   }
-
+*/
 public isForLightBackground(color:string){
   return CustomizationOptions.isForLightBackground(color);
 }
