From 2769001e73c508b76bdb5bb0547349a8711b65b5 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Fri, 8 Mar 2024 17:11:50 +0100
Subject: [PATCH] scss redesign / products new

---
 .../src/app/_helpers/formgroup.initializer.ts |   1 +
 matsen-tool/src/app/app.component.html        |   6 +-
 .../contacts-detail.component.html            | 125 +++----
 .../contacts-detail.component.ts              |  16 +-
 .../app/documents/documents.component.html    |  95 +++---
 matsen-tool/src/app/home/home.component.html  |   4 +-
 .../two-column/two-column.component.html      |   6 +-
 .../partners-detail.component.html            | 315 +++++++++---------
 .../partners-detail.component.ts              |  19 +-
 .../src/app/partners/partners.component.html  | 115 +++----
 .../new-product/new-product.component.html    |  34 +-
 .../new-product/new-product.component.ts      | 103 +++++-
 .../products-detail.component.html            |  46 +--
 .../src/app/products/products.component.html  | 112 +++----
 .../src/app/products/products.component.ts    |  26 +-
 .../src/app/tasks/tasks.component.html        |   2 +-
 matsen-tool/src/assets/scss/_accordion.scss   |  12 +
 matsen-tool/src/assets/scss/_basics.scss      |  31 ++
 matsen-tool/src/assets/scss/_button.scss      |  21 ++
 matsen-tool/src/assets/scss/_form.scss        |  10 +
 matsen-tool/src/assets/scss/_mixins.scss      |   3 +
 matsen-tool/src/assets/scss/_modal.scss       |  30 ++
 matsen-tool/src/styles.scss                   |  90 +----
 23 files changed, 711 insertions(+), 511 deletions(-)
 create mode 100644 matsen-tool/src/assets/scss/_accordion.scss
 create mode 100644 matsen-tool/src/assets/scss/_basics.scss
 create mode 100644 matsen-tool/src/assets/scss/_button.scss
 create mode 100644 matsen-tool/src/assets/scss/_form.scss
 create mode 100644 matsen-tool/src/assets/scss/_mixins.scss
 create mode 100644 matsen-tool/src/assets/scss/_modal.scss

