From 671df50c36ad7e04197e811abbf1d0a4e1b86914 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MacBook-Pro-von-Florian.fritz.box>
Date: Wed, 19 Jun 2024 10:32:16 +0200
Subject: [PATCH] fixes and beautifying

---
 .../search-select.component.html              |  2 +-
 .../app/_views/account/layout.component.html  |  2 +-
 .../contact-list/contact-list.component.ts    | 15 +++++------
 .../contacts-detail.component.ts              | 14 +++++-----
 .../new-contact/new-contact.component.html    |  3 +--
 .../new-contact/new-contact.component.ts      | 11 +++-----
 .../document-list.component.html              |  1 -
 .../document-list/document-list.component.ts  | 17 ++++++------
 .../new-document/new-document.component.ts    | 10 +++----
 .../sales-detail/sales-detail.component.html  | 22 +++++++--------
 .../tasks/task-list/task-list.component.html  |  2 --
 .../tasks/task-list/task-list.component.ts    |  9 ++-----
 matsen-tool/src/app/app.module.ts             |  3 ++-
 matsen-tool/src/assets/scss/_sidebar.scss     | 27 +++++++++++++++++--
 14 files changed, 73 insertions(+), 65 deletions(-)

diff --git a/matsen-tool/src/app/_components/search-select/search-select.component.html b/matsen-tool/src/app/_components/search-select/search-select.component.html
index f5bef98..5831c18 100644
--- a/matsen-tool/src/app/_components/search-select/search-select.component.html
+++ b/matsen-tool/src/app/_components/search-select/search-select.component.html
@@ -14,4 +14,4 @@
         >
         </app-list>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/matsen-tool/src/app/_views/account/layout.component.html b/matsen-tool/src/app/_views/account/layout.component.html
index 134a1de..7e3b7ce 100644
--- a/matsen-tool/src/app/_views/account/layout.component.html
+++ b/matsen-tool/src/app/_views/account/layout.component.html
@@ -1,3 +1,3 @@
 <div class="container col-md-6 offset-md-3 mt-5">
     <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+</div>
diff --git a/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.ts b/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.ts
index 651f431..390615d 100644
--- a/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.ts
+++ b/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.ts
@@ -1,5 +1,4 @@
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
-import {Subscription} from "rxjs";
 import {ContactJsonld, ContactService, PartnerJsonld} from "@app/core/api/v1";
 import {MatTableDataSource} from "@angular/material/table";
 import {NewContactComponent} from "@app/_views/contacts/new-contact/new-contact.component";
