added btn back component

src/app/components/contacts/contact-edit/contact-edit.component.ts

@@ -2,11 +2,12 @@ import { Component, Input } from '@angular/core';
 import { ContactFormComponent } from '../contact-form/contact-form.component';
 import { CommonModule } from '@angular/common';
 import { UserService } from '../../../services/user.service';
+import { BtnBackComponent } from '../../../shared/components/buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-contact-edit',
   standalone: true,
-  imports: [CommonModule, ContactFormComponent],
+  imports: [CommonModule, ContactFormComponent, BtnBackComponent],
   templateUrl: './contact-edit.component.html',
   styleUrl: './contact-edit.component.scss',
 })

src/app/shared/components/buttons/btn-back/btn-back.component.html

@@ -0,0 +1 @@
+<img (click)="backClicked()" src="./../../../../assets/img/arrow-left.svg" />

src/app/shared/components/buttons/btn-back/btn-back.component.scss

@@ -0,0 +1,12 @@
+img {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  margin-left: 48px;
+  &:hover {
+    width: 36px;
+    height: 36px;
+    background-color: var(--light-gray);
+    border-radius: 18px;
+  }
+}

src/app/shared/components/buttons/btn-back/btn-back.component.spec.ts

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

src/app/shared/components/buttons/btn-back/btn-back.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-btn-back',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './btn-back.component.html',
+  styleUrl: './btn-back.component.scss',
+})
+export class BtnBackComponent {
+  constructor(private location: Location) {}
+
+  backClicked() {
+    this.location.back();
+  }
+}

src/app/shared/components/help/help.component.html

@@ -1,10 +1,7 @@
 <section>
   <div class="header">
     <h1>{{ "help.header" | translate }}</h1>
-    <img
-      (click)="backClicked()"
-      src="./../../../../assets/img/arrow-left.svg"
-    />
+    <app-btn-back></app-btn-back>
   </div>
   <p>
     {{ "help.welcome" | translate }}

src/app/shared/components/help/help.component.scss

@@ -32,18 +32,6 @@ h3 {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
-  img {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    margin-left: 48px;
-    &:hover {
-      width: 36px;
-      height: 36px;
-      background-color: var(--light-gray);
-      border-radius: 18px;
-    }
-  }
 }
 
 .content-table {

src/app/shared/components/help/help.component.ts

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { Location } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { BtnBackComponent } from '../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-help',
   standalone: true,
-  imports: [RouterModule, TranslateModule],
+  imports: [RouterModule, TranslateModule, BtnBackComponent],
   templateUrl: './help.component.html',
   styleUrl: './help.component.scss',
 })

src/app/shared/components/imprint/imprint.component.html

@@ -2,10 +2,7 @@
   <div>
     <div class="header">
       <h1>{{ "imprint.headline" | translate }}</h1>
-      <img
-        (click)="backClicked()"
-        src="./../../../../assets/img/arrow-left.svg"
-      />
+      <app-btn-back></app-btn-back>
     </div>
     {{ "imprint.tmg" | translate }}
     <br /><br />

src/app/shared/components/imprint/imprint.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { BtnBackComponent } from '../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-imprint',
   standalone: true,
-  imports: [TranslateModule],
+  imports: [TranslateModule, BtnBackComponent],
   templateUrl: './imprint.component.html',
   styleUrl: './imprint.component.scss',
 })

src/app/shared/components/privacy-policy/privacy-policy.component.html

@@ -2,10 +2,7 @@
   <div>
     <div class="header">
       <h1>{{ "privacy-policy.headline" | translate }}</h1>
-      <img
-        (click)="backClicked()"
-        src="./../../../../assets/img/arrow-left.svg"
-      />
+      <app-btn-back></app-btn-back>
     </div>
     <h2 id="'content0">
       {{ "privacy-policy.preambleHeadline" | translate }}

src/app/shared/components/privacy-policy/privacy-policy.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { BtnBackComponent } from '../buttons/btn-back/btn-back.component';
 
 @Component({
   selector: 'app-privacy-policy',
   standalone: true,
-  imports: [TranslateModule],
+  imports: [TranslateModule, BtnBackComponent],
   templateUrl: './privacy-policy.component.html',
   styleUrl: './privacy-policy.component.scss',
 })