Eigenschaften done; general color scheme started

src/app/journal/journal-home/details-panel/details-panel.component.html

@@ -1,6 +1,6 @@
-<div #backdrop class="backdrop" (click)="closeOffcanvas()"></div>
-<div #offcanvas class="panel">
+<div #backdrop class="backdrop" (click)="closePanel()"></div>
+<div #detailsPanel class="panel">
   <ng-template
-    *ngComponentOutlet="offcanvasComponent; inputs: inputData"
+    *ngComponentOutlet="detailsPanelComponent; inputs: inputData"
   ></ng-template>
 </div>

src/app/journal/journal-home/details-panel/details-panel.component.scss

@@ -20,7 +20,8 @@
     right: 0;
     bottom: 0;
     width: 25vw;
-    background: #fff;
+    // background: #fff;
+    background-color: var(--background-color);
     z-index: 999;
     transform: translateX(100%);
     transition: transform 0.3s ease-in-out;

src/app/journal/journal-home/details-panel/details-panel.component.ts

@@ -9,28 +9,28 @@ import { DetailsService } from 'src/services/details/details.service';
 export class DetailsPanelComponent {
   public constructor(private details: DetailsService) {}
   @ViewChild('backdrop') backdrop: any;
-  @ViewChild('offcanvas') offcanvas: any;
+  @ViewChild('detailsPanel') offcanvas: any;
 
-  public offcanvasComponent: any;
+  public detailsPanelComponent: any;
   public inputData: any;
 
   ngOnInit() {
-    this.details.offcanvas$.subscribe((data) => {
+    this.details.detailsPanel$.subscribe((data) => {
       // console.log('offcanvasComponent', data);
-      this.offcanvasComponent = data.component;
+      this.detailsPanelComponent = data.component;
       this.inputData = data.data;
       this.backdrop.nativeElement.classList.add('backdrop--open');
       this.offcanvas.nativeElement.classList.add('panel--open');
     });
-    this.details.closeOffcanvas$.subscribe(() => {
-      this.closeOffcanvas();
+    this.details.closePanel$.subscribe(() => {
+      this.closePanel();
     });
   }
 
-  public closeOffcanvas(): void {
+  public closePanel(): void {
     this.backdrop.nativeElement.classList.remove('backdrop--open');
     this.offcanvas.nativeElement.classList.remove('panel--open');
-    this.offcanvasComponent = undefined;
+    this.detailsPanelComponent = undefined;
     this.inputData = undefined;
 
     // event mit dem ergebnis emitten

src/app/journal/journal-stats/ability-panel/ability-panel.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./ability-panel.component.scss'],
 })
 export class AbilityPanelComponent {
-  active = 3;
+  active = 2;
 }

src/app/journal/journal-stats/ability-panel/trait-table/trait-details/trait-details.component.html

@@ -1,9 +1,24 @@
-<div class="name">{{ trait?.name }}</div>
-<div class="short-description">{{ trait?.shortDescription }}</div>
-<div class="long-description">{{ trait?.longDescription }}</div>
+<div class="details-name">{{ trait?.name }}</div>
 
-<button (click)="close('update')">Update</button>
-<br />
-<button (click)="close('delete')">Delete</button>
-<br />
-<button (click)="close('dismiss')">Dismiss</button>
+<div class="details-long-description">{{ trait?.longDescription }}</div>
+
+<div class="vertical-button-wrapper">
+  <ui-button
+    [type]="'update'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'delete'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('delete')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.ts

@@ -75,10 +75,10 @@ export class TraitTableComponent {
     this.updateDatabase();
   }
 
-  // offcanvas
+  // details Panel
 
   public openDetailsPanel(index: number): void {
-    this.detailsAccesssor.openOffcanvas(TraitDetailsComponent, {
+    this.detailsAccesssor.openPanel(TraitDetailsComponent, {
       trait: this.traits[index],
     });
     const resultSubscription = this.detailsAccesssor.result$.subscribe(

src/app/shared-components/shared-components.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SwitchComponent } from './switch/switch.component';
+import { UiButtonComponent } from './ui-button/ui-button.component';
 
 @NgModule({
-  declarations: [SwitchComponent],
+  declarations: [SwitchComponent, UiButtonComponent],
   imports: [CommonModule],
-  exports: [SwitchComponent],
+  exports: [SwitchComponent, UiButtonComponent],
 })
 export class SharedComponentsModule {}

src/app/shared-components/ui-button/ui-button.component.html

@@ -0,0 +1 @@
+<div class="ui-button" [class]="size + ' ' + color">{{ text }}</div>

src/app/shared-components/ui-button/ui-button.component.scss

@@ -0,0 +1,64 @@
+.ui-button{
+    // background-color: var(--tertiary-color);
+    text-align: center;
+    border-radius: 10px;
+    padding: 10px;
+    color: black;
+    cursor: pointer;
+    box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.2);
+    margin:auto;
+    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+// .ui-button:hover{
+//     background-color: #9e6a50;
+//     box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.4);
+// }
+
+.primary{
+    background-color: var(--primary-color);
+}
+
+.primary:hover{
+    background-color: var(--primary-color-dark);
+}
+
+.secondary{
+    background-color: var(--secondary-color);
+}
+
+.secondary:hover{
+    background-color: var(--secondary-color-dark);
+}
+
+.tertiary{
+    background-color: var(--tertiary-color);
+}
+
+.tertiary:hover{
+    background-color: var(--tertiary-color-dark);
+}
+
+.quaternary{
+    background-color: var(--quaternary-color);
+}
+
+.quaternary:hover{
+    background-color: var(--quaternary-color-dark);
+}
+
+.small{
+    width: 20%;
+}
+
+.medium{
+    width: 40%;
+}
+
+.large{
+    width: 60%
+}
+
+.xlarge{
+    width: 80%;
+}

src/app/shared-components/ui-button/ui-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UiButtonComponent } from './ui-button.component';
+
+describe('UiButtonComponent', () => {
+  let component: UiButtonComponent;
+  let fixture: ComponentFixture<UiButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UiButtonComponent]
+    });
+    fixture = TestBed.createComponent(UiButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared-components/ui-button/ui-button.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ui-button',
+  templateUrl: './ui-button.component.html',
+  styleUrls: ['./ui-button.component.scss'],
+})
+export class UiButtonComponent {
+  @Input() type!: string;
+  @Input() size!: string;
+  @Input() color!: string;
+
+  public text?: string;
+
+  public textArray: any = {
+    add: 'Hinzufügen',
+    update: 'Aktualisieren',
+    delete: 'Löschen',
+    dismiss: 'Abbrechen',
+  };
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.text = this.textArray[this.type];
+  }
+}

src/services/details/details.service.ts

@@ -5,18 +5,17 @@ import { Subject } from 'rxjs';
   providedIn: 'root',
 })
 export class DetailsService {
-  private offcanvasSubject = new Subject<any>();
-  offcanvas$ = this.offcanvasSubject.asObservable();
+  private detailsPanelSubject = new Subject<any>();
+  detailsPanel$ = this.detailsPanelSubject.asObservable();
 
-  private closeOffcanvasSubject = new Subject<any>();
-  closeOffcanvas$ = this.closeOffcanvasSubject.asObservable();
+  private closePanelSubject = new Subject<any>();
+  closePanel$ = this.closePanelSubject.asObservable();
 
   private resultSubject = new Subject<any>();
   result$ = this.resultSubject.asObservable();
 
-  public openOffcanvas(component: any, data: any) {
-    // console.log('openOffcanvas', component, data);
-    this.offcanvasSubject.next({ component, data });
+  public openPanel(component: any, data: any) {
+    this.detailsPanelSubject.next({ component, data });
   }
 
   // Is called from the dynamic component to close the offcanvas
@@ -24,10 +23,6 @@ export class DetailsService {
     // console.log('closePanel', result);
     // Is listened to in the host component where the panel was opened, to initiate further steps
     this.resultSubject.next(result);
-    this.closeOffcanvas();
-  }
-
-  public closeOffcanvas() {
-    this.closeOffcanvasSubject.next('close');
+    this.closePanelSubject.next('close');
   }
 }

src/styles.scss

@@ -9,6 +9,56 @@ $dialog-position-right: 20%;
 
 @import 'node_modules/ngx-smart-modal/styles/ngx-smart-modal.scss';
 
+// general
+:root{
+    --primary-color: #d8ac96;
+    --primary-color-light: #e8c7b5;
+    --primary-color-dark: #d89777;
+    --secondary-color: #efc8af;
+    --secondary-color-light: #f8e1d7;
+    --secondary-color-dark: #cfaa8c;
+    --tertiary-color: #b9835d;
+    --tertiary-color-light: #cfaa8c;
+    --tertiary-color-dark: #8f5f3b;
+    --quaternary-color: #84a36f;
+    --quaternary-color-light: #7a9e65;
+    --quaternary-color-dark: #6eae52;
+
+    --background-color: #ede2db;
+    
+}
+
+
+// details-panel
+
+.vertical-button-wrapper{
+    width: 100%;
+    position: absolute;
+    bottom: 2rem;
+    display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-top: 2rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.details-name{
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-top: 1.5rem;
+    text-align:center;
+}
+
+.details-long-description{
+    margin: 2rem 1rem;
+    font-size: 1rem;
+    // margin-top: 2rem;
+}
+
+// 
+
 
 .flex-row{
     display: flex;