From 52e04d7b484a47e1b358dccefd1f72b2dd702113 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 12 Jan 2022 14:12:30 +0200
Subject: [PATCH] Change contact-us base on new theme. Change modal buttons.
 Changle default color of loading with uk-text-primary

---
 contact-us/contact-us.component.css  |  4 --
 contact-us/contact-us.component.html | 57 +++++++---------------------
 contact-us/contact-us.component.ts   |  3 +-
 contact-us/contact-us.module.ts      |  3 +-
 utils/loading/loading.component.ts   |  2 +-
 utils/modal/alert.ts                 | 16 ++++----
 6 files changed, 25 insertions(+), 60 deletions(-)
 delete mode 100644 contact-us/contact-us.component.css

diff --git a/contact-us/contact-us.component.css b/contact-us/contact-us.component.css
deleted file mode 100644
index 16bdb90c..00000000
--- a/contact-us/contact-us.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.uk-text-danger {
-  color: #b50000!important;
-  font-size: 12px;
-}
diff --git a/contact-us/contact-us.component.html b/contact-us/contact-us.component.html
index d63cfd4d..bf81c78b 100644
--- a/contact-us/contact-us.component.html
+++ b/contact-us/contact-us.component.html
@@ -1,82 +1,53 @@
 <h3 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h3>
+<ng-content select="[title]"></ng-content>
 <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
      role="alert">{{errorMessage}}</div>
 <div class="uk-margin-top" uk-grid [formGroup]="contactForm">
-    <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">
-        *Required fields
-    </div>
     <div *ngIf="contactForm.get('name')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Name <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <input class="uk-input" type="text" placeholder="Your name" formControlName="name"
