reworked spell components to new layout and styling

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-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">

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 {

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

@@ -1,59 +1,62 @@
-<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>
-
-        <button class="top-button" (click)="openSpellCreationModal(false)">
-          <img src="assets/icons/UIIcons/add.svg" />
-          {{ "spellbook.add" | translate }}
-        </button>
-      </div>
-    </div>
+<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>
 
-    <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>
-      }
+      <button class="top-button" (click)="openSpellCreationModal(false)">
+        <img src="assets/icons/UIIcons/add.svg" />
+        {{ "spellbook.add" | translate }}
+      </button>
     </div>
+  </div>
 
-    <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">
-          <button
-            ngbNavLink
-            (click)="currentLevel = level; refreshFilteredSpells(true)"
-          >
-            {{ "spellbook.levels." + level | translate }}
-          </button>
-          <ng-template ngbNavContent>
-            <div class="card-container">
-              @for (spell of filteredSpells; track spell) {
-                <spellcard
-                  [spell]="spell"
-                  (click)="showFullSpellcard(spell)"
-                ></spellcard>
-              } @empty {
-                <div class="empty">{{ "spellbook.noSpells" | translate }}</div>
-              }
-            </div>
-          </ng-template>
-        </li>
-      }
-    </ul>
+  <divider></divider>
 
-    <div [ngbNavOutlet]="nav"></div>
+  <!-- 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>
+
+  <!-- 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">
+        <button
+          ngbNavLink
+          (click)="currentLevel = level; refreshFilteredSpells(true)"
+        >
+          {{ "spellbook.levels." + level | translate }}
+        </button>
+        <ng-template ngbNavContent>
+          <div class="card-container">
+            @for (spell of filteredSpells; track spell) {
+              <spellcard
+                [spell]="spell"
+                (click)="showFullSpellcard(spell)"
+              ></spellcard>
+            } @empty {
+              <div class="empty">{{ "spellbook.noSpells" | translate }}</div>
+            }
+          </div>
+        </ng-template>
+      </li>
+    }
+  </ul>
+
+  <!-- SEARCH RESULT -->
+  <div [ngbNavOutlet]="nav"></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/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/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 {

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

@@ -57,6 +57,9 @@
   --border-color: #8d8c8c;
   --border-brown: #9b8559;
 
+  --new-tab: #b5a27d;
+  --new-tab-active: #9b8559;
+
   --modal-background: antiquewhite;
   --header: #ffdec6;
   --text: #000000;

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%;