From dd37e12864c50e21cd2150350e3a5a4bcd2ab54e Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Thu, 28 Jul 2022 16:50:32 +0300
Subject: [PATCH] Customization: more layout changes, apply fix to reset to
 default the background image

---
 .../pages/customization/background-upload.component.ts |  2 +-
 src/app/pages/customization/border.component.ts        |  6 +++---
 .../pages/customization/customization.component.html   | 10 +++++-----
 src/app/pages/customization/customization.component.ts |  5 +++--
 .../customization/quickLook-backgrounds.component.ts   |  2 +-
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/customization/background-upload.component.ts b/src/app/pages/customization/background-upload.component.ts
index 228658d..996b407 100644
--- a/src/app/pages/customization/background-upload.component.ts
+++ b/src/app/pages/customization/background-upload.component.ts
@@ -28,7 +28,7 @@ declare var UIkit;
       </div>
     <div *ngIf="background.imageFile" class="uk-margin-top">
       <div class="uk-text-bold uk-text-uppercase uk-text-meta uk-margin-small-bottom uk-margin-large-top">position</div>
-        <div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="inner x-small" [(value)]="background.position"  
+        <div class="uk-width-expand uk-padding-remove-left" input type="select" inputClass="flat x-small" [(value)]="background.position"  
              [options]="['top','center','bottom']"  >
         </div>
        
diff --git a/src/app/pages/customization/border.component.ts b/src/app/pages/customization/border.component.ts
index 010b8b9..87ef2ab 100644
--- a/src/app/pages/customization/border.component.ts
+++ b/src/app/pages/customization/border.component.ts
@@ -13,7 +13,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
         
         </div>
         <div class="input-box">
-            <div  input inputClass="inner x-small"   [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
+            <div  input inputClass="flat x-small"   [(value)]="radius" (valueChange)="borderChanged()" type="text" ></div>
         </div>
       </div>
       <div class="uk-margin-top">
@@ -23,7 +23,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
                (click)="width = widthPublished; borderChanged()">  <icon name="reset"></icon></a>
         </div>
         <div class="input-box">
-            <div  input  inputClass="inner x-small"  [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
+            <div  input  inputClass="flat x-small"  [(value)]="width" (valueChange)="borderChanged()" type="text" ></div>
         </div>
       </div> 
       <div class="uk-margin-top uk-width-1-1">
@@ -32,7 +32,7 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
                uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
                (click)="style = stylePublished;borderChanged()">  <icon name="reset"></icon></a>
         </div>
-          <div class="uk-width-expand uk-padding-remove-left" input inputClass="inner x-small"  type="select" [(value)]="style" (valueChange)="borderChanged()"
+          <div class="uk-width-expand uk-padding-remove-left" input inputClass="flat x-small"  type="select" [(value)]="style" (valueChange)="borderChanged()"
                [options]="['solid','dotted','dashed']"  >
           </div>
       </div>
diff --git a/src/app/pages/customization/customization.component.html b/src/app/pages/customization/customization.component.html
index 93bc513..e74fc7d 100644
--- a/src/app/pages/customization/customization.component.html
+++ b/src/app/pages/customization/customization.component.html
@@ -149,7 +149,7 @@
   </div>
 </div>
 <ng-template #identityOptions>
-  <div class="functionalities-container">
+  <div class="functionalities-container uk-text-small">
     <div class="uk-margin-top">
       <div class="">
         <span>Custom style</span>
@@ -184,7 +184,7 @@
   </div>
 </ng-template>
 <ng-template #backgroundOptions>
-  <div class="functionalities-container"   >
+  <div class="functionalities-container uk-text-small"   >
     <div class="uk-margin-top">
       <span>Custom style </span>
       <span>
@@ -241,7 +241,7 @@
   </div>
 </ng-template>
 <ng-template #buttonOptions>
-  <div class="functionalities-container">
+  <div class="functionalities-container uk-text-small">
     <div class="">
       <div class="uk-margin-top uk-margin-large-bottom">
         <span>Custom style </span>
@@ -258,9 +258,9 @@
       </div>
       <ng-container *ngIf="draftCustomizationOptions.buttonsIsCustom">
 
-        <div class="uk-margin-top uk-margin-large-bottom uk-grid uk-flex uk-flex-middle">
+        <div class="uk-margin-top uk-margin-bottom uk-grid uk-flex uk-flex-middle">
           <div class="uk-text-uppercase uk-text-bold uk-text-meta uk-margin-right">style on</div>
-          <div class="uk-width-expand uk-padding-remove-left " inputClass="inner x-small" input type="select"
+          <div class="uk-width-expand uk-padding-remove-left " inputClass="flat x-small" input type="select"
                [(value)]="buttonsSelected"
                [options]="[{value: 'dark',label:'Dark BG'},{value: 'light',label:'Light BG'}]">
 
diff --git a/src/app/pages/customization/customization.component.ts b/src/app/pages/customization/customization.component.ts
index 5626f3a..64566ee 100644
--- a/src/app/pages/customization/customization.component.ts
+++ b/src/app/pages/customization/customization.component.ts
@@ -259,6 +259,7 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
     this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
     this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
     this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
+    this.resetImageTo(backgrounds);
 
   }
   resetImageTo(backgrounds) {
@@ -276,11 +277,11 @@ sidebarItems = [{name:"Identity", id : "identity", icon: "desktop_windows" },
     this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
   }
   resetButtonsToDefault(){
-    this.resetButtonsTo(this.publishedCustomizationOptions.buttons);
+    this.resetButtonsTo(this.defaultCustomizationOptions.buttons);
     this.updateButtonsBasedOnIdentity();
   }
   resetBackgroundsToDefault(){
-    this.resetBackgroundsTo(this.publishedCustomizationOptions.backgrounds);
+    this.resetBackgroundsTo(this.defaultCustomizationOptions.backgrounds);
     this.updateBackgroundsBasedOnIdentity();
   }
   resetButtonsTo(buttonsToRevert) {
diff --git a/src/app/pages/customization/quickLook-backgrounds.component.ts b/src/app/pages/customization/quickLook-backgrounds.component.ts
index 435e821..8d006aa 100644
--- a/src/app/pages/customization/quickLook-backgrounds.component.ts
+++ b/src/app/pages/customization/quickLook-backgrounds.component.ts
@@ -23,7 +23,7 @@ import {ButtonsCustomization} from '../../openaireLibrary/connect/community/Cust
     </div>
     <div>
       <div class="uk-margin-large-top uk-margin-medium-bottom   uk-text-large">Light background</div>
-      <div [class]="'uk-padding-small uk-text-center  uk-width-1-1 uk-height-medium lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
+      <div [class]="'uk-padding-small uk-text-center  uk-width-1-1 lightBackground' + (buttonView?' uk-flex uk-flex-middle uk-flex-center':'') "
            [class.uk-height-small]="buttonView"  >
         <div *ngIf="!buttonView" class="uk-margin-small-bottom">
           <h1 >Heading</h1>