restyled the spellslots and global checkboxes

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

@@ -228,9 +228,9 @@ export class CharacterCreatorComponent {
       this.dataAccessor.addData(
         this.characterName,
         {
-          totalPoints: 0,
+          totalPoints: 2,
           usedPoints: 0,
-          showKiPoints: false,
+          showKiPoints: this.characterClass === 'monk' ? true : false,
         },
         'kiPoints',
       ),

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

@@ -108,7 +108,8 @@
   background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 0 10px 10px;
   box-shadow: var(--shadow);
-  border: var(--gold-1);
+  border: var(--gold-2);
+  border-top: none;
 }
 
 spellcard {

src/app/journal/journal-stats/ability-panel/ability-panel.component.ts

@@ -11,6 +11,6 @@ export class AbilityPanelComponent {
   isMonk = false;
 
   public constructor(private dataAccessor: DataService) {
-    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
+    this.isMonk = this.dataAccessor.characterData.class === 'monk';
   }
 }

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

@@ -1,6 +1,8 @@
 <div class="dimensions">
   @if (!isMonk) {
-    <div class="title">{{ "magic.spellslots" | translate }}</div>
+    <div class="title">
+      {{ "magic.spellslots" | translate }}
+    </div>
     <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
     <div class="content">{{ "magic.description" | translate }}</div>
     <mat-slide-toggle

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.ts

@@ -1,6 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { ModalService } from 'src/services/modal/modal.service';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'spellslots-modal',
@@ -15,7 +14,7 @@ export class SpellslotsModalComponent {
 
   public kiNumbersArray: number[] = Array.from({ length: 20 }, (_, i) => i + 1);
 
-  public constructor(public modalAccessor: ModalService) {}
+  private modalAccessor: ModalService = inject(ModalService);
 
   // Shows the spellslot container
   public onSpellslotsSwitchChanged(event: any): void {

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.html

@@ -1,12 +1,20 @@
 <div class="slots-box">
   <div class="slots-container">
     @if (kiPoints.showKiPoints) {
-      <div class="ki-container">
+      <div class="points-container">
+        <div
+          style="
+            font-size: 1.5rem;
+            padding: 1.25rem 0 0.5rem 1.5rem;
+            font-weight: 600;
+          "
+        >
+          {{ "magic.ki" | translate }}
+        </div>
         <div
           class="level-row"
           [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
         >
-          {{ "magic.ki" | translate }}
           <div class="checkboxes">
             @for (
               _ of getArray(kiPoints.totalPoints);
@@ -26,7 +34,7 @@
     }
 
     @if (showSpellslots) {
-      <div class="spell-container">
+      <div class="points-container">
         <div
           style="
             font-size: 1.5rem;

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.scss

@@ -8,16 +8,15 @@
   position: relative;
 }
 
-.spell-container {
+.points-container {
   margin: 15px 10px;
-  // background-color: var(--items);
-  // border: var(--border);;
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding-bottom: 1.25rem;
   border: var(--gold-2);
   background-image: url("/assets/images/texture-15.jpg");
 }
+
 .level-row {
   padding: 1rem 1.5rem 0 1.5rem;
   display: flex;
@@ -25,7 +24,6 @@
   font-weight: 600;
 
   .checkboxes {
-    margin-left: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -42,28 +40,6 @@
   opacity: 0.6;
 }
 
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border: 1px solid #000;
-  position: relative;
-}
-
-input[type="checkbox"]:checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 12px;
-  height: 12px;
-  background: var(--gold-dark);
-  transform: translate(-50%, -50%);
-}
-
 .value-box {
   max-width: 8rem;
   padding: 0 0.25rem 0 0.25rem;

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.ts

@@ -26,7 +26,7 @@ export class SpellslotsComponent {
     public dataAccessor: DataService,
     public modalAccessor: ModalService,
   ) {
-    this.isMonk = this.dataAccessor.characterData.class === 'Monk';
+    this.isMonk = this.dataAccessor.characterData.class === 'monk';
   }
 
   public ngOnInit(): void {

src/app/journal/journal-stats/life/death-save/death-save.component.html

@@ -7,7 +7,7 @@
 
 <div class="save-row">
   <div class="save-label">{{ "life.success" | translate }}</div>
-  <div class="save-checkbox" (click)="$event.stopPropagation()">
+  <div class="save-checkbox success" (click)="$event.stopPropagation()">
     <input
       type="checkbox"
       [(ngModel)]="deathSaveSucc1"

src/app/journal/journal-stats/life/death-save/death-save.component.scss

@@ -37,7 +37,13 @@
 }
 
 .fail {
-  input[type="checkbox"] {
-    accent-color: var(--delete) !important;
+  input[type="checkbox"]:checked::after {
+    background: var(--delete);
+  }
+}
+
+.success {
+  input[type="checkbox"]:checked::after {
+    background: var(--accept);
   }
 }

src/app/journal/journal-stats/life/hit-dice/hit-dice.component.scss

@@ -13,25 +13,3 @@
     column-gap: 3rem;
   }
 }
-
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border: 1px solid #000;
-  position: relative;
-}
-
-input[type="checkbox"]:checked::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 11px;
-  height: 11px;
-  background: var(--gold);
-  transform: translate(-50%, -50%);
-}

src/app/journal/journal-stats/save-throw-panel/save-throw-field/save-throw-field.component.scss

@@ -4,7 +4,7 @@
   align-items: center;
 
   .save-throw-field__input {
-    width: 2rem;
+    margin: 0 0.5rem;
   }
 
   .save-throw-field__name {

src/app/journal/journal-stats/skill-panel/skill-field/skill-field.component.scss

@@ -3,7 +3,7 @@
   align-items: center;
 
   .skill-proficiency-input {
-    width: 2rem;
+    margin: 0 0.5rem;
   }
 
   .skill-attribute-name {

src/styles.scss

@@ -137,12 +137,29 @@
 
 // GENERAL STYLES
 
-//  Checkbox
+//  CHECKBOXES
 
 input[type="checkbox"] {
-  accent-color: var(--gold) !important;
-  height: 1.25rem;
-  width: 1.25rem;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px !important;
+  height: 20px;
+  background: white;
+  border: 1px solid #000;
+  border-radius: 2px;
+  position: relative;
+}
+
+input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  background: var(--gold-dark);
+  transform: translate(-50%, -50%);
 }
 
 // Scrollbar
@@ -260,6 +277,10 @@ input[type="checkbox"] {
   overflow: auto;
 }
 
+.NgxEditor__Wrapper {
+  border: var(--gold-1) !important;
+}
+
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
   display: none;