feat: create and integrate HeadlineComponent, replace all headlines across the app

src/app/components/add-task/add-task.component.html

@@ -8,7 +8,7 @@
     class="header"
     [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
   >
-    <div class="title">{{ "addTask.headline" | translate }}</div>
+    <app-headline [title]="'addTask.headline' | translate"></app-headline>
   </div>
 
   <form

src/app/components/add-task/add-task.component.scss

@@ -78,10 +78,6 @@ select:valid {
 
 .header {
   margin-bottom: 48px;
-  .title {
-    font-size: 61px;
-    font-weight: 700;
-  }
 }
 
 /*------------- LEFT SIDE -------------*/
@@ -265,9 +261,6 @@ select:valid {
 @media screen and (max-width: 950px) {
   .header {
     margin-bottom: 24px;
-    .title {
-      font-size: 50px;
-    }
   }
 }
 

src/app/components/add-task/add-task.component.ts

@@ -13,6 +13,7 @@ import { TaskService } from '../../services/task.service';
 import { ApiService } from '../../services/api.service';
 import { UpdateNotifierService } from '../../services/update-notifier.service';
 import { ToastNotificationService } from '../../services/toast-notification.service';
+import { HeadlineComponent } from '../../shared/components/headline/headline.component';
 
 @Component({
   selector: 'app-add-task',
@@ -20,6 +21,7 @@ import { ToastNotificationService } from '../../services/toast-notification.serv
   imports: [
     FormsModule,
     CommonModule,
+    HeadlineComponent,
     AssignedComponent,
     FormBtnComponent,
     TranslateModule,

src/app/components/board/board.component.html

@@ -1,6 +1,6 @@
 <section>
   <div class="header">
-    <div class="title">{{ "board.headline" | translate }}</div>
+    <app-headline [title]="'Board'"></app-headline>
     <div class="search">
       <div class="search-inner">
         <input

src/app/components/board/board.component.scss

@@ -4,12 +4,6 @@ section {
   padding-bottom: 32px;
 }
 
-.title {
-  font-size: 61px;
-  font-weight: 700;
-  padding-right: 24px;
-}
-
 /*------------- HEADER -------------*/
 
 .header {
@@ -112,7 +106,7 @@ d-none {
   flex-wrap: wrap;
   width: 100%;
   margin-top: 48px;
-  gap: 32px;
+  gap: 28px;
 }
 
 .headline {
@@ -140,7 +134,7 @@ d-none {
 .column {
   display: flex;
   flex-direction: column;
-  width: 270px;
+  width: 265px;
   &:first-child {
     padding-left: 0;
   }
@@ -168,14 +162,6 @@ d-none {
       display: none;
     }
   }
-
-  .title {
-    font-size: 50px;
-  }
-
-  .status {
-    justify-content: center;
-  }
 }
 
 @media screen and (max-width: 750px) {
@@ -184,10 +170,6 @@ d-none {
     align-items: flex-start;
   }
 
-  .title {
-    margin-bottom: 24px;
-  }
-
   .search {
     width: 100%;
     .search-inner {

src/app/components/board/board.component.ts

@@ -16,12 +16,14 @@ import { debounceTime, finalize, Subject, take, takeUntil } from 'rxjs';
 import { UpdateNotifierService } from '../../services/update-notifier.service';
 import { ToastNotificationService } from '../../services/toast-notification.service';
 import { ResizeService } from '../../services/resize.service';
+import { HeadlineComponent } from '../../shared/components/headline/headline.component';
 
 @Component({
   selector: 'app-board',
   standalone: true,
   imports: [
     CommonModule,
+    HeadlineComponent,
     TaskComponent,
     TaskEmptyComponent,
     FormsModule,

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -1,12 +1,9 @@
 <section>
   <div class="header">
-    <div class="headline">
+    <app-headline
-      <div class="title">{{ "contacts.headline" | translate }}</div>
+      [title]="'contacts.headline' | translate"
-      <div class="blue-bar"></div>
+      [description]="'contacts.headlineDescription' | translate"
-      <div class="metrics-txt">
+    ></app-headline>
-        {{ "contacts.headlineDescription" | translate }}
-      </div>
-    </div>
     <div
       class="btn-back"
       [ngClass]="{ 'd-none': !selectedUserId }"

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -29,28 +29,6 @@
   }
 }
 
-.headline {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 73px;
-  .title {
-    font-size: 61px;
-    font-weight: 700;
-    padding-right: 24px;
-  }
-  .metrics-txt {
-    font-size: 27px;
-    font-weight: 400;
-    padding-left: 24px;
-  }
-  .blue-bar {
-    height: 80%;
-    width: 3px;
-    background-color: var(--light-blue);
-  }
-}
-
 .content {
   display: flex;
   align-items: center;
@@ -239,34 +217,7 @@
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 1300px) {
-  .headline {
-    .title {
-      font-size: 50px;
-    }
-    .metrics-txt {
-      font-size: 24px;
-    }
-  }
-}
-
 @media screen and (max-width: 1235px) {
-  .headline {
-    flex-direction: column;
-    align-items: flex-start;
-    padding-left: 0;
-    height: 100%;
-    .metrics-txt {
-      padding-left: 0;
-    }
-    .blue-bar {
-      position: absolute;
-      bottom: -15px;
-      height: 3px;
-      width: 100px;
-    }
-  }
-
   .name {
     display: block;
     font-size: 32px;
@@ -298,15 +249,4 @@
       font-weight: 400;
     }
   }
-
-  .headline {
-    .title {
-      font-size: 47px;
-      font-weight: 700;
-    }
-    .metrics-txt {
-      font-size: 20px;
-      font-weight: 400;
-    }
-  }
 }

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

@@ -17,11 +17,12 @@ import { OverlayService } from '../../../services/overlay.service';
 import { ApiService } from '../../../services/api.service';
 import { ToastNotificationService } from '../../../services/toast-notification.service';
 import { UpdateNotifierService } from '../../../services/update-notifier.service';
+import { HeadlineComponent } from '../../../shared/components/headline/headline.component';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule, TranslateModule],
+  imports: [HeadlineComponent, CommonModule, TranslateModule],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })

src/app/components/summary/summary.component.html

@@ -1,11 +1,8 @@
 <section>
-  <div class="header">
+  <app-headline
-    <div class="title">Join 360</div>
+    [title]="'Join 360'"
-    <div class="blue-bar"></div>
+    [description]="'summary.headlineDescription' | translate"
-    <div class="metrics-txt">
+  ></app-headline>
-      {{ "summary.headlineDescription" | translate }}
-    </div>
-  </div>
   @if (!isLoading) {
   <div class="content">
     <div class="summary-container">

src/app/components/summary/summary.component.scss

@@ -1,28 +1,3 @@
-.header {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 73px;
-
-  .title {
-    font-size: 61px;
-    font-weight: 700;
-    padding-right: 24px;
-  }
-
-  .metrics-txt {
-    font-size: 27px;
-    font-weight: 400;
-    padding-left: 24px;
-  }
-
-  .blue-bar {
-    height: 80%;
-    width: 3px;
-    background-color: var(--light-blue);
-  }
-}
-
 .content {
   display: flex;
   margin-top: 48px;
@@ -192,39 +167,6 @@
   }
 }
 
-@media screen and (max-width: 1020px) {
-  .header {
-    .title {
-      font-size: 50px;
-    }
-
-    .metrics-txt {
-      font-size: 24px;
-    }
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .header {
-    flex-direction: column;
-    align-items: start;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-
-    .metrics-txt {
-      padding: 0;
-    }
-
-    .blue-bar {
-      position: absolute;
-      bottom: -15px;
-      height: 3px;
-      width: 100px;
-    }
-  }
-}
-
 @media screen and (max-width: 650px) {
   .summary-container {
     width: auto;
@@ -327,16 +269,6 @@
 }
 
 @media screen and (max-width: 470px) {
-  .header {
-    .title {
-      font-size: 47px;
-    }
-
-    .metrics-txt {
-      font-size: 20px;
-    }
-  }
-
   .todo-done,
   .urgent,
   .tasks {

src/app/components/summary/summary.component.ts

@@ -8,11 +8,17 @@ import { finalize, Subject, takeUntil } from 'rxjs';
 
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
+import { HeadlineComponent } from '../../shared/components/headline/headline.component';
 
 @Component({
   selector: 'app-summary',
   standalone: true,
-  imports: [RouterModule, TranslateModule, LoadingSpinnerComponent],
+  imports: [
+    RouterModule,
+    TranslateModule,
+    LoadingSpinnerComponent,
+    HeadlineComponent,
+  ],
   templateUrl: './summary.component.html',
   styleUrl: './summary.component.scss',
 })

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

@@ -0,0 +1,10 @@
+<div class="headline" [class.is-contacts]="isContacts">
+  <div class="title">{{ title }}</div>
+
+  @if (description) {
+  <div class="blue-bar"></div>
+  <div class="description">
+    {{ description }}
+  </div>
+  }
+</div>

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

@@ -0,0 +1,83 @@
+.headline {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 73px;
+
+  .title {
+    font-size: 61px;
+    font-weight: 700;
+    padding-right: 24px;
+  }
+
+  .description {
+    font-size: 27px;
+    font-weight: 400;
+    padding-left: 24px;
+  }
+
+  .blue-bar {
+    height: 80%;
+    width: 3px;
+    background-color: var(--light-blue);
+  }
+}
+
+/*------------- MIXIN -------------*/
+
+@mixin mobileHeadlineLayout {
+  flex-direction: column;
+  align-items: start;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+
+  .description {
+    padding: 0;
+  }
+
+  .blue-bar {
+    position: absolute;
+    bottom: -15px;
+    height: 3px;
+    width: 100px;
+  }
+}
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 1020px) {
+  .headline {
+    .title {
+      font-size: 50px;
+    }
+
+    .description {
+      font-size: 24px;
+    }
+  }
+}
+
+@media screen and (max-width: 1235px) {
+  .headline.is-contacts {
+    @include mobileHeadlineLayout;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .headline {
+    @include mobileHeadlineLayout;
+  }
+}
+
+@media screen and (max-width: 470px) {
+  .headline {
+    .title {
+      font-size: 47px;
+    }
+
+    .description {
+      font-size: 20px;
+    }
+  }
+}

src/app/shared/components/headline/headline.component.spec.ts

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

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

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-headline',
+  standalone: true,
+  imports: [TranslateModule],
+  templateUrl: './headline.component.html',
+  styleUrl: './headline.component.scss',
+})
+export class HeadlineComponent {
+  @Input() title: string = '';
+  @Input() description: string = '';
+
+  get isContacts(): boolean {
+    return this.title === 'Contacts' || this.title === 'Kontakte';
+  }
+}