restyling of details and modals

.nx/cache/d/daemon.log

@@ -466675,3 +466675,39 @@ To fix this, set a unique name for each project in a project.json inside the pro
     at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
 [NX Daemon Server] - 2024-02-11T09:01:43.193Z - Time taken for 'hash changed files from watcher' 31.82649999856949ms
 [NX Daemon Server] - 2024-02-11T09:01:43.193Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-11T18:59:55.433Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-11T18:59:55.435Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-11T18:59:55.448Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-11T18:59:55.449Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-11T18:59:55.449Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-11T18:59:55.451Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-11T18:59:56.508Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-11T18:59:56.509Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-11T18:59:56.509Z - Time taken for 'hash changed files from watcher' 379.8712999820709ms
+[NX Daemon Server] - 2024-02-11T18:59:56.509Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":14556}
+{"processId":18404}

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

@@ -1,30 +1,18 @@
-<div class="details-name">{{ abilities?.name }}</div>
+<div class="title">{{ ability?.name }}</div>
 
-<div class="details-long-description">{{ abilities?.longDescription }}</div>
+<div class="content" [innerHTML]="ability?.longDescription"></div>
 
 <div class="details-cost-charge">
-  <div class="details-cost">{{ costTranslator[abilities!.cost] }}</div>
+  <div class="details-cost">{{ costTranslator[ability!.cost] }}</div>
 
-  <div class="details-charges">Aufladungen: {{ abilities?.charges }}</div>
+  <div class="details-charges">Aufladungen: {{ ability?.charges }}</div>
 </div>
 
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [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]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
+    Anpassen
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w20'" (click)="close('delete')">
+    Löschen
+  </ui-button>
 </div>

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

@@ -17,7 +17,7 @@ export class AbilityDetailsComponent {
     none: 'Keine Kosten',
   };
 