-               [class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
+        <input class="uk-input" type="text" placeholder="Name *" formControlName="name"
+           [class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
     </div>
     <div *ngIf="contactForm.get('surname')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Surname <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <input class="uk-input" type="text" placeholder="Your surname" formControlName="surname"
+        <input class="uk-input" type="text" placeholder="Surname *" formControlName="surname"
                [class.uk-form-danger]="contactForm.get('surname').invalid && contactForm.get('surname').touched">
     </div>
     <div *ngIf="contactForm.get('email')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Email <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <input class="uk-input" type="text" placeholder="Preferably your work email" formControlName="email"
+        <input class="uk-input" type="text" placeholder="Email *" formControlName="email"
                [class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
     </div>
     <div *ngIf="contactForm.get('job')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Job Title <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <input class="uk-input" type="text" placeholder="Your job title" formControlName="job"
+        <input class="uk-input" type="text" placeholder="Job Title *" formControlName="job"
                [class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched">
     </div>
     <div *ngIf="contactForm.get('affiliation')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Affiliation <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <input class="uk-input" type="text" placeholder="Your affiliation" formControlName="affiliation"
+        <input class="uk-input" type="text" placeholder="Affiliation *" formControlName="affiliation"
                [class.uk-form-danger]="contactForm.get('affiliation').invalid && contactForm.get('affiliation').touched">
     </div>
     <div *ngIf="contactForm.get('community')" class="uk-width-1-2@s uk-margin-medium-top">
-        <div class="uk-width-1-1">
-            <h6 class="uk-text-bold uk-margin-small-bottom uk-text-nowrap">Research Community or Infrastructure <span class="uk-text-danger uk-text-bold">*</span></h6>
-        </div>
-        <input class="uk-input uk-width-1" type="text" placeholder="Your community name" formControlName="community"
+        <input class="uk-input uk-width-1" type="text" placeholder="Research Community or Infrastructure *" formControlName="community"
                [class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
     </div>
     <div *ngIf="contactForm.get('organization')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">Organization <span class="uk-text-danger uk-text-bold">*</span></h6>
-        <input class="uk-input uk-width-1-1" type="text" placeholder="Your organization" formControlName="organization"
+        <input class="uk-input uk-width-1-1" type="text" placeholder="Organization *" formControlName="organization"
                [class.uk-form-danger]="contactForm.get('organization').invalid && contactForm.get('organization').touched">
     </div>
     <div *ngIf="contactForm.get('organizationType')" class="uk-width-1-2@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">Organization Type <span class="uk-text-danger uk-text-bold">*</span></h6>
         <select class="uk-select uk-width-1-1" formControlName="organizationType">
-            <option [value]="''" hidden selected>Select your organization type</option>
+            <option [value]="''" hidden selected>Organization Type *</option>
             <option *ngFor="let option of organizationTypes" [value]="option">{{option}}</option>
         </select>
     </div>
     <div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">Subject <span class="uk-text-danger uk-text-bold">*</span></h6>
-        <input class="uk-input uk-width-1-1" type="text" placeholder="Your subject" formControlName="subject"
+        <input class="uk-input uk-width-1-1" type="text" placeholder="Subject *" formControlName="subject"
                [class.uk-form-danger]="contactForm.get('subject').invalid && contactForm.get('subject').touched">
     </div>
     <div *ngIf="contactForm.get('message')" class="uk-width-1-1 uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Message <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <textarea rows="4" class="uk-textarea" placeholder="Your message" formControlName="message"
+        <textarea rows="4" class="uk-textarea" placeholder="Comments *" formControlName="message"
                   [class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
         </textarea>
     </div>
     <div *ngIf="contactForm.get('description')" class="uk-width-1-1 uk-margin-medium-top">
-        <h6 class="uk-text-bold uk-margin-small-bottom">
-            Description <span class="uk-text-danger uk-text-bold">*</span>
-        </h6>
-        <textarea rows="4" class="uk-textarea" placeholder="Your description" formControlName="description"
+        <textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
                   [class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
         </textarea>
     </div>
@@ -85,6 +56,6 @@
         </re-captcha>
     </div>
     <div class="uk-margin-medium-top uk-width-1-1">
-        <button class="uk-button" [class.portal-button]="!buttonClass" [ngClass]="buttonClass" (click)="send()">Send</button>
+        <button class="uk-button" [class.uk-button-primary]="!buttonClass" [ngClass]="buttonClass" (click)="send()">Send</button>
     </div>
 </div>
diff --git a/contact-us/contact-us.component.ts b/contact-us/contact-us.component.ts
index 81b8b40a..ebbdc9b1 100644
--- a/contact-us/contact-us.component.ts
+++ b/contact-us/contact-us.component.ts
@@ -6,8 +6,7 @@ import {map, startWith} from "rxjs/operators";
 
 @Component({
   selector: 'contact-us',
-  templateUrl: './contact-us.component.html',
-  styleUrls: ['contact-us.component.css']
+  templateUrl: './contact-us.component.html'
 })
 
 export class ContactUsComponent {
diff --git a/contact-us/contact-us.module.ts b/contact-us/contact-us.module.ts
index 7fecbb41..21def708 100644
--- a/contact-us/contact-us.module.ts
+++ b/contact-us/contact-us.module.ts
@@ -6,11 +6,12 @@ import {ContactUsComponent} from './contact-us.component';
 import {ReactiveFormsModule} from "@angular/forms";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {RecaptchaModule} from "ng-recaptcha";
+import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule,
-    ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule],
+    ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule],
   declarations: [
     ContactUsComponent
   ],
diff --git a/utils/loading/loading.component.ts b/utils/loading/loading.component.ts
index 8477e095..154229df 100644
--- a/utils/loading/loading.component.ts
+++ b/utils/loading/loading.component.ts
@@ -22,7 +22,7 @@ import {Component, Input, OnInit} from "@angular/core";
     </ng-template>`
 })
 export class LoadingComponent implements OnInit {
-  @Input() color: string = 'portal-color';
+  @Input() color: string = 'uk-text-primary';
   @Input() full: boolean = false;
   @Input() top_margin: boolean = true;
   @Input() size: "small" | "medium" | "large" = "large";
diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts
index 4cfcad6f..26874463 100644
--- a/utils/modal/alert.ts
+++ b/utils/modal/alert.ts
@@ -24,16 +24,14 @@ declare var UIkit: any;
             <span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
           </label>
           <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
-            <div class="uk-flex-right uk-grid uk-grid-small" [hidden]=!alertFooter uk-grid>
-              <span [hidden]=!okButton [class.uk-flex-last]="!okButtonLeft">
-                <button *ngIf="okDisabled" class="uk-button disabled uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button>
-                <button *ngIf="!okDisabled" [class.portal-button]="!isDashboard"
-                        [class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard"
-                      class="uk-button ignoreCommunityPanelBackground"
-                      (click)="ok()">{{okButtonText}}</button>
+            <div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
+              <span *ngIf="okButton" [class.uk-flex-last]="!okButtonLeft">
+                <button class="uk-button" [class.uk-button-primary]="!isDashboard"
+                        [class.uk-button-secondary]="isDashboard" [class.outlined]="isDashboard" [disabled]="okDisabled"
+                        [class.uk-disabled]="okDisabled" (click)="ok()">{{okButtonText}}</button>
               </span>
-              <span [hidden]=!cancelButton>
-                <button class="uk-button md-btn uk-button-default uk-margin-small-left"
+              <span *ngIf="cancelButton">
+                <button class="uk-button uk-button-default uk-margin-small-left"
                         (click)="cancel()">{{cancelButtonText}}</button>
               </span>
             </div>