Add Components for Modal Dialoue + Icons

2025-12-31 09:37:15 +01:00 · 2020-05-25 09:57:42 +02:00
parent 157d1f8942
commit 8226bd69f5
59 changed files with 735 additions and 170 deletions
--- a/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.html
+++ b/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.html
@@ -1,26 +0,0 @@
-<div class="container">
-  <div class="isa-modal-header">
-    <h4 class="isa-modal-title">
-      {{ content.title || '...Ein Fehler ist aufgetreten' }}
-    </h4>
-    <lib-icon
-      (click)="closeModal()"
-      height="21px"
-      class="close-icon"
-      name="close-branch"
-      alt="close"
-    ></lib-icon>
-  </div>
-
-  <div class="isa-modal-body">
-    <p class="isa-modal-message" *ngIf="content.message">
-      {{ content.message }}
-    </p>
-
-    <div class="isa-modal-ctas">
-      <button (click)="closeModal()" class="isa-btn isa-btn-primary">
-        Ok
-      </button>
-    </div>
-  </div>
-</div>
--- a/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.scss
+++ b/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.scss
@@ -1,5 +0,0 @@
-.container {
-  background: red;
-  height: 400px;
-  width: 250px;
-}
--- a/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.ts
+++ b/apps/sales/src/app/core/overlay/component/default-dialog/default-dialog.component.ts
@@ -1,25 +0,0 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  Input,
-} from '@angular/core';
-import { ModalContentData } from '../../defs';
-
-@Component({
-  selector: 'app-default-dialog',
-  templateUrl: 'default-dialog.component.html',
-  styleUrls: ['./default-dialog.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DefaultDialogComponent implements OnInit {
-  @Input() content: ModalContentData;
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  closeModal() {
-    console.log('Close Modal');
-  }
-}
--- a/apps/sales/src/app/core/overlay/component/default-dialog/index.ts
+++ b/apps/sales/src/app/core/overlay/component/default-dialog/index.ts
@@ -1,4 +0,0 @@
-// start:ng42.barrel
-export * from './default-dialog.component';
-// end:ng42.barrel
-
--- a/apps/sales/src/app/core/overlay/component/modal.component.html
+++ b/apps/sales/src/app/core/overlay/component/modal.component.html
@@ -1,20 +1,5 @@
 <div class="modal-container">
-  <h1>I am a Modal!</h1>
-
  <ng-container [ngSwitch]="contentType">
-    <ng-container *ngSwitchCase="'string'">
-      <lib-icon
-        (click)="close()"
-        height="21px"
-        class="close-icon"
-        name="close-branch"
-        alt="close"
-      ></lib-icon>
-      <div class="content">
-        <div [innerHTML]="content"></div>
-      </div>
-    </ng-container>
-
    <ng-container *ngSwitchCase="'template'">
      <ng-container
        *ngTemplateOutlet="content; context: context"
@@ -24,9 +9,5 @@
    <ng-container *ngSwitchCase="'component'">
      <ng-container *ngComponentOutlet="content"> </ng-container>
    </ng-container>
-
-    <ng-container *ngSwitchCase="'data'">
-      <app-default-dialog [content]="content"></app-default-dialog>
-    </ng-container>
  </ng-container>
 </div>
--- a/apps/sales/src/app/core/overlay/component/modal.component.scss
+++ b/apps/sales/src/app/core/overlay/component/modal.component.scss
@@ -1,4 +1,6 @@
-.container {
-  border-radius: 10px;
-  background: papayawhip;
+.modal-container {
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+  max-width: 800px;
 }
--- a/apps/sales/src/app/core/overlay/component/modal.component.ts
+++ b/apps/sales/src/app/core/overlay/component/modal.component.ts
@@ -7,7 +7,6 @@ import {
 } from '@angular/core';
 import { IsaModalOverlayRef } from '../isa-modal-overlay-ref';
 import { ModalContent } from '../defs';
-import { isModalContentData } from '../utils/is-modal-content-data';

@Component({
  selector: 'app-modal-dialogue',
@@ -29,16 +28,6 @@ export class ModalDialogueSharedComponent implements OnInit {
  setContentType() {
    this.content = this.overlayRef.content;

-    if (isModalContentData(this.content)) {
-      this.contentType = 'data';
-      return;
-    }
-
-    if (typeof this.content === 'string') {
-      this.contentType = 'string';
-      return;
-    }
-
    if (this.content instanceof TemplateRef) {
      this.contentType = 'template';
      this.context = {
--- a/apps/sales/src/app/core/overlay/component/modal.module.ts
+++ b/apps/sales/src/app/core/overlay/component/modal.module.ts
@@ -1,13 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ModalDialogueSharedComponent } from './modal.component';
-import { DefaultDialogComponent } from './default-dialog';
 import { IconModule } from '@libs/ui';

@NgModule({
  imports: [CommonModule, IconModule],
-  exports: [ModalDialogueSharedComponent, DefaultDialogComponent],
-  declarations: [ModalDialogueSharedComponent, DefaultDialogComponent],
+  exports: [ModalDialogueSharedComponent],
+  declarations: [ModalDialogueSharedComponent],
  entryComponents: [ModalDialogueSharedComponent],
 })
 export class ModalDialogueModule {}
--- a/apps/sales/src/app/core/overlay/default-dialog.config.ts
+++ b/apps/sales/src/app/core/overlay/default-dialog.config.ts
@@ -1,4 +1,4 @@
-import { OverlayConfig, GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';

 export const config: OverlayConfig = {
  hasBackdrop: true,
--- a/apps/sales/src/app/core/overlay/defs/modal-content.model.ts
+++ b/apps/sales/src/app/core/overlay/defs/modal-content.model.ts
@@ -1,12 +1,3 @@
 import { TemplateRef, Type } from '@angular/core';

-export interface ModalContentData {
-  title?: string;
-  message?: string;
-}
-
-export type ModalContent =
-  | ModalContentData
-  | string
-  | TemplateRef<any>
-  | Type<any>;
+export type ModalContent = TemplateRef<any> | Type<any>;
--- a/apps/sales/src/app/core/overlay/isa-modal-overlay-ref.ts
+++ b/apps/sales/src/app/core/overlay/isa-modal-overlay-ref.ts
@@ -1,7 +1,7 @@
-import { Type, TemplateRef } from '@angular/core';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Subject } from 'rxjs';
 import { OverlayCloseEvent, ModalContent } from './defs';
+import { ModalDialogData } from './modal-dialog-data';

 export class IsaModalOverlayRef<T = any> {
  afterClosed$ = new Subject<OverlayCloseEvent<T>>();
@@ -9,7 +9,7 @@ export class IsaModalOverlayRef<T = any> {
  constructor(
    public overlay: OverlayRef,
    public content: ModalContent,
-    public data: T
+    public data: ModalDialogData<T>
  ) {
    this.overlay
      .backdropClick()
--- a/apps/sales/src/app/core/overlay/modal-dialog-data.ts
+++ b/apps/sales/src/app/core/overlay/modal-dialog-data.ts
@@ -0,0 +1,10 @@
+import { IsaModalOverlayRef } from './isa-modal-overlay-ref';
+
+export class ModalDialogData<T> {
+  title?: string;
+  message?: string;
+  data?: T;
+  ref?: IsaModalOverlayRef;
+
+  constructor() {}
+}
--- a/apps/sales/src/app/core/overlay/modal-service.ts
+++ b/apps/sales/src/app/core/overlay/modal-service.ts
@@ -1,4 +1,11 @@
-import { Injectable, Inject, TemplateRef, Injector, Type } from '@angular/core';
+import {
+  Injectable,
+  Inject,
+  TemplateRef,
+  Injector,
+  Type,
+  InjectionToken,
+} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { config } from './default-dialog.config';
@@ -6,6 +13,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { ModalDialogueSharedComponent } from './component';
 import { IsaModalOverlayRef } from './isa-modal-overlay-ref';
 import { ModalContent } from './defs';
+import { ModalDialogData } from './modal-dialog-data';

@Injectable({ providedIn: 'root' })
 export class ModalService {
@@ -17,7 +25,10 @@ export class ModalService {
    private injector: Injector
  ) {}

-  open<T = any>(content: ModalContent, data: T): IsaModalOverlayRef<T> {
+  open<T>(
+    content: ModalContent,
+    data: ModalDialogData<T>
+  ): IsaModalOverlayRef<T> {
    if (this.modal) {
      this.modal.dispose();
    }
@@ -26,7 +37,7 @@ export class ModalService {
    this.modal = overlayRef;
    const modalRef = new IsaModalOverlayRef<T>(overlayRef, content, data);

-    const injector = this.createInjector(modalRef);
+    const injector = this.createInjector(modalRef, { ...data, ref: modalRef });
    overlayRef.attach(
      new ComponentPortal(ModalDialogueSharedComponent, null, injector)
    );
@@ -42,9 +53,12 @@ export class ModalService {
    return new OverlayConfig({ ...config });
  }

-  private createInjector(overlayRef: IsaModalOverlayRef) {
+  private createInjector<T>(overlayRef: IsaModalOverlayRef, data: T) {
    return Injector.create({
-      providers: [{ provide: IsaModalOverlayRef, useValue: overlayRef }],
+      providers: [
+        { provide: IsaModalOverlayRef, useValue: overlayRef },
+        { provide: ModalDialogData, useValue: data },
+      ],
      parent: this.injector,
    });
  }
--- a/apps/sales/src/app/core/overlay/utils/is-modal-content-data.ts
+++ b/apps/sales/src/app/core/overlay/utils/is-modal-content-data.ts
@@ -1,12 +0,0 @@
-import { ModalContentData } from '../defs';
-
-export function isModalContentData(obj: any): obj is ModalContentData {
-  if (!obj || !(typeof obj === 'object')) {
-    return false;
-  }
-
-  return (
-    ('message' in obj && typeof obj.message === 'string') ||
-    ('title' in obj && typeof obj.title === 'string')
-  );
-}
--- a/apps/sales/src/app/core/services/clipboard.service.spec.ts
+++ b/apps/sales/src/app/core/services/clipboard.service.spec.ts
@@ -0,0 +1,16 @@
+import { ClipboardService } from './clipboard.service';
+import { TestBed } from '@angular/core/testing';
+
+describe('ClipboardService', () => {
+  let document: Document;
+  let service: ClipboardService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [],
+    });
+
+    document = TestBed.get(Document);
+    service = TestBed.get(ClipboardService);
+  });
+});
--- a/apps/sales/src/app/core/services/clipboard.service.ts
+++ b/apps/sales/src/app/core/services/clipboard.service.ts
@@ -0,0 +1,48 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({ providedIn: 'root' })
+export class ClipboardService {
+  private dom: Document;
+
+  constructor(@Inject(DOCUMENT) dom: Document) {
+    this.dom = dom;
+  }
+
+  copy(value: string): Promise<string> {
+    const promise = new Promise<string>((resolve, reject): void => {
+      let textarea: HTMLTextAreaElement;
+
+      try {
+        // create element
+        textarea = this.dom.createElement('textarea');
+
+        // make element invisible in DOM
+        textarea.style.width = '0px';
+        textarea.style.height = '0px';
+        textarea.style.left = '-100px';
+        textarea.style.opacity = '0';
+        textarea.style.position = 'fixed';
+        textarea.style.top = '-100px';
+
+        this.dom.body.appendChild(textarea);
+
+        // set and select the element
+        textarea.value = value;
+        textarea.select();
+
+        // initiate copy command on document
+        this.dom.execCommand('copy');
+
+        resolve(value);
+      } finally {
+        // remove textarea from dom afterwards
+        if (textarea && textarea.parentNode) {
+          textarea.parentNode.removeChild(textarea);
+        }
+      }
+    });
+
+    return promise;
+  }
+}
--- a/apps/sales/src/app/core/services/index.ts
+++ b/apps/sales/src/app/core/services/index.ts
@@ -1,2 +1,26 @@
-export { AppService } from './app.service';
-export { ModalConfirmationService } from './modal-confirmation.service';
+// start:ng42.barrel
+export * from './app.service';
+export * from './branch.service';
+export * from './checkout.service';
+export * from './clipboard.service';
+export * from './collecting-shelf.service';
+export * from './customer.service';
+export * from './dashboard-feed.service';
+export * from './filter.service';
+export * from './goods-in.service';
+export * from './image.service';
+export * from './location-service';
+export * from './logging.service';
+export * from './modal-confirmation.service';
+export * from './module-switcher.service';
+export * from './order.service';
+export * from './printer.service';
+export * from './product-availability.service';
+export * from './product-util.service';
+export * from './product.service';
+export * from './recommandation.service';
+export * from './sso-configuration.service';
+export * from './user-state.service';
+export * from './window-ref.service';
+// end:ng42.barrel
+
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list-articles/file-list-articles.component.html
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list-articles/file-list-articles.component.html
@@ -0,0 +1,27 @@
+<div class="articles">
+  <span class="icon">
+    <lib-icon height="21px" name="Attachment_Icon" alt="attachment"></lib-icon>
+  </span>
+  <p class="filename">Artikelliste</p>
+
+  <div class="btn-open">
+    <button
+      mat-button
+      color="warn"
+      class="btn-open"
+      mat-button
+      (click)="copyArticles()"
+    >
+      EAN-Liste kopieren
+    </button>
+    <button
+      mat-button
+      color="warn"
+      class="btn-open"
+      mat-button
+      (click)="previewArticles()"
+    >
+      Öffnen
+    </button>
+  </div>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list-articles/file-list-articles.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list-articles/file-list-articles.component.ts
@@ -0,0 +1,46 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core';
+import { Article } from '../../../defs';
+import { ClipboardService } from 'apps/sales/src/app/core/services/clipboard.service';
+
+@Component({
+  selector: 'app-file-list-articles',
+  templateUrl: 'file-list-articles.component.html',
+  styleUrls: ['../file-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileListArticlesComponent implements OnInit {
+  @Input() articles: Article[];
+
+  constructor(private clipboardService: ClipboardService) {}
+
+  ngOnInit() {}
+
+  previewArticles() {
+    console.log('View Articles!');
+  }
+
+  private generateEanString(articles: Article[]): string {
+    return articles.map((article) => article.ean).join(';');
+  }
+
+  copyArticles() {
+    this.clipboardService.copy(this.generateEanString(this.articles)).then(
+      (result) => console.log('Copied to Clipboard: ', result)
+      // TODO Add Snackbar Service
+      /*         this.snackbar.open(
+          `Die EAN-Liste wurde kopiert (${result})`,
+          'Schließen',
+          {
+            duration: 5000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top',
+          }
+        ) */
+    );
+  }
+}
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.html
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.html
@@ -0,0 +1,31 @@
+<ng-container *ngIf="filesWithoutImgs.length || !!articles">
+  <div class="header">
+    <h3 class="attachment-headline">Dateianhang</h3>
+  </div>
+
+  <div class="file-list-group" *ngIf="filesWithoutImgs">
+    <div class="file" *ngFor="let file of filesWithoutImgs">
+      <span class="icon">
+        <lib-icon
+          height="21px"
+          name="Attachment_Icon"
+          alt="attachment"
+        ></lib-icon>
+      </span>
+      <p class="filename">{{ file.name }}</p>
+      <button class="isa-btn" (click)="previewFile(file.id)">
+        Öffnen
+      </button>
+    </div>
+  </div>
+  <div class="file-list-group">
+    <app-file-list-articles
+      *ngIf="!!articles"
+      [articles]="articles"
+    ></app-file-list-articles>
+  </div>
+</ng-container>
+
+<section class="img-preview" *ngIf="images.length && images[0].path">
+  <img [src]="images[0].path" />
+</section>
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.scss
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.scss
@@ -0,0 +1,38 @@
+.header {
+  margin-top: 4rem;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid lightgrey;
+  width: 100%;
+
+  h3 {
+    font-weight: bold;
+  }
+}
+
+.file, .articles {
+  border-bottom: 1px solid lightgrey;
+  display: flex;
+  align-items: center;
+  padding: 1rem 3px;
+
+  .filename {
+    margin-left: 0.25rem;
+    margin-bottom: 0;
+  }
+
+  .btn-open {
+    margin-left: auto;
+  }
+}
+
+.img-preview {
+  padding: 2.5em 10%;
+  display: flex;
+  justify-content: center;
+
+  img {
+    width: 75%;
+    height: auto;
+  }
+}
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.component.ts
@@ -0,0 +1,36 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import { Article, File } from '../../defs';
+
+@Component({
+  selector: 'app-file-list',
+  templateUrl: 'file-list.component.html',
+  styleUrls: ['./file-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileListComponent {
+  filesWithoutImgs: File[] = [];
+  images: File[] = [];
+
+  @Input() articles: Article[];
+  @Input() set files(files: File[]) {
+    if (!files) {
+      return;
+    }
+    this.filesWithoutImgs = files.filter((file) => file.type !== 'img');
+    this.images = files.filter((file) => file.type === 'img');
+  }
+
+  @Output() openFile = new EventEmitter<number>();
+
+  constructor() {}
+
+  previewFile(fileId: number) {
+    this.openFile.emit(fileId);
+  }
+}
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.module.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/file-list.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FileListComponent } from './file-list.component';
+import { FileListArticlesComponent } from './file-list-articles/file-list-articles.component';
+import { IconModule } from '@libs/ui';
+
+@NgModule({
+  imports: [CommonModule, IconModule],
+  exports: [FileListComponent, FileListArticlesComponent],
+  declarations: [FileListComponent, FileListArticlesComponent],
+  providers: [],
+})
+export class FileListModule {}
--- a/apps/sales/src/app/modules/task-calendar/components/file-list/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/file-list/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './file-list.component';
+export * from './file-list.module';
+// end:ng42.barrel
--- a/apps/sales/src/app/modules/task-calendar/components/task-calendar-choice-switch/task-calendar-double-choice-switch.component.html
+++ b/apps/sales/src/app/modules/task-calendar/components/task-calendar-choice-switch/task-calendar-double-choice-switch.component.html
@@ -1,5 +1,5 @@
 <div class="switch-container">
-  <lib-double-choice-switch [model]="viewSwitch" (change)="changeView.emit()">
+  <lib-double-choice-switch [model]="viewSwitch" (change)="onChangeView()">
    <img
      [src]="
        isFirstSwitched
--- a/apps/sales/src/app/modules/task-calendar/components/task-calendar-choice-switch/task-calendar-double-choice-switch.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/task-calendar-choice-switch/task-calendar-double-choice-switch.component.ts
@@ -1,9 +1,9 @@
 import {
  Component,
-  OnInit,
  ChangeDetectionStrategy,
  EventEmitter,
-  Output
+  Output,
+  Input,
 } from '@angular/core';
 import { VIEW_SWITCH } from '../../constants';

@@ -11,18 +11,16 @@ import { VIEW_SWITCH } from '../../constants';
  selector: 'app-task-calendar-double-choice-switch',
  templateUrl: 'task-calendar-double-choice-switch.component.html',
  styleUrls: ['./task-calendar-double-choice-switch.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TaskCalendarDoubleChoiceSwitchComponent implements OnInit {
+export class TaskCalendarDoubleChoiceSwitchComponent {
  viewSwitch = VIEW_SWITCH;
-  isFirstSwitched = true;

+  @Input() isFirstSwitched = true;
  @Output() changeView = new EventEmitter<void>();

  constructor() {}

-  ngOnInit() {}
-
  onChangeView() {
    this.isFirstSwitched = !this.isFirstSwitched;
    this.changeView.emit();
--- a/apps/sales/src/app/modules/task-calendar/components/task-list/task-list-item.component.html
+++ b/apps/sales/src/app/modules/task-calendar/components/task-list/task-list-item.component.html
@@ -20,16 +20,31 @@

  <div class="description">
    <div *ngIf="showHeadline" class="headline">
-      <app-task-list-teaser-image *ngIf="item.hasTeaserImages" [teaserImage]="item.teaserImage">
+      <app-task-list-teaser-image
+        *ngIf="item.hasTeaserImages"
+        [teaserImage]="item.teaserImage"
+      >
      </app-task-list-teaser-image>
      <h4 class="headline-text">{{ item.title }}</h4>
-      <span class="camera-icon" *ngIf="item.requiresImageOnConfirmation"><span>photo_camera ICON</span></span>
-      <span class="file-icon" *ngIf="item.hasAttachments || item.hasArticles"><span>attach_file ICON</span></span>
+      <span class="camera-icon" *ngIf="item.requiresImageOnConfirmation"
+        ><lib-icon height="21px" name="Camera_Icon" alt="camera"></lib-icon
+      ></span>
+      <span class="file-icon" *ngIf="item.hasAttachments || item.hasArticles"
+        ><lib-icon
+          height="21px"
+          name="Attachment_Icon"
+          alt="attachment"
+        ></lib-icon
+      ></span>
    </div>
-    <p class="text" innerHTML="{{
+    <p
+      class="text"
+      innerHTML="{{
        showFullText
          ? item.body
          : (item.body | parseTaskBodyHtml | truncateText: 10)
-      }}" *ngIf="item.body"></p>
+      }}"
+      *ngIf="item.body"
+    ></p>
  </div>
-</div>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/components/task-list/task-list-separator/task-list-separator.component.html
+++ b/apps/sales/src/app/modules/task-calendar/components/task-list/task-list-separator/task-list-separator.component.html
@@ -1,6 +1,11 @@
 <ng-container [ngSwitch]="item.type">
-  <div *ngSwitchCase="'Task'" class="seperator" [appTaskColor]="item" target="backgroundColor"></div>
+  <div
+    *ngSwitchCase="'Task'"
+    class="seperator"
+    [appTaskColor]="item"
+    target="backgroundColor"
+  ></div>
  <div *ngSwitchDefault class="info-task">
-    <span>info ICON</span>
+    <lib-icon height="21px" name="Task_Info_Icon" alt="camera"></lib-icon>
  </div>
-</ng-container>
+</ng-container>
--- a/apps/sales/src/app/modules/task-calendar/components/task-list/task-list.module.ts
+++ b/apps/sales/src/app/modules/task-calendar/components/task-list/task-list.module.ts
@@ -8,9 +8,15 @@ import { TaskListSeparatorComponent } from './task-list-separator';
 import { TaskListTeaserImageComponent } from './task-list-teaser-image';
 import { TaskCalendarDirectiveModule } from '../../directives';
 import { TaskCalendarPipesModule } from '../../pipes';
+import { IconModule } from '@libs/ui';

@NgModule({
-  imports: [CommonModule, TaskCalendarDirectiveModule, TaskCalendarPipesModule],
+  imports: [
+    CommonModule,
+    IconModule,
+    TaskCalendarDirectiveModule,
+    TaskCalendarPipesModule,
+  ],
  exports: [
    TaskListComponent,
    TaskListItemComponent,
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.html
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.html
@@ -0,0 +1,12 @@
+<div class="isa-modal-header">
+  <h4 class="isa-modal-title">
+    {{ task.title }}
+  </h4>
+  <lib-icon
+    (click)="close.emit()"
+    height="21px"
+    class="close-icon"
+    name="close-branch"
+    alt="close"
+  ></lib-icon>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.scss
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.scss
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/edit-task-header.component.ts
@@ -0,0 +1,25 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core';
+import { Task } from '../../../defs';
+
+@Component({
+  selector: 'app-edit-task-header',
+  templateUrl: './edit-task-header.component.html',
+  styleUrls: ['./edit-task-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditTaskHeaderComponent implements OnInit {
+  @Input() task: Task;
+
+  @Output() close = new EventEmitter<void>();
+
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-header/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './edit-task-header.component';
+// end:ng42.barrel
+
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.html
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.html
@@ -0,0 +1,3 @@
+<div class="hint-container">
+  <p class="modal-hint">{{ 'Vorabinfo' | uppercase }}</p>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.scss
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.scss
@@ -0,0 +1,7 @@
+.hint-container {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 1rem;
+  top: 1rem;
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/edit-task-preinfo-hint.component.ts
@@ -0,0 +1,13 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-edit-task-preinfo-hint',
+  templateUrl: 'edit-task-preinfo-hint.component.html',
+  styleUrls: ['./edit-task-preinfo-hint.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditTaskPreinfoHintComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-hint/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './edit-task-preinfo-hint.component';
+// end:ng42.barrel
+
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.html
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.html
@@ -0,0 +1,6 @@
+<div class="container">
+  <p class="isa-modal-subtitle">
+    {{ startDate | date: 'shortDate' }}
+    <span *ngIf="timeWindow">{{ timeWindow | timeWindowToString }}</span>
+  </p>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.scss
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.scss
@@ -0,0 +1,7 @@
+.container {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/edit-task-preinfo-subtitle.component.ts
@@ -0,0 +1,22 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core';
+import { TimeWindow } from '../../../defs';
+
+@Component({
+  selector: 'app-edit-task-preinfo-subtitle',
+  templateUrl: './edit-task-preinfo-subtitle.component.html',
+  styleUrls: ['./edit-task-preinfo-subtitle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditTaskPreinfoSubtitleComponent implements OnInit {
+  @Input() startDate: string;
+  @Input() timeWindow: TimeWindow;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-preinfo-subtitle/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './edit-task-preinfo-subtitle.component';
+// end:ng42.barrel
+
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.html
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.html
@@ -0,0 +1,4 @@
+<div class="status">
+  <span [appTaskColor]="task" target="backgroundColor" class="circle"></span>
+  <p class="isa-modal-status">{{ task.status | taskStatusMapping }}</p>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.scss
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.scss
@@ -0,0 +1,13 @@
+.status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .circle {
+    display: inline-block;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    margin-right: 0.5rem;
+  }
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/edit-task-status.component.ts
@@ -0,0 +1,21 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core';
+import { Task } from '../../../defs';
+
+@Component({
+  selector: 'app-edit-task-status',
+  templateUrl: './edit-task-status.component.html',
+  styleUrls: ['./edit-task-status.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EditTaskStatusComponent implements OnInit {
+  @Input() task: Task;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task-status/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './edit-task-status.component';
+// end:ng42.barrel
+
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.component.html
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.component.html
@@ -1 +1,43 @@
-<div>EDIT TASK MODAL DIALOGUE</div>
+<div class="isa-modal" *ngIf="task$ | async | displayInfoDTOtoTask as task">
+  <app-edit-task-preinfo-hint
+    *ngIf="task.type === 'PreInfo'"
+  ></app-edit-task-preinfo-hint>
+  <app-edit-task-header
+    (close)="closeModal()"
+    [task]="task"
+  ></app-edit-task-header>
+  <app-edit-task-status
+    *ngIf="task.type === 'Task'"
+    [task]="task"
+  ></app-edit-task-status>
+
+  <app-edit-task-preinfo-subtitle
+    *ngIf="task.type === 'PreInfo'"
+    [startDate]="task.date"
+    [timeWindow]="task.timeWindow"
+  ></app-edit-task-preinfo-subtitle>
+
+  <div class="isa-modal-body">
+    <app-task-list
+      [mode]="'details'"
+      [showFutureEvents]="true"
+      [items]="task"
+    ></app-task-list>
+
+    <app-file-list
+      *ngIf="task.hasAttachments || task.hasArticles"
+      [files]="files$ | async"
+      [articles]="articles$ | async"
+      (openFile)="openFilePreview($event)"
+    ></app-file-list>
+
+    <div class="isa-modal-actions">
+      <button
+        (click)="closeModal()"
+        class="isa-btn isa-btn-pill isa-btn-primary isa-btn-l"
+      >
+        Jetzt bearbeiten
+      </button>
+    </div>
+  </div>
+</div>
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.component.ts
@@ -1,4 +1,15 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Inject,
+} from '@angular/core';
+import { ModalDialogData } from 'apps/sales/src/app/core/overlay/modal-dialog-data';
+import { Article, File } from '../../defs';
+import { Observable, of } from 'rxjs';
+import { selectTaskById } from 'apps/sales/src/app/store/branch';
+import { Store, select } from '@ngrx/store';
+import { DisplayInfoDTO } from '@swagger/eis/lib';

@Component({
  selector: 'app-modal-edit-task',
@@ -7,7 +18,41 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditTaskComponent implements OnInit {
-  constructor() {}
+  task$: Observable<DisplayInfoDTO>;
+  files$: Observable<File[]>;
+  articles$: Observable<Article[]>;

-  ngOnInit() {}
+  constructor(
+    @Inject(ModalDialogData) public data: ModalDialogData<number>,
+    private store: Store<any>
+  ) {}
+
+  ngOnInit() {
+    console.log('EditTaskComponent [CONTENT]', this.data);
+    this.task$ = this.getTask(this.data.data);
+    this.files$ = this.getFiles(this.data.data);
+    this.articles$ = this.getArticles(this.data.data);
+  }
+
+  closeModal() {
+    if (this.data.ref) {
+      this.data.ref.close();
+    }
+  }
+
+  private getTask(taskId: number): Observable<DisplayInfoDTO> {
+    return this.store.pipe(select(selectTaskById, taskId));
+  }
+
+  private getArticles(taskId: number): Observable<Article[]> {
+    return of([]);
+  }
+
+  private getFiles(taskId: number): Observable<File[]> {
+    return of([]);
+  }
+
+  openFilePreview(fileId: number) {
+    console.log('EditTaskComponent [openFilePreview]', fileId);
+  }
 }
--- a/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.module.ts
+++ b/apps/sales/src/app/modules/task-calendar/modals/edit-task/edit-task.module.ts
@@ -1,10 +1,39 @@
 import { NgModule } from '@angular/core';
 import { EditTaskComponent } from './edit-task.component';
+import { EditTaskHeaderComponent } from './edit-task-header';
+import { IconModule } from '@libs/ui';
+import { CommonModule } from '@angular/common';
+import { TaskCalendarPipesModule } from '../../pipes';
+import { EditTaskStatusComponent } from './edit-task-status';
+import { TaskCalendarDirectiveModule } from '../../directives';
+import { EditTaskPreinfoHintComponent } from './edit-task-preinfo-hint';
+import { EditTaskPreinfoSubtitleComponent } from './edit-task-preinfo-subtitle';
+import { TaskListModule } from '../../components/task-list';
+import { FileListModule } from '../../components/file-list';

@NgModule({
-  imports: [],
-  exports: [EditTaskComponent],
-  declarations: [EditTaskComponent],
+  imports: [
+    CommonModule,
+    TaskCalendarDirectiveModule,
+    TaskListModule,
+    FileListModule,
+    TaskCalendarPipesModule,
+    IconModule,
+  ],
+  exports: [
+    EditTaskComponent,
+    EditTaskHeaderComponent,
+    EditTaskStatusComponent,
+    EditTaskPreinfoHintComponent,
+    EditTaskPreinfoSubtitleComponent,
+  ],
+  declarations: [
+    EditTaskComponent,
+    EditTaskHeaderComponent,
+    EditTaskStatusComponent,
+    EditTaskPreinfoHintComponent,
+    EditTaskPreinfoSubtitleComponent,
+  ],
  providers: [],
  entryComponents: [EditTaskComponent],
 })
--- a/apps/sales/src/app/modules/task-calendar/pages/tasks/tasks-view.component.html
+++ b/apps/sales/src/app/modules/task-calendar/pages/tasks/tasks-view.component.html
@@ -1,5 +1,8 @@
 <div class="container">
-  <app-task-calendar-double-choice-switch (changeView)="navigateToCalendar()">
+  <app-task-calendar-double-choice-switch
+    [isFirstSwitched]="false"
+    (changeView)="navigateToCalendar()"
+  >
  </app-task-calendar-double-choice-switch>

  <div class="container" *ngIf="store.calendarItems$ | async as items">
--- a/apps/sales/src/app/modules/task-calendar/pages/tasks/tasks-view.component.ts
+++ b/apps/sales/src/app/modules/task-calendar/pages/tasks/tasks-view.component.ts
@@ -65,9 +65,8 @@ export class TasksViewComponent implements OnInit {
  }

  openDetails(task: Task) {
-    // TODO open modal dialog
    console.log('Open Dialog for ID ', task.id);
-    const ref = this.modal.open(EditTaskComponent, null);
+    const ref = this.modal.open(EditTaskComponent, { data: task.id });

    // close ref on navigation
  }
--- a/apps/sales/src/app/modules/task-calendar/pipes/displayInfoDTO-to-task.pipe.ts
+++ b/apps/sales/src/app/modules/task-calendar/pipes/displayInfoDTO-to-task.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DisplayInfoDTO } from '@swagger/eis/lib';
+import { Task } from '../defs';
+import { fromDisplayInfoToTask } from '../../../store/branch/task-calendar/mappings';
+
+@Pipe({
+  name: 'displayInfoDTOtoTask',
+})
+export class DisplayInfoDTOtoTaskPipe implements PipeTransform {
+  transform(task: DisplayInfoDTO): Task {
+    return fromDisplayInfoToTask(task);
+  }
+}
--- a/apps/sales/src/app/modules/task-calendar/pipes/index.ts
+++ b/apps/sales/src/app/modules/task-calendar/pipes/index.ts
@@ -2,6 +2,7 @@
 export * from './calendar-items-filter-unique-status.pipe';
 export * from './calendar-items-filter.pipe';
 export * from './create-path-from-blob.pipe';
+export * from './displayInfoDTO-to-task.pipe';
 export * from './exact-hours.pipe';
 export * from './filter-tasks.pipe';
 export * from './header-name.pipe';
@@ -14,4 +15,3 @@ export * from './task-type-count.pipe';
 export * from './time-window-to-string.pipe';
 export * from './truncate-ltext.pipe';
 // end:ng42.barrel
-
--- a/apps/sales/src/app/modules/task-calendar/pipes/task-calendar.pipes.module.ts
+++ b/apps/sales/src/app/modules/task-calendar/pipes/task-calendar.pipes.module.ts
@@ -12,6 +12,7 @@ import { TimeWindowToStringPipe } from './time-window-to-string.pipe';
 import { TaskTypeCountPipe } from './task-type-count.pipe';
 import { TaskInfoCountPipe } from './task-info-count.pipe';
 import { CreatePathFromBlobPipe } from './create-path-from-blob.pipe';
+import { DisplayInfoDTOtoTaskPipe } from './displayInfoDTO-to-task.pipe';

 const pipes = [
  CalendarItemsFilterPipe,
@@ -27,6 +28,7 @@ const pipes = [
  TaskTypeCountPipe,
  TaskInfoCountPipe,
  CreatePathFromBlobPipe,
+  DisplayInfoDTOtoTaskPipe,
 ];

@NgModule({
--- a/apps/sales/src/assets/images/Attachment-Icon.svg
+++ b/apps/sales/src/assets/images/Attachment-Icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="17px" viewBox="0 0 19 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon_attachment</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ISA_tfs_21_Tätigkeitskalender_07_3_Drucken" transform="translate(-36.000000, -575.000000)" fill="#596470" fill-rule="nonzero">
+            <path d="M50.7643906,584.52823 L52.1437062,583.15208 C52.7402556,582.555221 53.0756097,581.747351 53.0756097,580.904229 C53.0756097,580.061882 52.7402556,579.253172 52.1437062,578.656378 C51.5454743,578.061198 50.7357451,577.727453 49.8906838,577.727453 C49.0455577,577.727453 48.2358286,578.061198 47.6376614,578.656378 L44.1713073,582.113915 L44.1713073,582.114756 C44.1662516,582.118959 44.1620387,582.124003 44.156983,582.128206 L42.4372443,583.843998 C41.9603455,584.322341 41.9603455,585.095736 42.4372443,585.574079 C42.9166883,586.049883 43.6918617,586.049883 44.1713057,585.574079 L48.3311465,581.423786 L48.3303039,581.422946 C48.4668032,581.279193 48.6563828,581.196805 48.8543986,581.193447 C49.0532512,581.190926 49.2445198,581.268267 49.3843819,581.408656 C49.5250939,581.548205 49.6026091,581.739044 49.6000853,581.937423 C49.5975575,582.135817 49.5149839,582.32413 49.3700592,582.460314 L45.2102185,586.611468 L45.211061,586.611468 C44.7054953,587.115873 44.0196447,587.399174 43.3042858,587.397474 C42.5889269,587.399155 41.9030547,587.115852 41.3975106,586.611468 C40.3459563,585.559809 40.3459563,583.857447 41.3975106,582.805724 L45.5573513,578.656292 L46.5971066,577.618923 C48.4128981,575.80646 51.3686822,575.807299 53.1836109,577.618923 C54.9994024,579.430547 54.9994024,582.377825 53.1836109,584.189449 L49.7172567,587.648708 C49.7113585,587.654592 49.7054606,587.659636 49.6995624,587.665521 L47.2905864,590.069829 L47.2905864,590.068988 C46.0502917,591.308115 44.3658636,592.003345 42.6109004,592 C40.8557863,592.00335 39.1715092,591.308136 37.9312144,590.068988 C36.6858722,588.826504 36,587.168625 36,585.400904 C36,583.63301 36.685031,581.974356 37.9312144,580.731959 L43.4780282,575.197876 C43.7678905,574.927187 44.22035,574.93558 44.500937,575.214689 C44.7806828,575.494632 44.788254,575.946053 44.5177891,576.23525 L38.9709753,581.769333 C38.0053573,582.731056 37.4652575,584.039135 37.4711677,585.400974 C37.4711677,586.777123 38.0036964,588.066759 38.9709753,589.031754 C39.935752,589.995995 41.2459994,590.534855 42.6109707,590.528958 C43.9902863,590.528958 45.2828892,589.997652 46.2509662,589.032593 L50.7580894,584.535815 L50.7656727,584.529089 L50.7643906,584.52823 Z" id="Icon_attachment"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/assets/images/Camera-Icon.svg
+++ b/apps/sales/src/assets/images/Camera-Icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="738px" height="547px" viewBox="0 0 738 547" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>BG_white_Popup</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ISA_tfs_21_Tätigkeitskalender_07_3_Drucken" transform="translate(-15.000000, -239.000000)" fill="#FFFFFF">
+            <path d="M20,239 L748,239 C750.761424,239 753,241.238576 753,244 L753,781 C753,783.761424 750.761424,786 748,786 L380.958791,786 L380.958791,786 L20,786 C17.2385763,786 15,783.761424 15,781 L15,244 C15,241.238576 17.2385763,239 20,239 Z" id="BG_white_Popup"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/assets/images/Info_Task_Icon.svg
+++ b/apps/sales/src/assets/images/Info_Task_Icon.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="20px" viewBox="0 0 19 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon_info Copy 6</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="ISA_HIMA_Tätigkeitskalender_Filter_Tätigkeiten" transform="translate(-146.000000, -679.000000)" fill="#89949E" fill-rule="nonzero">
+            <path d="M155.5,679.5 L155.770467,679.503777 C160.891879,679.646969 165,683.843986 165,689 C165,694.24647 160.74647,698.5 155.5,698.5 C150.25353,698.5 146,694.24647 146,689 C146,683.75353 150.25353,679.5 155.5,679.5 L155.5,679.5 Z M155.51406,681.141529 L155.202286,681.149094 C153.232685,681.236227 151.364104,682.06565 149.97651,683.47651 C148.491413,684.93723 147.650506,686.93071 147.641528,689.01406 C147.63267,691.09665 148.456529,693.09754 149.92977,694.57004 C151.40227,696.043281 153.40316,696.867116 155.48575,696.858281 L155.48575,696.858281 L155.797524,696.850716 C157.767125,696.763583 159.635706,695.93416 161.0233,694.5233 C162.508397,693.06258 163.349304,691.0691 163.358282,688.98575 C163.36714,686.90316 162.543281,684.90227 161.07004,683.42977 C159.59754,681.956529 157.59665,681.132694 155.51406,681.141529 L155.51406,681.141529 Z M155.499943,687.653603 C156.106309,687.653603 156.59763,688.145665 156.59763,688.75129 L156.59763,693.10058 C156.59763,693.706946 156.106309,694.198267 155.499943,694.198267 C154.893577,694.198267 154.402256,693.706946 154.402256,693.10058 L154.402256,688.75129 C154.402256,688.145665 154.893577,687.653603 155.499943,687.653603 Z M155.499943,683.817313 C156.228764,683.817313 156.81955,684.408099 156.81955,685.13692 C156.81955,685.865741 156.228764,686.455786 155.499943,686.455786 C154.771122,686.455786 154.180336,685.865741 154.180336,685.13692 C154.180336,684.408099 154.771122,683.817313 155.499943,683.817313 Z" id="Icon_info-Copy-6"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/sales/src/scss/_variables.scss
+++ b/apps/sales/src/scss/_variables.scss
@@ -3,6 +3,7 @@ $font-family: 'Open Sans';
 $font-size: 16px;
 $font-weight: normal;
 $font-weight-bold: bold;
+$font-color-gray: #89949e;

 /* COLORS */
 $text-light: #fff;
@@ -22,7 +23,7 @@ $button-font-weight: bold;
 $button-font-size-l: 18px;
 $button-line-height: 19px;
 $button-line-height-l: 21px;
-$button-padding: 20px;
+$button-padding: 12px 20px;
 $button-border-radius: 5px;
 $button-pill-radius: 25px;

@@ -34,4 +35,14 @@ $card-padding: 16px 18px;
 /* MODAL */
 $modal-background-color: #fff;
 $modal-border-radius: 5px;
+$modal-padding: 20px 20px 30px;
 $modal-line-height: 19px;
+$modal-backdrop: rgba(
+  $color: #0f2942,
+  $alpha: 0.9,
+);
+$modal-title-font-size: 20px;
+$modal-title-line-height: 24px;
+$modal-title-text-align: center;
+$modal-title-padding: 0 2rem;
+$modal-font-size: 16px;
--- a/apps/sales/src/scss/modules/_modal.scss
+++ b/apps/sales/src/scss/modules/_modal.scss
@@ -6,33 +6,57 @@
  position: relative;
  overflow: auto;
  z-index: 999;
-  background: rgba($color: #000000, $alpha: 0.3);
+  background: $modal-backdrop;
 }

 .isa-modal {
  font-family: $font-family;
  font-weight: $font-weight;
  font-size: $font-size;
+  background: $modal-background-color;
+  padding: $modal-padding;
+  border-radius: $modal-border-radius;
+
+  .isa-modal-header {
+    font-weight: $font-weight-bold;
+    display: flex;
+  }

  .isa-modal-title {
+    font-size: $modal-title-font-size;
+    line-height: $modal-title-line-height;
+    text-align: $modal-title-text-align;
+    padding: $modal-title-padding;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  .isa-modal-subtitle {
+    font-size: $font-size;
+  }
+
+  .isa-modal-status {
+    font-size: $modal-font-size;
    font-weight: $font-weight-bold;
  }

-  .isa-modal-message {
+  .isa-modal-body {
    line-height: $modal-line-height;
  }
-}

-.isa-modal {
-  .isa-modal-header {
-  }
-
-  .isa-modal-body {
+  .isa-modal-message {
+    font-weight: $font-weight;
  }

  .isa-modal-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
  }

-  .close {
+  .modal-hint {
+    color: $font-color-gray;
+    font-weight: $font-weight-bold;
+    font-size: $modal-title-font-size;
  }
 }
--- a/apps/sales/src/styles.scss
+++ b/apps/sales/src/styles.scss
@@ -10,9 +10,9 @@ body {
  font-family: 'Open Sans';
  margin: 0;
  height: 100vh;
-  xwidth: 100%;
-  xposition: fixed;
-  xoverflow: hidden;
+  width: 100%;
+  position: fixed;
+  overflow: hidden;
  background-color: #e6eff9;

  &.branch {