reworked the cstom spells modal and added level and school

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

@@ -9,28 +9,24 @@
           [ngClass]="{ selected: indexList.includes(index) }"
           (click)="toggleSpellSelection(index)"
         >
-          @if (translate.getDefaultLang() == "de") {
-            {{ spell.german }}
-          } @else {
-            {{ spell.english }}
-          }
+          <div class="spell-name">
+            @if (translate.getDefaultLang() == "de") {
+              {{ spell.german }}
+            } @else {
+              {{ spell.english }}
+            }
+          </div>
+          <div class="spell-level">
+            {{ "spellbook.favorites.levels." + spell.level | translate }}
+          </div>
+          <div class="spell-school">
+            {{ "schools." + spell.school | translate }}
+          </div>
         </div>
       }
     </div>
   </div>
   <div class="button-container">
-    <!-- <ui-button
-      [color]="'red'"
-      [width]="'w15'"
-      [type]="'deleteSelected'"
-      (click)="delete()"
-    ></ui-button> -->
-    <!-- <ui-button
-      [color]="'red'"
-      [width]="'w15'"
-      [type]="'cancel'"
-      (click)="cancel()"
-    ></ui-button> -->
     <button
       [class]="indexList.length === 0 ? 'disabled' : ''"
       (click)="indexList.length !== 0 ? delete() : ''"

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

@@ -32,7 +32,7 @@
   color: rgba(0, 0, 0, 0.87);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  // justify-content: space-between;
   background-image: url("/assets/images/texture.png");
   border-radius: 10px;
   font-size: 1rem;
@@ -48,6 +48,18 @@
   }
 }
 
+.spell-name {
+  width: 45%;
+}
+
+.spell-level {
+  width: 30%;
+}
+
+.spell-school {
+  width: 25%;
+}
+
 .selected {
   background-color: #58180d;
   box-sizing: border-box;