Some css changes in quick contact

sharedComponents/quick-contact/quick-contact.component.css

@@ -1,18 +1,31 @@
 .quick-contact {
 	position: fixed;
-	bottom: 40px;
+	bottom: 5vh;
-	right: 40px;
+	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) {
+.avatars > img:nth-child(n+1) {
-	.quick-contact {
+	margin-left: -5px;
-		bottom: 20px;
-		right: 20px;
 }
+
+/* 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 */
 }

sharedComponents/quick-contact/quick-contact.component.html

@@ -1,19 +1,19 @@
 <div class="quick-contact">
-	<a class="uk-button uk-button-secondary" (click)="toggleModal()">
+	<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle" (click)="toggleModal()">
-		<icon *ngIf="!showModal" name="mail"></icon>
+		<icon *ngIf="!showModal" name="mail" [flex]="true"></icon>
-		<icon *ngIf="showModal" name="close"></icon>
+		<icon *ngIf="showModal" name="close" [flex]="true"></icon>
-		<span class="uk-margin-small-left">HELP</span>
+		<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">
+			<div class="uk-margin-small avatars">
-				<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
+				<img class="uk-border-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" 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" 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" 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>

sharedComponents/quick-contact/quick-contact.module.ts

@@ -4,9 +4,6 @@ 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])
-  }
 }