From 31e56588271d0ed3fc64990a35ac007e7aa4b2b3 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 23 Feb 2022 12:33:43 +0200
Subject: [PATCH] Some css changes in quick contact

---
 .../quick-contact/quick-contact.component.css | 31 +++++++++++++------
 .../quick-contact.component.html              | 24 +++++++-------
 .../quick-contact/quick-contact.module.ts     | 12 ++-----
 3 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css
index e2af560b..92bafd42 100644
--- a/sharedComponents/quick-contact/quick-contact.component.css
+++ b/sharedComponents/quick-contact/quick-contact.component.css
@@ -1,18 +1,31 @@
 .quick-contact {
 	position: fixed;
-	bottom: 40px;
-	right: 40px;
+	bottom: 5vh;
+	right: 5vw;
 }
-.custom-avatar-circle {
+
+.uk-card > .uk-background-secondary:first-child {
+	border-radius: 4px 4px 0 0;
+}
+
+.avatars > img {
 	width: 50px;
 	height: 50px;
 	object-fit: cover;
 	border: 2px solid #fff;
 }
 
-@media (max-width: 768px) {
-	.quick-contact {
-		bottom: 20px;
-		right: 20px;
-	}
-}
\ No newline at end of file
+.avatars > img:nth-child(n+1) {
+	margin-left: -5px;
+}
+
+/* hide scrollbar but allow scrolling */
+.uk-overflow-auto {
+	-ms-overflow-style: none; /* for Internet Explorer, Edge */
+	scrollbar-width: none; /* for Firefox */
+	overflow-y: scroll;
+}
+
+.uk-overflow-auto::-webkit-scrollbar {
+	display: none; /* for Chrome, Safari, and Opera */
+}
diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html
index ac6d3bd2..c7690a09 100644
--- a/sharedComponents/quick-contact/quick-contact.component.html
+++ b/sharedComponents/quick-contact/quick-contact.component.html
@@ -1,19 +1,19 @@
 <div class="quick-contact">
-	<a class="uk-button uk-button-secondary" (click)="toggleModal()">
-		<icon *ngIf="!showModal" name="mail"></icon>
-		<icon *ngIf="showModal" name="close"></icon>
-		<span class="uk-margin-small-left">HELP</span>
+	<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle" (click)="toggleModal()">
+		<icon *ngIf="!showModal" name="mail" [flex]="true"></icon>
+		<icon *ngIf="showModal" name="close" [flex]="true"></icon>
+		<span class="uk-margin-small-left">Contact</span>
 	</a>
-	<div class="uk-card uk-card-default" uk-drop="mode: click; pos: top-right">
+	<div class="uk-card uk-card-default uk-drop" uk-drop="mode: click; pos: top-right">
 		<div class="uk-background-secondary uk-padding-small uk-text-center">
 			<div class="uk-text-small">
 				Send a message
 			</div>
-			<div class="uk-margin-small">
-				<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
-				<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
+			<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">
 			</div>
 			<div class="uk-text-bold">
 				How can we help?
@@ -22,7 +22,7 @@
 				We usually respond in a few hours.
 			</div>
 		</div>
-		<div class="uk-height-medium uk-overflow-auto">
+		<div class="uk-height-medium uk-card-body uk-overflow-auto">
 			TODO: Contact form <br>
 			Name <br>
 			Email <br>
@@ -43,4 +43,4 @@
 			Send button <br>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/sharedComponents/quick-contact/quick-contact.module.ts b/sharedComponents/quick-contact/quick-contact.module.ts
index 0f75c7e5..68392656 100644
--- a/sharedComponents/quick-contact/quick-contact.module.ts
+++ b/sharedComponents/quick-contact/quick-contact.module.ts
@@ -1,12 +1,9 @@
-import {NgModule}            from '@angular/core';
-import {CommonModule}        from '@angular/common';
-import {FormsModule}         from '@angular/forms';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 
 import {QuickContactComponent} from './quick-contact.component';
 import {IconsModule} from '../../utils/icons/icons.module';
-import {IconsService} from '../../utils/icons/icons.service';
-import {mail} from '../../utils/icons/icons';
-import {close} from '../../utils/icons/icons';
 
 @NgModule({
   imports: [
@@ -21,7 +18,4 @@ import {close} from '../../utils/icons/icons';
   ]
 })
 export class QuickContactModule {
-	constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([mail,close])
-  }
 }