alert design and animation ok

Author: sagnolkamdem

src/app/modules/dashboard/pages/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="pt-5 pb-16">
+<div class="pt-5 pb-16" (click)="isOpen = !isOpen">
   <!-- Welcome panel -->
   <section aria-labelledby="profile-overview-title">
   </section>
@@ -160,4 +160,6 @@ <h3 class="text-lg font-medium">
 
     </div>
   </section>
-</div>
+</div>
+
+<alert-success [isOpen]="isOpen" (toggleShowAlert)="toggle($event)" message="Connecté avec succes!"></alert-success>

src/app/modules/dashboard/pages/dashboard/dashboard.component.ts

@@ -5,9 +5,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
+  isOpen: boolean = false;
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  toggle(value: boolean) {
+    this.isOpen = value
+  }
+
 }

src/app/shared/components/alert/success.component.ts

@@ -1,32 +1,64 @@
-import { Component, Input } from '@angular/core';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'alert-success',
   template: `
-    <div class="p-4 rounded-md bg-green-50" [ngClass]="class">
-      <div class="flex">
-        <div class="shrink-0">
-          <svg
-            class="w-5 h-5 text-green-400"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" />
-          </svg>
-        </div>
-        <div class="ml-3">
-          <p class="text-sm font-medium text-green-800">{{ message }}</p>
+    <div *ngIf="showAlert" aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
+      <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+
+        <div @showHideNotification class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" [ngClass]="class">
+          <div class="p-4">
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div class="ml-3 w-0 flex-1 pt-0.5">
+                <p class="text-sm font-medium text-gray-900">{{ message }}</p>
+                <p class="mt-1 text-sm text-gray-500">{{ description }}</p>
+              </div>
+              <div class="ml-4 flex flex-shrink-0">
+                <button (click)="toggle()" type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                  <span class="sr-only">Close</span>
+                  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
+
       </div>
     </div>
   `,
+  animations: [
+    trigger('showHideNotification', [
+      transition('void => *', [
+        style({ transform: "translateX(0.5rem)", opacity: 0 }),
+        animate(300, style({ transform: "translateX(0)", opacity: 1 }))
+      ]),
+      transition('* => void', [
+        style({ opacity: 0 }),
+        animate(100, style({ opacity: 1 }))
+      ])
+    ]),
+  ],
 })
 export class SuccessComponent {
   @Input() class!: string;
 
+  @Input('isOpen') showAlert!: boolean;
+
+  @Output() toggleShowAlert: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   @Input() message!: string;
+  
+  @Input() description!: string;
+
+  toggle(){
+    this.toggleShowAlert.emit(false);
+  }
 }