design error toast component

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

@@ -1,3 +1,20 @@
 <section>
-  <div class="red"></div>
+  <div class="left"></div>
+  <div class="content">
+    <img src="./../../../../assets/img/attention.svg" alt="" />
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aliquam
+      ex earum esse, totam placeat omnis sequi sint eveniet maiores explicabo
+      necessitatibus, est voluptatibus aperiam velit alias quae! Dicta aliquam
+      aspernatur libero maiores tenetur aut ratione et esse nesciunt nostrum,
+      cupiditate recusandae perferendis? Sapiente reprehenderit nemo repellendus
+      libero adipisci explicabo!
+    </p>
+  </div>
+  <div class="right">
+    <div class="line"></div>
+    <div class="img">
+      <img src="./../../../../assets/img/close.svg" alt="" />
+    </div>
+  </div>
 </section>

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

@@ -3,14 +3,14 @@
 section {
   position: relative;
   width: 615px;
-  height: 80px;
-  padding: 24px 32px;
+  height: fit-content;
+  padding: 12px 32px;
   border-radius: 20px;
-  opacity: 0px;
   background-color: $purple;
+  box-shadow: 1px 1px 3px rgba($black, 0.5);
 }
 
-.red {
+.left {
   position: absolute;
   top: 0;
   left: 0;
@@ -21,3 +21,46 @@ section {
   background-color: $red;
   z-index: 2;
 }
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 82%;
+  margin-left: 24px;
+  p {
+    font-size: 18px;
+    font-weight: 400;
+    padding-left: 12px;
+    max-height: 72px;
+    overflow: hidden;
+  }
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 48px;
+  width: 38px;
+  height: 100%;
+  .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%)
+          saturate(7329%) hue-rotate(344deg) brightness(105%) contrast(117%);
+      }
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-error-toast',
   standalone: true,
   imports: [],
   templateUrl: './error-toast.component.html',
-  styleUrl: './error-toast.component.scss'
+  styleUrl: './error-toast.component.scss',
 })
 export class ErrorToastComponent {
-
+  @Input() errorText: string = '';
 }

frontend/src/assets/img/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>