@@ -8,16 +7,15 @@ import {AppHelperService} from "@app/_helpers/app-helper.service";
 import {PagingComponent} from "@app/_components/paging/paging.component";
 
 @Component({
-  selector: 'app-contact-list',
-  templateUrl: './contact-list.component.html',
-  styleUrl: './contact-list.component.scss'
+    selector: 'app-contact-list',
+    templateUrl: './contact-list.component.html',
+    styleUrl: './contact-list.component.scss'
 })
 export class ContactListComponent implements OnInit, AfterViewInit {
 
     @Input() public partner!: PartnerJsonld;
-    @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
+    @ViewChild("pagingComponent", {static: false}) pagingComponent!: PagingComponent;
 
-    protected contactsSub: Subscription;
     protected contacts: Array<ContactJsonld>;
     protected dataSource;
 
@@ -26,7 +24,6 @@ export class ContactListComponent implements OnInit, AfterViewInit {
         private contactService: ContactService,
         protected appHelperService: AppHelperService
     ) {
-        this.contactsSub = new Subscription();
         this.contacts = [];
         this.dataSource = new MatTableDataSource<ContactJsonld>(this.contacts);
     }
@@ -39,7 +36,7 @@ export class ContactListComponent implements OnInit, AfterViewInit {
     }
 
     getData = () => {
-        this.contactsSub = this.contactService.contactsGetCollection(
+        this.contactService.contactsGetCollection(
             this.pagingComponent.getPageIndex(),
             this.pagingComponent.getPageSize(),
             this.partner.id
@@ -54,7 +51,7 @@ export class ContactListComponent implements OnInit, AfterViewInit {
     openModalNewContact() {
         let contact: ContactJsonld = {} as ContactJsonld;
         contact.partnerIri = this.partner.id ?? null;
-        this.appHelperService.openModal(NewContactComponent, { 'contact': contact }, this.getData);
+        this.appHelperService.openModal(NewContactComponent, {'contact': contact}, this.getData);
     }
 
     navigateToContactDetails(element: any) {
diff --git a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.ts b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.ts
index dce59b6..6cfd93f 100644
--- a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.ts
+++ b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.ts
@@ -1,6 +1,8 @@
 import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {
-    ContactJsonld, ContactPartnerProduct, ContactPartnerProductJsonld, ContactPartnerProductService,
+    ContactJsonld,
+    ContactPartnerProductJsonld,
+    ContactPartnerProductService,
     ContactService,
     PartnerJsonld,
     PartnerService,
@@ -21,10 +23,10 @@ import {ProductListComponent} from "@app/_views/products/product-list/product-li
     styleUrl: './contacts-detail.component.scss'
 })
 export class ContactsDetailComponent implements OnInit, AfterViewInit {
-    @ViewChild("togglePosts", { static: true }) togglePosts!: ToggleComponent;
-    @ViewChild("postListComponent", { static: false }) postsComponent!: PostListComponent;
-    @ViewChild("toggleProducts", { static: true }) toggleProducts!: ToggleComponent;
-    @ViewChild("productListComponent", { static: false }) productsComponent!: ProductListComponent;
+    @ViewChild("togglePosts", {static: true}) togglePosts!: ToggleComponent;
+    @ViewChild("postListComponent", {static: false}) postsComponent!: PostListComponent;
+    @ViewChild("toggleProducts", {static: true}) toggleProducts!: ToggleComponent;
+    @ViewChild("productListComponent", {static: false}) productsComponent!: ProductListComponent;
 
     protected user: User | null;
 
@@ -101,7 +103,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     }
 
     openModalEditContact() {
-        let data: any = { 'contact': this.contact }
+        let data: any = {'contact': this.contact}
         if (this.contact.birthday !== undefined) {
             data.birthdayValue = this.appHelperService.convertDate(this.contact.birthday);
         }
diff --git a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html
index 05276ae..675af87 100644
--- a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html
+++ b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.html
@@ -49,7 +49,7 @@
 
         <div class="mb-3" *ngIf="contactForm.get('imageUrl')?.value !== null">
             <div class="delete-image" (click)="onDeleteImage()">
-                <img  src="{{contact.imageUrl}}" width="40" height="40"   />
+                <img  src="{{contact.imageUrl}}" width="40" height="40" alt="{{contact.firstName}} {{contact.lastName}}" />
                 <p class="mb-0 ms-3">{{'system.delete-image' | translate}}</p>
             </div>
         </div>
@@ -57,4 +57,3 @@
         <button type="submit" class="btn btn-primary" [disabled]="contactForm.invalid">{{'form.send' | translate}}</button>
     </form>
 </div>
-
diff --git a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.ts b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.ts
index 40fcd46..5ec0caf 100644
--- a/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.ts
+++ b/matsen-tool/src/app/_views/contacts/new-contact/new-contact.component.ts
@@ -2,7 +2,6 @@ import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output} from '@an
 import {FormGroup} from "@angular/forms";
 import {contactForm} from "@app/_forms/apiForms";
 import {ContactJsonld, ContactService, MediaObjectService} from "@app/core/api/v1";
-import {firstValueFrom, Subscription, window} from "rxjs";
 import {ModalStatus} from "@app/_helpers/modal.states";
 import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
 import {TranslateService} from "@ngx-translate/core";
@@ -20,8 +19,6 @@ export class NewContactComponent implements OnInit, AfterViewInit {
 
     protected contactForm: FormGroup;
     protected selectedImage: File | null;
-    protected contactSub: Subscription;
-    protected mediaSub: Subscription;
     protected birthdayValue: string;
 
     constructor(
@@ -32,8 +29,6 @@ export class NewContactComponent implements OnInit, AfterViewInit {
     ) {
         this.contactForm = contactForm;
         this.selectedImage = null;
-        this.contactSub = new Subscription();
-        this.mediaSub = new Subscription();
         this.birthdayValue = "";
     }
 
@@ -56,7 +51,7 @@ export class NewContactComponent implements OnInit, AfterViewInit {
     // On submit form: Check if image is set
     onSubmit() {
         if (this.selectedImage !== null) {
-            this.mediaSub = this.mediaObjectService.mediaObjectsPost(
+            this.mediaObjectService.mediaObjectsPost(
                 this.selectedImage
             ).subscribe(
                 data => {
@@ -73,7 +68,7 @@ export class NewContactComponent implements OnInit, AfterViewInit {
         if (this.contactForm.valid) {
             if (this.contact.id === null || this.contact.id === undefined) {
                 // Create new contact
-                this.contactSub = this.contactService.contactsPost(
+                this.contactService.contactsPost(
                     this.contactForm.value as ContactJsonld
                 ).subscribe(
                     data => {
@@ -83,7 +78,7 @@ export class NewContactComponent implements OnInit, AfterViewInit {
                 );
             } else {
                 // Edit contact
-                this.contactSub = this.contactService.contactsIdPatch(
+                this.contactService.contactsIdPatch(
                     this.appHelperService.extractId(this.contact.id),
                     this.contactForm.value as ContactJsonld
                 ).subscribe(
diff --git a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html
index e468bad..bd9b9dd 100644
--- a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html
+++ b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html
@@ -12,4 +12,3 @@
               [showDetailButton]="false"
     ></app-list>
 </div>
-
diff --git a/matsen-tool/src/app/_views/documents/document-list/document-list.component.ts b/matsen-tool/src/app/_views/documents/document-list/document-list.component.ts
index 8a467fc..8152036 100644
--- a/matsen-tool/src/app/_views/documents/document-list/document-list.component.ts
+++ b/matsen-tool/src/app/_views/documents/document-list/document-list.component.ts
@@ -1,23 +1,22 @@
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {DocumentJsonld, DocumentService, PartnerJsonld, ProductJsonld} from "@app/core/api/v1";
 import {AppHelperService} from "@app/_helpers/app-helper.service";
-import {MatSort, Sort} from "@angular/material/sort";
-import {MatTableDataSource} from "@angular/material/table";
+import {Sort} from "@angular/material/sort";
 import {OrderFilter} from "@app/_models/orderFilter";
 import {NewDocumentComponent} from "@app/_views/documents/new-document/new-document.component";
 import {ListComponent} from "@app/_components/list/list.component";
 import {ListColDefinition} from "@app/_components/list/list-col-definition";
 
 @Component({
-  selector: 'app-document-list',
-  templateUrl: './document-list.component.html',
-  styleUrl: './document-list.component.scss'
+    selector: 'app-document-list',
+    templateUrl: './document-list.component.html',
+    styleUrl: './document-list.component.scss'
 })
 export class DocumentListComponent implements OnInit, AfterViewInit {
 
     @Input() public product!: ProductJsonld;
     @Input() public partner!: PartnerJsonld;
-    @ViewChild("listComponent", { static: false }) listComponent!: ListComponent;
+    @ViewChild("listComponent", {static: false}) listComponent!: ListComponent;
 
     protected listColDefinitions!: ListColDefinition[];
 
@@ -76,7 +75,7 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
         ];
     }
 
-    ngOnInit(){
+    ngOnInit() {
     }
 
     ngAfterViewInit() {
@@ -112,11 +111,11 @@ export class DocumentListComponent implements OnInit, AfterViewInit {
 
     openModalNewDocument() {
         let document: DocumentJsonld = {} as DocumentJsonld;
-        this.appHelperService.openModal(NewDocumentComponent, { 'document': document }, this.listComponent.getData);
+        this.appHelperService.openModal(NewDocumentComponent, {'document': document}, this.listComponent.getData);
     }
 
     openModalEditDocument(element: DocumentJsonld) {
-        this.appHelperService.openModal(NewDocumentComponent, { 'document': element }, this.listComponent.getData);
+        this.appHelperService.openModal(NewDocumentComponent, {'document': element}, this.listComponent.getData);
     }
 
 }
diff --git a/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts b/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts
index 167f553..e3e81ba 100644
--- a/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts
+++ b/matsen-tool/src/app/_views/documents/new-document/new-document.component.ts
@@ -18,11 +18,11 @@ import {ListGetDataFunctionType} from "@app/_components/list/list-get-data-funct
     templateUrl: './new-document.component.html',
     styleUrl: './new-document.component.scss'
 })
-export class NewDocumentComponent implements OnInit, AfterViewInit  {
+export class NewDocumentComponent implements OnInit, AfterViewInit {
     @Input() public document!: DocumentJsonld;
     @Output() public submit: EventEmitter<ModalStatus> = new EventEmitter<ModalStatus>();
-    @ViewChild('partnerSearchSelect', { static: false }) partnerSearchSelect!: SearchSelectComponent;
-    @ViewChild('productSearchSelect', { static: false }) productSearchSelect!: SearchSelectComponent;
+    @ViewChild('partnerSearchSelect', {static: false}) partnerSearchSelect!: SearchSelectComponent;
+    @ViewChild('productSearchSelect', {static: false}) productSearchSelect!: SearchSelectComponent;
     protected readonly SearchSelectComponent = SearchSelectComponent;
 
     protected documentForm: FormGroup;
@@ -47,7 +47,7 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
     ngAfterViewInit(): void {
     }
 
-    getPartners: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+    getPartners: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any> => {
         return this.partnerService.partnersGetCollection(
             index,
             pageSize,
@@ -57,7 +57,7 @@ export class NewDocumentComponent implements OnInit, AfterViewInit  {
         );
     }
 
-    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any>  =>  {
+    getProducts: ListGetDataFunctionType = (index: number, pageSize: number, term?: string): Observable<any> => {
         return this.productService.productsGetCollection(
             index,
             pageSize,
diff --git a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html
index 488f752..7c34370 100644
--- a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html
+++ b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html
@@ -2,29 +2,29 @@
     <div class="card">
         <div *ngIf="sale" class="card-body row pb-5">
             <div class="spt-col col-12 col-sm-6 col-lg-8">
-                <h1>{{'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}</h1>
+                <h1>{{ 'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}</h1>
                 <dl>
-                    <dt *ngIf="sale.partner?.name">{{'overview.partner' | translate}}:</dt>
+                    <dt *ngIf="sale.partner?.name">{{ 'overview.partner' | translate }}:</dt>
                     <dd *ngIf="sale.partner?.name">{{ sale.partner?.name }}</dd>
-                    <dt *ngIf="sale.product?.name">{{'overview.product' | translate}}:</dt>
+                    <dt *ngIf="sale.product?.name">{{ 'overview.product' | translate }}:</dt>
                     <dd *ngIf="sale.product?.name">{{ sale.product?.name }}</dd>
-                    <dt *ngIf="sale.turnover">{{'overview.turnover' | translate}}:</dt>
+                    <dt *ngIf="sale.turnover">{{ 'overview.turnover' | translate }}:</dt>
                     <dd *ngIf="sale.turnover">{{ sale.turnover }}</dd>
-                    <dt *ngIf="sale.profit">{{'overview.profit' | translate}}:</dt>
+                    <dt *ngIf="sale.profit">{{ 'overview.profit' | translate }}:</dt>
                     <dd *ngIf="sale.profit">{{ sale.profit }}</dd>
-                    <dt *ngIf="sale.comment">{{'overview.comment' | translate}}:</dt>
+                    <dt *ngIf="sale.comment">{{ 'overview.comment' | translate }}:</dt>
                     <dd *ngIf="sale.comment" [innerHTML]="appHelperService.getSafeLongtext(sale.comment)"></dd>
                 </dl>
             </div>
             <div class="col-12 col-sm-6 col-lg-4">
-            <span *ngIf="sale.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
-                  (click)="openModalEditSale()"></span>
+                <span *ngIf="sale.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                      data-action="edit"
+                      (click)="openModalEditSale()"></span>
+            </div>
         </div>
     </div>
 </div>
 
 <app-toggle #togglePosts [headline]="'basic.posts' | translate">
-    <app-post-list *ngIf="togglePosts.isOpened" #postListComponent
-                   [sale]="sale"
-    ></app-post-list>
+    <app-post-list *ngIf="togglePosts.isOpened" [sale]="sale"></app-post-list>
 </app-toggle>
diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
index c944293..f7b68de 100644
--- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
+++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html
@@ -52,8 +52,6 @@
                                 <div class="col-12 col-md-8">
                                     <p class="m-0 mb-3 mt-2"
                                        [innerHTML]="appHelperService.getSafeLongtext(task.description)"></p>
-                                    <span *ngIf="task.createdBy?.id === currentUser?.id" class="position-absolute bi bi-pencil p-2"
-                                          data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
                                     <div class="spt-comments-box d-flex justify-content-end mt-1 position-absolute">
                                         <span *ngIf="task.numTaskNotes !== undefined && task.numTaskNotes !== null && task.numTaskNotes > 0"
                                               role="button" class="spt-btn-low badge bg-secondary p-2 me-2"
diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
index 73b9eb8..d0acb62 100644
--- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
+++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.ts
@@ -2,7 +2,6 @@ import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core'
 import {PagingComponent} from "@app/_components/paging/paging.component";
 import {Subscription} from "rxjs";
 import {
-    CommentJsonld,
     PartnerJsonld,
     TaskJsonld,
     TaskNoteJsonld,
@@ -29,8 +28,6 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent;
 
     protected currentUser: User | null;
-    protected tasksSub: Subscription;
-    protected tasksNotesSub: Subscription;
     protected tasks: Array<TaskJsonld>;
     protected dataSource;
     protected taskCompactMode: boolean;
@@ -46,9 +43,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
         private taskNoteService: TaskNoteService,
         protected appHelperService: AppHelperService,
     ) {
-        this.tasksSub = new Subscription();
         this.tasks = [];
-        this.tasksNotesSub = new Subscription();
         this.taskNotes = new Map<string, TaskNoteJsonld[]>();
         this.dataSource = new MatTableDataSource<TaskJsonld>(this.tasks);
         this.taskNotesVisibility = new Map<string, boolean>();
@@ -78,7 +73,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
     }
 
     getTasksData = () => {
-        this.tasksSub = this.taskService.tasksGetCollection(
+        this.taskService.tasksGetCollection(
             this.pagingComponent.getPageIndex(),
             this.pagingComponent.getPageSize(),
             this.user?.id,
@@ -123,7 +118,7 @@ export class TaskListComponent implements OnInit, AfterViewInit {
 
     getTaskNotes = (taskIri: string) => {
         // TODO: Weiterblättern, 50 comments only
-        this.tasksNotesSub = this.taskNoteService.taskNotesGetCollection(
+        this.taskNoteService.taskNotesGetCollection(
             1,
             50,
             taskIri
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 50c58a3..1bc8812 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -108,7 +108,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         MatAutocompleteModule,
         MatFormFieldModule,
         MatInputModule,
-        MatTabsModule
+        MatTabsModule,
+        TranslateModule
     ],
     declarations: [
         AppComponent,
diff --git a/matsen-tool/src/assets/scss/_sidebar.scss b/matsen-tool/src/assets/scss/_sidebar.scss
index 394b6c3..4723c92 100644
--- a/matsen-tool/src/assets/scss/_sidebar.scss
+++ b/matsen-tool/src/assets/scss/_sidebar.scss
@@ -10,6 +10,7 @@
   padding: 0;
   cursor: pointer;
   @include transition();
+
   &:before, &:after {
     content: "";
     display: block;
@@ -18,20 +19,24 @@
     top: 0;
     width: 100%;
   }
+
   &:before {
     height: 11px;
     border-top: 2px solid rgb(43, 58, 68);
     border-bottom: 2px solid rgb(43, 58, 68);
   }
+
   &:after {
     top: 18px;
     height: 2px;
     background: rgb(43, 58, 68);
   }
+
   &.nav-open {
     right: 288px;
   }
 }
+
 .spt-sidebar {
   position: relative;
   padding: 0;
@@ -48,15 +53,18 @@
       right: 12px;
     }
   }
+
   .card {
     background: transparent;
     color: #fff;
     border-bottom: 1px solid #fff;
     width: 100%;
     text-decoration: none;
+
     &:hover {
       background: #556169;
     }
+
     .card-body {
       min-height: 50px;
       text-transform: uppercase;
@@ -67,64 +75,79 @@
         bottom: 10px;
       }
     }
+
     &.active {
+      background: #556169;
+
       .card-body {
         min-height: 100px;
         position: relative;
+
         &:before {
           content: "";
           position: absolute;
           left: 20px;
           top: 50%;
-          transform: translate(0,-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%);
+          transform: translate(0, 50%);
         }
       }
     }
   }
+
   .nav {
     li {
       margin: 0 !important;