diff --git a/matsen-tool/src/app/_helpers/formgroup.initializer.ts b/matsen-tool/src/app/_helpers/formgroup.initializer.ts
index b308ee1..58ac23c 100644
--- a/matsen-tool/src/app/_helpers/formgroup.initializer.ts
+++ b/matsen-tool/src/app/_helpers/formgroup.initializer.ts
@@ -2,6 +2,7 @@ import {FormGroup} from "@angular/forms";
 
 export class FormGroupInitializer {
     public static initFormGroup(formGroup: FormGroup, model: any) {
+        console.log(model);
         for (const controlName in formGroup.controls) {
             if (formGroup.controls.hasOwnProperty(controlName)) {
                 formGroup.patchValue({[controlName]: model[controlName] ?? null});
diff --git a/matsen-tool/src/app/app.component.html b/matsen-tool/src/app/app.component.html
index c99c58b..3f630eb 100644
--- a/matsen-tool/src/app/app.component.html
+++ b/matsen-tool/src/app/app.component.html
@@ -1,5 +1,5 @@
 <!-- nav -->
-<nav class="navbar navbar-expand navbar-primary bg-primary px-3" *ngIf="user">
+<nav class="navbar navbar-expand navbar-primary px-3" *ngIf="user">
     <div class="container-fluid">
         <div class="navbar-nav">
             <a class="nav-item nav-link" routerLink="/" routerLinkActive="active"
@@ -9,7 +9,7 @@
             </a>
         </div>
         <div class="navbar-nav align-items-center">
-            <button (click)="copyTokenToClipboard()">Copy Token</button>
+            <button class="btn btn-primary me-4" (click)="copyTokenToClipboard()">Copy Token</button>
             <div class="pe-2 me-4 position-relative" data-bs-toggle="dropdown">Benachrichtigungen
                 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                     99+
@@ -27,7 +27,7 @@
 </nav>
 
 <!-- main app container -->
-<div class="app-container" [ngClass]="{ 'bg-light': user }">
+<div class="app-container">
     <alert></alert>
     <router-outlet></router-outlet>
 </div>
diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
index c4cc934..6425730 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
@@ -1,72 +1,75 @@
-<div class="card">
-    <div class="card-body row pb-5">
-        <div class="col-8">
-            <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
-            <dl>
-                <dt *ngIf="contact.position">Position:</dt>
-                <dd *ngIf="contact.position">{{ contact.position }}</dd>
-                <dt *ngIf="contact.phone">Telefon:</dt>
-                <dd *ngIf="contact.phone">{{ contact.phone }}</dd>
-                <dt *ngIf="contact.email">E-Mail:</dt>
-                <dd *ngIf="contact.email"><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
-                <dt *ngIf="contact.birthday">Geburtstag:</dt>
-                <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
-            </dl>
-        </div>
-        <div class="col-4">
-            <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" ngSrc="{{contact.imageUrl}}" width="247"
-                 height="94"
-                 alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
+<div class="spt-container">
+    <div class="card">
+        <div class="card-body row pb-5">
+            <div class="col-8">
+                <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
+                <dl>
+                    <dt *ngIf="contact.position">Position:</dt>
+                    <dd *ngIf="contact.position">{{ contact.position }}</dd>
+                    <dt *ngIf="contact.phone">Telefon:</dt>
+                    <dd *ngIf="contact.phone">{{ contact.phone }}</dd>
+                    <dt *ngIf="contact.email">E-Mail:</dt>
+                    <dd *ngIf="contact.email"><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
+                    <dt *ngIf="contact.birthday">Geburtstag:</dt>
+                    <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
+                </dl>
+            </div>
+            <div class="col-4">
+                <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined" ngSrc="{{contact.imageUrl}}" width="247"
+                     height="94"
+                     alt="{{contact.firstName}} {{contact.lastName}}" title="{{contact.firstName}} {{contact.lastName}}"/>
+            </div>
+            <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
+                  (click)="openModalEditContact()"></span>
         </div>
-        <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"
-              (click)="openModalEditContact()"></span>
     </div>
 </div>
-
-<div class="posts">
-    <div class="d-flex justify-content-between align-items-start">
-        <h2>Notizen</h2>
-        <button (click)="openModalNewPosting()">Neue Notiz</button>
-    </div>
-    <div class="post mb-3" *ngFor="let post of posts">
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>{{ post.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                    <p>{{ post.ownerName }}</p>
-                </div>
-                <div>
-                    <h3>{{ post.headline }}</h3>
-                    <p>{{ post.message }}</p>
-                </div>
-                <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool"
-                      data-action="edit" (click)="openModalEditPosting(post)"></span>
-            </div>
+<div class="spt-container">
+    <div class="posts">
+        <div class="d-flex justify-content-between align-items-start">
+            <h2>Notizen</h2>
+            <button class="btn btn-primary" (click)="openModalNewPosting()">Neue Notiz</button>
         </div>
-        <div class="card ms-5" *ngFor="let comment of post.comments">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                    <p>{{ comment.ownerName }}</p>
+        <div class="post mb-3" *ngFor="let post of posts">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>{{ post.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                        <p>{{ post.ownerName }}</p>
+                    </div>
+                    <div>
+                        <h3>{{ post.headline }}</h3>
+                        <p>{{ post.message }}</p>
+                    </div>
+                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                          data-action="edit" (click)="openModalEditPosting(post)"></span>
                 </div>
-                <div>
-                    <p>{{ comment.message }}</p>
+            </div>
+            <div class="card ms-5" *ngFor="let comment of post.comments">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                        <p>{{ comment.ownerName }}</p>
+                    </div>
+                    <div>
+                        <p>{{ comment.message }}</p>
+                    </div>
+                    <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                          data-action="edit" (click)="openModalEditComment(comment)"></span>
                 </div>
-                <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool"
-                      data-action="edit" (click)="openModalEditComment(comment)"></span>
             </div>
-        </div>
 
-        <div class="d-flex justify-content-end">
-            <span class="badge bg-secondary" (click)="openModalNewComment(post)">Kommentieren</span>
+            <div class="d-flex justify-content-end mt-1">
+                <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">Kommentieren</span>
+            </div>
         </div>
+        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+                       [pageSizeOptions]="[10,20,30]"
+                       [length]="postsLength"
+                       (page)="postsHandlePageEvent($event)"
+                       [pageSize]="postsPageSize"
+                       [pageIndex]="postsPageIndex"
+                       showFirstLastButtons>
+        </mat-paginator>
     </div>
-    <mat-paginator *ngIf="posts.length > 0" class="mb-4"
-                   [pageSizeOptions]="[10,20,30]"
-                   [length]="postsLength"
-                   (page)="postsHandlePageEvent($event)"
-                   [pageSize]="postsPageSize"
-                   [pageIndex]="postsPageIndex"
-                   showFirstLastButtons>
-    </mat-paginator>
 </div>
diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
index a9da64d..4d4f52b 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
@@ -7,7 +7,7 @@ import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/pagin
 import {MatTableDataSource} from "@angular/material/table";
 import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
 import {ModalComponent} from "@app/_components/modal/modal.component";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {User} from "@app/_models";
@@ -37,6 +37,10 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     protected postsPageSize: number;
     protected postsPageIndex: number;
 
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
+
     constructor(
         private contactService: ContactService,
         private accountService: AccountService,
@@ -110,7 +114,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewPosting() {
-        const modalRefPosting = this.modalService.open(NewPostingComponent);
+        const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions);
         let posting: PostJsonld = {} as PostJsonld;
         posting.contact = this.contact.id ?? null;
         posting.partner = this.contact.partner ?? null;
@@ -124,7 +128,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewComment(post: PostJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         let comment: CommentJsonld = {} as CommentJsonld;
         comment.post = post.id ?? null;
         modalRefComment.componentInstance.comment = comment;
@@ -137,7 +141,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditPosting(post: PostJsonld) {
-        const modalRefPostingEdit = this.modalService.open(NewPostingComponent);
+        const modalRefPostingEdit = this.modalService.open(NewPostingComponent, this.modalOptions);
         modalRefPostingEdit.componentInstance.posting = post;
         modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -149,7 +153,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
 
     openModalEditComment(comment: CommentJsonld) {
         console.log(comment);
-        const modalRefComment = this.modalService.open(NewCommentComponent);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         modalRefComment.componentInstance.comment = comment;
         modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -160,7 +164,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditContact() {
-        const modalRef = this.modalService.open(NewContactComponent);
+        const modalRef = this.modalService.open(NewContactComponent, this.modalOptions);
         modalRef.componentInstance.contact = this.contact;
         modalRef.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
diff --git a/matsen-tool/src/app/documents/documents.component.html b/matsen-tool/src/app/documents/documents.component.html
index 8a4a23a..31324bb 100644
--- a/matsen-tool/src/app/documents/documents.component.html
+++ b/matsen-tool/src/app/documents/documents.component.html
@@ -1,52 +1,53 @@
-<div class="d-flex justify-content-between align-items-start">
-    <h2>Dokumente</h2>
-    <button (click)="openModalNewDocument()">Neues Dokument</button>
-</div>
-<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-       class="mat-elevation-z8">
-
-    <ng-container matColumnDef="pos">
-        <th mat-header-cell *matHeaderCellDef>
-            Nr.
-        </th>
-        <td mat-cell
-            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
-        </td>
-    </ng-container>
+<div class="spt-container">
+    <div class="d-flex justify-content-between align-items-start">
+        <h2>Dokumente</h2>
+        <button class="btn btn-primary" (click)="openModalNewDocument()">Neues Dokument</button>
+    </div>
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+           class="mat-elevation-z8 mb-3">
 
-    <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Dokument sortieren">
-            Dokument
-        </th>
-        <td mat-cell *matCellDef="let element"><span (click)="navigateToDocumentFile(element)">{{ element.name }}</span>
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="pos">
+            <th mat-header-cell *matHeaderCellDef>
+                Nr.
+            </th>
+            <td mat-cell
+                *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Typ sortieren">
-            Typ
-        </th>
-        <td mat-cell *matCellDef="let element">{{ element.storage }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Dokument sortieren">
+                Dokument
+            </th>
+            <td mat-cell *matCellDef="let element"><span (click)="navigateToDocumentFile(element)">{{ element.name }}</span>
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Hochgeladen am sortieren">
-            Hochgeladen am
-        </th>
-        <td mat-cell *matCellDef="let element"><a href="{{ element.number }}" target="_blank">{{ element.website }}</a>
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Typ sortieren">
+                Typ
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.storage }}
+            </td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+        <ng-container matColumnDef="date">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Hochgeladen am sortieren">
+                Hochgeladen am
+            </th>
+            <td mat-cell *matCellDef="let element"><a href="{{ element.number }}" target="_blank">{{ element.website }}</a>
+            </td>
+        </ng-container>
 
-<mat-paginator class="mb-4"
-               [pageSizeOptions]="[10,25,50]"
-               [length]="length"
-               (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
-               showFirstLastButtons>
-</mat-paginator>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="rounded-1"
+                   [pageSizeOptions]="[10,25,50]"
+                   [length]="length"
+                   (page)="handlePageEvent($event)"
+                   [pageSize]="pageSize"
+                   [pageIndex]="pageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
+</div>
diff --git a/matsen-tool/src/app/home/home.component.html b/matsen-tool/src/app/home/home.component.html
index 52fc91e..3664559 100644
--- a/matsen-tool/src/app/home/home.component.html
+++ b/matsen-tool/src/app/home/home.component.html
@@ -76,7 +76,7 @@
                 <div class="pt-3 pe-5 position-relative">
                     <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
                         but revealed when the user activates the relevant trigger.</p>
-                    <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
                 </div>
             </div>
         </div>
@@ -95,7 +95,7 @@
                 <div class="pt-3 pe-5 position-relative">
                     <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
                         but revealed when the user activates the relevant trigger.</p>
-                    <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
                 </div>
             </div>
         </div>
diff --git a/matsen-tool/src/app/layout/two-column/two-column.component.html b/matsen-tool/src/app/layout/two-column/two-column.component.html
index 44204e5..a1bce63 100644
--- a/matsen-tool/src/app/layout/two-column/two-column.component.html
+++ b/matsen-tool/src/app/layout/two-column/two-column.component.html
@@ -1,5 +1,5 @@
 <div class="row ps-2">
-    <div class="col-2 pt-2" style="background: rgba(255,0,0,.7);">
+    <div class="col-2 pt-2 spt-sidebar">
         <ul class="nav flex-column">
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/customer" routerLinkActive="active">
@@ -46,8 +46,8 @@
         </ul>
     </div>
     <div class="col-10">
-        <div class="pe-3">
-            <button (click)="goBack()">Zurück</button>
+        <div class="pe-3 pt-3">
+            <button class="btn btn-secondary mb-3" (click)="goBack()">Zurück</button>
             <router-outlet></router-outlet>
         </div>
     </div>
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
index 8556bcd..2384203 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
@@ -1,63 +1,67 @@
-<div class="card">
-    <div class="card-body row">
-        <div class="col-4">
-            <h1>{{ partner.name }}</h1>
-            <p>{{ partner.street }} {{ partner.streetNo }}<br/>
-                {{ partner.zip }} {{ partner.city }}<br/>
-                {{ partner.country }}</p>
-            <p>Sprache: Deutsch</p>
-        </div>
-        <div class="col-4">
-            <h2>10002</h2>
-            <dl>
-                <dt>Telefon:</dt>
-                <dd>0177 289 23 02</dd>
-                <dt>Website:</dt>
-                <dd><a href="{{partner.website}}" target="_blank">{{ partner.website }}</a></dd>
-                <dt>Streckenpunkt:</dt>
-                <dd>AT-Salzburg</dd>
-                <dt>Geschäftsbuchungsgruppe:</dt>
-                <dd>DE-EU</dd>
-                <dt>MwSt.-Geschäftsbuchungsgruppe:</dt>
-                <dd>DE-DE</dd>
-                <dt>Kreditlimit:</dt>
-                <dd>50.000 €</dd>
-            </dl>
-        </div>
-        <div class="col-4">
-            <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}" width="247"
-                 height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
+<div class="spt-container">
+    <div class="card">
+        <div class="card-body row">
+            <div class="col-4">
+                <h1>{{ partner.name }}</h1>
+                <p>{{ partner.street }} {{ partner.streetNo }}<br/>
+                    {{ partner.zip }} {{ partner.city }}<br/>
+                    {{ partner.country }}</p>
+                <p>Sprache: Deutsch</p>
+            </div>
+            <div class="col-4">
+                <h2>10002</h2>
+                <dl>
+                    <dt>Telefon:</dt>
+                    <dd>0177 289 23 02</dd>
+                    <dt>Website:</dt>
+                    <dd><a href="{{partner.website}}" target="_blank">{{ partner.website }}</a></dd>
+                    <dt>Streckenpunkt:</dt>
+                    <dd>AT-Salzburg</dd>
+                    <dt>Geschäftsbuchungsgruppe:</dt>
+                    <dd>DE-EU</dd>
+                    <dt>MwSt.-Geschäftsbuchungsgruppe:</dt>
+                    <dd>DE-DE</dd>
+                    <dt>Kreditlimit:</dt>
+                    <dd>50.000 €</dd>
+                </dl>
+            </div>
+            <div class="col-4">
+                <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined" src="{{partner.logoUrl}}" width="247"
+                     height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
+            </div>
         </div>
     </div>
 </div>
-<div class="contacts">
-    <div class="d-flex justify-content-between align-items-start">
-        <h2>Kontakte</h2>
-        <button (click)="openModalNewContact()">Neuer Kontakt</button>
-    </div>
-    <div class="row">
-        <div class="col-4" *ngFor="let contact of contacts">
-            <div class="card">
-                <div class="card-body row">
-                    <div class="col-8">
-                        <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
-                        <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
-                            {{ contact.phone }}<br/>
-                            {{ contact.position }}</p>
-                    </div>
-                    <div class="col-4">
-                        <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
-                             ngSrc="{{contact.imageUrl}}" width="247" height="94"
-                             alt="{{contact.firstName}} {{contact.lastName}}"
-                             title="{{contact.firstName}} {{contact.lastName}}"/>
+<div class="spt-container">
+    <div class="contacts">
+        <div class="d-flex justify-content-between align-items-start">
+            <h2>Kontakte</h2>
+            <button class="btn btn-primary" (click)="openModalNewContact()">Neuer Kontakt</button>
+        </div>
+        <div class="row">
+            <div class="col-4" *ngFor="let contact of contacts">
+                <div class="card">
+                    <div class="card-body row">
+                        <div class="col-8">
+                            <h2>{{ contact.firstName }} {{ contact.lastName }}</h2>
+                            <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
+                                {{ contact.phone }}<br/>
+                                {{ contact.position }}</p>
+                        </div>
+                        <div class="col-4">
+                            <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
+                                 ngSrc="{{contact.imageUrl}}" width="247" height="94"
+                                 alt="{{contact.firstName}} {{contact.lastName}}"
+                                 title="{{contact.firstName}} {{contact.lastName}}"/>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="d-flex justify-content-end mb-4">
-                <span (click)="navigateToContactDetails(contact)" class="badge bg-secondary">Details</span>
+                <div class="d-flex justify-content-end mt-1 mb-4">
+                    <span role="button" (click)="navigateToContactDetails(contact)" class="badge bg-secondary p-2">Details</span>
+                </div>
             </div>
         </div>
-        <mat-paginator *ngIf="contacts.length > 0" class="mb-4"
+        <mat-paginator *ngIf="contacts.length > 0" class="rounded-1"
                        [pageSizeOptions]="[6,12,18]"
                        [length]="contactsLength"
                        (page)="contactsHandlePageEvent($event)"
@@ -67,117 +71,130 @@
         </mat-paginator>
     </div>
 </div>
-
-<div class="posts">
-    <div class="d-flex justify-content-between align-items-start">
-        <h2>Kunden Details</h2>
-    </div>
-    <div class="card mb-3">
-        <div class="card-body">
-            <div>
-                <h3>Viel Platz für Freitext</h3>
-                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+<div class="spt-container">
+    <div class="posts">
+        <div class="d-flex justify-content-between align-items-start">
+            <h2>Kunden Details</h2>
+        </div>
+        <div class="card mb-3">
+            <div class="card-body">
+                <div>
+                    <h3>Viel Platz für Freitext</h3>
+                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+                        ut
+                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+                        dolores
+                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+                        ut
+                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+                        dolores
+                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+                        amet.</p>
+                </div>
             </div>
         </div>
     </div>
 </div>
-
-<div class="posts spt-accordion">
-    <div class="d-flex justify-content-between align-items-start">
-        <h2>Aufgaben</h2>
-        <button (click)="openModalNewTask()">Neue Aufgabe</button>
-    </div>
-    <div class="card mb-3 p-3">
-        <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false"
-             aria-controls="collapseExample">
-            <h3 class="m-0">Matsen AG</h3>
-            <span class="info d-flex position-absolute">
-                    <span class="due-date">01.10.2023</span>
-                    <span class="importance" data-importance="1"></span>
-                </span>
-            <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
+<div class="spt-container">
+    <div class="spt-accordion">
+        <div class="d-flex justify-content-between align-items-start">
+            <h2>Aufgaben</h2>
+            <button class="btn btn-primary" (click)="openModalNewTask()">Neue Aufgabe</button>
         </div>
-        <div class="collapse" id="collapseExample">
-            <div class="pt-3 pe-5 position-relative">
-                <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default but
-                    revealed when the user activates the relevant trigger.</p>
-                <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+        <div class="card mb-3 p-3">
+            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample"
+                 aria-expanded="false"
+                 aria-controls="collapseExample">
+                <h3 class="m-0">Matsen AG</h3>
+                <span class="info d-flex position-absolute">
+                        <span class="due-date">01.10.2023</span>
+                        <span class="importance" data-importance="1"></span>
+                    </span>
+                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
+            </div>
+            <div class="collapse" id="collapseExample">
+                <div class="pt-3 pe-5 position-relative">
+                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
+                        but
+                        revealed when the user activates the relevant trigger.</p>
+                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="card mb-3 p-3">
-        <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
-             aria-expanded="false" aria-controls="collapseExample2">
-            <h3 class="m-0">Matsen AG</h3>
-            <span class="info d-flex position-absolute">
-                    <span class="due-date">01.10.2023</span>
-                    <span class="importance" data-importance="1"></span>
-                </span>
-            <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
-        </div>
-        <div class="collapse" id="collapseExample2">
-            <div class="pt-3 pe-5 position-relative">
-                <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default but
-                    revealed when the user activates the relevant trigger.</p>
-                <span class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit"></span>
+        <div class="card mb-3 p-3">
+            <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample2"
+                 aria-expanded="false" aria-controls="collapseExample2">
+                <h3 class="m-0">Matsen AG</h3>
+                <span class="info d-flex position-absolute">
+                        <span class="due-date">01.10.2023</span>
+                        <span class="importance" data-importance="1"></span>
+                    </span>
+                <h2 class="m-0">Wichtige Info: Unbedingt melden!</h2>
+            </div>
+            <div class="collapse" id="collapseExample2">
+                <div class="pt-3 pe-5 position-relative">
+                    <p class="m-0">Some placeholder content for the collapse component. This panel is hidden by default
+                        but
+                        revealed when the user activates the relevant trigger.</p>
+                    <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"></span>
+                </div>
             </div>
         </div>
+        <!--    <mat-paginator class="mb-4" [length]="tasksLength"-->
+        <!--                   (page)="tasksHandlePageEvent($event)"-->
+        <!--                   [pageSize]="tasksPageSize"-->
+        <!--                   [pageIndex]="tasksPageIndex"-->
+        <!--                   showFirstLastButtons>-->
+        <!--    </mat-paginator>-->
     </div>
-<!--    <mat-paginator class="mb-4" [length]="tasksLength"-->
-<!--                   (page)="tasksHandlePageEvent($event)"-->
-<!--                   [pageSize]="tasksPageSize"-->
-<!--                   [pageIndex]="tasksPageIndex"-->
-<!--                   showFirstLastButtons>-->
-<!--    </mat-paginator>-->
 </div>
-
-<div class="posts">
-    <div class="d-flex justify-content-between align-items-start">
-        <h2>Notizen</h2>
-        <button (click)="openModalNewPosting()">Neue Notiz</button>
-    </div>
-    <div class="post mb-3" *ngFor="let post of posts">
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>{{ post.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                    <p>{{ post.ownerName }}</p>
-                </div>
-                <div>
-                    <h3>{{ post.headline }}</h3>
-                    <p>{{ post.message }}</p>
-                </div>
-                <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditPosting(post)"></span>
-            </div>
+<div class="spt-container">
+    <div class="posts">
+        <div class="d-flex justify-content-between align-items-start">
+            <h2>Notizen</h2>
+            <button class="btn btn-primary" (click)="openModalNewPosting()">Neue Notiz</button>
         </div>
-        <div class="card ms-5" *ngFor="let comment of post.comments">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center">
-                    <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                    <p>{{ comment.ownerName }}</p>
+        <div class="post mb-3" *ngFor="let post of posts">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>{{ post.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                        <p>{{ post.ownerName }}</p>
+                    </div>
+                    <div>
+                        <h3>{{ post.headline }}</h3>
+                        <p>{{ post.message }}</p>
+                    </div>
+                    <span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                          data-action="edit" (click)="openModalEditPosting(post)"></span>
                 </div>
-                <div>
-                    <p>{{ comment.message }}</p>
+            </div>
+            <div class="card ms-5" *ngFor="let comment of post.comments">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                        <p>{{ comment.ownerName }}</p>
+                    </div>
+                    <div>
+                        <p>{{ comment.message }}</p>
+                    </div>
+                    <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                          data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                 </div>
-                <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil" data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
             </div>
-        </div>
 
-        <div class="d-flex justify-content-end">
-            <span class="badge bg-secondary" (click)="openModalNewComment(post)">Kommentieren</span>
+            <div class="d-flex justify-content-end mt-1">
+                <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">Kommentieren</span>
+            </div>
         </div>
+        <mat-paginator *ngIf="posts.length > 0" class="rounded-1"
+                       [pageSizeOptions]="[10,20,30]"
+                       [length]="postsLength"
+                       (page)="postsHandlePageEvent($event)"
+                       [pageSize]="postsPageSize"
+                       [pageIndex]="postsPageIndex"
+                       showFirstLastButtons>
+        </mat-paginator>
     </div>
-    <mat-paginator *ngIf="posts.length > 0" class="mb-4"
-                   [pageSizeOptions]="[10,20,30]"
-                   [length]="postsLength"
-                   (page)="postsHandlePageEvent($event)"
-                   [pageSize]="postsPageSize"
-                   [pageIndex]="postsPageIndex"
-                   showFirstLastButtons>
-    </mat-paginator>
-</div>
\ No newline at end of file
+</div>
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
index 3e3447b..db1f126 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
@@ -1,5 +1,5 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {ModalComponent} from "@app/_components/modal/modal.component";
 import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -66,6 +66,10 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
 
     protected readonly ModalComponent = ModalComponent;
 
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
+
     constructor(
         private router: Router,
         private accountService: AccountService,
@@ -192,7 +196,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewContact() {
-        const modalRefContact = this.modalService.open(NewContactComponent);
+        const modalRefContact = this.modalService.open(NewContactComponent, this.modalOptions);
         let contact: ContactJsonld = {} as ContactJsonld;
         contact.partner = this.partner.id ?? null;
         modalRefContact.componentInstance.contact = contact;
@@ -205,7 +209,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewPosting() {
-        const modalRefPosting = this.modalService.open(NewPostingComponent);
+        console.log(this.modalOptions);
+        const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions);
         let posting: PostJsonld = {} as PostJsonld;
         posting.partner = this.partner.id ?? null;
         modalRefPosting.componentInstance.posting = posting;
@@ -218,7 +223,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalNewComment(post: PostJsonld) {
-        const modalRefComment = this.modalService.open(NewCommentComponent);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         let comment: CommentJsonld = {} as CommentJsonld;
         comment.post = post.id ?? null;
         modalRefComment.componentInstance.comment = comment;
@@ -231,7 +236,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditPosting(post: PostJsonld) {
-        const modalRefPostingEdit = this.modalService.open(NewPostingComponent);
+        const modalRefPostingEdit = this.modalService.open(NewPostingComponent, this.modalOptions);
         modalRefPostingEdit.componentInstance.posting = post;
         modalRefPostingEdit.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -243,7 +248,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
 
     openModalEditComment(comment: CommentJsonld) {
         console.log(comment);
-        const modalRefComment = this.modalService.open(NewCommentComponent);
+        const modalRefComment = this.modalService.open(NewCommentComponent, this.modalOptions);
         modalRefComment.componentInstance.comment = comment;
         modalRefComment.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
             if (modalStatus === ModalStatus.Submitted) {
@@ -255,7 +260,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
 
     openModalNewTask() {
         // TODO
-        const modalRef = this.modalService.open(ModalComponent);
+        const modalRef = this.modalService.open(ModalComponent, this.modalOptions);
         modalRef.componentInstance.dynamicComponent = NewTaskComponent;
     }
 }
diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html
index 073c9f1..6bb80d5 100644
--- a/matsen-tool/src/app/partners/partners.component.html
+++ b/matsen-tool/src/app/partners/partners.component.html
@@ -1,63 +1,64 @@
-<div class="d-flex justify-content-between align-items-start">
-    <h2>{{ partnerName }}</h2>
-    <button (click)="openModalNewPartner()">Neuer {{ partnerNameOne }}</button>
-</div>
-<table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-       class="mat-elevation-z8">
+<div class="spt-container">
+    <div class="d-flex justify-content-between align-items-start">
+        <h2>{{ partnerName }}</h2>
+        <button class="btn btn-primary" (click)="openModalNewPartner()">Neuer {{ partnerNameOne }}</button>
+    </div>
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+           class="mat-elevation-z8 mb-3">
 
-    <ng-container matColumnDef="pos">
-        <th mat-header-cell *matHeaderCellDef>
-            Nr.
-        </th>
-        <td mat-cell
-            *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="pos">
+            <th mat-header-cell *matHeaderCellDef>
+                Nr.
+            </th>
+            <td mat-cell
+                *matCellDef="let element">{{ (pageSize * pageIndex) + dataSource.filteredData.indexOf(element) + 1 }}
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="image">
-        <th mat-header-cell *matHeaderCellDef>
-            Logo
-        </th>
-        <td mat-cell *matCellDef="let element">
-            <img src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40" height="40" />
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="image">
+            <th mat-header-cell *matHeaderCellDef>
+                Logo
+            </th>
+            <td mat-cell *matCellDef="let element">
+                <img role="button" src="{{ element.logoUrl }}" (click)="navigateToPartnerDetails(element)" width="40" height="40" />
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
-            Partner
-        </th>
-        <td mat-cell *matCellDef="let element"><span
-                (click)="navigateToPartnerDetails(element)">{{ element.name }}</span></td>
-    </ng-container>
+        <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
+                Partner
+            </th>
+            <td mat-cell *matCellDef="let element"><span role="button"
+                    (click)="navigateToPartnerDetails(element)">{{ element.name }}</span></td>
+        </ng-container>
 
-    <ng-container matColumnDef="address">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="address" sortActionDescription="Nach Adresse sortieren">
-            Adresse
-        </th>
-        <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
-            <br/>{{ element.zip }} {{ element.city }}
-            <br/>{{ element.country }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="address">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header="address" sortActionDescription="Nach Adresse sortieren">
+                Adresse
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.street }} {{ element.streetNo }}
+                <br/>{{ element.zip }} {{ element.city }}
+                <br/>{{ element.country }}
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="website">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Website sortieren">
-            Website
-        </th>
-        <td mat-cell *matCellDef="let element"><a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="website">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Website sortieren">
+                Website
+            </th>
+            <td mat-cell *matCellDef="let element"><a href="{{ element.website }}" target="_blank">{{ element.website }}</a>
+            </td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
-
-<mat-paginator class="mb-4"
-               [pageSizeOptions]="[10,25,50]"
-               [length]="length"
-               (page)="handlePageEvent($event)"
-               [pageSize]="pageSize"
-               [pageIndex]="pageIndex"
-               showFirstLastButtons>
-</mat-paginator>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="rounded-1"
+                   [pageSizeOptions]="[10,25,50]"
+                   [length]="length"
+                   (page)="handlePageEvent($event)"
+                   [pageSize]="pageSize"
+                   [pageIndex]="pageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
+</div>
\ No newline at end of file
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.html b/matsen-tool/src/app/products/new-product/new-product.component.html
index daed989..4712683 100644
--- a/matsen-tool/src/app/products/new-product/new-product.component.html
+++ b/matsen-tool/src/app/products/new-product/new-product.component.html
@@ -1 +1,33 @@
-<p>new-product works!</p>
+<h2>Neues Produkt</h2>
+<div class="spt-form">
+    <form [formGroup]="productForm" (ngSubmit)="onSubmit()">
+        <div class="mb-3">
+            <label for="name" class="form-label">Überschrift:</label>
+            <input type="text" class="form-control" id="name" formControlName="name" />
+            <div class="form-text" *ngIf="productForm.get('name')?.invalid && productForm.get('name')?.touched">
+                Überschrift ist erforderlich.
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="description" class="form-label">Nachricht:</label>
+            <input type="text" class="form-control" id="description" formControlName="description" />
+            <div class="form-text" *ngIf="productForm.get('description')?.invalid && productForm.get('description')?.touched">
+                Nachricht ist erforderlich.
+            </div>
+        </div>
+
+        <div class="mb-3">
+            <label for="image" class="form-label">Bild hochladen:</label>
+            <input type="file" class="form-control" id="image" (change)="onFileSelected($event)" accept="image/*" />
+        </div>
+
+        <div class="mb-3">
+            <div class="delete-image" (click)="onDeleteImage()">
+                <img *ngIf="product.imageUrl !== null" src="{{product.imageUrl}}" width="40" height="40" />
+            </div>
+        </div>
+
+        <button type="submit" class="btn btn-primary" [disabled]="productForm.invalid">Abschicken</button>
+    </form>
+</div>
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.ts b/matsen-tool/src/app/products/new-product/new-product.component.ts
index fd8f40d..4e9dd33 100644
--- a/matsen-tool/src/app/products/new-product/new-product.component.ts
+++ b/matsen-tool/src/app/products/new-product/new-product.component.ts
@@ -1,10 +1,103 @@
-import { Component } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {MediaService, ProductJsonld, ProductService} from "@app/core/api/v1";
+import {ModalStatus} from "@app/_helpers/modal.states";
+import {FormGroup} from "@angular/forms";
+import {Subscription} from "rxjs";
+import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
+import {productForm} from "@app/_forms/apiForms";
+import {ApiConverter} from "@app/_helpers/api.converter";
+import {TranslateService} from "@ngx-translate/core";
 
 @Component({
-  selector: 'app-new-product',
-  templateUrl: './new-product.component.html',
-  styleUrl: './new-product.component.scss'
+    selector: 'app-new-product',
+    templateUrl: './new-product.component.html',
+    styleUrl: './new-product.component.scss'
 })
-export class NewProductComponent {
+export class NewProductComponent implements OnInit {
+    @Input() public product!: ProductJsonld;
+    @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
+
+    protected productForm: FormGroup;
+    protected productSub: Subscription;
+
+    protected selectedImage: File | null;
+    protected mediaSub: Subscription;
+
+    constructor(
+        private productService: ProductService,
+        private mediaService: MediaService,
+        private translateService: TranslateService
+    ) {
+        this.productForm = productForm;
+        this.productSub = new Subscription();
+
+        this.selectedImage = null;
+        this.mediaSub = new Subscription();
+    }
+
+    ngOnInit(): void {
+        this.productForm = FormGroupInitializer.initFormGroup(this.productForm, this.product);
+    }
+
+    onSubmit() {
+        if (this.selectedImage !== null) {
+            this.mediaSub = this.mediaService.mediasPost(
+                this.selectedImage
+            ).subscribe(
+                data => {
+                    this.productForm.patchValue({"image": data.id});
+                    this.submitForm();
+                }
+            );
+        } else {
+            this.submitForm();
+        }
+    }
+
+    submitForm() {
+        if (this.productForm.valid) {
+            if (this.product.id === null || this.product.id === undefined) {
+                // Create new post
+                this.productSub = this.productService.productsPost(
+                    this.productForm.value as ProductJsonld
+                ).subscribe(
+                    data => {
+                        this.productForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            } else {
+                // Edit post
+                this.productSub = this.productService.productsIdPatch(
+                    ApiConverter.extractId(this.product.id),
+                    this.productForm.value as ProductJsonld
+                ).subscribe(
+                    data => {
+                        this.productForm.reset();
+                        this.submit.emit(ModalStatus.Submitted);
+                    }
+                );
+            }
+        }
+    }
+
+    onFileSelected(event: any) {
+        const file: File = event.target.files[0];
+        if (file) {
+            this.selectedImage = file;
+        }
+    }
+
+    onDeleteImage() {
+        let confirmMessage = "";
+        this.translateService.get('system.delete-image').subscribe((translation: string) => {
+            confirmMessage = translation;
+        });
+        const userConfirmed = window.confirm(confirmMessage);
+        if (userConfirmed) {
+            this.productForm.patchValue({"image": null});
+            this.productForm.patchValue({"imageUrl": null});
+        }
+    }
 
 }
diff --git a/matsen-tool/src/app/products/products-detail/products-detail.component.html b/matsen-tool/src/app/products/products-detail/products-detail.component.html
index bccd24a..fb63ac8 100644
--- a/matsen-tool/src/app/products/products-detail/products-detail.component.html
+++ b/matsen-tool/src/app/products/products-detail/products-detail.component.html
@@ -1,25 +1,27 @@
-<div class="card">
-    <div class="card-body row">
-        <div class="col-8">
-            <h1>{{ product.name }}</h1>
-            <p>{{ product.description }}</p>
-            <dl>
-                <dt>Lagerbestand:</dt>
-                <dd>376512 KG</dd>
-                <dt>Gesperrt:</dt>
-                <dd>Nein</dd>
-                <dt>Einkaufseinheitencode:</dt>
-                <dd>Dose</dd>
-                <dt>Verkaufseinkaufseinheitencode:</dt>
-                <dd>Dose</dd>
-                <dt>Zollposition:</dt>
-                <dd>234856372</dd>
-            </dl>
-        </div>
-        <div class="col-4">
-            <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
-                 ngSrc="{{product.imageUrl}}" width="247" height="94"
-                 alt="{{product.name}}" title="{{product.name}}"/>
+<div class="spt-container">
+    <div class="card">
+        <div class="card-body row">
+            <div class="col-8">
+                <h1>{{ product.name }}</h1>
+                <p>{{ product.description }}</p>
+                <dl>
+                    <dt>Lagerbestand:</dt>
+                    <dd>376512 KG</dd>
+                    <dt>Gesperrt:</dt>
+                    <dd>Nein</dd>
+                    <dt>Einkaufseinheitencode:</dt>
+                    <dd>Dose</dd>
+                    <dt>Verkaufseinkaufseinheitencode:</dt>
+                    <dd>Dose</dd>
+                    <dt>Zollposition:</dt>
+                    <dd>234856372</dd>
+                </dl>
+            </div>
+            <div class="col-4">
+                <img *ngIf="product.imageUrl !== null && product.imageUrl !== undefined"
+                     ngSrc="{{product.imageUrl}}" width="247" height="94"
+                     alt="{{product.name}}" title="{{product.name}}"/>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/matsen-tool/src/app/products/products.component.html b/matsen-tool/src/app/products/products.component.html
index 8d249aa..d109fde 100644
--- a/matsen-tool/src/app/products/products.component.html
+++ b/matsen-tool/src/app/products/products.component.html
@@ -1,62 +1,62 @@
-<div class="d-flex justify-content-between align-items-start">
-    <h2>Produkte</h2>
-    <button (click)="openModalNewProduct()">Neues Produkt</button>
-</div>
-<table mat-table [dataSource]="productsDataSource" matSort (matSortChange)="onSortChange($event)"
-       class="mat-elevation-z8">
+<div class="spt-container">
+    <div class="d-flex justify-content-between align-items-start">
+        <h2>Produkte</h2>
+        <button class="btn btn-primary" (click)="openModalNewProduct()">Neues Produkt</button>
+    </div>
+    <table mat-table [dataSource]="productsDataSource" matSort (matSortChange)="onSortChange($event)"
+           class="mat-elevation-z8 mb-3">
 
-    <ng-container matColumnDef="pos">
-        <th mat-header-cell *matHeaderCellDef>
-            Nr.
-        </th>
-        <td mat-cell
-            *matCellDef="let element">{{ (productsPageSize * productPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="pos">
+            <th mat-header-cell *matHeaderCellDef>
+                Nr.
+            </th>
+            <td mat-cell
+                *matCellDef="let element">{{ (productsPageSize * productPageIndex) + productsDataSource.filteredData.indexOf(element) + 1 }}
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="image">
-        <th mat-header-cell *matHeaderCellDef>
-            Logo
-        </th>
-        <td mat-cell *matCellDef="let element">
-            <img src="{{ element.imageUrl }}" (click)="navigateToProductDetails(element)" width="40" height="40" />
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="image">
+            <th mat-header-cell *matHeaderCellDef>
+                Logo
+            </th>
+            <td mat-cell *matCellDef="let element">
+                <img role="button" src="{{ element.imageUrl }}" (click)="navigateToProductDetails(element)" width="40" height="40" />
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Produktname sortieren">
-            Produktname
-        </th>
-        <td mat-cell *matCellDef="let element"><span
-                (click)="navigateToProductDetails(element)">{{ element.name }}</span></td>
-    </ng-container>
+        <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Produktname sortieren">
+                Produktname
+            </th>
+            <td mat-cell *matCellDef="let element"><span role="button"
+                    (click)="navigateToProductDetails(element)">{{ element.name }}</span></td>
+        </ng-container>
 
-    <ng-container matColumnDef="storage">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Lagerbestand sortieren">
-            Lagerbestand
-        </th>
-        <td mat-cell *matCellDef="let element">{{ element.storage }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="storage">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Lagerbestand sortieren">
+                Lagerbestand
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.storage }}
+            </td>
+        </ng-container>
 
-    <ng-container matColumnDef="number">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
-            Nummer
-        </th>
-        <td mat-cell *matCellDef="let element">{{ element.number }}
-        </td>
-    </ng-container>
+        <ng-container matColumnDef="number">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Nummer sortieren">
+                Nummer
+            </th>
+            <td mat-cell *matCellDef="let element">{{ element.number }}
+            </td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
-<!-- Just a quickfix: -->
-<span (click)="navigateToProductDetails('a')">Go to product detail</span>
-<mat-paginator class="mb-4"
-               [pageSizeOptions]="[10,25,50]"
-               [length]="productsLength"
-               (page)="handlePageEvent($event)"
-               [pageSize]="productsPageSize"
-               [pageIndex]="productPageIndex"
-               showFirstLastButtons>
-</mat-paginator>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="rounded-1"
+                   [pageSizeOptions]="[10,25,50]"
+                   [length]="productsLength"
+                   (page)="handlePageEvent($event)"
+                   [pageSize]="productsPageSize"
+                   [pageIndex]="productPageIndex"
+                   showFirstLastButtons>
+    </mat-paginator>
+</div>
diff --git a/matsen-tool/src/app/products/products.component.ts b/matsen-tool/src/app/products/products.component.ts
index 9fe0781..713a3df 100644
--- a/matsen-tool/src/app/products/products.component.ts
+++ b/matsen-tool/src/app/products/products.component.ts
@@ -2,15 +2,17 @@ import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@a
 import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
 import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@angular/material/paginator";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
-import {PartnerJsonld, ProductJsonld, ProductService} from "@app/core/api/v1";
+import {CommentJsonld, ContactJsonld, PartnerJsonld, ProductJsonld, ProductService} from "@app/core/api/v1";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {Router, RouterLink, RouterLinkActive} from "@angular/router";
 import {NgIf} from "@angular/common";
 import {Subscription} from "rxjs";
 import {ModalComponent} from "@app/_components/modal/modal.component";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
 import {NewProductComponent} from "@app/products/new-product/new-product.component";
+import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
+import {ModalStatus} from "@app/_helpers/modal.states";
 
 @Component({
     selector: 'app-products',
@@ -33,6 +35,10 @@ export class ProductsComponent implements OnInit, AfterViewInit {
     protected productsPageSize: number;
     protected productPageIndex: number;
 
+    protected modalOptions: NgbModalOptions = {
+        centered: true
+    };
+
     constructor(
         private router: Router,
         private modalService: NgbModal,
@@ -70,7 +76,6 @@ export class ProductsComponent implements OnInit, AfterViewInit {
                 this.productsDataSource = new MatTableDataSource<ProductJsonld>(this.products);
                 this.productsLength = Number(data["hydra:totalItems"]);
                 this.productsPaginator.length = this.productsLength;
-                console.log(this.products);
             }
         );
     }
@@ -114,13 +119,20 @@ export class ProductsComponent implements OnInit, AfterViewInit {
 
     navigateToProductDetails(element: any) {
         const product: ProductJsonld = element as ProductJsonld;
-        console.log(product.type);
-        console.log(ApiConverter.extractId(product.id));
         this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
     }
 
     openModalNewProduct() {
-        const modalRef = this.modalService.open(ModalComponent);
-        modalRef.componentInstance.dynamicComponent = NewProductComponent;
+        const modalRefProduct = this.modalService.open(NewProductComponent, this.modalOptions);
+        // TODO: Warum muss ich einen leeren String übergeben, damit es funktioniert?
+        let product: ProductJsonld = {} as ProductJsonld;
+        product.name = "";
+        modalRefProduct.componentInstance.product = product;
+        modalRefProduct.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
+            if (modalStatus === ModalStatus.Submitted) {
+                modalRefProduct.dismiss();
+                this.getProductData();
+            }
+        });
     }
 }
diff --git a/matsen-tool/src/app/tasks/tasks.component.html b/matsen-tool/src/app/tasks/tasks.component.html
index 4b93c8f..34c0b7b 100644
--- a/matsen-tool/src/app/tasks/tasks.component.html
+++ b/matsen-tool/src/app/tasks/tasks.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex justify-content-between align-items-start">
     <h2>Aufgaben</h2>
-    <button (click)="openModalNewTask()">Neue Aufgabe</button>
+    <button class="btn btn-primary" (click)="openModalNewTask()">Neue Aufgabe</button>
 </div>
 <p>tasks works!</p>
diff --git a/matsen-tool/src/assets/scss/_accordion.scss b/matsen-tool/src/assets/scss/_accordion.scss
new file mode 100644
index 0000000..24bad03
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_accordion.scss
@@ -0,0 +1,12 @@
+.spt-accordion {
+  .info {
+    right: 0;
+    top: 0;
+  }
+  .due-date {
+
+  }
+  .importance {
+
+  }
+}
diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss
new file mode 100644
index 0000000..99e5d40
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_basics.scss
@@ -0,0 +1,31 @@
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+body {
+  background: #d2d2d2;
+}
+
+.app-container {
+  min-height: 320px;
+  overflow: hidden;
+  background: #d2d2d2;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  width: auto;
+  height: auto;
+}
+
+.navbar-primary {
+  background: #f6f6f6;
+}
+
+.spt-sidebar {
+  background: #b2b2b2;
+}
+
+.spt-container {
+  margin-bottom: 3rem;
+}
diff --git a/matsen-tool/src/assets/scss/_button.scss b/matsen-tool/src/assets/scss/_button.scss
new file mode 100644
index 0000000..b9de3ea
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_button.scss
@@ -0,0 +1,21 @@
+.btn-delete-user {
+  width: 40px;
+  text-align: center;
+  box-sizing: content-box;
+}
+
+[data-type="user-tool"] {
+  cursor: pointer;
+  font-size: 20px;
+  @include transition();
+
+  &:hover {
+    color: green;
+  }
+}
+
+[data-action="edit"] {
+  right: 0;
+  bottom: 0;
+  width: auto;
+}
diff --git a/matsen-tool/src/assets/scss/_form.scss b/matsen-tool/src/assets/scss/_form.scss
new file mode 100644
index 0000000..40b487c
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_form.scss
@@ -0,0 +1,10 @@
+.spt-form {
+  .delete-image {
+    width: 40px;
+    height: 40px;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
\ No newline at end of file
diff --git a/matsen-tool/src/assets/scss/_mixins.scss b/matsen-tool/src/assets/scss/_mixins.scss
new file mode 100644
index 0000000..e2ef09d
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_mixins.scss
@@ -0,0 +1,3 @@
+@mixin transition {
+  transition: all 0.3s ease-out;
+}
\ No newline at end of file
diff --git a/matsen-tool/src/assets/scss/_modal.scss b/matsen-tool/src/assets/scss/_modal.scss
new file mode 100644
index 0000000..10d94b1
--- /dev/null
+++ b/matsen-tool/src/assets/scss/_modal.scss
@@ -0,0 +1,30 @@
+.modal {
+  cursor: not-allowed;
+}
+.modal-dialog {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  cursor: auto;
+}
+.modal-content {
+  padding: 1rem;
+  &:before,
+  &:after {
+    content: "";
+    display: block;
+    width: 30px;
+    height: 3px;
+    position: absolute;
+    right: 0;
+    top: -30px;
+    pointer-events: none;
+    background: #fff;
+    cursor: pointer;
+  }
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+}
\ No newline at end of file
diff --git a/matsen-tool/src/styles.scss b/matsen-tool/src/styles.scss
index 7df6557..c1e3c86 100644
--- a/matsen-tool/src/styles.scss
+++ b/matsen-tool/src/styles.scss
@@ -1,86 +1,8 @@
 /* You can add global styles to this file, and also importApi other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-
-@mixin transition {
-  transition: all 0.3s ease-out;
-}
-
-.app-container {
-  min-height: 320px;
-  overflow: hidden;
-}
-
-.btn-delete-user {
-  width: 40px;
-  text-align: center;
-  box-sizing: content-box;
-}
-
-.spt-accordion {
-  .info {
-    right: 0;
-    top: 0;
-  }
-  .due-date {
-
-  }
-  .importance {
-
-  }
-}
-
-[data-type="user-tool"] {
-  cursor: pointer;
-  font-size: 20px;
-  @include transition();
-
-  &:hover {
-    color: green;
-  }
-}
-
-[data-action="edit"] {
-  right: 0;
-  bottom: 0;
-  width: auto;
-}
-
-.modal-content {
-  padding: 1rem;
-}
-.modal-dialog {
-  &:before {
-    content: "";
-    display: block;
-    background: #fff;
-    width: 30px;
-    height: 30px;
-    position: absolute;
-    right: -30px;
-    top: -30px;
-  }
-}
-
-img {
-  display: block;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-}
-
-.bg-primary {
-  background: #f2f2f2;
-}
-
-.spt-form {
-  .delete-image {
-    width: 40px;
-    height: 40px;
-    img {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
\ No newline at end of file
+@import "assets/scss/mixins";
+@import "assets/scss/basics";
+@import "assets/scss/modal";
+@import "assets/scss/form";
+@import "assets/scss/button";
+@import "assets/scss/accordion";