-  @Input() abilities: Ability | undefined;
+  @Input() ability: Ability | undefined;
 
   public close(result: string): void {
     this.detailsAccessor.closePanel(result);

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

@@ -1,80 +1,80 @@
-<div class="modal-dimensions">
-  <div class="add-form-group">
-    <div class="modal-title">
-      <h3 *ngIf="!isUpdate">Fähigkeit erstellen</h3>
-      <h3 *ngIf="isUpdate">Fähigkeit anpassen</h3>
+<div class="dimensions">
+  <div class="title">Fähigkeit @if(isUpdate){anpassen}@else{erstellen}</div>
+
+  <div class="flex-form t-15">
+    <div>
+      <div class="name">Name</div>
+      <mat-form-field appearance="outline" class="w-50">
+        <input matInput [(ngModel)]="name" />
+      </mat-form-field>
     </div>
-    <div class="modal-body">
-      <div class="modal-input">
-        <label for="abilityName">Name</label>
-        <input
-          type="text"
-          class="modal-input"
-          id="abilityName"
-          [(ngModel)]="name"
-        />
-      </div>
 
-      <div class="modal-input">
-        <label for="abilityShortDescription">Kurzbeschreibung</label>
-        <textarea
-          id="abilityShortDescription"
+    <div>
+      <div class="name">Kurze Beschreibung</div>
+      <div class="NgxEditor__Wrapper">
+        <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
+        </ngx-editor-menu>
+        <ngx-editor
+          [editor]="shortEditor"
           [(ngModel)]="shortDescription"
-        ></textarea>
+        ></ngx-editor>
       </div>
+      <div class="hint">Wird in der Übersicht angezeigt</div>
+    </div>
 
-      <div class="modal-input">
-        <label for="abilityLongDescription">Ausführliche Beschreibung</label>
-        <textarea
-          id="abilityLongDescription"
+    <div>
+      <div class="name">Ausführliche Beschreibung</div>
+      <div class="NgxEditor__Wrapper">
+        <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
+        </ngx-editor-menu>
+        <ngx-editor
+          [editor]="longEditor"
           [(ngModel)]="longDescription"
-        ></textarea>
+        ></ngx-editor>
       </div>
+      <div class="hint">Wird in der Detailansicht angezeigt</div>
+    </div>
 
-      <div class="modal-input">
-        <label>Kosten</label>
-        <select [(ngModel)]="cost">
-          <option *ngFor="let cost of costs" [value]="cost.value">
-            {{ cost.display }}
-          </option>
-        </select>
+    <div class="flex-row">
+      <div class="w-100">
+        <div class="name">Kosten</div>
+
+        <mat-form-field appearance="outline" class="w-100">
+          <!-- <mat-label>Kosten</mat-label> -->
+          <mat-select [(ngModel)]="cost">
+            @for (cost of costs; track cost) {
+            <mat-option [value]="cost.value">{{ cost.display }}</mat-option
+            >}
+          </mat-select>
+        </mat-form-field>
       </div>
 
-      <div class="modal-input">
-        <label>Verwendungen</label>
-        <select [(ngModel)]="charges">
-          <option
-            *ngFor="let charge of chargesTranslator"
-            [value]="charge.value"
-          >
-            {{ charge.display }}
-          </option>
-        </select>
+      <div class="w-100">
+        <div class="name">Nutzungen</div>
+        <mat-form-field appearance="outline" class="w-100">
+          <!-- <mat-label>Nutzungen</mat-label> -->
+          <mat-select [(ngModel)]="charges">
+            @for (charge of chargesTranslator; track charge) {
+            <mat-option [value]="charge.value">{{ charge.display }}</mat-option
+            >}
+          </mat-select>
+        </mat-form-field>
       </div>
     </div>
-  </div>
-  <div class="button-wrapper-2-block">
-    @if(isUpdate){
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    }@else{
-    <ui-button
-      *ngIf="!isUpdate"
-      [type]="'add'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="add()"
-    ></ui-button>
-    }
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
+
+    <div class="horizontal-buttons">
+      @if(isUpdate){
+      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+        >Aktualisieren</ui-button
+      >
+      }@else{
+      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+        >hinzufügen</ui-button
+      >
+      }
+      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+        >Abbrechen</ui-button
+      >
+    </div>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.scss

@@ -1,19 +1,13 @@
-.modal-dimensions {
-    width: 40vw;
+.dimensions {
+    width: 50rem;
     background-color: var(--modal-background);
     border-radius: 10px;
     border: 1px solid var(--border-color);
-    padding: 1rem;
+    box-shadow: var(--shadow);
+    padding: 0 2rem;
 }
 
-.add-form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.modal-input {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+.name {
+    font-weight: 600;
+    padding-left: 0.25rem;
 }

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

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Editor } from 'ngx-editor';
 import { ModalService } from 'src/services/modal/modal.service';
 import { Ability } from 'src/interfaces/ability';
 
@@ -11,6 +12,16 @@ export class AbilityModalComponent {
   @Input() public isUpdate: boolean = false;
   @Input() public ability: Ability | undefined;
 
+  shortEditor: Editor = new Editor();
+  longEditor: Editor = new Editor();
+  html = '';
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
+
   public name: string = '';
   public charges: number = 0;
   public currentlyUsedCharges: number = 0;
@@ -46,6 +57,12 @@ export class AbilityModalComponent {
     }
   }
 
+  // make sure to destory the editor
+  ngOnDestroy(): void {
+    this.shortEditor.destroy();
+    this.longEditor.destroy();
+  }
+
   //   FUNCTIONS
 
   public loadItem(): void {

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

@@ -18,7 +18,7 @@
         <div class="cost">{{ costTranslator[ability.cost] }}</div>
       </div>
 
-      <p>{{ ability.shortDescription }}</p>
+      <p [innerHTML]="ability.shortDescription"></p>
 
       <div class="charges-box" *ngIf="ability.charges != 0">
         Nutzungen: @for(_ of getArray(ability.charges); let chargeIndex =
@@ -38,8 +38,9 @@
     <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
     }
   </div>
-  <!-- MODAL BUTTON -->
   <div class="footer">
-    <button (click)="openModal(false)">Hinzufügen</button>
+    <ui-button [color]="'green'" [width]="'w25'" (click)="openModal(false)">
+      Hinzufügen
+    </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.scss

@@ -3,8 +3,7 @@
 }
 
 .item-list {
-  // height: calc(100% - 5rem);
-  height: 40rem; //TODO: Only mocked to fit
+  height: calc(100% - 5rem);
 }
 
 .item {

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

@@ -141,7 +141,7 @@ export class AbilityTableComponent {
 
   public openDetailsPanel(index: number): void {
     this.detailsAccessor.openPanel(AbilityDetailsComponent, {
-      abilities: this.abilities[index],
+      ability: this.abilities[index],
     });
     const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {

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

@@ -1,24 +1,12 @@
-<div class="details-name">{{ trait?.name }}</div>
+<div class="title">{{ trait?.name }}</div>
 
-<div class="details-long-description">{{ trait?.longDescription }}</div>
+<div class="content">{{ trait?.longDescription }}</div>
 
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [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]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
+    Anpassen
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w20'" (click)="close('delete')">
+    Löschen
+  </ui-button>
 </div>

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

@@ -1,38 +1,85 @@
 <div class="modal-dimensions">
-  <div class="add-form-group">
-    <div class="modal-title">
-      <h3 *ngIf="!isUpdate">Eigenschaft erstellen</h3>
-      <h3 *ngIf="isUpdate">Eigenschaft anpassen</h3>
+  <div class="title">
+    <h3 *ngIf="!isUpdate">Eigenschaft erstellen</h3>
+    <h3 *ngIf="isUpdate">Eigenschaft anpassen</h3>
+  </div>
+  <div class="flex-form t-15">
+    <!-- <div class="modal-input">
+      <label for="traitName">Name</label>
+      <input
+        type="text"
+        class="modal-input"
+        id="traitName"
+        [(ngModel)]="name"
+      />
+    </div> -->
+
+    <div>
+      <div class="name">Name</div>
+      <mat-form-field appearance="outline" class="w-50">
+        <input matInput [(ngModel)]="name" />
+      </mat-form-field>
     </div>
-    <div class="modal-body">
-      <div class="modal-input">
-        <label for="traitName">Name</label>
-        <input
-          type="text"
-          class="modal-input"
-          id="traitName"
-          [(ngModel)]="name"
-        />
-      </div>
 
-      <div class="modal-input">
-        <label for="traitShortDescription">Kurzbeschreibung</label>
-        <textarea
-          id="traitShortDescription"
+    <div>
+      <div class="name">Kurze Beschreibung</div>
+      <div class="NgxEditor__Wrapper">
+        <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
+        </ngx-editor-menu>
+        <ngx-editor
+          [editor]="shortEditor"
           [(ngModel)]="shortDescription"
-        ></textarea>
+        ></ngx-editor>
       </div>
+      <div class="hint">Wird in der Übersicht angezeigt</div>
+    </div>
 
-      <div class="modal-input">
-        <label for="traitLongDescription">Ausführliche Beschreibung</label>
-        <textarea
-          id="traitLongDescription"
+    <div>
+      <div class="name">Ausführliche Beschreibung</div>
+      <div class="NgxEditor__Wrapper">
+        <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
+        </ngx-editor-menu>
+        <ngx-editor
+          [editor]="longEditor"
           [(ngModel)]="longDescription"
-        ></textarea>
+        ></ngx-editor>
       </div>
+      <div class="hint">Wird in der Detailansicht angezeigt</div>
     </div>
-  </div>
-  <div class="button-wrapper-2-block">
+
+    <div class="horizontal-buttons">
+      @if(isUpdate){
+      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+        >Aktualisieren</ui-button
+      >
+      }@else{
+      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+        >hinzufügen</ui-button
+      >
+      }
+      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+        >Abbrechen</ui-button
+      >
+    </div>
+
+    <!-- <div class="modal-input">
+      <label for="traitShortDescription">Kurzbeschreibung</label>
+      <textarea
+        id="traitShortDescription"
+        [(ngModel)]="shortDescription"
+      ></textarea>
+    </div>
+
+    <div class="modal-input">
+      <label for="traitLongDescription">Ausführliche Beschreibung</label>
+      <textarea
+        id="traitLongDescription"
+        [(ngModel)]="longDescription"
+      ></textarea>
+    </div>
+  </div> -->
+
+    <!-- <div class="button-wrapper-2-block">
     @if(isUpdate){
     <ui-button
       [type]="'update'"
@@ -55,5 +102,6 @@
       [color]="'primary'"
       (click)="cancel()"
     ></ui-button>
+  </div> -->
   </div>
 </div>

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

@@ -1,19 +1,18 @@
-.modal-input {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
 .modal-dimensions {
-    width: 40vw;
+    width: 50vw;
     background-color: var(--modal-background);
     border-radius: 10px;
     border: 1px solid var(--border-color);
-    padding: 1rem;
+    padding: 0 2rem;
 }
-
-.add-form-group {
+.modal-input {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
 }
+
+// .add-form-group {
+//     display: flex;
+//     flex-direction: column;
+//     gap: 1rem;
+// }

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

@@ -1,4 +1,5 @@
-import { Component, Output, EventEmitter, Input } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Editor } from 'ngx-editor';
 import { Trait } from 'src/interfaces/traits';
 import { ModalService } from 'src/services/modal/modal.service';
 
@@ -11,6 +12,16 @@ export class TraitModalComponent {
   @Input() public isUpdate: boolean = false;
   @Input() public trait: Trait | undefined;
 
+  shortEditor: Editor = new Editor();
+  longEditor: Editor = new Editor();
+  html = '';
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
+
   public name: string = '';
   public shortDescription: string = '';
   public longDescription: string = '';
@@ -24,6 +35,11 @@ export class TraitModalComponent {
     }
   }
 
+  ngOnDestroy(): void {
+    this.shortEditor.destroy();
+    this.longEditor.destroy();
+  }
+
   // FUNCTIONS
 
   public loadItem(): void {

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

@@ -10,8 +10,9 @@
     <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
     }
   </div>
-  <!-- MODAL BUTTON -->
   <div class="footer">
-    <button (click)="openModal(false)">Hinzufügen</button>
+    <ui-button [color]="'green'" [width]="'w25'" (click)="openModal(false)">
+      Hinzufügen
+    </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.scss

@@ -32,12 +32,6 @@ mat-expansion-panel {
   }
 }
 
-::ng-deep .mat-mdc-text-field-wrapper {
-  background-color: white;
-  border-radius: 5px !important;
-  // height: 3rem !important;
-}
-
 .add-condition {
   display: inline-block;
   margin-left: 0.5rem;

src/app/journal/journal-stats/journal-stats.component.html

@@ -1,4 +1,4 @@
-<div class="center">
+<div class="flex-center">
   <div class="stats-container">
     <!-- Attribute and skill container -->
     <attribute-skill-container></attribute-skill-container>

src/app/journal/journal-stats/journal-stats.component.scss

@@ -1,4 +1,4 @@
-.center {
+.flex-center {
     display: flex;
     justify-content: center;
 }

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

@@ -1,3 +1,3 @@
-<button>
+<button matRipple>
   <img [src]="'assets/icons/UIIcons/' + icon + '.svg'" [alt]="icon" />
 </button>

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

@@ -6,6 +6,7 @@ import { FullSpellcardComponent } from './full-spellcard/full-spellcard.componen
 import { IconButtonComponent } from './icon-button/icon-button.component';
 import { ValueBoxComponent } from './value-box/value-box.component';
 import { FormsModule } from '@angular/forms';
+import { MatRippleModule } from '@angular/material/core';
 
 @NgModule({
   declarations: [
@@ -15,7 +16,7 @@ import { FormsModule } from '@angular/forms';
     IconButtonComponent,
     ValueBoxComponent,
   ],
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, MatRippleModule],
   exports: [
     SwitchComponent,
     UiButtonComponent,

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

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

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

@@ -1,64 +1,140 @@
-.ui-button{
-    // background-color: var(--tertiary-color);
-    text-align: center;
+button {
+    font-size: 1.25rem;
+    font-weight: 600;
+    height: 3rem;
     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;
+    box-shadow: var(--shadow);
+    transition: background-color 0.25s ease-in-out;
+}
+.default {
+    width: 100%;
+}
+
+.green {
+    background-color: var(--accept);
+    &:hover {
+        background-color: var(--accept-hover);
+    }
+}
+
+.red {
+    background-color: var(--delete);
+    &:hover {
+        background-color: var(--delete-hover);
+    }
+}
+
+.blue {
+    background-color: var(--edit);
+    &:hover {
+        background-color: var(--edit-hover);
+    }
+}
+
+.neutral {
+    background-color: var(--neutral);
+    &:hover {
+        background-color: var(--neutral-hover);
+    }
+}
+
+.w1 {
+    width: 1rem !important;
+}
+
+.w2 {
+    width: 2rem !important;
+}
+
+.w3 {
+    width: 3rem !important;
+}
+
+.w4 {
+    width: 4rem !important;
 }
 
-// .ui-button:hover{
-//     background-color: #9e6a50;
-//     box-shadow: 1px 1px 5px 3px rgba(0,0,0,0.4);
-// }
+.w5 {
+    width: 5rem !important;
+}
+
+.w6 {
+    width: 6rem !important;
+}
+
+.w7 {
+    width: 7rem !important;
+}
+
+.w8 {
+    width: 8rem !important;
+}
+
+.w9 {
+    width: 9rem !important;
+}
+
+.w10 {
+    width: 10rem !important;
+}
+
+.w11 {
+    width: 11rem !important;
+}
+
+.w12 {
+    width: 12rem !important;
+}
+
+.w13 {
+    width: 13rem !important;
+}
 
-.primary{
-    background-color: var(--primary-color);
+.w14 {
+    width: 14rem !important;
 }
 
-.primary:hover{
-    background-color: var(--primary-color-dark);
+.w15 {
+    width: 15rem !important;
 }
 
-.secondary{
-    background-color: var(--secondary-color);
+.w16 {
+    width: 16rem !important;
 }
 
-.secondary:hover{
-    background-color: var(--secondary-color-dark);
+.w17 {
+    width: 17rem !important;
 }
 
-.tertiary{
-    background-color: var(--tertiary-color);
+.w18 {
+    width: 18rem !important;
 }
 
-.tertiary:hover{
-    background-color: var(--tertiary-color-dark);
+.w19 {
+    width: 19rem !important;
 }
 
-.quaternary{
-    background-color: var(--quaternary-color);
+.w20 {
+    width: 20rem !important;
 }
 
-.quaternary:hover{
-    background-color: var(--quaternary-color-dark);
+.w21 {
+    width: 21rem !important;
 }
 
-.small{
-    width: 20%;
+.w22 {
+    width: 22rem !important;
 }
 
-.medium{
-    width: 40%;
+.w23 {
+    width: 23rem !important;
 }
 
-.large{
-    width: 60%
+.w24 {
+    width: 24rem !important;
 }
 
-.xlarge{
-    width: 80%;
+.w25 {
+    width: 25rem !important;
 }

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

@@ -6,24 +6,24 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./ui-button.component.scss'],
 })
 export class UiButtonComponent {
-  @Input() type!: string;
-  @Input() size!: string;
-  @Input() color!: string;
+  // TO delete
+  @Input() size: string = '';
+  @Input() type: string = 'default';
+  //
 
-  public text?: string;
+  /**
+   *  The width of the button, defaulted to 100%.
+   *  Available are w1 - w20 in rem.
+   * @type {string}
+   * @memberof UiButtonComponent
+   */
+  @Input() width: string = '';
 
-  public textArray: any = {
-    add: 'Hinzufügen',
-    apply: 'Anwenden',
-    edit: 'Anpassen',
-    delete: 'Löschen',
-    cancel: 'Abbrechen',
-    update: 'Aktualisieren',
-  };
-
-  constructor() {}
-
-  ngOnInit(): void {
-    this.text = this.textArray[this.type];
-  }
+  /**
+   * The color of the button, default is neutral.
+   * Available are green, red, blue, neutral.
+   * @type {string}
+   * @memberof UiButtonComponent
+   */
+  @Input() color: string = 'neutral';
 }

src/button-styles.scss

@@ -0,0 +1,20 @@
+.horizontal-buttons {
+    display: flex;
+    justify-content: space-between;
+    padding: 2rem 0;
+}
+
+.vertical-buttons {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.bottom {
+    position: absolute;
+    bottom: 0;
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+}

src/styles.scss

@@ -4,6 +4,7 @@
 // TODO: remove bootstrap styles
 @import "bootstrap/scss/bootstrap";
 @import url("./helpers.scss");
+@import url("./button-styles.scss");
 
 :root {
     // COLORS to use but not official
@@ -77,16 +78,17 @@
 
     // General
 
-    --primary-color: #d8ac96;
-
     --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
     --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-
     --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
     --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+
+    --primary-color: #d8ac96;
     --background-color: #fff2e9;
     --field-background-color: #efc8af;
     --border-color: #8d8c8c;
+
+    // --modal-background: antiquewhite;
     --modal-background: antiquewhite;
     --header: #ffdec6;
     --text: #000000;
@@ -95,6 +97,7 @@
 
     --border: 1px solid var(--border-color);
 
+    // Auslagern in UI-Button
     .standard-button {
         border: var(--border);
         border-radius: 10px;
@@ -158,21 +161,6 @@
         align-items: center;
         border-radius: 0 0 10px 10px;
         box-shadow: var(--shadow-top);
-
-        button {
-            height: 3rem;
-            width: 80%;
-            font-size: 1.25rem;
-            font-weight: 600;
-            border-radius: 10px;
-            background: var(--accept);
-            transition: background-color 0.2s ease-in-out;
-            box-shadow: var(--shadow);
-
-            &:hover {
-                background-color: var(--accept-hover);
-            }
-        }
     }
 
     // DRAG AND DROP
@@ -288,7 +276,7 @@ input[type="checkbox"] {
     width: 1.25rem;
 }
 
-// DETAILS PANEL
+// DETAILS + MODAL
 
 .title {
     font-size: 2rem;
@@ -322,158 +310,52 @@ input[type="checkbox"] {
     justify-content: space-evenly;
 }
 
-// .details-title {
-//     text-align: center;
-//     font-size: 2rem;
-//     font-weight: bold;
-//     margin-top: 1.5rem;
-// }
-
-// .details-content {
-//     margin-top: 1.5rem;
-//     margin-bottom: 1.5rem;
-// }
-
-// //
-
-// .details-heading {
-//     font-size: 1.5rem;
-//     font-weight: bold;
-//     margin-top: 1.5rem;
-// }
-
-// .details-subheading {
-//     font-size: 1.25rem;
-//     font-weight: bold;
-//     margin-top: 1.5rem;
-// }
-
-// .details-content-small {
-//     margin-top: 0.5rem;
-// }
-
-// .details-bold {
-//     font-weight: 500;
-// }
-
-// .centered {
-//     text-align: center;
-// }
+.mat-mdc-text-field-wrapper {
+    background-color: white !important;
+    border-radius: 5px !important;
+}
 
-// .top-1 {
-//     margin-top: 1rem;
-// }
+.flex-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 
-// .top-2 {
-//     margin-top: 2rem;
-// }
+    .flex-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 2rem;
+    }
+}
 
-// .top-3 {
-//     margin-top: 3rem;
-// }
+.hint {
+    font-size: 0.75rem;
+    font-weight: 400;
+    padding-left: 0.25rem;
+}
 
-// .details-value-container {
-//     margin-top: 2rem;
-// }
+.ProseMirror {
+    padding-left: 1rem !important;
+}
 
+// Used to remove the empty space under form fields
+.mat-mdc-form-field-subscript-wrapper {
+    display: none;
+}
 // .details-flex-row {
 //     display: flex;
 //     justify-content: space-between;
 //     align-items: center;
 // }
 
-// .details-value {
-//     width: 3.5rem;
-//     height: 3rem;
-//     font-size: 1.5rem;
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//     margin: auto;
-//     border-radius: 10px;
-//     background-color: white;
-//     box-shadow: var(--shadow);
-// }
-
-// .details-label {
-//     margin-top: 0.5rem;
-//     font-weight: 500;
-//     text-align: 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;
-// }
-
-// Drag and Drop Table
-
 html,
 body {
     height: 100%;
 }
 body {
     margin: 0;
-    // font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
-// TO DELETE
-
-// .vertical-button-wrapper-3 {
-//     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;
-// }
-
-// .vertical-button-wrapper-2 {
-//     width: 100%;
-//     position: absolute;
-//     bottom: 2rem;
-//     display: grid;
-//     grid-template-rows: 1fr 1fr;
-//     grid-template-columns: 1fr;
-//     gap: 10px;
-//     margin-top: 2rem;
-//     align-items: center;
-//     justify-content: center;
-// }
-
-// .button-wrapper-3-block {
-//     display: grid;
-//     grid-template-rows: 1fr 1fr 1fr;
-//     grid-template-columns: 1fr;
-//     gap: 10px;
-//     align-items: center;
-//     justify-content: center;
-//     margin-top: 2rem;
-//     padding-bottom: 2rem;
-// }
-
-// .button-wrapper-2-block {
-//     display: grid;
-//     grid-template-rows: 1fr 1fr;
-//     grid-template-columns: 1fr;
-//     gap: 10px;
-//     align-items: center;
-//     justify-content: center;
-//     margin-top: 2rem;
-//     padding-bottom: 2rem;
-// }
-
 .flex-row {
     display: flex;
     flex-direction: row;