1 files changed, 49 insertions, 0 deletions
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
new file mode 100644
index 0000000..5852c7d
--- /dev/null
+++ b/frontend/src/components/Notifications.scss
@@ -0,0 +1,49 @@
+@import "../colors.scss";
+
+.notifications {
+  position: absolute;
+  z-index: 50;
+  bottom: 50px;
+  left: 30px;
+
+  .notification {
+    width: 250px;
+    margin: 10px 0;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 1s ease;
+    transform: translateX(-300px);
+    color: $color-green-light;
+    border-left: 5px solid $color-green-dark;
+    background-color: $color-green;
+
+    .notification-title {
+      font-size: 0.9em;
+      margin: 0;
+    }
+
+    .notification-description {
+      font-size: 0.8em;
+      overflow: hidden;
+      margin: 10px 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: $color-primary-4;
+    }
+
+    &.notification-open {
+      transform: translateX(0);
+    }
+
+    &.notification-closed {
+      transform: translateY(-50px);
+      opacity: 0;
+    }
+
+    &.notification-blue {
+      color: $color-blue-light;
+      border-left: 5px solid $color-blue-dark;
+      background-color: $color-blue;
+    }
+  }
+}