updated life details to new value-boxes

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.html

@@ -1,24 +1,23 @@
 <div class="details-title">Trefferpunkte</div>
 
 <div class="life-container">
-  <div class="life-box">
-    <input type="number" class="life-input" [(ngModel)]="maxHitPoints" />
-    <div for="" class="life-label">Maximale Trefferpunkte</div>
-  </div>
-
-  <div class="life-box">
-    <input
-      type="number"
-      class="life-input"
-      [(ngModel)]="currentHitPoints"
-      (change)="checkValidity()"
-    />
-    <div for="" class="life-label">Momentane Trefferpunkte</div>
-  </div>
-  <div class="life-box">
-    <input type="number" class="life-input" [(ngModel)]="temporaryHitPoints" />
-    <div for="" class="life-label">Temporäre Trefferpunkte</div>
-  </div>
+  <value-box
+    [isInput]="true"
+    [label]="'Maximale Trefferpunkte'"
+    [(ngModel)]="maxHitPoints"
+    (change)="checkValidity()"
+  ></value-box>
+  <value-box
+    [isInput]="true"
+    [label]="'Momentane Trefferpunkte'"
+    [(ngModel)]="currentHitPoints"
+    (change)="checkValidity()"
+  ></value-box>
+  <value-box
+    [isInput]="false"
+    [label]="'Temporäre Trefferpunkte'"
+    [(ngModel)]="temporaryHitPoints"
+  ></value-box>
 </div>
 <hit-dice style="margin-top: 5rem" (setHitDice)="setHitDice($event)"></hit-dice>
 

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.scss

@@ -1,7 +1,8 @@
 .life-container {
     display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+    flex-direction: row;
+    justify-content: space-evenly;
+    // gap: 1.5rem;
     margin-top: 3rem;
     margin-bottom: 2rem;
 }

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.ts

@@ -46,4 +46,8 @@ export class LifeDetailsComponent {
 
     this.hitDice = hitDiceData;
   }
+
+  test() {
+    console.log('TEST');
+  }
 }