Improve message

src/app/modals/add-note/add-note.page.ts

@@ -63,47 +63,23 @@ export class AddNotePage implements OnInit {
 
   async successMessage(message?: any, callback?) {
     
-    const enterAnimation = (baseEl: any) => {
-      const backdropAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('ion-backdrop')!)
-        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+    var notification = document.createElement('div')
+    notification.id = 'notification'
+    notification.innerHTML = `
 
-      const wrapperAnimation = this.animationController.create()
-        .addElement(baseEl.querySelector('.modal-wrapper')!)
-        .keyframes([
-          { offset: 0, opacity: '1', right: '-100%' },
-          { offset: 1, opacity: '1', right: '0px' }
-        ]);
+    <div class="main-content width-100 pa-20">
+      <p class="message d-flex align-center">
+        <ion-icon slot="end" class="title-icon pr-10" src="/assets/images/nofitication-success.svg"></ion-icon>
+        <p class="text">{{ message }}</p>
+      </p>
+      
+    </div>
+    `
 
-      return this.animationController.create()
-        .addElement(baseEl)
-        .easing('ease-out')
-        .duration(500)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-    }
-
-    const leaveAnimation = (baseEl: any) => {
-      return enterAnimation(baseEl).direction('reverse');
-    }
- 
-
-    const modal = await this.modalController.create({
-      enterAnimation,
-      leaveAnimation,
-      component: SuccessMessagePage,
-       componentProps: {
-        message: message || 'Processo efetuado' ,
-      },
-      cssClass: 'notification-modal'
-    });
-
-    modal.present()
-    
+    document.body.append(notification)
+    notification.querySelector('.text').innerHTML = 'hello'
     setTimeout(()=>{
-      if (callback) {
-        callback()
-      }
-      modal.dismiss()
+      notification.remove()
     },7000)
     
   }