From bf80e2e0b4d96194f7de655bf845e1edd50052c0 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 17 Jun 2022 19:47:47 +0300
Subject: [PATCH] Create a new interface for backgrounds and added to quick
 contact. Modal: Align title to the left

---
 .../searchUtils/newSearchPage.component.ts      |  6 ++----
 .../quick-contact/quick-contact.component.html  |  2 +-
 .../quick-contact/quick-contact.component.ts    | 17 +++++++++++++++--
 utils/background-utils.ts                       |  4 ++++
 utils/modal/alert.ts                            |  2 +-
 5 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 utils/background-utils.ts

diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts
index 301e6f07..513a5648 100644
--- a/searchPages/searchUtils/newSearchPage.component.ts
+++ b/searchPages/searchUtils/newSearchPage.component.ts
@@ -34,11 +34,9 @@ import {properties} from "../../../../environments/environment";
 import {AlertModal} from "../../utils/modal/alert";
 import {Subscriber} from "rxjs";
 import {IndexInfoService} from "../../utils/indexInfo.service";
+import {Background} from "../../utils/background-utils";
 
-export interface SearchForm {
-  class: string,
-  dark: boolean
-}
+export interface SearchForm extends Background {}
 
 declare var UIkit: any;
 
diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html
index 28f33844..116060f7 100644
--- a/sharedComponents/quick-contact/quick-contact.component.html
+++ b/sharedComponents/quick-contact/quick-contact.component.html
@@ -7,7 +7,7 @@
 	<div #drop id="quick-contact" class="uk-drop"
 			 uk-drop="mode: click; pos: top-right; animation: uk-animation-fade; offset: 20">
 		<div class="uk-card uk-card-default uk-box-shadow-default uk-flex uk-flex-column uk-height-1-1">
-			<div class="uk-card-header uk-padding-small uk-text-center" [ngClass]="background">
+			<div class="uk-card-header uk-padding-small uk-text-center" [class.uk-light]="backgroundHeader.dark" [ngClass]="backgroundHeader.class">
 				<div class="uk-text-small">
 					Send a message
 				</div>
diff --git a/sharedComponents/quick-contact/quick-contact.component.ts b/sharedComponents/quick-contact/quick-contact.component.ts
index eb5bbac4..ca2106c8 100644
--- a/sharedComponents/quick-contact/quick-contact.component.ts
+++ b/sharedComponents/quick-contact/quick-contact.component.ts
@@ -1,6 +1,8 @@
 import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 import {FormGroup} from "@angular/forms";
 import {Subscriber} from "rxjs";
+import {SearchForm} from "../../searchPages/searchUtils/newSearchPage.component";
+import {Background} from "../../utils/background-utils";
 
 declare var UIkit;
 
@@ -17,8 +19,7 @@ export class QuickContactComponent implements OnInit, OnDestroy {
   public images: string[] = [];
   @Input()
   public contact: string = 'contact';
-  @Input()
-  public background: string = 'uk-background-primary';
+  public backgroundHeader: Background = {class: 'uk-background-primary', dark: true};
   @Input()
   public sending = false;
   @Input()
@@ -27,6 +28,15 @@ export class QuickContactComponent implements OnInit, OnDestroy {
   private subscriptions: any[] = [];
   @ViewChild('drop') drop: ElementRef;
   
+  @Input()
+  set background(background: Background | string) {
+    if(typeof background === 'string') {
+      this.backgroundHeader = {class: background, dark: true}
+    } else {
+      this.backgroundHeader = background;
+    }
+  }
+  
   ngOnInit() {
     if (typeof document !== 'undefined') {
       this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => {
@@ -41,6 +51,9 @@ export class QuickContactComponent implements OnInit, OnDestroy {
         this.showDrop = false;
       }));
     }
+    if(typeof this.background === 'string' ) {
+      this.background = {class: this.background, dark: true};
+    }
   }
   
   ngOnDestroy() {
diff --git a/utils/background-utils.ts b/utils/background-utils.ts
new file mode 100644
index 00000000..28a2f3f0
--- /dev/null
+++ b/utils/background-utils.ts
@@ -0,0 +1,4 @@
+export interface Background {
+  class: string,
+  dark: boolean
+}
diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts
index 9e16d872..98298926 100644
--- a/utils/modal/alert.ts
+++ b/utils/modal/alert.ts
@@ -7,7 +7,7 @@ declare var UIkit: any;
   template: `
     <div #element class="uk-modal" [class.uk-modal-container]="large" [id]="id" uk-modal="container: #here">
       <div class="uk-modal-dialog">
-        <div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
+        <div class="uk-modal-header uk-text-left uk-flex uk-flex-middle uk-flex-between" [ngClass]="classTitle">
           <div class="uk-modal-title" [hidden]=!alertHeader>
             <h5 class="uk-margin-remove">{{alertTitle}}</h5>
           </div>