edits.diff

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bf2002c..17309c0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,21 +8,15 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { PopoverSrviceService } from './popover-srvice.service';
-import {PopoverModalComponent} from './popover-modal/popover-modal.component'
-import { PopoverDirectiveDirective} from './popover-directive.directive';
 
 @NgModule({
-  declarations: [AppComponent, PopoverModalComponent, PopoverDirectiveDirective],
-  entryComponents: [PopoverModalComponent],
+  declarations: [AppComponent],
   imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
   providers: [
     StatusBar,
     SplashScreen,
-    PopoverSrviceService,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
   ],
   bootstrap: [AppComponent],
-  exports: [PopoverModalComponent, PopoverDirectiveDirective]
 })
 export class AppModule {}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 3ccd41c..1abd9ad 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -3,21 +3,22 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-
 import { HomePage } from './home.page';
+import { PopoverModule } from '../popover-feature/popover.module';
 
 @NgModule({
   imports: [
+    PopoverModule,
     CommonModule,
     FormsModule,
     IonicModule,
     RouterModule.forChild([
       {
         path: '',
-        component: HomePage
-      }
-    ])
+        component: HomePage,
+      },
+    ]),
   ],
-  declarations: [HomePage]
+  declarations: [HomePage],
 })
 export class HomePageModule {}
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 3c78002..da15c16 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -15,13 +15,18 @@
 
   <div id="container">
     <strong>Ready to create an app?</strong>
-    <p  >Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    <p>
+      Start with Ionic
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://ionicframework.com/docs/components"
+        >UI Components</a
+      >
+    </p>
   </div>
 
-
-
-  <span [first-time-onboarding]="{modalOptions: {title: 'onboarding-note-title', message: 'onboarding-note-subtitle', icon: '/assets/icon/favicon.png'}, persistField: false}"></span>
-
-
- 
+  <span
+    [first-time-onboarding]="{modalOptions: {title: 'onboarding-note-title', message: 'onboarding-note-subtitle', icon: '/assets/icon/favicon.png'}, persistField: false}"
+  ></span>
 </ion-content>
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 9937d17..c47b399 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { onboardingInput } from '../popover-directive.directive';
 
 
 @Component({
diff --git a/src/app/popover-directive.directive.ts b/src/app/popover-directive.directive.ts
deleted file mode 100644
index 99b767b..0000000
--- a/src/app/popover-directive.directive.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Directive, ElementRef, Input, OnInit } from '@angular/core';
-import { PopoverSrviceService } from './popover-srvice.service';
-
-
-import { onboardingModalOptions } from './popover-modal/popover-modal.component';
-
-
-@Directive({
-  selector: '[first-time-onboarding]'
-})
-export class PopoverDirectiveDirective implements OnInit {
-  @Input('first-time-onboarding') inputPopover: onboardingInput;
-
-  constructor(private el: ElementRef,
-    private popover: PopoverSrviceService,
-  ) { }
-
-  ngOnInit() {
-
-    this.showPopover();
-
-  }
-
-  showPopover() {
-    this.popover.createPopover({
-      title: this.inputPopover.modalOptions.title,
-      message: this.inputPopover.modalOptions.message,
-      icon: this.inputPopover.modalOptions.icon,
-    },
-      this.eventGetCoordinates
-    );
-  }
-
-  eventGetCoordinates = {
-    target: {
-      getBoundingClientRect: () => {
-        const rect = this.el.nativeElement.getBoundingClientRect();
-        return {
-          top: (rect.y + rect.height),
-          left: (rect.x + (rect.width / 2))
-        };
-      }
-    }
-  };
-}
-
-export interface onboardingInput {
-  modalOptions: onboardingModalOptions,
-  persistField: boolean
-}
-
diff --git a/src/app/popover-modal/popover-modal.component.html b/src/app/popover-modal/popover-modal.component.html
deleted file mode 100644
index c3e21d9..0000000
--- a/src/app/popover-modal/popover-modal.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div>
-  <ion-icon class="close-icon" (click)="dismiss()" name="close"></ion-icon>
-  <ion-icon class="main_icon" [src]="options.icon"></ion-icon>
-  <h1 class="title">{{options.title}}</h1>
-  <p class="subtitle">{{options.message}}</p>
-</div>
\ No newline at end of file
diff --git a/src/app/popover-modal/popover-modal.component.scss b/src/app/popover-modal/popover-modal.component.scss
deleted file mode 100644
index 537bd5b..0000000
--- a/src/app/popover-modal/popover-modal.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.main_icon{
-    font-size: 32px;
-    display: block;
-    margin: 0 auto;
-    padding-top: 24px;
-    color: var(--ion-color-primary);
-  }
-  .title{
-     text-align: center;
-     font-size: 16px;
-     margin: 6px;
-  }
-  .subtitle{
-     font-size: 14px;
-     text-align: center;
-     padding-right: 10px;
-     padding-left: 10px;
-     line-height: 21px;
-     margin-top: 0px;
-     padding-bottom: 8px;
-  }
-  .close-icon{
-     font-size: 30px;
-     position: absolute;
-     right: 0px;
-     top: 0px;
-     color: var(--ion-color-primary);
-  }
\ No newline at end of file
diff --git a/src/app/popover-modal/popover-modal.component.ts b/src/app/popover-modal/popover-modal.component.ts
deleted file mode 100644
index 3179fdd..0000000
--- a/src/app/popover-modal/popover-modal.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Component, OnInit, Input,  } from '@angular/core';
-import { ModalController } from '@ionic/angular';
-import { PopoverController } from '@ionic/angular';
-
-
-@Component({
-  selector: 'app-popover-modal',
-  templateUrl: './popover-modal.component.html',
-  styleUrls: ['./popover-modal.component.scss'],
-})
-export class PopoverModalComponent implements OnInit {
-  @Input() options: onboardingModalOptions;
-
-  constructor(private modalController: ModalController, public popoverCtrl: PopoverController) { }
-
-  dismiss() {
-    this.popoverCtrl.dismiss();  
-  }
-
-  ngOnInit() {}
-
-}
-
-export interface onboardingModalOptions {
-  title: string;
-  message: string;
-  icon: string;
-}
diff --git a/src/app/popover-srvice.service.ts b/src/app/popover-srvice.service.ts
deleted file mode 100644
index 783a656..0000000
--- a/src/app/popover-srvice.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Injectable } from '@angular/core';
-import { PopoverController, IonApp } from '@ionic/angular';
-
-
-
-
-import { ModalController } from '@ionic/angular';
-
-import { PopoverModalComponent, onboardingModalOptions } from './popover-modal/popover-modal.component';
-import { delay } from 'rxjs/operators';
-//Maybe remove IonApp and delay
-@Injectable()
-export class PopoverSrviceService {
-
-    constructor(private modalController: ModalController,
-        private popoverController: PopoverController) {
-    }
-
-    public async createPopover(options: onboardingModalOptions, ev: any) {
-        const popover = await this.popoverController.create({
-            component: PopoverModalComponent,
-            translucent: true,
-            event: ev,
-            showBackdrop: true,
-            cssClass: 'onboarding_popover',
-            animated: true,
-            componentProps: {
-                options: options
-            },
-        });
-        return await popover.present();
-    }
-}