added error toast component

frontend/src/app/app.component.html

@@ -1 +1,2 @@
-<router-outlet />
+<!-- <router-outlet />  -->
+<app-error-toast></app-error-toast>

frontend/src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ErrorToastComponent } from './shared/components/error-toast/error-toast.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ErrorToastComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'frontend';

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

@@ -0,0 +1,3 @@
+<section>
+  <div class="red"></div>
+</section>

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

@@ -0,0 +1,23 @@
+@import "./../../../../assets/style/colors.scss";
+
+section {
+  position: relative;
+  width: 615px;
+  height: 80px;
+  padding: 24px 32px;
+  border-radius: 20px;
+  opacity: 0px;
+  background-color: $purple;
+}
+
+.red {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 38px;
+  height: 100%;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background-color: $red;
+  z-index: 2;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorToastComponent } from './error-toast.component';
+
+describe('ErrorToastComponent', () => {
+  let component: ErrorToastComponent;
+  let fixture: ComponentFixture<ErrorToastComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorToastComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ErrorToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

frontend/src/assets/img/attention.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_79_660)">
+<path d="M32 16C32 20.2435 30.3143 24.3131 27.3137 27.3137C24.3131 30.3143 20.2435 32 16 32C11.7565 32 7.68687 30.3143 4.68629 27.3137C1.68571 24.3131 0 20.2435 0 16C0 11.7565 1.68571 7.68687 4.68629 4.68629C7.68687 1.68571 11.7565 0 16 0C20.2435 0 24.3131 1.68571 27.3137 4.68629C30.3143 7.68687 32 11.7565 32 16ZM16 8C15.7472 8.00014 15.4973 8.05324 15.2662 8.15586C15.0352 8.25848 14.8283 8.40835 14.6587 8.59582C14.4891 8.7833 14.3607 9.00421 14.2817 9.24433C14.2027 9.48446 14.1749 9.73847 14.2 9.99L14.9 17.004C14.9235 17.2795 15.0496 17.5362 15.2533 17.7233C15.457 17.9103 15.7235 18.0141 16 18.0141C16.2765 18.0141 16.543 17.9103 16.7467 17.7233C16.9504 17.5362 17.0765 17.2795 17.1 17.004L17.8 9.99C17.8251 9.73847 17.7973 9.48446 17.7183 9.24433C17.6393 9.00421 17.5109 8.7833 17.3413 8.59582C17.1717 8.40835 16.9648 8.25848 16.7338 8.15586C16.5027 8.05324 16.2528 8.00014 16 8ZM16.004 20C15.4736 20 14.9649 20.2107 14.5898 20.5858C14.2147 20.9609 14.004 21.4696 14.004 22C14.004 22.5304 14.2147 23.0391 14.5898 23.4142C14.9649 23.7893 15.4736 24 16.004 24C16.5344 24 17.0431 23.7893 17.4182 23.4142C17.7933 23.0391 18.004 22.5304 18.004 22C18.004 21.4696 17.7933 20.9609 17.4182 20.5858C17.0431 20.2107 16.5344 20 16.004 20Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_79_660">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/assets/style/colors.scss

@@ -5,3 +5,4 @@ $gray: #ababab;
 $blue: #2e3edf;
 $light-blue: #969eef;
 $red: #ff002e;
+$purple: #2e3edf;