slight rework of the character picker and creation process

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

@@ -1,6 +1,6 @@
 <div class="creation-container">
   <form class="form-box">
-    <h3 style="text-align: center">{{ "creator.new" | translate }}</h3>
+    <h2 style="text-align: center">{{ "creator.new" | translate }}</h2>
     <mat-form-field appearance="outline">
       <mat-label>{{ "creator.name" | translate }}</mat-label>
       <input matInput [(ngModel)]="characterName" name="name" />

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

@@ -4,15 +4,14 @@
   height: 100%;
   width: 100%;
   padding-top: 3rem;
-  // display: flex;
 }
 
 .form-box {
   padding: 1rem;
   margin: auto;
   width: 800px;
-  border: 1px solid var(--border-color);
-  background-color: var(--secondary-color-light);
+  border: var(--border);
+  background-color: var(--items-hover);
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -36,6 +35,7 @@
   display: flex;
   justify-content: space-around;
   margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .cancel-button {
   background: var(--delete);

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

@@ -36,13 +36,14 @@
   justify-content: space-evenly;
   flex-wrap: wrap;
   padding-top: 2.5rem;
-  row-gap: 2.5rem;
+  padding-bottom: 2.5rem;
   overflow: auto;
+  column-gap: 2rem;
+  row-gap: 3rem;
   height: calc(100% - 8rem);
   @media (height < 900px) {
     height: calc(100% - 6rem);
   }
-  background-color: var(--background-color);
 }
 
 character-card {

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

@@ -22,11 +22,10 @@ export class CharacterPickerComponent {
   public currentCharacter: string = '';
   private modalService = inject(NgbModal);
 
+  @ViewChild('warning') warning!: TemplateRef<any>;
   @ViewChildren(CharacterCardComponent)
   characterCards!: QueryList<CharacterCardComponent>;
 
-  @ViewChild('warning') warning!: TemplateRef<any>;
-
   public constructor(
     public dataService: DataService,
     private Router: Router,
@@ -42,10 +41,18 @@ export class CharacterPickerComponent {
     this.showWarning(this.warning);
   }
 
+  /**
+   * Navigates to the character creator page.
+   */
   public addCharacter() {
     this.Router.navigate(['character/creator']);
   }
 
+  /**
+   * Opens the modal to ask the user if they really want to delete the character.
+   * @param content The content that is to be displayed in the modal.
+   * @param index The index of the character that is to be deleted.
+   */
   open(content: TemplateRef<any>, index: number) {
     this.currentCharacter = this.characters[index].name;
     this.modalService
@@ -60,10 +67,15 @@ export class CharacterPickerComponent {
       );
   }
 
+  /**
+   * Deletes a character from the list of characters.
+   * @param index The index of the character to be deleted.
+   */
   public deleteCharacter(index: number) {
     this.characters.splice(index, 1);
     this.dataService.deleteCollection(this.currentCharacter);
     this.dataService.deleteCollection('characters');
+    // TODO: Find a better solution that looks smoother.
     setTimeout(() => {
       this.dataService.setCollection('characters', this.characters);
     }, 200);
@@ -74,12 +86,19 @@ export class CharacterPickerComponent {
     }, 500);
   }
 
+  /**
+   * Sets the character name in the session storage and navigates to character tracker itself.
+   * @param character The character name
+   */
   public selectCharacter(character: any) {
-    console.log(character);
     sessionStorage.setItem('characterName', character.name);
     this.Router.navigate(['journal']);
   }
 
+  /**
+   * Show a warning to the user if they have not acknowledged it yet.
+   * The warning
+   */
   showWarning(warning: TemplateRef<any>) {
     let warningWasAcknowledged = sessionStorage.getItem(
       'warningWasAcknowledged',
@@ -89,6 +108,9 @@ export class CharacterPickerComponent {
     }
   }
 
+  /**
+   * The user has acknowledged the warning, so it will not be shown again in this session.
+   */
   public acknowledgeWarning() {
     sessionStorage.setItem('warningWasAcknowledged', 'true');
   }