styling: fonts, colors, paddings

matsen-tool/src/app/_components/layout/two-column/two-column.component.html

@@ -1,74 +1,74 @@
 <div class="row ps-2">
-    <div class="col-2 pt-2 spt-sidebar">
+    <div class="col-2 spt-sidebar">
         <ul class="nav flex-column">
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/customer" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-heart-eyes">
+                    <div class="card-body position-relative" data-cat="customer">
                         <h3 class="position-absolute m-0">{{'basic.customer' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/supplier" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-kiss">
+                    <div class="card-body position-relative" data-cat="supplier">
                         <h3 class="position-absolute m-0">{{'basic.supplier' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/service" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-emoji-smile">
+                    <div class="card-body position-relative" data-cat="service">
                         <h3 class="position-absolute m-0">{{'basic.service' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/product" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-droplet-fill">
+                    <div class="card-body position-relative" data-cat="product">
                         <h3 class="position-absolute m-0">{{'basic.products' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/task" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-list-check">
+                    <div class="card-body position-relative" data-cat="task">
                         <h3 class="position-absolute m-0">{{'basic.tasks' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/document" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-journals">
+                    <div class="card-body position-relative" data-cat="document">
                         <h3 class="position-absolute m-0">{{'basic.documents' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/sale" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-journals">
+                    <div class="card-body position-relative" data-cat="sale">
                         <h3 class="position-absolute m-0">{{'basic.sales' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/profile" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-journals">
+                    <div class="card-body position-relative" data-cat="profile">
                         <h3 class="position-absolute m-0">{{'basic.profile' | translate}}</h3>
                     </div>
                 </a>
             </li>
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/user" routerLinkActive="active">
-                    <div class="card-body position-relative bi bi-journals">
+                    <div class="card-body position-relative" data-cat="user">
                         <h3 class="position-absolute m-0">{{'basic.users' | translate}}</h3>
                     </div>
                 </a>
             </li>
         </ul>
     </div>
-    <div class="col-10 pb-5">
+    <div class="col-10 pb-5 spt-main">
         <div class="pe-3 pt-3">
-            <button class="btn btn-secondary mb-3" (click)="goBack()">{{'basic.back' | translate}}</button>
+            <div class="spt-back-btn mb-4" (click)="goBack()">{{'basic.back' | translate}}</div>
             <router-outlet></router-outlet>
         </div>
     </div>

matsen-tool/src/app/_components/layout/two-column/two-column.component.scss

@@ -1,31 +0,0 @@
-.card {
-  width: 100%;
-  text-decoration: none;
-}
-.card-body {
-  min-height: 50px;
-  text-transform: uppercase;
-  text-align: right;
-  &.bi {
-    &:before {
-      display: none;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%,-50%);
-      font-size: 50px;
-    }
-  }
-  .active & {
-    min-height: 100px;
-    &.bi {
-      &:before {
-        display: block;
-      }
-    }
-  }
-  h3 {
-    right: 10px;
-    bottom: 10px;
-  }
-}

matsen-tool/src/app/_components/paging/paging.component.html

@@ -1,4 +1,4 @@
-<mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+<mat-paginator *ngIf="dataLength > 0" class=""
                [pageSizeOptions]="pageSizeOptions"
                [length]="dataLength"
                (page)="handlePageEvent($event)"
@@ -7,7 +7,7 @@
                showFirstLastButtons>
 </mat-paginator>
 <ng-content></ng-content>
-<mat-paginator *ngIf="dataLength > 0" class="rounded-1"
+<mat-paginator *ngIf="dataLength > 0" class=""
                [pageSizeOptions]="pageSizeOptions"
                [length]="dataLength"
                (page)="handlePageEvent($event)"

matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html

@@ -1,33 +1,35 @@
 <div class="spt-container">
     <div class="contacts position-relative">
-        <button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}</button>
+        <div class="top-btn">
+            <button class="btn btn-primary" (click)="openModalNewContact()">+ {{ 'basic.new-contact' | translate }}</button>
+        </div>
         <app-paging #pagingComponent
                     [getDataFunction]="getData"
                     [dataSource]="dataSource"
                     [pageSize]="6"
                     [pageSizeOptions]="[6,12,18]"
         >
-            <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"
-                                      src="{{contact.imageUrl}}" width="247" height="94"
-                                     alt="{{contact.firstName}} {{contact.lastName}}"
-                                     title="{{contact.firstName}} {{contact.lastName}}"  />
+            <div class="overflow-hidden">
+                <div class="row">
+                    <div class="col-4 spt-contact-box" *ngFor="let contact of contacts">
+                        <div class="card">
+                            <div class="card-body row">
+                                <div class="col-4">
+                                    <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"
+                                         src="{{contact.imageUrl}}" width="247" height="94"
+                                         alt="{{contact.firstName}} {{contact.lastName}}"
+                                         title="{{contact.firstName}} {{contact.lastName}}"  />
+                                </div>
+                                <div class="col-8">
+                                    <h3>{{ contact.firstName }} {{ contact.lastName }}</h3>
+                                    <p><a href="mailto:{{contact.email}}">{{ contact.email }}</a><br/>
+                                        {{ contact.phone }}<br/>
+                                        {{ contact.position }}</p>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="d-flex justify-content-end mt-1 mb-4">
-                            <span role="button" (click)="navigateToContactDetails(contact)"
-                                  class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
+                        <span role="button" (click)="navigateToContactDetails(contact)"
+                              class="badge bg-secondary p-2">{{ 'basic.details' | translate }}</span>
                     </div>
                 </div>
             </div>

matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html

@@ -1,33 +1,35 @@
 <div class="spt-container">
     <div *ngIf="contact" class="card contacts-detail">
         <div class="card-body row pb-5">
-            <div class="col-8">
-                <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
-                <dl>
-                    <dt *ngIf="contact.position">{{'form.position' | translate}}:</dt>
-                    <dd *ngIf="contact.position">{{ contact.position }}</dd>
-                    <dt *ngIf="contact.phone">{{'form.phone' | translate}}:</dt>
-                    <dd *ngIf="contact.phone">{{ contact.phone }}</dd>
-                    <dt *ngIf="contact.email">{{'form.email' | translate}}:</dt>
-                    <dd *ngIf="contact.email"><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
-                    <dt *ngIf="contact.birthday">{{'form.birthday' | translate}}:</dt>
-                    <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
-                </dl>
+            <div class="spt-col col-8">
+                <div class="row">
+                    <div class="col-6">
+                        <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>
+                        <dl>
+                            <dt *ngIf="contact.position">{{'form.position' | translate}}:</dt>
+                            <dd *ngIf="contact.position">{{ contact.position }}</dd>
+                            <dt *ngIf="contact.phone">{{'form.phone' | translate}}:</dt>
+                            <dd *ngIf="contact.phone">{{ contact.phone }}</dd>
+                            <dt *ngIf="contact.email">{{'form.email' | translate}}:</dt>
+                            <dd *ngIf="contact.email"><a href="mailto:{{contact.email}}">{{ contact.email }}</a></dd>
+                            <dt *ngIf="contact.birthday">{{'form.birthday' | translate}}:</dt>
+                            <dd *ngIf="contact.birthday">{{ contact.birthday | date:'dd.MM.YYYY' }}</dd>
+                        </dl>
+                    </div>
+                    <div class="col-6">
+                        <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
+                            <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
+                        </ul>
+                    </div>
+                </div>
             </div>
-            <div class="col-4">
+            <div class="spt-col col-4 has-image">
                 <img *ngIf="contact.imageUrl !== null && contact.imageUrl !== undefined"  src="{{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 class="card-body row" *ngIf="contactPartnerProducts">
-                <div class="col-12">
-                    <ul *ngFor="let contactPartnerProduct of contactPartnerProducts">
-                        <li><a href="/products/{{this.appHelperService.extractId(contactPartnerProduct.productName)}}">{{contactPartnerProduct.productName}}</a></li>
-                    </ul>
-                </div>
-            </div>
         </div>
     </div>
 </div>

matsen-tool/src/app/_views/documents/document-list/document-list.component.html

@@ -1,11 +1,13 @@
 <div class="spt-container">
-    <button class="btn btn-primary" (click)="openModalNewDocument()">{{ 'basic.new-document' | translate }}</button>
+    <div class="top-btn">
+        <button class="btn btn-primary" (click)="openModalNewDocument()">+ {{ 'basic.new-document' | translate }}</button>
+    </div>
     <app-paging #pagingComponent
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
         <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-               class="mat-elevation-z8 mb-3">
+               class="mat-elevation-z8">
 
             <ng-container matColumnDef="pos">
                 <th mat-header-cell *matHeaderCellDef>

matsen-tool/src/app/_views/home/home.component.html

@@ -11,21 +11,21 @@
             <div class="row pt-4 pb-4 d-flex">
                 <div class="col d-flex">
                     <a class="card" routerLink="/customer" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-emoji-heart-eyes">
+                        <div class="card-body position-relative" data-cat="customer">
                             <h3 class="position-absolute m-0">{{ 'basic.customer' | translate }}</h3>
                         </div>
                     </a>
                 </div>
                 <div class="col d-flex">
                     <a class="card" routerLink="/supplier" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-emoji-kiss">
+                        <div class="card-body position-relative" data-cat="supplier">
                             <h3 class="position-absolute m-0">{{ 'basic.supplier' | translate }}</h3>
                         </div>
                     </a>
                 </div>
                 <div class="col d-flex">
                     <a class="card" routerLink="/service" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-emoji-smile">
+                        <div class="card-body position-relative" data-cat="service">
                             <h3 class="position-absolute m-0">{{ 'basic.service' | translate }}</h3>
                         </div>
                     </a>
@@ -37,21 +37,21 @@
             <div class="row pt-4 pb-4 d-flex">
                 <div class="col d-flex">
                     <a class="card" routerLink="/product" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-droplet-fill">
+                        <div class="card-body position-relative" data-cat="product">
                             <h3 class="position-absolute m-0">{{ 'basic.products' | translate }}</h3>
                         </div>
                     </a>
                 </div>
                 <div class="col d-flex">
                     <a class="card" routerLink="/task" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-list-check">
+                        <div class="card-body position-relative" data-cat="task">
                             <h3 class="position-absolute m-0">{{ 'basic.tasks' | translate }}</h3>
                         </div>
                     </a>
                 </div>
                 <div class="col d-flex">
                     <a class="card" routerLink="/document" routerLinkActive="active">
-                        <div class="card-body position-relative bi bi-journals">
+                        <div class="card-body position-relative" data-cat="document">
                             <h3 class="position-absolute m-0">{{ 'basic.documents' | translate }}</h3>
                         </div>
                     </a>

matsen-tool/src/app/_views/home/home.component.scss

@@ -7,22 +7,87 @@
   .card {
     width: 100%;
     text-decoration: none;
+    border-radius: 0;
+    border: none;
+    border-top: 3px solid #c1c1c1;
   }
   .card-body {
     min-height: 200px;
     text-transform: uppercase;
     text-align: right;
-    &.bi {
-      &:before {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        font-size: 50px;
-      }
+    &:after {
+      content: ">";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background: rgba(229,38,30,1);
+      width: 40px;
+      height: 40px;
+      color: #fff;
+      font-family: Helvetica;
+      font-size: 20px;
+      line-height: 40px;
+      text-align: center;
     }
+    &:before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      width: 95px;
+      height: 95px;
+      border: 2px solid #2b3b44;
+      border-radius: 50%;
+    }
+    &[data-cat="customer"]:before {
+      background: transparent url("/assets/images/icons/customer.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="supplier"]:before {
+      background: transparent url("/assets/images/icons/supplier.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="service"]:before {
+      background: transparent url("/assets/images/icons/service.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="product"]:before {
+      background: transparent url("/assets/images/icons/product.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="task"]:before {
+      background: transparent url("/assets/images/icons/task.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="document"]:before {
+      background: transparent url("/assets/images/icons/document.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="sale"]:before {
+      background: transparent url("/assets/images/icons/sale.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="profile"]:before {
+      background: transparent url("/assets/images/icons/profile.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+    &[data-cat="user"]:before {
+      background: transparent url("/assets/images/icons/user.svg") no-repeat center center;
+      background-size: 50% auto;
+    }
+
+    //&.bi {
+    //  &:before {
+    //    position: absolute;
+    //    left: 50%;
+    //    top: 50%;
+    //    transform: translate(-50%,-50%);
+    //    font-size: 50px;
+    //  }
+    //}
     h3 {
-      right: 10px;
+      left: 30px;
       bottom: 10px;
     }
   }

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -1,12 +1,12 @@
 <div class="spt-container">
-    <button class="btn btn-primary"
-            (click)="openModalNewPartner()">{{ 'basic.new' | translate }} {{ partnerColumnHeadline }}
-    </button>
+    <div class="top-btn">
+        <button class="btn btn-primary" (click)="openModalNewPartner()">+ {{ 'basic.new' | translate }} {{ partnerColumnHeadline }}</button>
+    </div>
     <app-paging #pagingComponent
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8 mb-3">
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
             <ng-container matColumnDef="pos">
                 <th mat-header-cell *matHeaderCellDef>

matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html

@@ -1,31 +1,40 @@
 <div class="spt-container">
     <div *ngIf="partner" 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 class="spt-col col-8">
+                <div class="row">
+                    <div class="col-6">
+                        <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-6">
+                        <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>
+                <div class="card-body row" *ngIf="partner.description">
+                    <div class="col-12">
+                        <p [innerHTML]="appHelperService.getSafeLongtext(partner.description)"></p>
+                    </div>
+                </div>
             </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">
+            <div class="spt-col col-4 has-image">
                 <img *ngIf="partner.logoUrl !== null && partner.logoUrl !== undefined"  src="{{partner.logoUrl}}"
                      width="247"
                      height="94" alt="{{partner.name}}" title="{{partner.name}}"  />
@@ -40,11 +49,6 @@
             <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                   (click)="openModalEditPartner()"></span>
         </div>
-        <div class="card-body row" *ngIf="partner.description">
-            <div class="col-12">
-                <p [innerHTML]="appHelperService.getSafeLongtext(partner.description)"></p>
-            </div>
-        </div>
     </div>
 </div>
 <app-toggle #toggleProducts [headline]="'basic.products' | translate">

matsen-tool/src/app/_views/partners/partners.component.html

@@ -1,6 +1,6 @@
 <div class="spt-container">
     <div class="d-flex justify-content-between align-items-start">
-        <h2>{{ headline }}</h2>
+        <h2 class="spt-headline">{{ headline }}</h2>
     </div>
     <app-partner-list #partnerList
         [partnerType]="partnerType"

matsen-tool/src/app/_views/posts/post-list/post-list.component.html

@@ -1,6 +1,8 @@
 <div class="spt-container">
-    <div class="posts position-relative">
-        <button class="btn btn-primary toggle-btn" (click)="openModalNewPost()">{{ 'basic.new-post' | translate }}</button>
+    <div class="posts">
+        <div class="top-btn">
+            <button class="btn btn-primary" (click)="openModalNewPost()">+ {{ 'basic.new-post' | translate }}</button>
+        </div>
         <app-paging #pagingComponent
             [getDataFunction]="getData"
             [dataSource]="dataSource"

matsen-tool/src/app/_views/products/product-list/product-list.component.html

@@ -1,13 +1,13 @@
 <div class="spt-container">
-    <div class="d-flex justify-content-between align-items-start">
-        <button class="btn btn-primary" (click)="openModalNewProduct()">{{ 'basic.new-product' | translate }}</button>
+    <div class="top-btn">
+        <button class="btn btn-primary" (click)="openModalNewProduct()">+ {{ 'basic.new-product' | translate }}</button>
     </div>
     <app-paging #pagingComponent
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
         <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-               class="mat-elevation-z8 mb-3">
+               class="mat-elevation-z8">
 
             <ng-container matColumnDef="pos">
                 <th mat-header-cell *matHeaderCellDef>

matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html

@@ -1,91 +1,95 @@
-<button class="btn btn-primary" (click)="openModalNewSale()">{{ 'basic.new-sale' | translate }}</button>
-<app-paging #pagingComponent
-                [getDataFunction]="getData"
-                [dataSource]="dataSource"
-    >
-    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
-           class="mat-elevation-z8 mb-3">
+<div class="spt-container">
+    <div class="top-btn">
+        <button class="btn btn-primary" (click)="openModalNewSale()">+ {{ 'basic.new-sale' | translate }}</button>
+    </div>
+    <app-paging #pagingComponent
+                    [getDataFunction]="getData"
+                    [dataSource]="dataSource"
+        >
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
+               class="mat-elevation-z8">
 
-        <ng-container matColumnDef="pos">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.number' | translate }}
-            </th>
-            <td mat-cell
-                *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="pos">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.number' | translate }}
+                </th>
+                <td mat-cell
+                    *matCellDef="let element">{{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="user">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
-                {{ 'overview.sale-user' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.ownerName }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="user">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}:  {{ 'overview.sale-user' | translate }}">
+                    {{ 'overview.sale-user' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.ownerName }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="partner">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
-                {{ 'overview.sale-partner' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                <a [routerLink]="['/customer', appHelperService.extractId(element.partner)]">{{ element.partnerName }}</a>
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="partner">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header="address"
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.sale-partner' | translate }}">
+                    {{ 'overview.sale-partner' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <a [routerLink]="['/customer', appHelperService.extractId(element.partner)]">{{ element.partnerName }}</a>
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="product">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
-                {{ 'overview.productname' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                <a [routerLink]="['/products', appHelperService.extractId(element.product)]">{{ element.productName }}</a>
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="product">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.productname' | translate }}">
+                    {{ 'overview.productname' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    <a [routerLink]="['/products', appHelperService.extractId(element.product)]">{{ element.productName }}</a>
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="turnover">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
-                {{ 'overview.turnover' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.turnover | currency: 'EUR' }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="turnover">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.turnover' | translate }}">
+                    {{ 'overview.turnover' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.turnover | currency: 'EUR' }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="profit">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
-                {{ 'overview.profit' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.profit | currency: 'EUR' }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="profit">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.profit' | translate }}">
+                    {{ 'overview.profit' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.profit | currency: 'EUR' }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="date">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header
-                sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
-                {{ 'overview.createdAt' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="date">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header
+                    sortActionDescription="{{ 'overview.sort' | translate }}: {{ 'overview.createdAt' | translate }}">
+                    {{ 'overview.createdAt' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="details">
-            <th mat-header-cell *matHeaderCellDef>
-                {{ 'overview.details' | translate }}
-            </th>
-            <td mat-cell *matCellDef="let element">
-                    <span class="btn btn-primary bi bi-zoom-in p-2-4"
-                          data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="details">
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ 'overview.details' | translate }}
+                </th>
+                <td mat-cell *matCellDef="let element">
+                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                              data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
+                </td>
+            </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-    </table>
-</app-paging>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+    </app-paging>
+</div>

matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html

@@ -25,8 +25,10 @@
 
 <app-toggle #togglePosts [headline]="'basic.posts' | translate">
     <div *ngIf="togglePosts.isOpened" class="spt-container">
-        <div class="posts position-relative">
-            <button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
+        <div class="posts">
+            <div class="top-btn">
+                <button class="btn btn-primary" (click)="openModalNewPosting()">+ {{'basic.new-post' | translate}}</button>
+            </div>
             <app-paging #pagingComponent
                         [getDataFunction]="getPostsData"
                         [dataSource]="dataSource"

matsen-tool/src/app/_views/tasks/task-list/task-list.component.html

@@ -1,6 +1,8 @@
 <div class="spt-container">
     <div class="spt-accordion position-relative">
-        <button *ngIf="partner" class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
+        <div class="top-btn">
+            <button *ngIf="partner" class="btn btn-primary" (click)="openModalNewTask()">+ {{ 'basic.new-task' | translate }}</button>
+        </div>
         <app-paging #pagingComponent
                     [getDataFunction]="getData"
                     [dataSource]="dataSource"

matsen-tool/src/app/_views/user/user-list/user-list.component.html

@@ -3,7 +3,7 @@
                 [getDataFunction]="getData"
                 [dataSource]="dataSource"
     >
-        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8 mb-3">
+        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">
 
             <ng-container matColumnDef="pos">
                 <th mat-header-cell *matHeaderCellDef>

matsen-tool/src/assets/images/icons/customer.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44.611" height="55.591" viewBox="0 0 44.611 55.591">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_65" data-name="Rechteck 65" width="44.611" height="55.591" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_421" data-name="Gruppe 421" transform="translate(-81 12)">
+    <g id="Gruppe_420" data-name="Gruppe 420" transform="translate(81 -12)" clip-path="url(#clip-path)">
+      <path id="Pfad_200" data-name="Pfad 200" d="M44.555,51.522,42.161,37.527a3.4,3.4,0,0,0-1.841-2.5l-9.7-4.935a.675.675,0,0,0-.121-.044l-2.935-1.5V25.231a10.318,10.318,0,0,0,5.027-8.825V10.275a10.275,10.275,0,1,0-20.55,0v.366a.578.578,0,0,0,0,.224v5.541a10.279,10.279,0,0,0,5.009,8.817v3.322l-3.057,1.561-9.7,4.935a3.37,3.37,0,0,0-1.841,2.5L.049,51.54a3.415,3.415,0,0,0,.773,2.817,3.37,3.37,0,0,0,2.652,1.234H41.13a3.281,3.281,0,0,0,2.652-1.252,3.321,3.321,0,0,0,.773-2.817M25.51,33.319a.626.626,0,0,0-.105-.063.7.7,0,0,0-.142-.045l-1.754-.765,3.48-2.78,2.246,1.142-2.983,2.836Zm-4.543,3.03h2.671l1.811,18.009H19.155ZM23.821,35.1h-3l-.457-.959L22.3,33.29l1.97.86ZM22.311,1.289A9.022,9.022,0,0,1,31.2,8.833c-4.668,2.184-8.094,2.577-9.418,1.092C20.155,8.1,17.234,8.046,13.325,9.75a9.018,9.018,0,0,1,8.986-8.461m-9,15.136V11.149c2.239-1.043,5.841-2.277,7.531-.377a4.381,4.381,0,0,0,3.443,1.307,18.706,18.706,0,0,0,7.031-1.911c0,.042,0,.083,0,.125v6.132a9,9,0,1,1-18.009,0m9,10.257a10.19,10.19,0,0,0,4-.811v2.769L22.3,31.815,18.3,28.639V25.863a10.209,10.209,0,0,0,4.014.819M17.6,29.665l3.5,2.78-1.846.805-.014,0-.005,0-.879.383-2.983-2.836ZM1.779,53.566a2.15,2.15,0,0,1-.5-1.8L3.676,37.767a2.167,2.167,0,0,1,1.178-1.6l9.311-4.735,3.6,3.428a.66.66,0,0,0,.442.166.588.588,0,0,0,.258-.055l.737-.322.557,1.171L17.892,54.358H10.379V42.9a.626.626,0,1,0-1.252,0V54.358H3.473a2.157,2.157,0,0,1-1.694-.792m41.063,0a2.1,2.1,0,0,1-1.694.792H35.477V42.9a.626.626,0,1,0-1.252,0V54.358H26.711L24.853,35.881l.581-1.221.707.309a.65.65,0,0,0,.258.055.818.818,0,0,0,.442-.166l3.609-3.44,9.317,4.747a2.167,2.167,0,0,1,1.178,1.6L43.34,51.761a2.134,2.134,0,0,1-.5,1.8" transform="translate(0)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    </g>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/document.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.734" height="42.93" viewBox="0 0 35.734 42.93">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_73" data-name="Rechteck 73" width="35.732" height="42.93" fill="#2b3a44"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_443" data-name="Gruppe 443" transform="translate(0 0)">
+    <path id="Pfad_221" data-name="Pfad 221" d="M8.63,30.035H27.956V28.424H8.63Zm0-4.832H27.956V23.593H8.63Zm0-4.83H27.956V18.761H8.63Zm16.1-15.44,7.387,7.386H24.733ZM3.8,4.267H23.125V13.93h9.663V39.7H3.8ZM2.188,2.656V41.308H34.4V12.319L24.733,2.656Z" transform="translate(1.336 1.621)" fill="#2b3a44"/>
+    <g id="Gruppe_442" data-name="Gruppe 442" transform="translate(0 0)">
+      <g id="Gruppe_441" data-name="Gruppe 441" clip-path="url(#clip-path)">
+        <path id="Pfad_222" data-name="Pfad 222" d="M4.418,37.042H1.543V1.611H29.308V9.452c.037.014.072.021.108.037a4.289,4.289,0,0,1,1.435,1.1V0H0V38.652H4.782a2.505,2.505,0,0,1-.221-.343,1.818,1.818,0,0,1-.143-1.267" transform="translate(0 0)" fill="#2b3a44"/>
+      </g>
+    </g>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/product.svg

@@ -0,0 +1,14 @@
+<svg id="Gruppe_438" data-name="Gruppe 438" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43.073" height="53.014" viewBox="0 0 43.073 53.014">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_71" data-name="Rechteck 71" width="43.073" height="53.014" fill="#2b3a44"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_437" data-name="Gruppe 437" clip-path="url(#clip-path)">
+    <path id="Pfad_215" data-name="Pfad 215" d="M35.7,116.76,29.365,107.9a.828.828,0,0,0-.286-.4L23.2,99.283V86.627h1.657a.828.828,0,0,0,.828-.828v-4.97A.828.828,0,0,0,24.852,80H11.6a.828.828,0,0,0-.828.828V85.8a.828.828,0,0,0,.828.828h1.657V99.283L.75,116.76c-.016.023-.032.047-.046.071a5.281,5.281,0,0,0,4.585,7.9H31.162a5.281,5.281,0,0,0,4.584-7.9.81.81,0,0,0-.045-.071m-23.274-35.1h11.6V84.97h-11.6Zm2.33,18.374a.828.828,0,0,0,.155-.482V86.627h6.627V99.549a.828.828,0,0,0,.155.482l5.227,7.3H25.882a7.658,7.658,0,0,1-5.414-2.242,9.251,9.251,0,0,0-6.585-2.728h-.8ZM34.3,121.269a3.588,3.588,0,0,1-3.134,1.805H5.289a3.624,3.624,0,0,1-3.166-5.387L11.9,104.022h1.981a7.606,7.606,0,0,1,5.414,2.242,9.315,9.315,0,0,0,6.585,2.728h2.225l6.222,8.7a3.587,3.587,0,0,1-.032,3.581" transform="translate(0 -71.716)" fill="#2b3a44"/>
+    <path id="Pfad_216" data-name="Pfad 216" d="M179.327,6.627a3.313,3.313,0,1,0-3.313-3.313,3.317,3.317,0,0,0,3.313,3.313m0-4.97a1.657,1.657,0,1,1-1.657,1.657,1.659,1.659,0,0,1,1.657-1.657" transform="translate(-157.789)" fill="#2b3a44"/>
+    <path id="Pfad_217" data-name="Pfad 217" d="M290.421,211.623l-1.862-3.21a.829.829,0,0,0-.717-.413h-3.725a.829.829,0,0,0-.717.413l-1.743,3h-2.925a.829.829,0,0,0-.717.413l-1.862,3.21a.828.828,0,0,0,0,.831l1.862,3.21a.829.829,0,0,0,.717.413h3.725a.829.829,0,0,0,.717-.413l1.743-3h2.925a.829.829,0,0,0,.717-.413l1.862-3.21a.829.829,0,0,0,0-.831m-8.44,6.214H279.21l-1.382-2.381,1.382-2.382H281.9l1.423,2.453Zm5.384-3.417h-2.688l-1.423-2.453,1.34-2.31h2.771l1.382,2.382Z" transform="translate(-247.459 -186.464)" fill="#2b3a44"/>
+    <path id="Pfad_218" data-name="Pfad 218" d="M91.327,400a3.313,3.313,0,1,0,3.313,3.313A3.317,3.317,0,0,0,91.327,400m0,4.97a1.657,1.657,0,1,1,1.657-1.657,1.659,1.659,0,0,1-1.657,1.657" transform="translate(-78.901 -358.582)" fill="#2b3a44"/>
+    <path id="Pfad_219" data-name="Pfad 219" d="M216.5,380a2.485,2.485,0,1,0,2.485,2.485A2.488,2.488,0,0,0,216.5,380m0,3.313a.828.828,0,1,1,.828-.828.829.829,0,0,1-.828.828" transform="translate(-191.854 -340.653)" fill="#2b3a44"/>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/profile.svg

@@ -0,0 +1,11 @@
+<svg id="Gruppe_499" data-name="Gruppe 499" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="47.85" height="74.278" viewBox="0 0 47.85 74.278">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_100" data-name="Rechteck 100" width="47.85" height="74.278" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_498" data-name="Gruppe 498" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Pfad_247" data-name="Pfad 247" d="M30.657,39.177V35.143c4.582-2.032,8.253-6.022,8.253-11.054v-.552c0-.452,0-.932,0-1.425h.426a.587.587,0,0,0,.584-.528c.029-.292.705-7.22-1.033-12.881-1.614-5.25-6.638-5.374-8-5.3A11.342,11.342,0,0,0,23.009,0C20.811.1,9.772,1.054,8.2,10.471c-1.343,8.06-.466,11.1-.428,11.224a.587.587,0,0,0,.562.417h.6c0,.48,0,.949,0,1.39v.587c0,5.192,3.908,9.274,8.691,11.241v3.792C6.581,40.467,0,45.853,0,53.6V65.741a.586.586,0,0,0,.228.465,38.82,38.82,0,0,0,47.392,0,.587.587,0,0,0,.229-.465V53.6c0-3.682-1.7-12.387-17.192-14.421M9.361,10.664c1.422-8.524,11.661-9.4,13.7-9.486a10.09,10.09,0,0,1,7.126,3.2.594.594,0,0,0,.524.208c.224-.028,5.5-.6,7.054,4.458a36.334,36.334,0,0,1,1.03,11.889H37.481c-.1-1.431-.436-5.2-1.278-6.812a8.413,8.413,0,0,0-2.33-2.291C32.387,10.679,30.7,9.37,30.657,7.643a.588.588,0,0,0-.988-.413c-5.03,4.7-16.688,5.064-16.805,5.067a.584.584,0,0,0-.362.137c-2.45,2.054-2.645,6.793-2.632,8.5H8.814c-.173-1.053-.47-4.172.546-10.273m.753,13.424V23.5c0-.443,0-.907,0-1.389h.36a.587.587,0,0,0,.586-.62c0-.059-.294-5.823,2.051-8.028,1.617-.065,11.283-.616,16.557-4.694.539,1.7,2.147,2.952,3.485,3.992a7.877,7.877,0,0,1,2.01,1.909c.659,1.26,1.013,4.494,1.139,6.237.018.249.032.468.041.646a.588.588,0,0,0,.587.557h.805c0,.494,0,.971,0,1.423v.554c0,4.676-3.557,8.358-7.928,10.154a18.678,18.678,0,0,1-11.418.114.559.559,0,0,0-.119-.022c-4.475-1.76-8.156-5.489-8.156-10.246M23.925,36.615a16.567,16.567,0,0,0,5.558-1v6.668c0,.436-1.817,1.457-5.339,1.457s-5.339-1.022-5.339-1.457V35.764a16.445,16.445,0,0,0,5.12.851m22.75,28.836a37.86,37.86,0,0,1-6.324,3.889V61.074a.587.587,0,1,0-1.174,0v8.811a37.753,37.753,0,0,1-30.545-.018V61.074a.587.587,0,1,0-1.174,0v8.247a37.922,37.922,0,0,1-6.284-3.87V53.6c0-3.412,1.62-11.46,16.456-13.3v1.98c0,1.786,2.8,3.133,6.513,3.133s6.513-1.347,6.513-3.133V40.356C45.1,42.3,46.675,50.24,46.675,53.6Z" transform="translate(0 0)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_248" data-name="Pfad 248" d="M30.984,93.308H22.433a.587.587,0,0,0-.587.587v7.927a.587.587,0,0,0,.587.587h8.551a.587.587,0,0,0,.587-.587V93.9a.587.587,0,0,0-.587-.587M23.02,94.482H30.4v1.5H23.02Zm0,2.672H30.4v4.081H23.02Z" transform="translate(-9.019 -38.521)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/sale.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.166" height="47.624" viewBox="0 0 37.166 47.624">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_99" data-name="Rechteck 99" width="37.166" height="47.624" fill="#2b3a44"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_497" data-name="Gruppe 497" transform="translate(0 0)">
+    <g id="Gruppe_496" data-name="Gruppe 496" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Pfad_243" data-name="Pfad 243" d="M.936,22.572a.868.868,0,0,0-.253,1.714,41.316,41.316,0,0,0,8.773,1.02c12.52,0,19-7.164,23.609-14.772L35.851,12.2a.869.869,0,0,0,1.3-.889L35.362.724A.869.869,0,0,0,34.167.069L24.686,4.091a.868.868,0,0,0-.042,1.579L27.5,7.065C19.878,23.854,1.717,22.633.936,22.572m28.5-15.585a.869.869,0,0,0-.42-1.118l-1.894-.924L33.834,2.1l1.293,7.649L33.211,8.6a.867.867,0,0,0-1.194.3C27.37,16.8,21.285,23.821,8.883,23.573c6.7-1.426,15.847-5.446,20.548-16.586" transform="translate(0 0)" fill="#2b3a44"/>
+      <path id="Pfad_244" data-name="Pfad 244" d="M4.448,66.956c-1.675,0-2.988,1.636-2.988,3.726v6.527c0,2.089,1.313,3.726,2.988,3.726H8.534c1.676,0,2.988-1.636,2.988-3.726V70.682c0-2.089-1.313-3.726-2.988-3.726Zm5.338,3.726v6.527c0,1.06-.585,1.989-1.252,1.989H4.448c-.667,0-1.252-.929-1.252-1.989V70.682c0-1.06.585-1.989,1.252-1.989H8.534c.667,0,1.252.93,1.252,1.989" transform="translate(-0.726 -33.31)" fill="#2b3a44"/>
+      <path id="Pfad_245" data-name="Pfad 245" d="M29.028,54.776c-1.675,0-2.988,1.636-2.988,3.726V71.15c0,2.089,1.313,3.726,2.988,3.726h4.086c1.675,0,2.988-1.636,2.988-3.726V58.5c0-2.089-1.313-3.726-2.988-3.726ZM34.366,58.5V71.15c0,1.06-.585,1.989-1.252,1.989H29.028c-.667,0-1.252-.93-1.252-1.989V58.5c0-1.06.585-1.989,1.252-1.989h4.086c.667,0,1.252.93,1.252,1.989" transform="translate(-12.955 -27.251)" fill="#2b3a44"/>
+      <path id="Pfad_246" data-name="Pfad 246" d="M60.118,40.16H56.033c-1.675,0-2.988,1.636-2.988,3.725V63.878c0,2.089,1.313,3.726,2.988,3.726h4.085c1.676,0,2.988-1.636,2.988-3.726V43.885c0-2.089-1.313-3.725-2.988-3.725m1.253,23.718c0,1.06-.585,1.989-1.253,1.989H56.033c-.667,0-1.252-.93-1.252-1.989V43.885c0-1.06.585-1.989,1.252-1.989h4.085c.668,0,1.253.93,1.253,1.989Z" transform="translate(-26.39 -19.979)" fill="#2b3a44"/>
+    </g>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/service.svg

@@ -0,0 +1,18 @@
+<svg id="Gruppe_436" data-name="Gruppe 436" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.207" height="38.238" viewBox="0 0 46.207 38.238">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_70" data-name="Rechteck 70" width="46.207" height="38.238" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_435" data-name="Gruppe 435" clip-path="url(#clip-path)">
+    <path id="Pfad_206" data-name="Pfad 206" d="M44.4,30.8a1.134,1.134,0,0,0,.495-.917q.054-6.367-.027-12.788a9.531,9.531,0,0,0-1.942-5.018Q39.74,7.41,36.431,2.626A3.339,3.339,0,0,0,33.67,1.178H3.534A2.285,2.285,0,0,0,1.241,3.471q.013,12.8,0,25.909a1.833,1.833,0,0,0,.432,1.394,1.846,1.846,0,0,0,1.745.306c.459-.1.693.081.71.549l.009.324a.352.352,0,0,1-.279.369C1.034,32.906,0,31.242,0,28.6Q0,15.85.009,3.525A3.533,3.533,0,0,1,3.543,0h30.4a4.012,4.012,0,0,1,3.229,1.637q4.3,5.922,7.9,11.61a8,8,0,0,1,1.007,4.272q0,6.111.126,11.979c.054,2.293-2.06,3.237-4.128,2.9a.556.556,0,0,1-.45-.612l.027-.234a.653.653,0,0,1,.845-.54,2.115,2.115,0,0,0,1.9-.216" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_207" data-name="Pfad 207" d="M64.1,55.507v-7.77a1.245,1.245,0,0,1,.647-1.1l7.122-3.948a1.248,1.248,0,0,1,1.205,0l7.122,3.957a1.245,1.245,0,0,1,.647,1.1l-.027,7.779a1.255,1.255,0,0,1-.639,1.1l-7.114,3.939a1.242,1.242,0,0,1-1.214-.009L64.735,56.6a1.255,1.255,0,0,1-.638-1.1M79.61,48.159a.825.825,0,0,0-.423-.719l-6.322-3.489a.825.825,0,0,0-.791,0L65.68,47.476a.824.824,0,0,0-.423.719l.045,6.871a.81.81,0,0,0,.423.71l6.34,3.516a.8.8,0,0,0,.791.009l6.322-3.507a.814.814,0,0,0,.423-.719Z" transform="translate(-57.433 -38.114)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_208" data-name="Pfad 208" d="M278.739,53.016l11.16.036a.263.263,0,0,1,.261.234l.1.7a.274.274,0,0,1-.27.306l-12.455.045a.265.265,0,0,1-.27-.27l-.027-12.149a.267.267,0,0,1,.252-.27l.7-.045a.275.275,0,0,1,.288.27l-.009,10.872a.265.265,0,0,0,.27.27" transform="translate(-248.414 -37.278)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_209" data-name="Pfad 209" d="M91.587,98.653,86.443,95.73a.263.263,0,0,1-.072-.4l.477-.513a.259.259,0,0,1,.315-.054l5.036,2.8a.277.277,0,0,0,.252.009l5.306-2.851a.259.259,0,0,1,.342.09l.333.531a.265.265,0,0,1-.09.369l-5.2,2.932a.254.254,0,0,0-.135.225l-.018,5.648a.262.262,0,0,1-.288.261l-.746-.072a.263.263,0,0,1-.234-.261V98.878a.254.254,0,0,0-.135-.225" transform="translate(-77.333 -84.84)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_210" data-name="Pfad 210" d="M63.813,249.717a6.475,6.475,0,1,1-6.475-6.475,6.471,6.471,0,0,1,6.475,6.475m-1.214.009a5.261,5.261,0,1,0-5.261,5.261,5.262,5.262,0,0,0,5.261-5.261" transform="translate(-45.575 -217.954)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_211" data-name="Pfad 211" d="M277.626,249.708a6.466,6.466,0,1,1-6.466-6.466,6.467,6.467,0,0,1,6.466,6.466m-1.205.009a5.27,5.27,0,1,0-5.27,5.27,5.266,5.266,0,0,0,5.27-5.27" transform="translate(-237.175 -217.954)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_212" data-name="Pfad 212" d="M89.42,281.344c-.89.8-.791,1.556.3,2.275A1.218,1.218,0,0,0,91.5,283.1l.54-1.214a.291.291,0,0,1,.378-.153l.27.117a.564.564,0,0,1,.369.719c-.827,3.678-5.935,2.824-5.3-.684a2.649,2.649,0,0,1,2.347-2.212.612.612,0,0,1,.764.414.571.571,0,0,1-.45.746,2.208,2.208,0,0,0-1,.513" transform="translate(-78.584 -250.578)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_213" data-name="Pfad 213" d="M302.217,281.829q.539,2.266,2.239,1.34c.611-.333.782-1.061,1.2-1.619.207-.27.4-.27.593.009a1.1,1.1,0,0,1,.009,1.133c-2.194,4.946-8.534-.9-3.013-3.435a.73.73,0,0,1,1,.432c.189.54-.081.782-.809.719a1.155,1.155,0,0,0-1.214,1.421" transform="translate(-269.743 -250.165)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+    <path id="Pfad_214" data-name="Pfad 214" d="M193.42,300.5a.411.411,0,0,1-.412.415l-6.187.022a.414.414,0,0,1-.415-.412v-.378a.411.411,0,0,1,.412-.415L193,299.71a.414.414,0,0,1,.415.412Z" transform="translate(-167.025 -268.551)" fill="#2b3a44" stroke="#2b3a44" stroke-width="0.5"/>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/supplier.svg

@@ -0,0 +1,11 @@
+<svg id="Gruppe_434" data-name="Gruppe 434" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="43.507" height="43.521" viewBox="0 0 43.507 43.521">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_69" data-name="Rechteck 69" width="43.507" height="43.521" fill="#2b3a44"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_433" data-name="Gruppe 433" clip-path="url(#clip-path)">
+    <path id="Pfad_204" data-name="Pfad 204" d="M8.849,135.3c1.175-1.069,2.377-2.139,3.551-3.238a7.377,7.377,0,0,1,5.281-2.091c2.353.016,4.707.046,7.059-.008a3.191,3.191,0,0,1,3.135,4.307,1.45,1.45,0,0,0-.041.186c1.842.1,3.592.178,5.077-1.308,1.761-1.762,3.679-3.368,5.531-5.039a2.967,2.967,0,1,1,4.055,4.33q-4.768,4.575-9.558,9.127a7.067,7.067,0,0,1-5.1,2c-2.212-.01-4.424.033-6.634-.016a5.551,5.551,0,0,0-3.491,1.159c.279.294.561.577.827.875a.886.886,0,0,1-.012,1.4q-2.829,2.725-5.68,5.425c-.5.474-.95.405-1.508-.178q-4.22-4.41-8.435-8.824Q1.661,142.1.414,140.8a.941.941,0,0,1,.039-1.585q2.741-2.625,5.489-5.241a.928.928,0,0,1,1.517.024c.442.43.9.847,1.389,1.308m1.179,1.362c2.04,2.135,4.026,4.2,5.99,6.285.285.3.491.359.835.119a7.994,7.994,0,0,1,5.077-1.333c1.961.074,3.927.007,5.891.02a5.35,5.35,0,0,0,3.93-1.561c.8-.778,1.612-1.54,2.418-2.309q3.475-3.316,6.951-6.63a1.325,1.325,0,0,0,.549-1.145,1.151,1.151,0,0,0-1.987-.689c-1.942,1.756-3.9,3.5-5.822,5.272a5.87,5.87,0,0,1-4.189,1.611c-4.016-.027-8.032-.009-12.048-.01a3.658,3.658,0,0,1-.53-.017.885.885,0,0,1-.166-1.713,2.178,2.178,0,0,1,.678-.078c2.424-.006,4.847,0,7.271-.008a1.345,1.345,0,1,0,.009-2.687q-3.821-.016-7.642.009a4.511,4.511,0,0,0-2.941,1.054c-1.442,1.222-2.824,2.513-4.273,3.813m-3.368-.876-4.466,4.267,10.02,10.468,4.464-4.265L6.659,135.789" transform="translate(0 -109.201)" fill="#2b3a44"/>
+    <path id="Pfad_205" data-name="Pfad 205" d="M126.1,8.039a6.056,6.056,0,0,1-1.151-4.012,4.522,4.522,0,0,1,8.941-.332,5.615,5.615,0,0,1-.782,3.812c-.094.167-.2.329-.319.532.463.12.889.225,1.312.34a4.538,4.538,0,0,1,3.5,4.547c0,.761.006,1.521,0,2.282-.007.745-.327,1.094-1.057,1.095q-7.111.01-14.222,0c-.635,0-1.009-.319-1.023-.909a25.99,25.99,0,0,1,.034-3.022,4.442,4.442,0,0,1,3.481-4c.41-.1.818-.212,1.291-.335m9.688,6.424c0-.584.008-1.113,0-1.642a2.708,2.708,0,0,0-2.04-2.65c-.713-.2-1.432-.388-2.157-.538a1.5,1.5,0,0,0-.805.053,3.483,3.483,0,0,1-2.731-.022.986.986,0,0,0-.552-.089c-.843.19-1.689.381-2.514.635a2.373,2.373,0,0,0-1.737,1.774,18.7,18.7,0,0,0-.209,2.479Zm-9.05-9.737a4.117,4.117,0,0,0,1.543,2.955,1.668,1.668,0,0,0,2.355-.026,4.327,4.327,0,0,0,1.491-2.727,2.713,2.713,0,1,0-5.388-.2" transform="translate(-104.072 0.001)" fill="#2b3a44"/>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/task.svg

@@ -0,0 +1,10 @@
+<svg id="Gruppe_440" data-name="Gruppe 440" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40.106" height="27.072" viewBox="0 0 40.106 27.072">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_72" data-name="Rechteck 72" width="40.106" height="27.072" fill="#2b3a44" stroke="#f2f2f2" stroke-width="0.5"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_439" data-name="Gruppe 439" clip-path="url(#clip-path)">
+    <path id="Pfad_220" data-name="Pfad 220" d="M40.106,25.568a1.5,1.5,0,0,0-1.5-1.5H19.552a1.5,1.5,0,1,0,0,3.008H38.6a1.5,1.5,0,0,0,1.5-1.5M.5,22.806l4.356,3.882a1.517,1.517,0,0,0,2.124-.106l7.373-8.061a1.51,1.51,0,0,0-2.234-2.031L5.757,23.448,2.517,20.56A1.511,1.511,0,0,0,0,21.683a1.5,1.5,0,0,0,.5,1.123m31.581-5.26a1.5,1.5,0,0,0-1.5-1.5H19.552a1.5,1.5,0,1,0,0,3.008H30.581a1.5,1.5,0,0,0,1.5-1.5M.5,6.806l4.356,3.882a1.517,1.517,0,0,0,2.124-.106l7.373-8.061A1.5,1.5,0,0,0,13.241,0a1.518,1.518,0,0,0-1.119.489L5.757,7.45,2.517,4.562A1.51,1.51,0,0,0,0,5.685,1.491,1.491,0,0,0,.5,6.806M36.1,9.525a1.5,1.5,0,0,0-1.5-1.5H19.552a1.5,1.5,0,1,0,0,3.008h15.04a1.5,1.5,0,0,0,1.5-1.5M40.106,1.5A1.5,1.5,0,0,0,38.6,0H19.552a1.5,1.5,0,1,0,0,3.008H38.6a1.5,1.5,0,0,0,1.5-1.5" fill="#2b3a44" stroke="#f2f2f2" stroke-width="0.5"/>
+  </g>
+</svg>

matsen-tool/src/assets/images/icons/user.svg

@@ -0,0 +1,16 @@
+<svg id="Gruppe_502" data-name="Gruppe 502" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="53.859" height="51.36" viewBox="0 0 53.859 51.36">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_101" data-name="Rechteck 101" width="53.859" height="51.36" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_500" data-name="Gruppe 500" clip-path="url(#clip-path)">
+    <path id="Pfad_249" data-name="Pfad 249" d="M84.481,3.727A3.727,3.727,0,1,1,80.755,0a3.726,3.726,0,0,1,3.727,3.727m-2.272.014a1.445,1.445,0,1,0-1.445,1.445,1.444,1.444,0,0,0,1.445-1.445" transform="translate(-71.191 0)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_250" data-name="Pfad 250" d="M542.482,3.731A3.731,3.731,0,1,1,538.75,0a3.729,3.729,0,0,1,3.731,3.731m-2.305.009a1.436,1.436,0,1,0-1.435,1.435,1.434,1.434,0,0,0,1.435-1.435" transform="translate(-494.473)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_251" data-name="Pfad 251" d="M40.45,121.319q.05,4.855.057,10.78c0,2.419-1.83,3.765-4.2,2.852a.67.67,0,0,0-.471-.014,3.576,3.576,0,0,1-1.535.366,2.659,2.659,0,0,1-2.819-2.975q.014-5.412-.033-10.975a.258.258,0,0,0-.28-.29c-2.034-.076-2.728-1.607-2.624-3.413q.143-2.431.086-4.791a4.833,4.833,0,0,1,5.362-5.267c3.2.162,7.391-.794,8.922,2.895.737,1.773.442,4.772.452,6.935a5.111,5.111,0,0,1-.38,2.405,2.423,2.423,0,0,1-2.258,1.212.249.249,0,0,0-.28.28m-8.808-9.131a1.183,1.183,0,0,1,.993-.537,1.084,1.084,0,0,1,1.093,1.207l.033,19.645c0,.366.185.532.551.5l.185-.019a.345.345,0,0,0,.3-.342l0-10.662A1.052,1.052,0,0,1,35.92,120.8a.948.948,0,0,1,.4.057,1.056,1.056,0,0,1,.751,1.074l.029,10.528a.482.482,0,0,0,.49.485l.162,0a.388.388,0,0,0,.433-.442l-.038-19.617a1.086,1.086,0,0,1,1.06-1.207.715.715,0,0,1,.266.01,1.06,1.06,0,0,1,.946,1.146l.014,5.5a.379.379,0,0,0,.328.409l.124.029a.171.171,0,0,0,.209-.166q-.014-2.467.014-5.395c.014-1.859-.7-3.3-2.709-3.3-1.687,0-3.337.019-4.948.062A2.312,2.312,0,0,0,30.9,112.34a48.631,48.631,0,0,0,.019,6.222.109.109,0,0,0,.124.119l.147,0a.224.224,0,0,0,.247-.257l-.057-5.495a1.119,1.119,0,0,1,.261-.737" transform="translate(-26.375 -99.43)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_252" data-name="Pfad 252" d="M498.715,121.444q-.007,5.483,0,10.628c.009,2.553-1.835,4.031-4.335,2.966a.621.621,0,0,0-.5,0,3.327,3.327,0,0,1-1.816.266q-2.431-.335-2.405-3.456.036-5.084-.019-10.391a.255.255,0,0,0-.252-.28,2.649,2.649,0,0,1-2.614-3.009q.043-2.488.029-4.929a6.475,6.475,0,0,1,.433-2.7c1.74-3.67,5.29-2.69,8.523-2.857,2.291-.114,4.421.675,5.362,2.857a10.2,10.2,0,0,1,.466,3.674c0,1.3,0,2.548-.014,3.741a3.743,3.743,0,0,1-.509,2.191,2.261,2.261,0,0,1-2.011.974c-.223-.014-.333.1-.338.318m-.323-9.316a.95.95,0,0,1,.3.689l.009,5.69a.239.239,0,0,0,.261.271l.166.009a.17.17,0,0,0,.2-.2q-.093-2.652-.043-5.585c.028-1.659-.813-3-2.591-3-1.336,0-2.714,0-4.145.009-1.954,0-3.389.4-3.446,2.586q-.036,1.348-.01,5.984c0,.138.067.2.2.185l.147-.009a.225.225,0,0,0,.223-.252l-.086-5.233a1.506,1.506,0,0,1,.808-1.426.612.612,0,0,1,.49-.062,1.3,1.3,0,0,1,1.055,1.383l.019,19.3a.5.5,0,0,0,.561.57c.043,0,.09,0,.138-.009a.355.355,0,0,0,.342-.39V122.062a1.061,1.061,0,0,1,1.16-1.2.853.853,0,0,1,.471.138,1.285,1.285,0,0,1,.656,1.164l0,10.438a.423.423,0,0,0,.466.48l.195.01a.478.478,0,0,0,.49-.48L496.4,113a1.083,1.083,0,0,1,1.169-1.226,1.115,1.115,0,0,1,.827.356" transform="translate(-449.884 -99.518)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_253" data-name="Pfad 253" d="M313.539,159.84a3.727,3.727,0,1,1-3.727-3.727,3.726,3.726,0,0,1,3.727,3.727m-2.286.01a1.435,1.435,0,1,0-1.435,1.436,1.434,1.434,0,0,0,1.435-1.436" transform="translate(-282.89 -144.282)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_254" data-name="Pfad 254" d="M260.948,276.905a2.26,2.26,0,0,1-2.058-1.041,3.736,3.736,0,0,1-.452-2.082q-.007-2.11,0-4.183a9.161,9.161,0,0,1,.4-3.161c1.017-2.538,3.2-3.033,6.008-2.928,1.559.062,3.712-.223,5.072.252,2.353.827,3.361,2.876,3.256,5.324q-.107,2.474,0,4.877a2.611,2.611,0,0,1-2.581,2.995.223.223,0,0,0-.242.252q-.043,5.269-.029,10.519a3.328,3.328,0,0,1-1.089,2.842,2.686,2.686,0,0,1-3.156.2.509.509,0,0,0-.513-.009,2.818,2.818,0,0,1-4.273-2.643q.007-5.419-.01-10.895c0-.223-.109-.328-.328-.318m1.573-9.245a1.281,1.281,0,0,1,1.027,1.345l.019,19.365a.44.44,0,0,0,.528.5l.181-.009a.339.339,0,0,0,.323-.338l-.024-10.153a1.96,1.96,0,0,1,.713-1.569.684.684,0,0,1,.708-.195c.575.214.865.518.865.9q.043,5.5.028,10.79a.514.514,0,0,0,.466.561.749.749,0,0,0,.252,0,.429.429,0,0,0,.352-.423L268,269.243a1.659,1.659,0,0,1,.9-1.545.586.586,0,0,1,.551-.038,1.364,1.364,0,0,1,.86,1.345l-.019,5.452c0,.138.071.2.209.185l.185-.024a.226.226,0,0,0,.2-.223l.01-6.165a2.372,2.372,0,0,0-2.348-2.377q-2.5-.036-4.867-.033c-1.844,0-2.938.784-2.952,2.652q-.021,3.009-.052,5.965a.179.179,0,0,0,.19.176L261,274.6a.281.281,0,0,0,.3-.319l-.019-5.376a1.244,1.244,0,0,1,.618-1.127.763.763,0,0,1,.623-.124" transform="translate(-238.849 -243.514)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+    <path id="Pfad_255" data-name="Pfad 255" d="M45.627,388.792q-.064,1.647.014,3.441c.095,2.167-.975,3.413-3.208,3.28-1.545-.09-3.066-.1-4.568-.038a.372.372,0,0,0-.366.266c-1.749,4.63-9.392,5.443-13.628,4.706-3.028-.528-6.236-1.692-7.5-4.734a.333.333,0,0,0-.295-.2q-1.947-.086-3.979.014c-2.225.109-3.855-.423-3.812-3q.036-1.982-.014-3.712a.263.263,0,0,0-.28-.285c-3.318-.171-7.04-1.859-7.862-5.214q-.642-2.645,1.911-4.829c.989-.846,2.562-.471,2.339.917-.114.737-.632,1.084-1.16,1.578a1.913,1.913,0,0,0-.01,2.814c2.244,2.529,6.4,2.6,9.492,1.792,1.516-.39,4.131-1.492,3.883-3.418-.133-1.065-1.126-1.416-1.673-2.206a1.221,1.221,0,0,1,.109-1.5c.223-.314.708-.409,1.45-.29a1.1,1.1,0,0,1,.575.276q3.786,3.4,1.036,6.921c-1.512,1.934-4.549,2.9-7,3.118a.228.228,0,0,0-.2.228l.048,4.012a.154.154,0,0,0,.176.176l4.939-.028a.415.415,0,0,0,.413-.281c.466-1.15,2.381-3.784,3.874-2.652a1.154,1.154,0,0,1,.48,1.127c-.128,1.055-1.5,1.312-1.844,2.348q-.649,1.975,1.564,3.161c3.85,2.068,9.83,2.234,13.466-.414q2.068-1.5.5-3.37c-.466-.556-1.279-.822-1.4-1.6a1.176,1.176,0,0,1,.642-1.34c1.445-.737,3.189,1.683,3.66,2.733a.382.382,0,0,0,.38.247l5.105.052a.118.118,0,0,0,.119-.119l0-4.169a.118.118,0,0,0-.124-.133c-3.194-.166-7.23-1.678-8.076-5.067a5.076,5.076,0,0,1,2.372-5.191c1.274-.879,2.662,1,1.464,2.082a8.1,8.1,0,0,0-1.06,1.16c-1.027,1.369.528,2.9,1.706,3.451,3.085,1.445,8.1,1.683,11.051-.68,1.83-1.464.8-2.895-.561-4.021a1.13,1.13,0,0,1-.29-1.369c1.545-3.113,7.691,3.85,2.02,7.757a10.482,10.482,0,0,1-5.528,1.859.329.329,0,0,0-.347.357" transform="translate(0 -349.326)" fill="#2b3a44" stroke="#f2f2f2" stroke-width="1"/>
+  </g>
+</svg>

matsen-tool/src/assets/scss/_basics.scss

@@ -1,20 +1,81 @@
+/* montserrat-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* montserrat-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* montserrat-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* montserrat-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/montserrat-v26-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* montserrat-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 800;
+  src: url('../fonts/montserrat-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* montserrat-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 800;
+  src: url('../fonts/montserrat-v26-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* material-icons-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/material-icons-v142-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 html, body {
   height: 100%;
 }
 
 body {
   margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
-body {
-  background: #d2d2d2;
+  font-family: "Montserrat", "Helvetica Neue", sans-serif;
+  background: #2b3a44;
 }
 
 .app-container {
-  min-height: 320px;
+  border-top: 5px solid #c1c1c1;
+  min-height: 500px;
   overflow: hidden;
-  background: #d2d2d2;
+  color: #fff;
 }
 
 img {
@@ -29,14 +90,167 @@ img {
 }
 
 .spt-sidebar {
-  background: #b2b2b2;
+  //background: #2b3a44;
+  padding: 0;
+  .card {
+    background: transparent;
+    color: #fff;
+    border: none;
+    border-bottom: 1px solid #fff;
+    border-radius: 0;
+    width: 100%;
+    text-decoration: none;
+    .card-body {
+      min-height: 50px;
+      text-transform: uppercase;
+      text-align: right;
+
+      h3 {
+        right: 10px;
+        bottom: 10px;
+      }
+    }
+    &.active {
+      .card-body {
+        min-height: 100px;
+        position: relative;
+        &:before {
+          content: "";
+          position: absolute;
+          left: 20px;
+          top: 50%;
+          transform: translate(0,-50%);
+          width: 65px;
+          height: 100%;
+          filter: brightness(600%);
+          border-right: 1px solid #fff;
+        }
+        &[data-cat="customer"]:before {
+          background: transparent url("/assets/images/icons/customer.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="supplier"]:before {
+          background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="service"]:before {
+          background: transparent url("/assets/images/icons/service.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="product"]:before {
+          background: transparent url("/assets/images/icons/product.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="task"]:before {
+          background: transparent url("/assets/images/icons/task.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="document"]:before {
+          background: transparent url("/assets/images/icons/document.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="sale"]:before {
+          background: transparent url("/assets/images/icons/sale.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="profile"]:before {
+          background: transparent url("/assets/images/icons/profile.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        &[data-cat="user"]:before {
+          background: transparent url("/assets/images/icons/user.svg") no-repeat left center;
+          background-size: 45px auto;
+        }
+        h3 {
+          bottom: 50%;
+          transform: translate(0,50%);
+        }
+      }
+    }
+  }
+  .nav {
+    li {
+      margin: 0 !important;
+    }
+  }
+}
+
+.spt-main {
+  background: #fff;
+  color: rgba(33,37,41);
 }
 
 .spt-container {
+  position: relative;
   min-height: 1px;
   margin-bottom: 3rem;
+  .top-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .card:not(.contacts .card) {
+    border: none;
+    border-radius: 0;
+    border-top: 1px solid #2B3A44;
+    border-bottom: 1px solid #2B3A44;
+    .card-body {
+      padding: 5px 0;
+      .spt-col {
+        padding-top: 20px;
+      }
+      .has-image {
+        border-left: 1px solid #c1c1c1;
+        align-content: center;
+      }
+      img {
+        margin: 0 auto;
+        max-width: 80%;
+      }
+    }
+    .mat-h1,
+    .mat-headline-5,
+    .mat-h2,
+    .mat-headline-6,
+    .mat-typography & {
+      .mat-h1,
+      .mat-headline-5,
+      h1,
+      .mat-h2,
+      .mat-headline-6,
+      h2 {
+        text-transform: none;
+        font-weight: 600;
+      }
+    }
+  }
 }
 
+.contacts {
+  .row:not(.card .row) {
+    border-top: 1px solid #2B3A44;
+    padding-bottom: 20px;
+  }
+  .card {
+    border: none;
+    border-radius: 0;
+    background: #f2f2f2;
+    border-top: 2px solid #c1c1c1;
+    margin-top: 20px;
+  }
+  .spt-contact-box {
+    position: relative;
+    .badge {
+      position: absolute;
+      right: 12px;
+      bottom: 0;
+    }
+  }
+  img {
+    object-fit: cover;
+    height: 120px;
+    width: 100%;
+  }
+}
 
 .importance {
   display: block;
@@ -60,23 +274,39 @@ img {
   }
 }
 
-.contacts {
-  img {
-    object-fit: cover;
-    height: 120px;
-    width: 100%;
+.toggle-component {
+  .top-btn {
+    position: absolute;
+    //right: 0;
+    //top: -63px;
+    right: 10px;
+    top: -53px;
+    margin: 0;
+    .btn {
+      //padding-top: 17px;
+      //padding-bottom: 17px;
+    }
+  }
+  app-paging > .mat-mdc-paginator:first-child {
+    border: none;
+  }
+  .mat-mdc-cell {
+    background: #fafafa;
   }
 }
 
 .toggle {
-  background: $color-matsen;
-  color: #fff;
-  padding: 3px 10px 3px 40px;
-  border-radius: 6px;
-  margin-bottom: 1rem;
+  background: #dee2e3;
+  color: #2a3a43;
+  padding: 14px 10px 14px 83px;
+  margin-bottom: 3px;
   position: relative;
   cursor: pointer;
 
+  h2 {
+    text-transform: uppercase;
+  }
+
   * {
     margin: 0 !important;
   }
@@ -85,21 +315,21 @@ img {
   &:after {
     content: "";
     position: absolute;
-    top: 17px;
+    top: 28px;
     width: 15px;
-    height: 2px;
-    background: #fff;
+    height: 4px;
+    background: #2a3a43;
     @include transition();
   }
 
   &:before {
     transform: rotate(45deg);
-    left: 10px;
+    left: 26px;
   }
 
   &:after {
     transform: rotate(-45deg);
-    left: 20px;
+    left: 34px;
   }
 
   &.collapsed {
@@ -113,12 +343,6 @@ img {
   }
 }
 
-.toggle-btn {
-  position: absolute;
-  right: 0;
-  top: -3.38rem;
-}
-
 //.spt-toggle {
 //  position: relative;
 //  padding-left: 30px;
@@ -161,4 +385,3 @@ img {
 //    }
 //  }
 //}
-

matsen-tool/src/assets/scss/_button.scss

@@ -1,3 +1,18 @@
+.btn {
+  border-radius: 0;
+  white-space: nowrap;
+  @include transition();
+}
+
+.btn-primary {
+  background-color: $color-matsen;
+  border-color: $color-matsen;
+  &:hover {
+    background-color: #b71e18;
+    border-color: #b71e18;
+  }
+}
+
 .btn-delete-user {
   width: 40px;
   text-align: center;
@@ -33,14 +48,28 @@
   right: 0;
   top: 0;
   width: auto;
+  background: $color-matsen;
+  color: #fff;
+  &:before {
+    @include transition();
+  }
 
   &:hover:before {
     content: "\f415";
+    color: #fff;
   }
 
   &.user-follows {
     &:hover:before {
       content: "\f417";
+      color: #fff;
     }
   }
 }
+
+.badge {
+  border-radius: 0;
+  background: #2b3b44 !important;
+  font-weight: 400;
+  text-transform: uppercase;
+}

matsen-tool/src/assets/scss/_table.scss

@@ -17,3 +17,49 @@ th.mat-sort-header-sorted {
     padding-bottom: 8px;
   }
 }
+
+.mat-elevation-z8,
+.mat-mdc-elevation-specific.mat-elevation-z8 {
+  box-shadow: none;
+  th {
+    background: #f2f2f2 !important;
+    border-top: 1px solid #304049;
+    font-weight: 600;
+  }
+}
+
+.mat-mdc-paginator {
+  border-top: 1px solid #2b3a44;
+  .mat-mdc-paginator-container {
+    display: flex;
+    justify-content: space-between;
+  }
+  .mat-mdc-paginator-page-size-label,
+  .mat-mdc-paginator-range-label {
+    color: #C1C1C1;
+  }
+  .mat-mdc-text-field-wrapper {
+    border-radius: 0;
+  }
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
+  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
+    border: none;
+  }
+  .mat-mdc-header-cell {
+    border: none;
+  }
+  .mat-mdc-cell {
+    border-bottom: 1px solid #c1c1c1;
+  }
+  tbody {
+    tr:first-child {
+      td {
+
+      }
+    }
+  }
+}
+app-paging > .mat-mdc-paginator:first-child {
+  border-width: 4px;
+}

matsen-tool/src/assets/scss/_text.scss

@@ -0,0 +1,88 @@
+.mat-h1,
+.mat-headline-5,
+.mat-typography .mat-h1,
+.mat-typography .mat-headline-5,
+.mat-typography h1,
+.mat-h2,
+.mat-headline-6,
+.mat-typography .mat-h2,
+.mat-typography .mat-headline-6,
+.mat-typography h2,
+.mat-h3,
+.mat-subtitle-1,
+.mat-typography .mat-h3,
+.mat-typography .mat-subtitle-1,
+.mat-typography h3,
+.mat-h4,
+.mat-body-1,
+.mat-typography .mat-h4,
+.mat-typography .mat-body-1,
+.mat-typography h4,
+.mat-h5,
+.mat-typography .mat-h5,
+.mat-typography h5,
+.mat-h6,
+.mat-typography .mat-h6,
+.mat-typography h6 {
+  font-family: "Montserrat", "Helvetica Neue", sans-serif !important;
+  font-weight: 600;
+}
+.mat-body,
+.mat-body-2,
+.mat-typography .mat-body,
+.mat-typography .mat-body-2,
+.mat-typography,
+.mat-mdc-header-row,
+.mat-mdc-row,
+.mdc-data-table__content,
+.mat-mdc-paginator,
+.mat-mdc-select,
+.mat-mdc-option {
+  font-family: "Montserrat", "Helvetica Neue", sans-serif !important;
+}
+
+.home-container .mat-h1,
+.home-container .mat-headline-5,
+.home-container .mat-typography .mat-h1,
+.mat-typography .home-container  .mat-headline-5,
+.mat-typography .home-container h1 {
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
+h2.spt-headline {
+  text-transform: uppercase;
+  font-weight: 800;
+}
+
+.spt-back-btn {
+  position: relative;
+  font-size: 14px;
+  line-height: 18px;
+  cursor: pointer;
+  display: inline-block;
+  &:before {
+    content: "< ";
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+dt {
+  font-weight: 600;
+}
+
+table,
+p,
+ul,
+ol,
+dl {
+  a {
+    color: $color-matsen;
+    @include transition();
+    &:hover {
+      color: #b71e18;
+    }
+  }
+}

matsen-tool/src/index.html

@@ -6,10 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
 </html>

matsen-tool/src/styles.scss

@@ -6,6 +6,7 @@
 @import "assets/scss/modal";
 @import "assets/scss/form";
 @import "assets/scss/table";
+@import "assets/scss/text";
 @import "assets/scss/sales";
 @import "assets/scss/button";
 @import "assets/scss/accordion";