Refactor toast notifications and modal dialog implementation

- Updated SCSS for toast notifications to support multiple toast types (success, info, warning, error) and improved layout.
- Added new SVG icons for error, info, success, and warning notifications.
- Created separate HTML templates for toast notifications and modal dialogs.
- Enhanced the dev panel with buttons to test different toast notifications and modal dialogs.

backend/scss/toast.scss

@@ -1,21 +1,39 @@
 @use 'constants' as consts;
 
-#toast {
-    visibility: hidden;
-    width: 300px;
-    margin-left: -125px;
-
-    border: 0.1em solid consts.$color-3;
-    border-radius: 0.5em;
-    background-color: consts.$color-2;
-
-    text-align: center;
-    padding: consts.$margin;
+#toasts {
     position: fixed;
     z-index: 1;
     left: 50%;
-    top: 30px;
-    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
+    top: 15px;
+    transform: translate(-50%, 0%);
+
+    display: flex;
+    flex-direction: column;
+
+    .toast {
+        // visibility: hidden;
+        display: none;
+        width: fit-content;
+        align-self: center;
+
+        border: 0.1em solid consts.$color-3;
+        border-radius: 0.5em;
+        background-color: consts.$color-2;
+
+        text-align: center;
+        padding: calc(2 * consts.$margin) calc(4 * consts.$margin);
+        box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
+
+        margin: consts.$margin;
+
+        .content {
+            display: inline-block;
+        }
+
+        img {
+            vertical-align: text-bottom;
+        }
+    }
 }
 
 // #toast.show {