From 903267fab5bbbb323df8191e9e7d41986e16cb2e Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 4 May 2022 17:17:49 +0300
Subject: [PATCH] Contact-us: CHange inputs for small form

---
 contact-us/contact-us.component.html          | 35 ++++++++++++-------
 .../quick-contact/quick-contact.component.css |  4 ---
 .../quick-contact.component.html              | 14 ++++----
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/contact-us/contact-us.component.html b/contact-us/contact-us.component.html
index 09aad301..8ec71952 100644
--- a/contact-us/contact-us.component.html
+++ b/contact-us/contact-us.component.html
@@ -3,21 +3,30 @@
 <ng-content select="[page-description]"></ng-content>
 <div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
      [class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
-  <div *ngIf="contactForm.get('name')" input placeholder="Name" [formInput]="contactForm.get('name')"></div>
-  <div *ngIf="contactForm.get('surname')" input placeholder="Surname" [formInput]="contactForm.get('surname')"></div>
-  <div *ngIf="contactForm.get('email')" input placeholder="Email" [formInput]="contactForm.get('email')"></div>
-  <div *ngIf="contactForm.get('job')" input placeholder="Job Title" [formInput]="contactForm.get('job')"></div>
-  <div *ngIf="contactForm.get('affiliation')" input placeholder="Affiliation" [formInput]="contactForm.get('affiliation')"></div>
-  <div *ngIf="contactForm.get('community')" input placeholder="Research Community or Infrastructure" [formInput]="contactForm.get('community')"></div>
-  <div *ngIf="contactForm.get('organization')" input placeholder="Organization" [formInput]="contactForm.get('organization')"></div>
+  <div *ngIf="contactForm.get('name')" input placeholder="Name"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('name')"></div>
+  <div *ngIf="contactForm.get('surname')" input placeholder="Surname"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('surname')"></div>
+  <div *ngIf="contactForm.get('email')" input placeholder="Email"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('email')"></div>
+  <div *ngIf="contactForm.get('job')" input placeholder="Job Title"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('job')"></div>
+  <div *ngIf="contactForm.get('affiliation')" input placeholder="Affiliation"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('affiliation')"></div>
+  <div *ngIf="contactForm.get('community')" input placeholder="Research Community or Infrastructure"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('community')"></div>
+  <div *ngIf="contactForm.get('organization')" input placeholder="Organization"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('organization')"></div>
   <div *ngIf="contactForm.get('organizationType')" input type="select" placeholder="Organization Type"
-       [formInput]="contactForm.get('organizationType')" [options]="organizationTypes"></div>
-  <div *ngIf="contactForm.get('subject')" class="uk-width-1-1" input placeholder="Subject" [formInput]="contactForm.get('subject')"></div>
-  <div *ngIf="contactForm.get('message')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Comments" [formInput]="contactForm.get('message')"></div>
-  <div *ngIf="contactForm.get('description')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Description" [formInput]="contactForm.get('description')"></div>
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('organizationType')" [options]="organizationTypes"></div>
+  <div *ngIf="contactForm.get('subject')" class="uk-width-1-1" input placeholder="Subject"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('subject')"></div>
+  <div *ngIf="contactForm.get('message')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Comments"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('message')"></div>
+  <div *ngIf="contactForm.get('description')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Description"
+       [inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('description')"></div>
   <div *ngIf="contactForm.get('recaptcha')" class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-last@s]="!smallForm">
-    <re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
-    </re-captcha>
+    <re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey"></re-captcha>
   </div>
   <div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
     <div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">
diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css
index d9e0a99d..e8726c18 100644
--- a/sharedComponents/quick-contact/quick-contact.component.css
+++ b/sharedComponents/quick-contact/quick-contact.component.css
@@ -4,10 +4,6 @@
 	right: 5vw;
 }
 
-.uk-card > .uk-background-primary:first-child {
-	border-radius: 4px 4px 0 0;
-}
-
 .uk-drop {
 	max-height: 650px;
 	height: calc(80vh - 100px);
diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html
index 4cf700d1..ce53667b 100644
--- a/sharedComponents/quick-contact/quick-contact.component.html
+++ b/sharedComponents/quick-contact/quick-contact.component.html
@@ -1,19 +1,17 @@
-<div class="quick-contact">
-	<a class="uk-button uk-button-secondary dark uk-flex uk-flex-middle">
+<div class="quick-contact dark">
+	<a class="uk-button uk-box-shadow-small uk-button-secondary uk-flex uk-flex-middle">
 		<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
 		<icon *ngIf="showDrop" name="close" [flex]="true"></icon>
 		<span class="uk-margin-small-left">Contact</span>
 	</a>
-	<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
-		<div class="uk-background-primary uk-padding-small uk-text-center">
+	<div #drop id="quick-contact" class="uk-card uk-box-shadow-small uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
+		<div class="uk-card-header uk-background-primary uk-padding-small uk-text-center">
 			<div class="uk-text-small">
 				Send a message
 			</div>
 			<div class="uk-margin-small avatars">
-				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
+				<img class="uk-border-circle" src="assets/monitor-assets/avatar1.jpg">
+				<img class="uk-border-circle" src="assets/monitor-assets/avatar2.jpg">
 			</div>
 			<div class="uk-text-bold">
 				How can we help?