Create a new interface for backgrounds and added to quick contact. Modal: Align title to the left

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;
 

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>

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() {

utils/background-utils.ts

@@ -0,0 +1,4 @@
+export interface Background {
+  class: string,
+  dark: boolean
+}

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>