error message design update

frontend/src/app/shared/components/error-toast/error-toast.component.html

@@ -1,21 +1,13 @@
 <div class="overlay" (click)="closeError()">
-  <section class="slide-in-right" (click)="stopPropagation($event)">
+  <section class="slide-in" (click)="stopPropagation($event)">
     <div class="left"></div>
     <div class="content">
-      <img src="./../../../../assets/img/attention.svg" alt="" />
+      <img src="./../../../../assets/img/attention.svg" alt="Achtung" />
-      <p>
+      <p>{{ errorText }}</p>
-        {{ errorText }}
-      </p>
     </div>
-    <div class="right">
     <div class="line"></div>
-      <div class="img">
+    <div class="close-btn" (click)="closeError()">
-        <img
+      <img src="./../../../../assets/img/close.svg" alt="Schließen" />
-          src="./../../../../assets/img/close.svg"
-          alt=""
-          (click)="closeError()"
-        />
-      </div>
     </div>
   </section>
 </div>

frontend/src/app/shared/components/error-toast/error-toast.component.scss

@@ -1,20 +1,35 @@
 @import "./../../../../assets/style/colors.scss";
 
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(5px);
+  background-color: rgba($black, 0.2);
+  z-index: 999;
+}
+
 section {
   position: relative;
   width: 615px;
   max-width: 80%;
-  height: fit-content;
   padding: 12px 32px;
   border-radius: 20px;
   background-color: $blue;
   box-shadow: 1px 1px 3px rgba($black, 0.5);
   opacity: 0;
   transform: translateY(100vh);
-  animation: slide-in-bottom 500ms forwards;
+  animation: slide-in 500ms forwards;
+  display: flex;
+  align-items: center;
 }
 
-@keyframes slide-in-bottom {
+@keyframes slide-in {
   to {
     opacity: 1;
     transform: translateY(0);
@@ -30,68 +45,47 @@ section {
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   background-color: $red;
-  z-index: 2;
+}
+
+.line {
+  position: absolute;
+  top: 50%;
+  right: 64px;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 40%;
+  background-color: $white;
 }
 
 .content {
   display: flex;
   align-items: center;
-  width: 82%;
+  margin-left: 62px;
-  min-height: 48px;
+  max-width: 350px;
-  margin-left: 24px;
   p {
     font-size: 18px;
     font-weight: 400;
-    padding-left: 12px;
+    padding-left: 24px;
     max-height: 72px;
     overflow: hidden;
   }
 }
 
-.right {
+.close-btn {
-  display: flex;
-  align-items: center;
   position: absolute;
-  top: 0;
+  top: 50%;
-  right: 48px;
+  right: 24px;
-  width: 38px;
+  transform: translateY(-50%);
-  height: 100%;
+  cursor: pointer;
-  .line {
-    height: 40%;
-    padding: 1px;
-    background-color: $white;
-  }
-  .img {
-    padding: 24px;
-    width: 24px;
-    height: 24px;
   img {
     width: 24px;
     height: 24px;
-      cursor: pointer;
     &:hover {
-        filter: brightness(0) saturate(100%) invert(13%) sepia(90%)
+      filter: brightness(0) saturate(100%) invert(25%) sepia(82%)
-          saturate(7329%) hue-rotate(344deg) brightness(105%) contrast(117%);
+        saturate(6600%) hue-rotate(237deg) brightness(88%) contrast(96%);
     }
   }
 }
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(5px);
-  background-color: rgba($black, 0.2);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
 
 /*------------- RESPONSIVE -------------*/
 
@@ -101,30 +95,34 @@ section {
     bottom: 0;
     left: 0;
     right: 0;
-    height: fit-content;
+    padding: 16px;
-    min-height: 120px;
+    max-width: calc(100vw - 32px);
-    max-width: 90%;
+    border-radius: 0;
-    border-bottom-left-radius: 0px;
+    display: flex;
-    border-bottom-right-radius: 0px;
+    flex-direction: column;
+  }
+
+  .line {
+    display: none;
   }
 
   .left {
     width: 100%;
     height: 38px;
-    border-top-left-radius: 20px;
+    border-radius: 20px 20px 0 0;
-    border-top-right-radius: 20px;
-    border-bottom-left-radius: 0;
-  }
-
-  .right {
-    top: 12px;
-    right: 60px;
-    .line {
-      display: none;
-    }
   }
 
   .content {
+    margin-left: 0;
     margin-top: 48px;
+    justify-content: center;
+    text-align: center;
+    max-width: 80%;
+  }
+
+  .close-btn {
+    top: 8px;
+    right: 16px;
+    transform: none;
   }
 }