Style for popover in chat finished

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
+import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+import { NewGroupPage } from '../new-group/new-group.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -10,9 +13,11 @@ import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popove
 export class GroupMessagesPage implements OnInit {
 
   message:any;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
   constructor(
     private menu: MenuController,
+    private modalController: ModalController,
     private actionSheetController: ActionSheetController,
     public popoverController: PopoverController,
   ) { }
@@ -53,6 +58,27 @@ export class GroupMessagesPage implements OnInit {
     });
     return await popover.present();
   }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
 
 
 }