From 46e356f10d309986106264f0a9625c67184998fd Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 8 Aug 2021 00:47:01 +0200
Subject: [PATCH] test of toaster

---
 .../applications/status/status.component.html | 18 ++++-
 .../applications/status/status.component.scss | 70 +++++++++++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/cerberus/src/app/applications/status/status.component.html b/cerberus/src/app/applications/status/status.component.html
index 1fe7cd1..7a85046 100644
--- a/cerberus/src/app/applications/status/status.component.html
+++ b/cerberus/src/app/applications/status/status.component.html
@@ -10,4 +10,20 @@
       <app-add-application-button></app-add-application-button>
     </p>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
+<div class="toast-area">
+  <div class="toast">
+    <mat-icon>check_circle</mat-icon>
+    <div class="content">
+      <div class="title">
+        Operation succedded.
+      </div>
+      <div class="message">
+        Application created.
+      </div>
+    </div>
+    <button>
+      Close
+    </button>
+  </div>
+</div>
diff --git a/cerberus/src/app/applications/status/status.component.scss b/cerberus/src/app/applications/status/status.component.scss
index 6b8e9ad..ddb8be8 100644
--- a/cerberus/src/app/applications/status/status.component.scss
+++ b/cerberus/src/app/applications/status/status.component.scss
@@ -19,4 +19,74 @@
         flex-direction: row;
         align-items: center;
     }
+}
+
+.toast-area {
+    position: fixed;
+    top: 60px;
+    right: 30px;
+    z-index: 100000;
+
+    .toast {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        background-color: #eef0ef;
+        border-radius: 7px;
+        width: 400px;
+        min-height: 70px;
+        border: 1px solid #dcdfdd;
+        box-shadow: 0 2px 15px 2px rgba(#383633, .2);
+
+        mat-icon {
+            color: green;
+            $icon-size: 35px;
+            width: $icon-size;
+            height: $icon-size;
+            font-size: $icon-size;
+            margin: 15px;
+        }
+        
+        .content {
+            display: flex;
+            justify-content: left;
+            flex-direction: column;
+            flex: 1 0 auto;
+            margin: 0;
+            padding: 1rem 0;
+            line-height: 20px;
+
+            .title {
+                font-weight: 600;
+                color: #484e5a;
+            }
+
+            .message {
+                display: flex;
+                color: #524f4b;
+                flex-wrap: wrap;
+                overflow-x: hidden;
+            }
+        }
+
+        button {
+            position: absolute;
+            right: 0;
+            background-color: #eef0ef;
+            background-image: none;
+            color: #737271;
+            font-weight: 600;
+            border-radius: 0 7px 7px 0;
+            border-left: 1px solid #d7d9d8;
+            height: 100%;
+            padding: 2px 5px;
+            margin: 0;
+            border: 1px solid #dcdfdd;
+
+            &:active {
+                background-color: #e2e4e3;
+                border-left: 1px solid #c3c5c4;
+            }
+        }
+    }
 }
\ No newline at end of file