Merge branch 'feature/redesign' into develop

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/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/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/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/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-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':
@@ -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,
@@ -45,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;
     });
@@ -69,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]))
@@ -107,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(
@@ -129,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 {
@@ -172,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-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/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 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>
+  <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-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/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;
 }

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/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/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/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-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-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/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/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/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.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/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/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",

src/assets/i18n/en.json

@@ -780,6 +780,7 @@
     "remove": "Remove Spell"
   },
   "spellbook": {
+    "title": "Spellbook",
     "levels": {
       "0": "Cantrips",
       "1": "1st Level",

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/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 {