Restyled the chaarcter picker and creator

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

@@ -53,12 +53,12 @@
       </mat-select>
     </mat-form-field>
     <div class="button-row">
-      <button class="create-button" (click)="createCharacter()">
-        Erstellen
-      </button>
-      <button class="cancel-button" [routerLink]="'character/picker'">
-        Abbrechen
-      </button>
+      <ui-button [width]="'w15'" (click)="createCharacter()"
+        >Erstellen</ui-button
+      >
+      <ui-button [width]="'w15'" [routerLink]="'character/picker'"
+        >Abbrechen</ui-button
+      >
     </div>
   </form>
 </div>

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

@@ -1,5 +1,5 @@
 .creation-container {
-  background-color: var(--background-color);
+  background-image: url("/assets/images/background-0.jpg");
   background-size: cover;
   height: 100%;
   width: 100%;
@@ -10,8 +10,8 @@
   padding: 1rem;
   margin: auto;
   width: 800px;
-  border: var(--border);
-  background-color: var(--items-hover);
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -19,41 +19,42 @@
   gap: 1rem;
 }
 
-@mixin button {
-  color: black;
-  border: none;
-  border-radius: 10px;
-  box-shadow: var(--shadow);
-  height: 4rem;
-  width: 12rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  transition: all 0.2s ease-in-out;
-}
-
 .button-row {
   display: flex;
   justify-content: space-around;
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.cancel-button {
-  background: var(--delete);
-  @include button;
-  &:hover {
-    background: var(--delete-hover);
-    scale: 1.03;
-  }
-}
 
-.create-button {
-  background: var(--accept);
-  @include button;
-  &:hover {
-    background: var(--accept-hover);
-    scale: 1.03;
-  }
-}
+// @mixin button {
+//   color: black;
+//   border: none;
+//   border-radius: 10px;
+//   box-shadow: var(--shadow);
+//   height: 4rem;
+//   width: 12rem;
+//   font-size: 1.125rem;
+//   font-weight: 600;
+//   transition: all 0.2s ease-in-out;
+// }
+
+// .cancel-button {
+//   background: var(--delete);
+//   @include button;
+//   &:hover {
+//     background: var(--delete-hover);
+//     scale: 1.03;
+//   }
+// }
+
+// .create-button {
+//   background: var(--accept);
+//   @include button;
+//   &:hover {
+//     background: var(--accept-hover);
+//     scale: 1.03;
+//   }
+// }
 
 ::ng-deep .mat-mdc-optgroup-label .mdc-list-item__primary-text {
   font-size: 0.825rem !important;

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

@@ -388,7 +388,13 @@ export class CharacterCreatorComponent {
         },
         'notes',
       ),
-      this.dataAccessor.addData(this.characterName, [], 'quests'),
+      this.dataAccessor.addData(
+        this.characterName,
+        {
+          data: [],
+        },
+        'quests',
+      ),
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -401,8 +407,20 @@ export class CharacterCreatorComponent {
         },
         'npcs',
       ),
-      this.dataAccessor.addData(this.characterName, [], 'locations'),
-      this.dataAccessor.addData(this.characterName, [], 'maps'),
+      this.dataAccessor.addData(
+        this.characterName,
+        {
+          data: [],
+        },
+        'locations',
+      ),
+      this.dataAccessor.addData(
+        this.characterName,
+        {
+          data: [],
+        },
+        'maps',
+      ),
       this.dataAccessor.addData(
         this.characterName,
         {
@@ -415,12 +433,8 @@ export class CharacterCreatorComponent {
         'resistances',
       ),
 
-      // Notes
-
       // Maps
 
-      // NPCs
-
       // Quests
     ]).then(() => {});
   }

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

@@ -12,11 +12,12 @@
   </div>
   <!-- The characterData is not loaded initially, so this is a workaround. Maybe add a resolver first -->
   @if (image) {
-    <img [src]="image" alt="portrait" />
+    <img [src]="image" alt="portrait" class="portrait" />
   } @else if (characterData !== undefined) {
     <img
       [src]="'assets/images/' + characterData.gender.toLowerCase() + '.jpg'"
       alt="character"
+      class="portrait"
     />
   }
   @if (characterData !== undefined) {

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

@@ -2,11 +2,12 @@
   width: 35rem;
   height: 20rem;
   border-radius: 10px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow);
+  border: var(--gold-3);
   display: flex;
   overflow: hidden;
   position: relative;
-  background-color: var(--field-background-color);
+  background-image: url("/assets/images/texture-10.jpg");
   box-shadow: var(--shadow);
   position: relative;
   &:hover {
@@ -42,6 +43,13 @@
 img {
   width: 20rem;
   height: 20rem;
+  // border-right: var(--gold-3);
+  // border-radius: 10px;
+}
+
+.portrait {
+  border-right: var(--gold-3);
+  // border-radius: 10px;
 }
 
 .content {

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

@@ -1,9 +1,11 @@
 // HEADER
 .header {
-  background-color: var(--header);
   height: 8rem;
+  background-image: url("/assets/images/background-30.jpg");
+  border-bottom: var(--gold-dark-2);
   box-shadow: var(--shadow);
-  position: relative;
+  z-index: 5;
+  // position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,7 +15,7 @@
 }
 
 ::ng-deep body {
-  background-color: var(--background-color);
+  background-image: url("/assets/images/background-0.jpg");
 }
 
 .okay-button {
@@ -31,6 +33,8 @@
 // CARDS
 
 .character-card-container {
+  width: 1300px;
+  margin: auto;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -57,6 +61,7 @@ character-card {
   background-color: lightgrey;
   border-radius: 10px;
   box-shadow: var(--shadow);
+  border: var(--gold-3);
   display: flex;
   justify-content: center;
   align-items: center;

src/app/character/character.module.ts

@@ -15,6 +15,7 @@ import { DeletionConfirmComponent } from './character-picker/deletion-confirm/de
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import { LandingPageComponent } from './landing-page/landing-page.component';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { SharedComponentsModule } from '../shared-components/shared-components.module';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
     MatAutocompleteModule,
     TranslateModule,
     NgbNavModule,
+    SharedComponentsModule,
   ],
   providers: [TranslatePipe],
 })

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

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