Merge branch 'release/0.11.2'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/character/character-creator/character-creator.component.html

@@ -9,13 +9,13 @@
       <mat-label>{{ "creator.species" | translate }}</mat-label>
       <mat-select [(ngModel)]="characterSpecies" name="species">
         <mat-optgroup [label]="'Häufige Spezies'"></mat-optgroup>
-        @for (species of translator.commonRaces; track species) {
+        @for (species of list.commonRaces; track species) {
           <mat-option [value]="species">{{
             "species." + species | translate
           }}</mat-option>
         }
         <mat-optgroup [label]="'Andere Spezies'"></mat-optgroup>
-        @for (species of translator.otherRaces; track species) {
+        @for (species of list.otherRaces; track species) {
           <mat-option [value]="species">{{
             "species." + species | translate
           }}</mat-option>
@@ -25,7 +25,7 @@
     <mat-form-field appearance="outline">
       <mat-label>{{ "creator.class" | translate }}</mat-label>
       <mat-select [(ngModel)]="characterClass" name="class">
-        @for (characterClass of translator.classes; track characterClass) {
+        @for (characterClass of list.classes; track characterClass) {
           <mat-option [value]="characterClass">{{
             "classes." + characterClass | translate
           }}</mat-option>
@@ -35,7 +35,7 @@
     <mat-form-field appearance="outline">
       <mat-label>{{ "creator.background" | translate }}</mat-label>
       <mat-select [(ngModel)]="characterBackground" name="background">
-        @for (background of translator.backgrounds; track background) {
+        @for (background of list.backgrounds; track background) {
           <mat-option [value]="background">{{
             "backgrounds." + background | translate
           }}</mat-option>
@@ -45,7 +45,7 @@
     <mat-form-field appearance="outline">
       <mat-label>{{ "creator.gender" | translate }}</mat-label>
       <mat-select [(ngModel)]="characterGender" name="gender">
-        @for (gender of translator.genders; track gender) {
+        @for (gender of list.genders; track gender) {
           <mat-option [value]="gender">{{
             "genders." + gender | translate
           }}</mat-option>

src/app/character/character-creator/character-creator.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { Router } from '@angular/router';
-import { TranslatorService } from 'src/services/translator/translator.service';
+import { ListService } from 'src/services/list/list.service';
 import { TranslateService } from '@ngx-translate/core';
 
 interface characterData {
@@ -58,7 +58,7 @@ export class CharacterCreatorComponent {
   public constructor(
     public dataAccessor: DataService,
     private Router: Router,
-    public translator: TranslatorService,
+    public list: ListService,
     public translate: TranslateService,
   ) {}
 

src/app/character/character-picker/character-card/character-card.component.ts

@@ -7,7 +7,7 @@ import {
   ElementRef,
 } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
-import { TranslatorService } from 'src/services/translator/translator.service';
+import { ListService } from 'src/services/list/list.service';
 
 @Component({
   selector: 'character-card',
@@ -27,12 +27,12 @@ export class CharacterCardComponent {
 
   constructor(
     private dataAccessor: DataService,
-    private translator: TranslatorService,
+    private list: ListService,
     private renderer: Renderer2,
     private el: ElementRef,
   ) {
-    this.races = this.translator.races;
-    this.classes = this.translator.classes;
+    this.races = this.list.races;
+    this.classes = this.list.classes;
   }
 
   ngOnInit() {

src/app/journal/journal-character/background/background.component.scss

@@ -1,17 +1,16 @@
 .background-container {
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  overflow: auto;
-  margin: auto;
-  border: 1px solid black;
-  padding: 2rem 1rem 2rem 1rem;
-  border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
   position: absolute;
   top: 8.5rem;
   left: 50%;
   transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  margin: auto;
+  padding: 2rem;
+  overflow: auto;
+  border-radius: 10px;
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 }
 
 .title {

src/app/journal/journal-character/class/class.component.scss

@@ -1,17 +1,16 @@
 .class-container {
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
   width: 800px;
   height: calc(100vh - 10.5rem);
-  overflow: auto;
   margin: auto;
-  border: 1px solid black;
   padding: 2rem;
+  overflow: auto;
   border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 }
 
 .title {

src/app/journal/journal-character/class/class.component.ts

@@ -3,9 +3,8 @@ import { ClassService } from 'src/services/class/class.service';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
 import { AbilityModalComponent } from '../../journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component';
-import { Ability } from 'src/interfaces/ability';
+import { Ability, Trait } from 'src/interfaces/interfaces';
 import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';
-import { Trait } from 'src/interfaces/traits';
 
 @Component({
   selector: 'class',

src/app/journal/journal-character/combined/combined.component.html

@@ -1,5 +1,5 @@
 <div class="combined-container">
-  <div class="content">{{ "character.complete.description" | translate }}</div>
+  <!-- <div class="content">{{ "character.complete.description" | translate }}</div> -->
   <div class="features">
     @for (feature of combined; track feature) {
       <div class="feature">

src/app/journal/journal-character/combined/combined.component.scss

@@ -1,17 +1,16 @@
 .combined-container {
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
   width: 800px;
   height: calc(100vh - 10.5rem);
-  overflow: auto;
   margin: auto;
-  border: 1px solid black;
   padding: 2rem;
+  overflow: auto;
   border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 }
 
 .content {
@@ -20,7 +19,6 @@
 }
 
 .feature {
-  margin-top: 1.5rem;
   position: relative;
 }
 

src/app/journal/journal-character/combined/combined.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
-import { Ability } from 'src/interfaces/ability';
+import { Ability, Trait } from 'src/interfaces/interfaces';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
-import { Trait } from 'src/interfaces/traits';
 import { AbilityModalComponent } from '../../journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component';
 import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';
 import { ClassService } from 'src/services/class/class.service';

src/app/journal/journal-character/general/general.component.scss

@@ -17,7 +17,7 @@
   border: 1px solid var(--border-color);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  background-color: white;
+  background-image: url("/assets/images/texture.png");
   border-radius: 10px;
   overflow: hidden;
 
@@ -89,7 +89,7 @@
     .looks-field {
       width: 12.5rem;
       height: 1.75rem;
-      background-color: white;
+      background-image: url("/assets/images/texture.png");
       border-radius: 4px;
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow);
@@ -108,6 +108,7 @@
     height: 32px !important;
     min-height: 32px !important;
     padding-top: 4px !important;
+    background-image: url("/assets/images/texture.png");
   }
 }
 
@@ -125,6 +126,7 @@
     resize: none;
     height: 20rem !important;
     width: 18.75rem;
+    background-image: url("/assets/images/texture.png");
   }
 
   .description-wrapper {
@@ -174,7 +176,6 @@
     .personality-area {
       width: 100%;
       height: 100%;
-      border: 1px solid var(--border-color);
       border-radius: 10px;
       box-shadow: var(--shadow);
       resize: none;
@@ -186,3 +187,7 @@
     }
   }
 }
+
+::ng-deep .mdc-text-field--outlined {
+  background-image: url("/assets/images/texture.png") !important;
+}

src/app/journal/journal-character/general/general.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
-import { TranslatorService } from 'src/services/translator/translator.service';
+import { ListService } from 'src/services/list/list.service';
 
 @Component({
   selector: 'general',
@@ -16,15 +16,15 @@ export class GeneralComponent {
 
   public constructor(
     public dataAccessor: DataService,
-    private translator: TranslatorService,
+    private list: ListService,
   ) {}
 
   ngOnInit(): void {
     this.data = this.dataAccessor.characterData;
     this.image = this.dataAccessor.image.value;
-    this.races = this.translator.races;
-    this.classes = this.translator.classes;
-    this.genders = this.translator.genders;
+    this.races = this.list.races;
+    this.classes = this.list.classes;
+    this.genders = this.list.genders;
   }
 
   public updateData(): void {

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

@@ -1,7 +1,8 @@
 <div class="header">
   <div class="header-data">
     <input type="number" [(ngModel)]="data.level" (change)="updateData()" />
-    <div class="horizontal-ruler"></div>
+    <!-- <div class="horizontal-ruler"></div> -->
+    <divider></divider>
     {{ "character.level" | translate }}
   </div>
   <div class="name">{{ name }}</div>
@@ -11,7 +12,7 @@
       [(ngModel)]="data.experience"
       (change)="updateData()"
     />
-    <div class="horizontal-ruler"></div>
+    <divider></divider>
     {{ "character.experience" | translate }}
   </div>
 </div>

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

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   height: 6.5rem;
-  background-color: var(--header);
+  background-image: url("/assets/images/background-50.jpg");
   box-shadow: var(--shadow);
 
   .header-data {
@@ -43,10 +43,8 @@
     height: 100%;
   }
 
-  .horizontal-ruler {
+  divider {
     width: 8rem;
-    height: 1px;
-    border-top: 1px solid var(--border-color);
   }
 }
 
@@ -70,7 +68,7 @@
 
       &.active,
       &:hover {
-        background-color: var(--tab-active);
+        background-color: var(--new-tab);
         box-shadow: var(--shadow);
       }
     }

src/app/journal/journal-character/species/species.component.scss

@@ -1,17 +1,16 @@
 .species-container {
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  overflow: auto;
-  margin: auto;
-  border: 1px solid black;
-  padding: 2rem 1rem 2rem 1rem;
-  border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
   position: absolute;
   top: 8.5rem;
   left: 50%;
   transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  margin: auto;
+  padding: 2rem 1rem;
+  overflow: auto;
+  border-radius: 10px;
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 }
 
 .title {

src/app/journal/journal-character/species/species.component.ts

@@ -1,9 +1,8 @@
 import { Component } from '@angular/core';
-import { Trait } from 'src/interfaces/traits';
+import { Trait, Ability } from 'src/interfaces/interfaces';
 import { DataService } from 'src/services/data/data.service';
 import { SpeciesService } from 'src/services/species/species.service';
 import { ModalService } from 'src/services/modal/modal.service';
-import { Ability } from 'src/interfaces/ability';
 import { AbilityModalComponent } from '../../journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component';
 import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';
 

src/app/journal/journal-character/story/story.component.scss

@@ -1,17 +1,16 @@
 .story-container {
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
   width: 800px;
   height: calc(100vh - 10.5rem);
-  overflow: auto;
   margin: auto;
-  border: 1px solid black;
   padding: 2rem;
+  overflow: auto;
   border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 
   .edit {
     position: absolute;

src/app/journal/journal-character/subclass/subclass.component.scss

@@ -1,17 +1,16 @@
 .subclass-container {
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
   width: 800px;
   height: calc(100vh - 10.5rem);
-  overflow: auto;
   margin: auto;
-  border: 1px solid black;
   padding: 2rem;
+  overflow: auto;
   border-radius: 10px;
-  background-color: var(--items-hover);
-  box-shadow: var(--shadow-large);
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  background-image: url("/assets/images/texture.png");
+  box-shadow: var(--shadow);
 }
 
 .title {

src/app/journal/journal-character/subclass/subclass.component.ts

@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
 import { SubclassService } from 'src/services/subclass/subclass.service';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
-import { Ability } from 'src/interfaces/ability';
-import { Trait } from 'src/interfaces/traits';
+import { Ability, Trait } from 'src/interfaces/interfaces';
 import { AbilityModalComponent } from '../../journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component';
 import { TraitModalComponent } from '../../journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component';
 

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

@@ -3,5 +3,6 @@
   overflow: auto;
   height: 100vh;
   width: 100vw;
-  background-color: var(--background-color);
+  // background-color: var(--background-color);
+  background-image: url("/assets/images/background.jpg");
 }

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

@@ -1,4 +1,4 @@
-import { Component, Renderer2, ElementRef } from '@angular/core';
+import { Component, Renderer2, ElementRef, inject } from '@angular/core';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
 import { ModalService } from 'src/services/modal/modal.service';
 
@@ -10,12 +10,11 @@ import { ModalService } from 'src/services/modal/modal.service';
 export class JournalHomeComponent {
   private isNavigationOpen: boolean = false;
   private touchStartX: number = 0;
-  public constructor(
-    public navigation: NavigationPanelService,
-    private renderer: Renderer2,
-    private el: ElementRef,
-    public modalService: ModalService,
-  ) {}
+
+  public navigation = inject(NavigationPanelService);
+  private renderer = inject(Renderer2);
+  private el = inject(ElementRef);
+  public modalService = inject(ModalService);
 
   ngOnInit() {
     const width = window.innerWidth;

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

@@ -121,7 +121,11 @@
       <div>{{ "navigation.characters" | translate }}</div>
     </button>
 
-    <button class="settings-button" [routerLink]="'./settings'">
+    <button
+      class="settings-button"
+      [ngClass]="active === 12 ? 'active' : ''"
+      [routerLink]="'./settings'"
+    >
       <icon
         [size]="'s'"
         [type]="'UI'"

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

@@ -21,8 +21,9 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: 25vw;
-  background-color: var(--background-color);
+  width: 25rem;
+  // background-color: var(--background-color);
+  background-image: url("/assets/images/background.jpg");
   z-index: 1001;
   padding: 1.5rem;
   transform: translateX(-100%);
@@ -49,16 +50,18 @@ ul {
   }
 
   border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  // background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   transition: transform 0.2s ease-in-out;
+  cursor: pointer;
 
-  &:hover,
+  &:hover {
+    filter: brightness(0.9);
+  }
   &.active {
-    background-color: var(--primary);
-    transform: scale(1.05);
-    cursor: pointer;
+    filter: brightness(0.8);
   }
 }
 
@@ -67,7 +70,7 @@ ul {
   justify-content: space-between;
   position: absolute;
   bottom: 2rem;
-  width: calc(25vw - 3rem);
+  width: 22rem;
 }
 
 .settings-button {
@@ -76,13 +79,15 @@ ul {
   font-weight: 500;
   padding: 0.5rem;
   border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   transition: transform 0.2s ease-in-out;
-}
 
-.settings-button:hover {
-  background-color: var(--tab-active);
-  transform: scale(1.05);
+  &:hover {
+    filter: brightness(0.9);
+  }
+  &.active {
+    filter: brightness(0.8);
+  }
 }

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
 import { DetailsService } from 'src/services/details/details.service';
 import { ModalService } from 'src/services/modal/modal.service';
@@ -30,6 +30,11 @@ export class NavigationPanelComponent {
       }
     });
     this.checkForActiveTab();
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.checkForActiveTab();
+      }
+    });
   }
 
   public openPanel(): void {
@@ -47,7 +52,7 @@ export class NavigationPanelComponent {
     this.modalAccessor.handleModalClosing('cancel');
   }
 
-  private checkForActiveTab(): void {
+  public checkForActiveTab(): void {
     const tab = this.router.url.split('/')[2];
     switch (tab) {
       case 'stats':
@@ -62,10 +67,10 @@ export class NavigationPanelComponent {
       case 'spellcards':
         this.active = 4;
         break;
-      case 'notes':
+      case 'spellbook':
         this.active = 5;
         break;
-      case 'spellbook':
+      case 'notes':
         this.active = 6;
         break;
       case 'quests':
@@ -83,6 +88,9 @@ export class NavigationPanelComponent {
       case 'ruleset':
         this.active = 11;
         break;
+      case 'settings':
+        this.active = 12;
+        break;
       default:
         this.active = 1;
         break;

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

@@ -1,4 +1,4 @@
-<div class="inventory-container">
+<div class="journal-content">
   <!-- ITEMS -->
   <div class="item-container">
     <div class="tab-row">
@@ -17,6 +17,7 @@
         {{ "inventory.misc" | translate }}
       </button>
     </div>
+    <divider></divider>
 
     <div class="heading-row">
       <div class="table-heading">{{ "inventory.name" | translate }}</div>
@@ -64,6 +65,7 @@
           {{ "inventory.usable" | translate }}
         </button>
       </div>
+      <divider></divider>
       <div class="heading-row">
         <div class="table-heading">{{ "inventory.name" | translate }}</div>
         <div class="table-heading">
@@ -145,6 +147,8 @@
       (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
     >
       @for (item of weaponsAndArmor; let index = $index; track item) {
+        <!-- <img src="/assets/borders/border1.svg" />
+        <img src="/assets/borders/border2.svg" /> -->
         <div
           class="item"
           cdkDrag

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

@@ -1,51 +1,50 @@
-.inventory-container {
-  width: 100%;
+.journal-content {
   height: 100%;
-  padding: 2rem;
-  display: flex;
   justify-content: space-between;
 }
 
 // Tabbar
 .tab-row {
   display: flex;
-  flex: 0 0 3rem;
+  flex: 0 0 4rem;
   > * {
     flex: 1 1 0;
   }
   > :first-child {
-    border-radius: 10px 0 0 0;
+    border-radius: 8px 0 0 0;
   }
   > :last-child {
-    border-radius: 0 10px 0 0;
+    border-radius: 0 8px 0 0;
   }
 }
 
 .tab-button {
-  height: 3rem;
+  height: 4rem;
   font-size: 1.375rem;
   font-weight: 600;
   color: black;
-  border: solid 1px var(--border-color);
-  transition: all 0.25s ease-in-out;
-  background-color: var(--tab);
-
+  border: none;
+  transition: filter 0.25s ease-in-out;
+  background-image: url("/assets/images/texture-15.jpg");
+  filter: brightness(0.85);
+  &:hover {
+    background-image: url("/assets/images/texture-25.jpg");
+  }
   &.active {
-    border-bottom: 3px solid var(--border-color);
-    background-color: var(--tab-active);
+    background-image: url("/assets/images/texture-40.jpg");
   }
 }
 
 // Item container
 .item-container {
-  width: 60%;
+  width: 800px;
   height: 100%;
-  border: 1px solid var(--border-color);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
-  background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
+  border: var(--golder);
 
   .heading-row {
     flex: 0 0 3rem;
@@ -59,7 +58,7 @@
   .table-content {
     overflow: auto;
     padding-top: 1rem;
-    flex: 0 0 calc(100% - 11rem);
+    flex: 0 0 calc(100% - 12rem);
   }
 
   .button-margin {
@@ -67,7 +66,7 @@
   }
 
   .table-heading {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
     padding-left: 2rem;
   }
@@ -79,13 +78,14 @@
     grid-template-columns: 2fr 1fr 1fr 1fr;
     align-items: center;
     box-sizing: border-box;
-    cursor: move;
-    background-color: var(--items);
+    cursor: pointer;
     border-radius: 10px;
     box-shadow: var(--shadow);
-    transition: all 0.2s ease-in-out;
+    transition: all 0.2 ease-in-out;
+    border: var(--golder);
+    background-image: url("/assets/images/texture-15.jpg");
     &:hover {
-      background-color: var(--items-hover);
+      background-image: url("/assets/images/texture-40.jpg");
     }
   }
 
@@ -108,11 +108,11 @@
 .food-container {
   height: calc(100% - 16rem);
   width: 100%;
-  border: 1px solid var(--border-color);
   border-radius: 10px;
+  border: var(--golder);
   display: flex;
   flex-direction: column;
-  background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
 
   .heading-row {
@@ -125,7 +125,7 @@
   }
 
   .table-heading {
-    font-size: 1.375rem;
+    font-size: 1.25rem;
     font-weight: 600;
     padding-left: 1rem;
   }
@@ -133,7 +133,7 @@
   .table-content {
     overflow: auto;
     padding-top: 1rem;
-    flex: 0 0 calc(100% - 11rem);
+    flex: 0 0 calc(100% - 12rem);
   }
 
   .item {
@@ -143,13 +143,14 @@
     display: grid;
     align-items: center;
     box-sizing: border-box;
-    cursor: move;
-    background-color: var(--items);
+    cursor: pointer;
     border-radius: 10px;
     box-shadow: var(--shadow);
     transition: all 0.2s ease-in-out;
+    border: var(--golder);
+    background-image: url("/assets/images/texture-15.jpg");
     &:hover {
-      background-color: var(--items-hover);
+      background-image: url("/assets/images/texture-40.jpg");
     }
   }
 
@@ -168,10 +169,12 @@
   align-items: center;
   height: 6rem;
   width: 100%;
-  border: 1px solid var(--border-color);
+  // border: 1px solid var(--border-color);
   border-radius: 10px;
-  background-color: var(--field-background-color);
+  // background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
+  border: var(--golder);
 
   .money-box {
     width: 6rem;
@@ -184,8 +187,9 @@
     font-size: 1.5rem;
     position: relative;
     border-radius: 10px;
-    background-color: white;
+    background-image: url("/assets/images/texture-15.jpg");
     box-shadow: var(--shadow);
+    border: var(--golder);
   }
 
   .money-icon {
@@ -221,9 +225,10 @@
   align-items: center;
   justify-content: center;
   gap: 2rem;
-  border: 1px solid var(--border-color);
+  position: relative;
+  border: var(--golder);
   border-radius: 10px;
-  background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
 
   .weight-box {
@@ -234,7 +239,8 @@
     justify-content: center;
     align-items: center;
     border-radius: 10px;
-    background-color: white;
+    background-image: url("/assets/images/texture-15.jpg");
+    border: var(--golder);
     box-shadow: var(--shadow);
   }
 }

src/app/journal/journal-inventory/journal-inventory.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   CdkDragDrop,
   CdkDropList,
@@ -7,8 +7,7 @@ import {
 } from '@angular/cdk/drag-drop';
 import { DetailsService } from 'src/services/details/details.service';
 import { DataService } from 'src/services/data/data.service';
-import { SimpleItem } from 'src/interfaces/simple-item';
-import { Food } from 'src/interfaces/food';
+import { SimpleItem, Food } from 'src/interfaces/interfaces';
 import { SimpleItemDetailsComponent } from './simple-item-details/simple-item-details.component';
 import { ModalService } from 'src/services/modal/modal.service';
 import { SimpleItemModalComponent } from './simple-item-modal/simple-item-modal.component';
@@ -46,22 +45,26 @@ export class JournalInventoryComponent {
     tiefling: 15,
   };
 
-  constructor(
-    private detailsAccessor: DetailsService,
-    private dataAccessor: DataService,
-    private modalAccessor: ModalService,
-  ) {}
+  private details = inject(DetailsService);
+  private data = inject(DataService);
+  private modal = inject(ModalService);
+
+  // constructor(
+  //   private detailsAccessor: DetailsService,
+  //   private dataAccessor: DataService,
+  //   private modalAccessor: ModalService,
+  // ) {}
 
   public ngOnInit(): void {
-    this.weaponsAndArmor = this.dataAccessor.weaponsAndArmor;
-    this.consumables = this.dataAccessor.consumables;
-    this.miscellaneous = this.dataAccessor.miscellaneous;
-    this.food = this.dataAccessor.food;
-    this.money = this.dataAccessor.money;
+    this.weaponsAndArmor = this.data.weaponsAndArmor;
+    this.consumables = this.data.consumables;
+    this.miscellaneous = this.data.miscellaneous;
+    this.food = this.data.food;
+    this.money = this.data.money;
     this.updateWeight();
     this.weightModifier =
-      this.speciesWeightModifierTable[this.dataAccessor.characterData.race];
-    this.dataAccessor.strength$.subscribe((strength) => {
+      this.speciesWeightModifierTable[this.data.characterData.race];
+    this.data.strength$.subscribe((strength) => {
       this.strength = strength.value;
       this.maximumWeight = this.strength * this.weightModifier;
     });
@@ -70,37 +73,35 @@ export class JournalInventoryComponent {
   drop(event: CdkDragDrop<string[]>, list: any[], listName: string) {
     moveItemInArray(list, event.previousIndex, event.currentIndex);
     if (listName === 'weaponsAndArmor') {
-      this.dataAccessor.weaponsAndArmor = list;
+      this.data.weaponsAndArmor = list;
     } else if (listName === 'food') {
-      this.dataAccessor.food = list;
+      this.data.food = list;
     } else if (listName === 'consumables') {
-      this.dataAccessor.consumables = list;
+      this.data.consumables = list;
     } else if (listName === 'miscellaneous') {
-      this.dataAccessor.miscellaneous = list;
+      this.data.miscellaneous = list;
     }
   }
 
   public openItemsDetails(list: any, index: number, listName: string): void {
-    this.detailsAccessor.openPanel(SimpleItemDetailsComponent, {
+    this.details.openPanel(SimpleItemDetailsComponent, {
       item: list[index],
     });
-    const resultSubscription = this.detailsAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'delete') {
-          list.splice(index, 1);
-          this.updateDatabase(listName);
-        } else if (result.state === 'update') {
-          this.openItemModal(true, listName, list, index);
-        } else if (result.state === 'cancel') {
-          // Do nothing
-        }
-        resultSubscription.unsubscribe();
-      },
-    );
+    const resultSubscription = this.details.result$.subscribe((result) => {
+      if (result.state === 'delete') {
+        list.splice(index, 1);
+        this.updateDatabase(listName);
+      } else if (result.state === 'update') {
+        this.openItemModal(true, listName, list, index);
+      } else if (result.state === 'cancel') {
+        // Do nothing
+      }
+      resultSubscription.unsubscribe();
+    });
   }
 
   public openFoodModal(isUpdate: boolean, index?: number): void {
-    this.modalAccessor.openModal(SimpleItemModalComponent, {
+    this.modal.openModal(SimpleItemModalComponent, {
       item:
         index !== undefined
           ? JSON.parse(JSON.stringify(this.food[index]))
@@ -108,20 +109,18 @@ export class JournalInventoryComponent {
       isUpdate: isUpdate,
       isFood: true,
     });
-    const resultSubscription = this.modalAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'update') {
-          this.food[index!] = result.data;
-          this.updateFood();
-        } else if (result.state === 'add') {
-          this.food.push(result.data);
-          this.updateFood();
-        } else if (result.state === 'cancel') {
-          // Do nothing
-        }
-        resultSubscription.unsubscribe();
-      },
-    );
+    const resultSubscription = this.modal.result$.subscribe((result) => {
+      if (result.state === 'update') {
+        this.food[index!] = result.data;
+        this.updateFood();
+      } else if (result.state === 'add') {
+        this.food.push(result.data);
+        this.updateFood();
+      } else if (result.state === 'cancel') {
+        // Do nothing
+      }
+      resultSubscription.unsubscribe();
+    });
   }
 
   public openItemModal(
@@ -130,27 +129,25 @@ export class JournalInventoryComponent {
     list?: SimpleItem[],
     index?: number,
   ): void {
-    this.modalAccessor.openModal(SimpleItemModalComponent, {
+    this.modal.openModal(SimpleItemModalComponent, {
       item:
         list && index !== undefined
           ? JSON.parse(JSON.stringify(list[index]))
           : undefined,
       isUpdate: isUpdate,
     });
-    const resultSubscription = this.modalAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'update') {
-          list![index!] = result.data;
-          this.updateDatabase(listname);
-        } else if (result.state === 'add') {
-          list!.push(result.data);
-          this.updateDatabase(listname);
-        } else if (result.state === 'cancel') {
-          // Do nothing
-        }
-        resultSubscription.unsubscribe();
-      },
-    );
+    const resultSubscription = this.modal.result$.subscribe((result) => {
+      if (result.state === 'update') {
+        list![index!] = result.data;
+        this.updateDatabase(listname);
+      } else if (result.state === 'add') {
+        list!.push(result.data);
+        this.updateDatabase(listname);
+      } else if (result.state === 'cancel') {
+        // Do nothing
+      }
+      resultSubscription.unsubscribe();
+    });
   }
 
   public addItem(table: string): void {
@@ -173,24 +170,24 @@ export class JournalInventoryComponent {
 
   public updateDatabase(listname: string): void {
     if (listname === 'weaponsAndArmor') {
-      this.dataAccessor.weaponsAndArmor = this.weaponsAndArmor;
+      this.data.weaponsAndArmor = this.weaponsAndArmor;
     } else if (listname === 'consumables') {
-      this.dataAccessor.consumables = this.consumables;
+      this.data.consumables = this.consumables;
     } else if (listname === 'miscellaneous') {
-      this.dataAccessor.miscellaneous = this.miscellaneous;
+      this.data.miscellaneous = this.miscellaneous;
     } else if (listname === 'food') {
-      this.dataAccessor.food = this.food;
+      this.data.food = this.food;
     }
     this.updateWeight();
   }
 
   public updateMoney(): void {
-    this.dataAccessor.money = this.money;
+    this.data.money = this.money;
     this.updateWeight();
   }
 
   public updateFood(): void {
-    this.dataAccessor.food = this.food;
+    this.data.food = this.food;
     this.updateWeight();
   }
 

src/app/journal/journal-inventory/simple-item-details/simple-item-details.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Food } from 'src/interfaces/food';
-import { SimpleItem } from 'src/interfaces/simple-item';
+import { SimpleItem } from 'src/interfaces/interfaces';
 import { DetailsService } from 'src/services/details/details.service';
 
 @Component({

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.scss

@@ -1,6 +1,6 @@
 .dimensions {
   width: 35rem;
-  background-color: antiquewhite;
+  background-image: url("/assets/images/background.jpg");
 }
 
 .numbers {

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.scss

@@ -3,7 +3,7 @@
   height: 45rem;
   padding: 0;
   overflow: hidden;
-  background-image: url("/assets/images/bg.jpg");
+  background-image: url("/assets/images/background.jpg");
 }
 
 .content {
@@ -44,7 +44,7 @@
     0 3px 10px 2px rgba(0, 0, 0, 0.12);
   transition: background-color 0.2s ease-in-out;
   &:hover {
-    border: 1px solid #9b8559;
+    border: 1px solid var(--gold);
   }
 }
 

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { ModalService } from 'src/services/modal/modal.service';
 import { TranslateService } from '@ngx-translate/core';
 

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

@@ -1,34 +1,37 @@
-<div class="spellbook-container">
-  <div class="content">
-    <div class="header-row">
-      <h1>Zauberbuch</h1>
-      <div class="button-container">
-        <button class="top-button" (click)="openManageCustomSpellsModal()">
-          <img src="assets/icons/UIIcons/settings.svg" />
-          {{ "spellbook.manage" | translate }}
-        </button>
+<div class="journal-content">
+  <!-- HEADER -->
+  <div class="header-row">
+    <h1>{{ "spellbook.title" | translate }}</h1>
+    <div class="button-container">
+      <button class="top-button" (click)="openManageCustomSpellsModal()">
+        <img src="assets/icons/UIIcons/settings.svg" />
+        {{ "spellbook.manage" | translate }}
+      </button>
 
-        <button class="top-button" (click)="openSpellCreationModal(false)">
-          <img src="assets/icons/UIIcons/add.svg" />
-          {{ "spellbook.add" | translate }}
-        </button>
-      </div>
+      <button class="top-button" (click)="openSpellCreationModal(false)">
+        <img src="assets/icons/UIIcons/add.svg" />
+        {{ "spellbook.add" | translate }}
+      </button>
     </div>
+  </div>
 
-    <divider></divider>
-    <div class="class-picker t-075">
-      @for (className of translator.magicClasses; track className) {
-        <div class="class">
-          <div
-            [id]="className"
-            [class]="className + '-icon'"
-            (click)="toggleClassSelection(className)"
-          ></div>
-          <label for="">{{ "classes." + className | translate }}</label>
-        </div>
-      }
-    </div>
+  <divider></divider>
 
+  <!-- CLASS PICKER -->
+  <div class="class-picker t-075">
+    @for (className of list.magicClasses; track className) {
+      <div class="class">
+        <div
+          [id]="className"
+          [class]="className + '-icon'"
+          (click)="toggleClassSelection(className)"
+        ></div>
+        <label for="">{{ "classes." + className | translate }}</label>
+      </div>
+    }
+  </div>
+  <div>
+    <!-- LEVEL PICKER -->
     <ul ngbNav #nav="ngbNav" [(activeId)]="currentLevel" class="nav-tabs">
       @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
         <li [ngbNavItem]="level">
@@ -54,6 +57,7 @@
       }
     </ul>
 
+    <!-- SEARCH RESULT -->
     <div [ngbNavOutlet]="nav"></div>
   </div>
 </div>

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

@@ -1,53 +1,10 @@
-.spellbook-container {
-  width: 100%;
-  height: 100%;
-  padding: 2rem;
-  overflow-y: auto;
-  display: flex;
+.journal-content {
   flex-direction: column;
   gap: 1rem;
-  background-image: url("/assets/images/bg.jpg");
-}
-
-h1 {
-  // color: #58180d;
-  // font-family: "Bookinsanity", serif;
-  font-size: 3.5rem;
-  font-weight: 500;
-  margin-bottom: 0;
-}
-
-.header-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.button-container {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
 }
 
 .top-button {
-  font-size: 1.25rem;
-  font-weight: 600;
   width: 18.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 10px;
-  padding: 0.5rem 1rem;
-  background-image: url("/assets/images/texture.png");
-  border: none;
-  box-shadow: var(--shadow);
-}
-
-.content {
-  width: 1300px;
-  margin: 0 auto;
 }
 
 .class-picker {
@@ -116,9 +73,7 @@ h1 {
 }
 
 .nav-link {
-  // background-color: var(--tab);
-  background-color: #cbbea4;
-  background-color: #b5a27d;
+  background-color: var(--new-tab);
   color: black;
   font-size: 1.123rem;
   font-weight: 500;
@@ -130,9 +85,7 @@ h1 {
 }
 
 .nav-link.active {
-  // background-color: var(--tab-active);
-  background-color: #b5a27d;
-  background-color: #9b8559;
+  background-color: var(--new-tab-active);
   width: 9.25rem;
   font-size: 1.25rem;
   font-weight: 550;

src/app/journal/journal-spellbook/journal-spellbook.component.ts

@@ -1,8 +1,8 @@
 import { Component, inject } from '@angular/core';
-import { TranslatorService } from 'src/services/translator/translator.service';
+import { ListService } from 'src/services/list/list.service';
 import { ModalService } from 'src/services/modal/modal.service';
 import { DataService } from 'src/services/data/data.service';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { CustomSpellsModalComponent } from './custom-spells-modal/custom-spells-modal.component';
 import { SpellsService } from 'src/services/spells/spells.service';
 import { FullSpellcardComponent } from 'src/app/shared-components/full-spellcard/full-spellcard.component';
@@ -29,7 +29,7 @@ export class JournalSpellbookComponent {
   public filteredSpells: Spell[] = [];
 
   // Services
-  public translator = inject(TranslatorService);
+  public list = inject(ListService);
   public modalAccessor = inject(ModalService);
   public dataAccessor = inject(DataService);
   private spellsService = inject(SpellsService);

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -14,7 +14,7 @@
     position: relative;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
-    background-image: url("/assets/images/bg.jpg");
+    background-image: url("/assets/images/background.jpg");
     filter: brightness(0.8);
 
     &:hover {
@@ -62,7 +62,7 @@
   width: 100%;
   height: 100%;
   // background-color: var(--background-color);
-  background-image: url("/assets/images/bg.jpg");
+  background-image: url("/assets/images/background.jpg");
   filter: brightness(0.9);
   padding-top: 0.375rem;
 }

src/app/journal/journal-spellcards/add-card/add-card.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, inject } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { SpellsService } from 'src/services/spells/spells.service';
 import { TranslateService } from '@ngx-translate/core';
 

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

@@ -1,86 +1,84 @@
-<div class="spellcards-container">
-  <div class="content">
-    <div class="header-row">
-      <h1>{{ "spellcards.prepared" | translate }}</h1>
-      <div class="button-container">
-        <button class="top-button" (click)="openFavoritesModal()">
-          <img src="assets/icons/UIIcons/favorites.svg" />
-          {{ "spellcards.favorites" | translate }}
-        </button>
+<div class="journal-content">
+  <div class="header-row">
+    <h1>{{ "spellcards.prepared" | translate }}</h1>
+    <div class="button-container">
+      <button class="top-button" (click)="openFavoritesModal()">
+        <img src="assets/icons/UIIcons/favorites.svg" />
+        {{ "spellcards.favorites" | translate }}
+      </button>
 
-        <button class="top-button" (click)="navigateToSpellbook()">
-          <img src="assets/icons/UIIcons/book.svg" />
-          {{ "spellcards.spellbook" | translate }}
-        </button>
-      </div>
+      <button class="top-button" (click)="navigateToSpellbook()">
+        <img src="assets/icons/UIIcons/book.svg" />
+        {{ "spellcards.spellbook" | translate }}
+      </button>
     </div>
+  </div>
 
-    <divider class="t-075"></divider>
-    <div cdkDropListGroup class="t-075">
-      @for (
-        level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-        track level;
-        let index = $index
-      ) {
-        <div class="example-container">
-          <div
-            [class]="showSpellList[index] ? 'level-row' : 'level-row collapsed'"
-            (click)="toggleSpellList(index)"
-          >
-            <div class="level-flex">
-              <icon
-                [size]="'l'"
-                [type]="'UI'"
-                [icon]="showSpellList[index] ? 'visible' : 'hidden'"
-                [class]="'pointer'"
-                class="inline"
-              ></icon>
-              <div class="heading-2 inline">
-                @if (index === 0) {
-                  {{ "spellcards.cantrips" | translate }}
-                } @else {
-                  Level {{ index }}
-                }
-              </div>
+  <divider></divider>
+  <div cdkDropListGroup class="t-075">
+    @for (
+      level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+      track level;
+      let index = $index
+    ) {
+      <div class="example-container">
+        <div
+          [class]="showSpellList[index] ? 'level-row' : 'level-row collapsed'"
+          (click)="toggleSpellList(index)"
+        >
+          <div class="level-flex">
+            <icon
+              [size]="'l'"
+              [type]="'UI'"
+              [icon]="showSpellList[index] ? 'visible' : 'hidden'"
+              [class]="'pointer'"
+              class="inline"
+            ></icon>
+            <div class="heading-2 inline">
+              @if (index === 0) {
+                {{ "spellcards.cantrips" | translate }}
+              } @else {
+                Level {{ index }}
+              }
             </div>
           </div>
+        </div>
 
-          <div
-            cdkDropList
-            cdkDropListOrientation="horizontal"
-            [cdkDropListData]="getSpellList(index)"
-            class="spell-list"
-            (cdkDropListDropped)="drop($event)"
-            [class]="showSpellList[index] ? '' : 'hidden'"
-          >
-            @for (
-              spell of getSpellList(index);
-              let spellIndex = $index;
-              track spell
-            ) {
-              <spellcard
-                cdkDrag
-                [id]="spellIndex"
-                (cdkDragStarted)="dragStart(index)"
-                (cdkDragReleased)="dragEnd($event)"
-                [spell]="spell"
-                (click)="showFullSpellcard(spell, level, spellIndex)"
-              ></spellcard>
-            }
-            @if (draggingIndex === index) {
-              <div class="removal-card" [id]="'deletion' + index">
-                {{ "spellcards.delete" | translate }}
-              </div>
-            } @else {
-              <add-card
-                [level]="index"
-                [alreadyUsedSpells]="getUsedIDs(index)"
-                (onSpellSelected)="addSpell($event, index)"
-              ></add-card>
-            }
-          </div>
+        <div
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          [cdkDropListData]="getSpellList(index)"
+          class="spell-list"
+          (cdkDropListDropped)="drop($event)"
+          [class]="showSpellList[index] ? '' : 'hidden'"
+        >
+          @for (
+            spell of getSpellList(index);
+            let spellIndex = $index;
+            track spell
+          ) {
+            <spellcard
+              cdkDrag
+              [id]="spellIndex"
+              (cdkDragStarted)="dragStart(index)"
+              (cdkDragReleased)="dragEnd($event)"
+              [spell]="spell"
+              (click)="showFullSpellcard(spell, level, spellIndex)"
+            ></spellcard>
+          }
+          @if (draggingIndex === index) {
+            <div class="removal-card" [id]="'deletion' + index">
+              {{ "spellcards.delete" | translate }}
+            </div>
+          } @else {
+            <add-card
+              [level]="index"
+              [alreadyUsedSpells]="getUsedIDs(index)"
+              (onSpellSelected)="addSpell($event, index)"
+            ></add-card>
+          }
         </div>
-      }
-    </div>
+      </div>
+    }
   </div>
 </div>

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

@@ -1,55 +1,9 @@
-.spellcards-container {
-  width: 100%;
-  height: 100%;
-  padding: 2rem;
+.journal-content {
   overflow-y: auto;
-  display: flex;
   flex-direction: column;
-  position: relative;
-  background-image: url("/assets/images/bg.jpg");
-}
-
-.content {
-  width: 1300px;
-  margin: 0 auto;
-}
-
-.header-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-h1 {
-  // color: #58180d;
-  // font-family: "Bookinsanity", serif;
-  font-size: 3.5rem;
-  font-weight: 500;
-  margin-bottom: 0;
-}
-
-.button-container {
-  display: flex;
-  flex-direction: row;
   gap: 1rem;
 }
 
-.top-button {
-  font-size: 1.25rem;
-  font-weight: 600;
-  width: 16rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 10px;
-  padding: 0.5rem 1rem;
-  background-image: url("/assets/images/texture.png");
-  border: none;
-  box-shadow: var(--shadow);
-}
-
 .example-container {
   margin-bottom: 1rem;
 }
@@ -130,6 +84,10 @@ h1 {
   }
 }
 
+spellcard {
+  cursor: pointer;
+}
+
 .animate-visibility {
   animation: icon-switch 0.5s ease-in-out;
 }

src/app/journal/journal-spellcards/journal-spellcards.component.ts

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
 import { SpellsService } from 'src/services/spells/spells.service';

src/app/journal/journal-spellcards/spellcard/spellcard.component.html

@@ -15,6 +15,7 @@
       {{ spell.english }}
     }
   </div>
+  <!-- <div class="spell-image"> -->
   <img
     class="spell-image"
     [src]="'assets/images/spells/' + spell.image + '.jpg'"
@@ -22,6 +23,7 @@
     [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
     alt="spell image"
   />
+  <!-- </div> -->
   <div
     class="info"
     [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"

src/app/journal/journal-spellcards/spellcard/spellcard.component.scss

@@ -103,6 +103,12 @@
   height: 12rem;
   margin-bottom: 7px;
   z-index: 2;
+  background-image: url("/assets/images/texture.png");
+
+  // img {
+  //   width: 100%;
+  //   height: 100%;
+  // }
 }
 
 .info {

src/app/journal/journal-spellcards/spellcard/spellcard.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Spell } from 'src/interfaces/spell';
+import { Component, Input } from '@angular/core';
+import { Spell } from 'src/interfaces/interfaces';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -14,5 +14,6 @@ export class SpellcardComponent {
 
   public setBackupImage(event: any): void {
     event.target.src = 'assets/images/spells/backup.jpg';
+    // event.target.src = 'assets/images/spells/' + this.spell.school + '.png';
   }
 }

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

@@ -1,6 +1,6 @@
 .ability-panel-container {
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -17,7 +17,7 @@
     flex: 1 1 0;
   }
   > :first-child {
-    border-radius: 10px 0 0 0;
+    border-radius: 8px 0 0 0;
     border-right: 1px solid var(--border-color);
   }
   > :nth-child(2) {
@@ -29,7 +29,7 @@
     border-right: 1px solid var(--border-color);
   }
   > :last-child {
-    border-radius: 0 10px 0 0;
+    border-radius: 0 8px 0 0;
     border-left: 1px solid var(--border-color);
   }
 }

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

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { DetailsService } from 'src/services/details/details.service';
-import { Ability } from 'src/interfaces/ability';
+import { Ability } from 'src/interfaces/interfaces';
 
 @Component({
   selector: 'app-ability-details',

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

@@ -1,7 +1,7 @@
 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';
+import { Ability } from 'src/interfaces/interfaces';
 
 @Component({
   selector: 'ability-modal',

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

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { DataService } from 'src/services/data/data.service';
-import { Ability } from 'src/interfaces/ability';
+import { Ability } from 'src/interfaces/interfaces';
 import { AbilityDetailsComponent } from './ability-details/ability-details.component';
 import { DetailsService } from 'src/services/details/details.service';
 import { ModalService } from 'src/services/modal/modal.service';

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

@@ -10,11 +10,13 @@
 
 .spell-container {
   margin: 15px 10px;
-  background-color: var(--items);
-  border: var(--border);
+  // background-color: var(--items);
+  // border: var(--border);
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding-bottom: 1.25rem;
+  border: var(--golder);
+  background-image: url("/assets/images/texture-15.jpg");
 }
 .level-row {
   padding: 1rem 1.5rem 0 1.5rem;
@@ -58,7 +60,7 @@ input[type="checkbox"]:checked::after {
   left: 50%;
   width: 12px;
   height: 12px;
-  background: #815139;
+  background: var(--gold-active);
   transform: translate(-50%, -50%);
 }
 
@@ -69,9 +71,10 @@ input[type="checkbox"]:checked::after {
   font-size: 1.5rem;
   text-align: center;
   border-radius: 10px;
-  border: none;
+  border: var(--golder);
   box-shadow: var(--shadow);
-  background-color: white;
+  // background-color: white;
+  background-image: url("/assets/images/texture-15.jpg");
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { DetailsService } from 'src/services/details/details.service';
-import { Trait } from 'src/interfaces/traits';
+import { Trait } from 'src/interfaces/interfaces';
 
 @Component({
   selector: 'trait-details',

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { Editor } from 'ngx-editor';
-import { Trait } from 'src/interfaces/traits';
+import { Trait } from 'src/interfaces/interfaces';
 import { ModalService } from 'src/services/modal/modal.service';
 
 @Component({

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

@@ -7,7 +7,7 @@ import {
 } from '@angular/cdk/drag-drop';
 import { DataService } from 'src/services/data/data.service';
 import { DetailsService } from 'src/services/details/details.service';
-import { Trait } from 'src/interfaces/traits';
+import { Trait } from 'src/interfaces/interfaces';
 import { TraitDetailsComponent } from './trait-details/trait-details.component';
 import { ModalService } from 'src/services/modal/modal.service';
 import { TraitModalComponent } from './trait-modal/trait-modal.component';

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component.html

@@ -99,7 +99,7 @@
           (selectionChange)="showButtons()"
           multiple
         >
-          @for (type of translator.damageTypes; track type) {
+          @for (type of list.damageTypes; track type) {
             <mat-option [value]="type">
               {{ "damageTypes." + type | translate }}
             </mat-option>
@@ -127,7 +127,7 @@
           (selectionChange)="showButtons()"
           multiple
         >
-          @for (type of translator.damageTypes; track type) {
+          @for (type of list.damageTypes; track type) {
             <mat-option [value]="type">
               {{ "damageTypes." + type | translate }}
             </mat-option>
@@ -157,7 +157,7 @@
           (change)="showButtons()"
           multiple
         >
-          @for (type of translator.damageTypes; track type) {
+          @for (type of list.damageTypes; track type) {
             <mat-option [value]="type">
               {{ "damageTypes." + type | translate }}
             </mat-option>

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component.ts

@@ -1,9 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { DetailsService } from 'src/services/details/details.service';
 import { DataService } from 'src/services/data/data.service';
-import { Attribute } from 'src/interfaces/attribute';
+import { Attribute } from 'src/interfaces/interfaces';
 import { TranslateService } from '@ngx-translate/core';
-import { TranslatorService } from 'src/services/translator/translator.service';
+import { ListService } from 'src/services/list/list.service';
 
 @Component({
   selector: 'app-attribute-details',
@@ -23,7 +23,7 @@ export class AttributeDetailsComponent {
   public constructor(
     public detailsService: DetailsService,
     public translate: TranslateService,
-    public translator: TranslatorService,
+    public list: ListService,
     public dataAccessor: DataService,
   ) {
     this.resistances = this.dataAccessor.resistances.resistances;

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,7 +1,7 @@
 .attribute-box {
   width: 8rem;
-  border: var(--border);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   text-align: center;

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-field.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Attribute } from 'src/interfaces/attribute';
+import { Attribute } from 'src/interfaces/interfaces';
 import { DataService } from 'src/services/data/data.service';
 import { DetailsService } from 'src/services/details/details.service';
 import { Observable } from 'rxjs';

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

@@ -1,7 +1,7 @@
 .condition-container {
   display: flex;
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;
@@ -20,7 +20,8 @@
   height: 4rem;
   margin: 0.25rem 0.25rem 0 0.25rem;
   overflow-y: auto;
-  background-color: var(--background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture-15.jpg");
   border-radius: 10px;
 }
 

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

@@ -3,10 +3,8 @@
 .dashboard-container {
   display: flex;
   gap: 1rem;
-  // TODO: Add to center
   margin: auto;
   padding: 1.5rem 1.5rem 0 1.5rem;
-  // border: 3px solid red;
   width: 1280px;
   height: 840px;
 

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

@@ -1,8 +1,8 @@
 .life-box {
   width: 100%;
   height: 100%;
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   cursor: pointer;

src/app/journal/journal-stats/save-throw-panel/save-throw-field/save-throw-field.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
 import { Observable } from 'rxjs';
-import { Attribute } from 'src/interfaces/attribute';
+import { Attribute } from 'src/interfaces/interfaces';
 import { DetailsService } from 'src/services/details/details.service';
 import { SaveThrowDetailsComponent } from '../save-throw-details/save-throw-details.component';
 import { TranslateService } from '@ngx-translate/core';

src/app/journal/journal-stats/save-throw-panel/save-throw-panel.component.scss

@@ -1,8 +1,8 @@
 @import "../../../../responsive";
 
 .save-throw-panel {
-  border: var(--border);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;

src/app/journal/journal-stats/skill-panel/skill-field/skill-field.component.ts

@@ -1,9 +1,8 @@
 import { Component, Input } from '@angular/core';
-import { Skill } from 'src/interfaces/skill';
+import { Skill, Attribute } from 'src/interfaces/interfaces';
 import { DataService } from 'src/services/data/data.service';
 import { DetailsService } from 'src/services/details/details.service';
 import { Observable } from 'rxjs';
-import { Attribute } from 'src/interfaces/attribute';
 import { SkillDetailsComponent } from '../skill-details/skill-details.component';
 import { TranslateService } from '@ngx-translate/core';
 

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

@@ -3,8 +3,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 37.875rem;

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { ModalService } from 'src/services/modal/modal.service';
 import { TranslateService } from '@ngx-translate/core';
 import { UtilsService } from 'src/services/utils/utils.service';

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.scss

@@ -26,8 +26,6 @@
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  cursor: move;
-  background: var(--items);
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
@@ -36,9 +34,15 @@
     0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 8px 1px rgba(0, 0, 0, 0.14),
     0 3px 10px 2px rgba(0, 0, 0, 0.12);
-  transition: background-color 0.2s ease-in-out;
+  // background: var(--items);
+  // transition: background-color 0.2s ease-in-out;
+  // &:hover {
+  //   background: var(--items-hover);
+  // }
+  border: var(--golder);
+  background-image: url("/assets/images/texture-15.jpg");
   &:hover {
-    background: var(--items-hover);
+    background-image: url("/assets/images/texture-40.jpg");
   }
 }
 

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.ts

@@ -3,7 +3,7 @@ import { DataService } from 'src/services/data/data.service';
 import { ModalService } from 'src/services/modal/modal.service';
 import { DetailsService } from 'src/services/details/details.service';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { FullSpellcardComponent } from 'src/app/shared-components/full-spellcard/full-spellcard.component';
 import { FavoriteSpellsModalComponent } from './favorite-spells-modal/favorite-spells-modal.component';
 import { TranslateService } from '@ngx-translate/core';

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { DetailsService } from 'src/services/details/details.service';
-import { Weapon } from 'src/interfaces/weapon';
+import { Weapon } from 'src/interfaces/interfaces';
 
 @Component({
   selector: 'app-weapon-details',

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.ts

@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Weapon } from 'src/interfaces/weapon';
-import { Damage } from 'src/interfaces/damage';
+import { Weapon, Damage } from 'src/interfaces/interfaces';
 import { ModalService } from 'src/services/modal/modal.service';
 import { Editor } from 'ngx-editor';
 

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.scss

@@ -23,8 +23,7 @@
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  cursor: move;
-  background: var(--items);
+  cursor: pointer;
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
@@ -33,9 +32,15 @@
     0 5px 5px -3px rgba(0, 0, 0, 0.2),
     0 8px 8px 1px rgba(0, 0, 0, 0.14),
     0 3px 10px 2px rgba(0, 0, 0, 0.12);
-  transition: background-color 0.2s ease-in-out;
+  // background: var(--items);
+  // transition: background-color 0.2s ease-in-out;
+  // &:hover {
+  //   background: var(--items-hover);
+  // }
+  border: var(--golder);
+  background-image: url("/assets/images/texture-15.jpg");
   &:hover {
-    background: var(--items-hover);
+    background-image: url("/assets/images/texture-40.jpg");
   }
 }
 

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.ts

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
-import { Attribute } from 'src/interfaces/attribute';
-import { Weapon } from 'src/interfaces/weapon';
+import { Attribute, Weapon } from 'src/interfaces/interfaces';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DetailsService } from 'src/services/details/details.service';
 import { WeaponDetailsComponent } from './weapon-details/weapon-details.component';

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

@@ -1,6 +1,6 @@
 .weapon-spell-container {
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -17,12 +17,10 @@
   background-color: var(--tab);
   border-top: 0;
   border-left: 0;
-  border-bottom: 1px solid var(--border-color);
   border-right: 0;
 
   &.active {
     background-color: var(--tab-active);
-    border-bottom: 3px solid var(--border-color);
   }
 }
 
@@ -33,16 +31,16 @@
     flex: 1 1 0;
   }
   > :first-child {
-    border-radius: 10px 0 0 0;
+    border-radius: 8px 0 0 0;
     &.active {
-      border-right: 1px solid var(--border-color);
+      // border-right: 1px solid var(--border-color);
     }
   }
   > :last-child {
-    border-radius: 0 10px 0 0;
-    border-right: 1px solid var(--border-color);
+    border-radius: 0 8px 0 0;
+    // border-right: 1px solid var(--border-color);
     &.active {
-      border-left: 1px solid var(--border-color);
+      // border-left: 1px solid var(--border-color);
     }
   }
 }

src/app/journal/spell-modal/spell-modal.component.html

@@ -92,7 +92,7 @@
             <label>{{ "general.attribute" | translate }}</label>
             <mat-form-field appearance="outline">
               <mat-select [(ngModel)]="savingThrowAttribute">
-                @for (attribute of translator.attributes; track school) {
+                @for (attribute of list.attributes; track school) {
                   <mat-option [value]="savingThrowAttribute">{{
                     "attributes." + attribute | translate
                   }}</mat-option>
@@ -154,7 +154,7 @@
                 [(ngModel)]="durationtype"
                 (selectionChange)="checkIfInstant()"
               >
-                @for (type of translator.durationTypes; track type) {
+                @for (type of list.durationTypes; track type) {
                   <mat-option [value]="type">{{
                     "time." + type | translate
                   }}</mat-option>
@@ -178,7 +178,7 @@
           <label>{{ "spellmodal.school" | translate }}</label>
           <mat-form-field appearance="outline">
             <mat-select [(ngModel)]="school">
-              @for (school of translator.schools; track school) {
+              @for (school of list.schools; track school) {
                 <mat-option [value]="school">{{
                   "schools." + school | translate
                 }}</mat-option>
@@ -256,7 +256,7 @@
                   </div>
                   <mat-form-field appearance="outline">
                     <mat-select [(ngModel)]="damageEntry.damageType">
-                      @for (type of translator.damageTypes; track type) {
+                      @for (type of list.damageTypes; track type) {
                         <mat-option [value]="type">
                           {{ "damageTypes." + type | translate }}
                         </mat-option>
@@ -347,7 +347,7 @@
                 </div>
                 <mat-form-field appearance="outline">
                   <mat-select [(ngModel)]="areaOfEffectType">
-                    @for (areaType of translator.areaTypes; track areaType) {
+                    @for (areaType of list.areaTypes; track areaType) {
                       <mat-option [value]="areaType">
                         {{ "areaTypes." + areaType | translate }}
                       </mat-option>

src/app/journal/spell-modal/spell-modal.component.scss

@@ -1,7 +1,7 @@
 @import "../../../responsive";
 
 .dimensions {
-  background-image: url("/assets/images/bg.jpg");
+  background-image: url("/assets/images/background.jpg");
 }
 
 .checkbox-column {
@@ -114,7 +114,7 @@ div.nav-pills.flex-column.nav {
     &.active,
     &:hover {
       background-color: var(--tab-active);
-      background-color: #b5a27d;
+      background-color: var(--new-tab);
 
       box-shadow: var(--shadow);
     }

src/app/journal/spell-modal/spell-modal.component.ts

@@ -1,9 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { ModalService } from 'src/services/modal/modal.service';
-import { TranslatorService } from 'src/services/translator/translator.service';
-import { Damage } from 'src/interfaces/damage';
-import { Heal } from 'src/interfaces/heal';
-import { Spell } from 'src/interfaces/spell';
+import { ListService } from 'src/services/list/list.service';
+import { Damage, Heal, Spell } from 'src/interfaces/interfaces';
 import { Editor } from 'ngx-editor';
 
 @Component({
@@ -91,7 +89,7 @@ export class SpellModalComponent {
   // #endregion
   public constructor(
     private modalAccessor: ModalService,
-    public translator: TranslatorService,
+    public list: ListService,
   ) {}
 
   public ngOnInit(): void {

src/app/shared-components/divider/divider.component.scss

@@ -1,5 +1,5 @@
 div {
-  border-top: 2px solid #9b8559;
+  border-top: 2px solid var(--gold);
   height: 1px;
   width: 100%;
 }

src/app/shared-components/full-spellcard/full-spellcard.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, inject } from '@angular/core';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { ModalService } from 'src/services/modal/modal.service';
 import { UtilsService } from 'src/services/utils/utils.service';
 import { TranslateService } from '@ngx-translate/core';

src/assets/borders/border1.svg

@@ -0,0 +1,6 @@
+<svg height="400" width="400" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M223.79241,153.59a27.608,27.608,0,0,0-.92665-3c-1.70385-4.27-1.12594-39.26-1.12594-39.26s0-12.67-.57791-30.9c-.34874-11.2,1.56437-25,3.08887-33.94a8.35593,8.35593,0,0,1-2.98922-8.09,11.90127,11.90127,0,0,1,.78717-2.54,28.715,28.715,0,0,1,.25908-3.46c-.81706-5.25-1.116-10.74-3.63688-15.42s-6.82542-7.78-10.6018-11.19c-.0797-.08-.12954-.15-.1993-.23-2.212-1.06-4.59343-1.79-6.75563-3a6.12742,6.12742,0,0,1-.837-.57H30.07152c-.77719.52-1.58428,1-2.34155,1.57a4.15331,4.15331,0,0,1-2.81982.68c-6.20761,5.4-13.023,9-15.67347,17.58a47.09122,47.09122,0,0,0-1.7736,9.43,3.20851,3.20851,0,0,1,.09964.42c.269,1.51.41849,3,.568,4.54,0,0,.12954.91.12954,1a14.64046,14.64046,0,0,0,.548,1.93,4.62021,4.62021,0,0,1-1.46472,4.95,5.5453,5.5453,0,0,1-2.48105,3c1.50457,9,3.328,22.38,2.98922,33.33-.57792,18.23-.57792,30.9-.57792,30.9s.57792,35-1.12593,39.26a27.95546,27.95546,0,0,0-1.08609,3.65A4.77275,4.77275,0,0,1,8.051,157.4c1.30529,4,.40853,8.33-.7772,12.49A4.69483,4.69483,0,0,1,7.473,171c1.13591,12.88,10.08363,21.75,21.42273,26.68A4.7335,4.7335,0,0,1,30.71919,199h165.0244c1.933-.54,3.89595-1,5.78912-1.65a3.81486,3.81486,0,0,1,1.30529-.86,4.58851,4.58851,0,0,1,2.41131-1.31l.74731-.19a3.86723,3.86723,0,0,1,1.05618-.81c1.24551-.62,2.54083-1.18,3.77639-1.85a17.07178,17.07178,0,0,1,1.70385-1.4,3.15462,3.15462,0,0,1,.64765-.36c.0797-.09.15943-.17.22919-.26s.568-.83.568-.83a5.37543,5.37543,0,0,1,2.45115-2.06c.44839-.55.87684-1.12,1.28537-1.69l.09965-.12a37.40281,37.40281,0,0,0,4.703-17.11,3.01265,3.01265,0,0,1,0-.31c-1.64406-3.32-1.2754-6.59-1.5245-10.19A4.68107,4.68107,0,0,1,223.79241,153.59Z"
+            style="fill: none; stroke: red; stroke-width: 3"
+          />
+        </svg> 

src/assets/borders/border2.svg

@@ -0,0 +1,4 @@
+<svg height="400" width="400" xmlns="http://www.w3.org/2000/svg">
+    <path d="M275.28,101.4v2c.77-12.53,2.64-42.67,5.52-52l.21-.68-.6-.37a20.9,20.9,0,0,1-3.68-3.08,60.93,60.93,0,0,1,2.34-9.38l.12-.34L276.7,10l-1.08-.34c-2.52-.78-9.71-3.91-9.71-8V0H15.09V1.68c0,4.05-7,7.12-9.71,8L4.3,10,1.82,37.56l.12.34a61.53,61.53,0,0,1,2.34,9.36A21.05,21.05,0,0,1,.6,50.36l-.6.38.21.67c2.88,9.33,4.74,39.41,5.51,52v-2C5,113.87,3.09,139.25.21,148.59l-.21.68.6.37a20.9,20.9,0,0,1,3.68,3.08,59.8,59.8,0,0,1-2.34,9.38l-.12.34L4.3,190l1.08.34c2.7.84,9.71,3.91,9.71,8V200H265.91v-1.68c0-4,7-7.12,9.71-8l1.08-.34,2.48-27.58-.12-.34a61.53,61.53,0,0,1-2.34-9.36,21.05,21.05,0,0,1,3.68-3.1l.6-.38-.21-.67c-2.88-9.33-4.74-34.65-5.51-47.19m-3.84,62.1s.45,1.05,1,2.57a28.69,28.69,0,0,1-1.33,12.18c-2.95,8.6-10.16,14.89-20.88,18.39H30.68c-23-7.48-22.8-25.21-22.16-30.51.59-1.59,1.06-2.7,1.09-2.78a11.79,11.79,0,0,0-2.1-9.57c3.38-18.48,1.66-42,1.58-43.08V89.42c.09-1.17,1.81-24.74-1.57-43.23A12,12,0,0,0,9.56,36.5s-.45-1.06-1-2.57A28.69,28.69,0,0,1,9.87,21.75c3-8.6,10.16-14.9,20.89-18.39H250.32c23.05,7.48,22.8,25.21,22.16,30.51-.59,1.59-1.06,2.7-1.09,2.78a11.79,11.79,0,0,0,2.1,9.57c-3.38,18.48-1.66,42-1.58,43.08v21.28c-.09,1.17-1.81,24.74,1.57,43.23a12,12,0,0,0-2.05,9.69m7.41-112c-1.71,6-3,17.24-4,27.91a184.33,184.33,0,0,1,1.5-29.93,24.77,24.77,0,0,0,2.5,2m-5.72-14.31c.09-.2,1.13-2.66,2.12-5.71l.51,5.64A58.68,58.68,0,0,0,274,43.57a9.17,9.17,0,0,1-.89-6.35m.42-24.74,1.24,13.81c-.25,1.19-.59,2.43-1,3.62a29,29,0,0,0-1.55-8.55c-2-5.88-6.88-13.33-18.42-18h8.89c1.25,5.13,8,8.1,10.8,9.12M18.25,3.36h8.88C10.49,10.1,7.46,22.74,7.21,30c-.38-1.23-.74-2.52-1-3.75L7.45,12.48c2.79-1,9.55-4,10.8-9.12m-13,33.79.51-5.64c1,3,2,5.43,2.07,5.56A9.4,9.4,0,0,1,7,43.51a59.87,59.87,0,0,0-1.73-6.36M4.64,49.5A184.34,184.34,0,0,1,6.15,79.44c-1-10.67-2.29-21.88-4-27.91a22.88,22.88,0,0,0,2.49-2m-2.49,99c1.71-6,3-17.24,4-27.91a184.33,184.33,0,0,1-1.5,29.93,23.42,23.42,0,0,0-2.5-2m5.72,14.31c-.09.2-1.13,2.66-2.12,5.71l-.51-5.63A59.49,59.49,0,0,0,7,156.43a9.17,9.17,0,0,1,.89,6.35m-.42,24.74L6.21,173.71c.25-1.18.59-2.42,1-3.62a29,29,0,0,0,1.55,8.55c2,5.89,6.88,13.33,18.42,18H18.25c-1.25-5.13-8-8.1-10.8-9.12m255.3,9.12h-8.88c16.64-6.73,19.67-19.38,19.92-26.68.38,1.23.74,2.52,1,3.75l-1.24,13.81c-2.79,1-9.55,4-10.8,9.12m13-33.78-.51,5.63c-1-3-2-5.43-2.07-5.56a9.41,9.41,0,0,1,.85-6.44,60.72,60.72,0,0,0,1.73,6.37m.6-12.36a184.34,184.34,0,0,1-1.51-29.94c1,10.67,2.29,21.88,4,27.91a22.88,22.88,0,0,0-2.49,2"            
+    style="fill: none; stroke: red; stroke-width: 1"/> 
+</svg> 

src/assets/i18n/de.json

@@ -785,6 +785,7 @@
     "remove": "Zauber entfernen"
   },
   "spellbook": {
+    "title": "Zauberbuch",
     "levels": {
       "0": "Zaubertricks",
       "1": "1. Grad",
@@ -832,6 +833,6 @@
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
     "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden",
-    "version": "0.11.1"
+    "version": "0.11.2"
   }
 }

src/assets/i18n/en.json

@@ -780,6 +780,7 @@
     "remove": "Remove Spell"
   },
   "spellbook": {
+    "title": "Spellbook",
     "levels": {
       "0": "Cantrips",
       "1": "1st Level",
@@ -826,7 +827,7 @@
     "hint": "The app is still in a development stage and errors may occur",
     "issues": "<p>Please note errors and comments on the <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git server in Issues</a>.<p>",
     "okay": "Understood",
-    "version": "0.11.1",
+    "version": "0.11.2",
     "test": "Test"
   }
 }

src/colors.scss

@@ -7,8 +7,8 @@
   --edit-hover: #6f8e9f;
   --neutral: #b9835d;
   --neutral-hover: #a76b43;
-  --tab: #c79980;
-  --tab-active: #bc8567;
+  --tab: #c1ae75;
+  --tab-active: #98895c;
 
   --abjuration-background: #cab8de;
   --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
@@ -51,16 +51,26 @@
   --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: #b0826b;
+  --primary-old: #b0826b;
+  --primary: #a78032;
   --background-color: #fff2e9;
   --field-background-color: #efc8af;
   --border-color: #8d8c8c;
   --border-brown: #9b8559;
 
+  --new-tab: #b5a27d;
+  --new-tab-active: #9b8559;
+  --new-border: 1.5px solid #9b8559;
+
   --modal-background: antiquewhite;
   --header: #ffdec6;
   --text: #000000;
   --items: #fff2e9;
   --items-hover: #f7e3d7;
   --border: 1px solid var(--border-color);
+
+  //
+  --gold: #c1ae75;
+  --gold-active: #98895c;
+  --golder: 2px solid var(--gold);
 }

src/enums/area-types.ts

@@ -1,8 +0,0 @@
-export enum AreaTypes {
-  cone = 'Kegel',
-  sphere = 'Kugel',
-  circle = 'Kreis',
-  line = 'Linie',
-  square = 'Quadrat',
-  cube = 'Würfel',
-}

src/enums/damage-types.ts

@@ -1,16 +0,0 @@
-export enum DamageTypes {
-  acid = 'Säure',
-  bludgeoning = 'Wucht',
-  cold = 'Kälte',
-  fire = 'Feuer',
-  force = 'Energie',
-  lightning = 'Blitz',
-  necrotic = 'Nekrotisch',
-  piercing = 'Stich',
-  poison = 'Gift',
-  psychic = 'Psychisch',
-  radiant = 'Gleißend',
-  slashing = 'Hieb',
-  thunder = 'Donner',
-  holy = 'Heilig',
-}

src/enums/schools.ts

@@ -1,10 +0,0 @@
-export enum Schools {
-  divination = 'Wahrsagerei',
-  transmutation = 'Verwandlung',
-  abjuration = 'Abjuration',
-  conjuration = 'Beschwörung',
-  enchantment = 'Verzauberung',
-  evocation = 'Hervorrufung',
-  illusion = 'Illusion',
-  necromancy = 'Nekromantie',
-}

src/interfaces/ability.ts

@@ -1,8 +0,0 @@
-export interface Ability {
-  name: string;
-  shortDescription: string;
-  longDescription: string;
-  cost: string;
-  charges: number;
-  currentlyUsedCharges: number;
-}

src/interfaces/attribute.ts

@@ -1,6 +0,0 @@
-export interface Attribute {
-  name: string;
-  value: number;
-  proficiency: boolean;
-  advantage?: 'none' | 'advantage' | 'disadvantage';
-}

src/interfaces/character.ts

@@ -1,74 +0,0 @@
-export interface Character {
-  characterData: {
-    name: string;
-    race: string;
-    class: string;
-    subclass: string;
-    level: string;
-    background: string;
-    experience: string;
-    inspiration: string;
-    proficiencyBonus: string;
-  };
-  appearance: {
-    age: string;
-    height: string;
-    weight: string;
-    eyes: string;
-    skin: string;
-    hair: string;
-  };
-  attributes: {
-    strength: [string, boolean];
-    dexterity: [string, boolean];
-    constitution: [string, boolean];
-    intelligence: [string, boolean];
-    wisdom: [string, boolean];
-    charisma: [string, boolean];
-  };
-  skills: {
-    acrobatics: [string, boolean];
-    animalHandling: [string, boolean];
-    arcana: [string, boolean];
-    athletics: [string, boolean];
-    deception: [string, boolean];
-    history: [string, boolean];
-    insight: [string, boolean];
-    intimidation: [string, boolean];
-    investigation: [string, boolean];
-    medicine: [string, boolean];
-    nature: [string, boolean];
-    perception: [string, boolean];
-    performance: [string, boolean];
-    persuasion: [string, boolean];
-    religion: [string, boolean];
-    sleightOfHand: [string, boolean];
-    stealth: [string, boolean];
-    survival: [string, boolean];
-  };
-  combatStats: {
-    armorClass: string;
-    initiative: string;
-    speed: string;
-    hitPointMaximum: string;
-    currentHitPoints: string;
-    temporaryHitPoints: string;
-    hitDice: string;
-    deathSaveSuccesses: string;
-    deathSaveFailures: string;
-  };
-  weapons: {
-    name: string;
-    attackBonus: string;
-    damage: string;
-    damageType: string;
-    range: string;
-    description: string;
-  };
-  personality: {
-    personalityTraits: string;
-    ideals: string;
-    bonds: string;
-    flaws: string;
-  };
-}

src/interfaces/class-data.ts

@@ -1,6 +0,0 @@
-export interface ClassData {
-  title: string;
-  subclassLevel: number;
-  description: string;
-  features: any[];
-}

src/interfaces/consumable.ts

@@ -1,7 +0,0 @@
-export interface Consumable {
-  name: string;
-  weight: number;
-  value: number;
-  quantity: number;
-  description: string;
-}

src/interfaces/damage.ts

@@ -1,6 +0,0 @@
-export interface Damage {
-  diceNumber: number;
-  diceType: number;
-  damageType: string;
-  additionalDamage?: number;
-}

src/interfaces/food.ts

@@ -1,7 +0,0 @@
-export interface Food {
-  name: string;
-  isReady: boolean;
-  quantity: number;
-  weight: number;
-  description?: string;
-}

src/interfaces/heal.ts

@@ -1,5 +0,0 @@
-export interface Heal {
-  diceNumber: number;
-  diceType: number;
-  additionalHeal?: number;
-}

src/interfaces/interfaces.ts

@@ -0,0 +1,167 @@
+// #region CHARACTER DATA
+export interface Ability {
+  name: string;
+  shortDescription: string;
+  longDescription: string;
+  cost: string;
+  charges: number;
+  currentlyUsedCharges: number;
+}
+
+export interface Attribute {
+  name: string;
+  value: number;
+  proficiency: boolean;
+  advantage?: 'none' | 'advantage' | 'disadvantage';
+}
+
+export interface Skill {
+  name: string;
+  proficiency: boolean;
+  bardicExpertise?: boolean;
+  advantage?: 'none' | 'advantage' | 'disadvantage';
+}
+
+export interface Trait {
+  name: string;
+  shortDescription: string;
+  longDescription: string;
+  origin: string;
+}
+// #endregion
+
+// #region CLASSES AND SUBCLASSES
+export interface ClassData {
+  title: string;
+  subclassLevel: number;
+  description: string;
+  features: any[];
+}
+
+export interface SubclassData {
+  title: string;
+  description: string;
+  features: any[];
+}
+// #endregion
+
+// #region EQUIPMENT
+export interface Weapon {
+  name: string;
+  damage: Damage[];
+  attackBonus: string;
+  useAttributeModifier: boolean;
+  hasAdditionalDamage: boolean;
+  additionalDamage: number;
+  range: number[];
+  hasReach: boolean;
+  throwRange?: number[];
+  proficient: boolean;
+  isVersatile: boolean;
+  isTwoHanded: boolean;
+  isFinesse: boolean;
+  isRanged: boolean;
+  canBeThrown: boolean;
+  weight: string;
+  versatileDamage?: string;
+  isMagical: boolean;
+  magicBonus?: number;
+  description: string;
+}
+
+export interface SimpleItem {
+  name: string;
+  weight: number;
+  value: number;
+  quantity: number;
+  description?: string;
+}
+
+export interface Consumable {
+  name: string;
+  weight: number;
+  value: number;
+  quantity: number;
+  description: string;
+}
+
+export interface Food {
+  name: string;
+  isReady: boolean;
+  quantity: number;
+  weight: number;
+  description?: string;
+}
+
+export interface Misc {
+  name: string;
+  weight: number;
+  value: number;
+  quantity: number;
+  description?: string;
+}
+// #endregion
+
+// #region DAMAGE AND HEAL
+export interface Damage {
+  diceNumber: number;
+  diceType: number;
+  damageType: string;
+  additionalDamage?: number;
+}
+
+export interface Heal {
+  diceNumber: number;
+  diceType: number;
+  additionalHeal?: number;
+}
+// #endregion
+
+// #region SPELLS
+export interface Spell {
+  id: number;
+  isCustom: boolean;
+  german: string;
+  english: string;
+  image: string;
+  classes: string[];
+  level: number;
+  timeToCast: number;
+  cost:
+    | 'action'
+    | 'bonus'
+    | 'reaction'
+    | 'rounds'
+    | 'minutes'
+    | 'hours'
+    | 'days';
+  duration: number;
+  durationType:
+    | 'instant'
+    | 'rounds'
+    | 'minutes'
+    | 'hours'
+    | 'days'
+    | 'permanent';
+  isRitual: boolean;
+  needsConcentration: boolean;
+  needsVerbal: boolean;
+  needsSomatic: boolean;
+  needsMaterial: boolean;
+  school: string;
+  description_de: string;
+  description_en: string;
+  needsAttackRoll: boolean;
+  needsSavingThrow: boolean;
+  savingThrowAttribute?: string;
+  isRanged: boolean;
+  range?: number;
+  hasAreaOfEffect: boolean;
+  length?: number;
+  areaOfEffectType?: string;
+  doesDamage: boolean;
+  damage?: Damage[];
+  doesHeal: boolean;
+  heal?: Heal;
+}
+// #endregion

src/interfaces/misc.ts

@@ -1,7 +0,0 @@
-export interface Misc {
-  name: string;
-  weight: number;
-  value: number;
-  quantity: number;
-  description?: string;
-}

src/interfaces/simple-item.ts

@@ -1,7 +0,0 @@
-export interface SimpleItem {
-  name: string;
-  weight: number;
-  value: number;
-  quantity: number;
-  description?: string;
-}

src/interfaces/skill.ts

@@ -1,6 +0,0 @@
-export interface Skill {
-  name: string;
-  proficiency: boolean;
-  bardicExpertise?: boolean;
-  advantage?: 'none' | 'advantage' | 'disadvantage';
-}

src/interfaces/spell.ts

@@ -1,107 +0,0 @@
-export interface Spell {
-  id: number;
-  isCustom: boolean;
-  german: string;
-  english: string;
-  image: string;
-  classes: string[];
-  level: number;
-  timeToCast: number;
-  cost:
-    | 'action'
-    | 'bonus'
-    | 'reaction'
-    | 'rounds'
-    | 'minutes'
-    | 'hours'
-    | 'days';
-  duration: number;
-  durationType:
-    | 'instant'
-    | 'rounds'
-    | 'minutes'
-    | 'hours'
-    | 'days'
-    | 'permanent';
-  isRitual: boolean;
-  needsConcentration: boolean;
-  needsVerbal: boolean;
-  needsSomatic: boolean;
-  needsMaterial: boolean;
-  school: string;
-  description_de: string;
-  description_en: string;
-  needsAttackRoll: boolean;
-  needsSavingThrow: boolean;
-  savingThrowAttribute?: string;
-  isRanged: boolean;
-  range?: number;
-  hasAreaOfEffect: boolean;
-  length?: number;
-  areaOfEffectType?: string;
-  doesDamage: boolean;
-  damage?: Damage[];
-  doesHeal: boolean;
-  heal?: Heal;
-}
-
-// Possible Additions
-
-// Number of targets
-// Material
-
-interface Damage {
-  diceNumber: number;
-  diceType: number;
-  damageType: string;
-  additionalDamage?: number;
-}
-
-// additions
-
-interface Heal {
-  diceNumber: number;
-  diceType: number;
-  additionalHeal?: number;
-}
-
-// export interface Spell1 {
-//   id: number;
-//   isCustom: boolean;
-//   german: string;
-//   english: string;
-//   image: string;
-//   classes: string[];
-//   level: number;
-//   timeToCast: number;
-//   cost:
-//     | 'action'
-//     | 'bonus'
-//     | 'reaction'
-//     | 'rounds'
-//     | 'minutes'
-//     | 'hours'
-//     | 'days';
-//   duration: number;
-//   durationType: 'rounds' | 'minutes' | 'hours' | 'days' | 'permanent';
-//   isRitual: boolean;
-//   needsConcentration: boolean;
-//   needsVerbal: boolean;
-//   needsSomatic: boolean;
-//   needsMaterial: boolean;
-//   school: string;
-//   description_de: string;
-//   description_en: string;
-//   needsAttackRoll: boolean;
-//   needsSavingThrow: boolean;
-//   savingThrowAttribute?: string;
-//   isRanged: boolean;
-//   range?: number;
-//   hasAreaOfEffect: boolean;
-//   length?: number;
-//   areaOfEffectType?: string;
-//   doesDamage: boolean;
-//   damage?: Damage[];
-//   doesHeal: boolean;
-//   heal?: Heal;
-// }

src/interfaces/subclass-data.ts

@@ -1,5 +0,0 @@
-export interface SubclassData {
-  title: string;
-  description: string;
-  features: any[];
-}

src/interfaces/traits.ts

@@ -1,6 +0,0 @@
-export interface Trait {
-  name: string;
-  shortDescription: string;
-  longDescription: string;
-  origin: string;
-}

src/interfaces/weapon.ts

@@ -1,29 +0,0 @@
-export interface Weapon {
-  name: string;
-  damage: Damage[];
-  attackBonus: string;
-  useAttributeModifier: boolean;
-  hasAdditionalDamage: boolean;
-  additionalDamage: number;
-  range: number[];
-  hasReach: boolean;
-  throwRange?: number[];
-  proficient: boolean;
-  isVersatile: boolean;
-  isTwoHanded: boolean;
-  isFinesse: boolean;
-  isRanged: boolean;
-  canBeThrown: boolean;
-  weight: string;
-  versatileDamage?: string;
-  isMagical: boolean;
-  magicBonus?: number;
-  description: string;
-}
-
-interface Damage {
-  diceNumber: number;
-  diceType: number;
-  damageType: string;
-  additionalDamage?: number;
-}

src/pipes/duration/duration.pipe.ts

@@ -5,6 +5,8 @@ import { TranslateService } from '@ngx-translate/core';
   name: 'duration',
   standalone: true,
 })
+
+// Currently not in use!
 export class DurationPipe implements PipeTransform {
   public constructor(public translate: TranslateService) {}
   transform(value: number): string {

src/services/class/class.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ClassData } from 'src/interfaces/class-data';
+import { ClassData } from 'src/interfaces/interfaces';
 
 @Injectable({
   providedIn: 'root',

src/services/data/data.service.ts

@@ -1,14 +1,16 @@
 import { Injectable } from '@angular/core';
 import Localbase from 'localbase';
 import { BehaviorSubject } from 'rxjs';
-import { Attribute } from 'src/interfaces/attribute';
-import { Skill } from 'src/interfaces/skill';
-import { Weapon } from 'src/interfaces/weapon';
-import { Spell } from 'src/interfaces/spell';
-import { Ability } from 'src/interfaces/ability';
-import { Trait } from 'src/interfaces/traits';
-import { SimpleItem } from 'src/interfaces/simple-item';
-import { Food } from 'src/interfaces/food';
+import {
+  Weapon,
+  Food,
+  SimpleItem,
+  Trait,
+  Ability,
+  Spell,
+  Skill,
+  Attribute,
+} from 'src/interfaces/interfaces';
 import { SpellsService } from '../spells/spells.service';
 
 @Injectable({

src/services/translator/translator.service.spec.ts → src/services/list/list.service.spec.ts

@@ -1,13 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 
-import { TranslatorService } from './translator.service';
+import { ListService } from './list.service';
 
 describe('TranslatorService', () => {
-  let service: TranslatorService;
+  let service: ListService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    service = TestBed.inject(TranslatorService);
+    service = TestBed.inject(ListService);
   });
 
   it('should be created', () => {

src/services/translator/translator.service.ts → src/services/list/list.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root',
 })
-export class TranslatorService {
+export class ListService {
   constructor() {}
 
   public races: string[] = [

src/services/spells/spells.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core';
-import { Spell } from 'src/interfaces/spell';
+import { Spell } from 'src/interfaces/interfaces';
 import { Subject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 

src/services/subclass/subclass.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { SubclassData } from 'src/interfaces/subclass-data';
+import { SubclassData } from 'src/interfaces/interfaces';
 
 @Injectable({
   providedIn: 'root',

src/styles.scss

@@ -3,12 +3,67 @@
 /* Importing Bootstrap SCSS file. */
 // TODO: remove bootstrap styles
 @import "bootstrap/scss/bootstrap";
-@import url("./helpers.scss");
-@import url("./button-styles.scss");
-@import url("./colors.scss");
+// @import url("./helpers.scss");
+// @import url("./button-styles.scss");
+// @import url("./colors.scss");
+
+@import "helpers";
+@import "button-styles";
+@import "colors";
 @import "responsive";
 @import "fonts";
 
+// #region new styles
+
+// Wraps all journal components and gives general layout and styling
+.journal-content {
+  position: relative;
+  width: 1332px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  display: flex;
+}
+
+.header-row {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h1 {
+    // color: #58180d;
+    // font-family: "Bookinsanity", serif;
+    font-size: 3.5rem;
+    font-weight: 500;
+    margin-bottom: 0;
+  }
+}
+
+.button-container {
+  display: flex;
+  gap: 1rem;
+
+  .top-button {
+    font-size: 1.25rem;
+    font-weight: 600;
+    width: 16rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    background-image: url("/assets/images/texture.png");
+    border: none;
+    box-shadow: var(--shadow);
+  }
+}
+
+// #endregion
+
+//////////////////
+////// OLD ///////
+//////////////////
+
 // LISTS
 .item-list {
   width: 100%;
@@ -16,15 +71,20 @@
 }
 
 .item {
-  background-color: var(--items);
   box-sizing: border-box;
-  border: var(--border);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  cursor: move;
+  cursor: pointer;
   transition: background-color 0.2s ease-in-out;
+  // border: var(--border);
+  // background-color: var(--items);
+  // &:hover {
+  //   background-color: var(--items-hover);
+  // }
+  border: var(--golder);
+  background-image: url("/assets/images/texture-15.jpg");
   &:hover {
-    background-color: var(--items-hover);
+    background-image: url("/assets/images/texture-40.jpg");
   }
 }
 
@@ -122,8 +182,8 @@ input[type="checkbox"] {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  border: solid 1px var(--border-color);
-  background-color: var(--field-background-color);
+  border: var(--golder);
+  background-image: url("/assets/images/texture.png");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;
@@ -191,6 +251,7 @@ input[type="checkbox"] {
   border: 1px solid var(--border-color);
   padding: 0 2rem;
   box-shadow: var(--shadow);
+  background-image: url("/assets/images/background.jpg");
 }
 
 .title {