added icon-button-component and used in in hit-dice component

src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.html

@@ -1,15 +1,9 @@
-<div style="display: flex; justify-content: space-between">
+<div class="heading-line">
   <h4>Trefferwürfel</h4>
-  <button class="edit-button" (click)="showEditButtons = !showEditButtons">
-    <img
-      [src]="
-        showEditButtons
-          ? 'assets/icons/UIIcons/cross.svg'
-          : 'assets/icons/UIIcons/edit.svg'
-      "
-      alt="edit"
-    />
-  </button>
+  <icon-button
+    [icon]="showEditButtons ? 'cross' : 'edit'"
+    (click)="showEditButtons = !showEditButtons"
+  ></icon-button>
 </div>
 <p>
   Trefferwürfel werden verwendet, um bei einer kurzen Rast Trefferpunkte
@@ -28,19 +22,17 @@
     />
     }
   </div>
+  @if(showEditButtons){
+  <div style="display: flex; flex-direction: column">
+    <icon-button
+      [icon]="'add'"
+      (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
+    ></icon-button>
+    <icon-button
+      [icon]="'remove'"
+      style="margin-top: 1rem"
+      (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
+    ></icon-button>
+  </div>
+  }
 </div>
-@if(showEditButtons){
-<button
-  class="add-button"
-  (click)="hitDice.diceNumber = hitDice.diceNumber + 1"
->
-  +
-</button>
-<button
-  class="remove-button"
-  [ngClass]="{ disabled: hitDice.diceNumber > 1 }"
-  (click)="hitDice.diceNumber = hitDice.diceNumber - 1"
->
-  -
-</button>
-}

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

@@ -1,60 +1,21 @@
+.heading-line {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+}
 .hit-dice-container {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    gap: 3rem;
 
     .input-container {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        width: 90%;
+        width: 20rem;
         row-gap: 0.5rem;
         input {
-            flex: 0 0 15%;
-            max-width: 15%;
+            flex: 0 0 4rem;
         }
     }
-
-    button {
-        align-self: flex-start;
-        width: 10%;
-    }
-}
-
-.edit-button {
-    display: inline-block;
-    margin-right: 0.5rem;
-    border: none;
-    background-color: transparent;
-    transition: all 0.25s ease;
-    border-radius: 10px;
-    &:hover {
-        background-color: rgba(211, 211, 211, 0.5);
-    }
-}
-
-.add-button {
-    background-color: var(--accept);
-    border: none;
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    height: 2rem;
-    width: 3rem;
-    font-size: 1.5rem;
-    &:hover {
-        background-color: var(--accept-hover);
-    }
-}
-
-.remove-button {
-    background-color: var(--delete);
-    border: none;
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    height: 2rem;
-    width: 3rem;
-    font-size: 1.5rem;
-    &:hover {
-        background-color: var(--delete-hover);
-    }
 }

src/app/shared-components/icon-button/icon-button.component.html

@@ -0,0 +1,3 @@
+<button>
+  <img [src]="'assets/icons/UIIcons/' + icon + '.svg'" [alt]="icon" />
+</button>

src/app/shared-components/icon-button/icon-button.component.scss

@@ -0,0 +1,9 @@
+button {
+    border: none;
+    background-color: transparent;
+    transition: all 0.25s ease;
+    border-radius: 10px;
+    &:hover {
+        background-color: rgba(211, 211, 211, 0.5);
+    }
+}

src/app/shared-components/icon-button/icon-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconButtonComponent } from './icon-button.component';
+
+describe('IconButtonComponent', () => {
+  let component: IconButtonComponent;
+  let fixture: ComponentFixture<IconButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [IconButtonComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(IconButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared-components/icon-button/icon-button.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'icon-button',
+  templateUrl: './icon-button.component.html',
+  styleUrl: './icon-button.component.scss',
+})
+export class IconButtonComponent {
+  @Input() icon!: string;
+}

src/app/shared-components/shared-components.module.ts

@@ -3,10 +3,21 @@ import { CommonModule } from '@angular/common';
 import { SwitchComponent } from './switch/switch.component';
 import { UiButtonComponent } from './ui-button/ui-button.component';
 import { FullSpellcardComponent } from './full-spellcard/full-spellcard.component';
+import { IconButtonComponent } from './icon-button/icon-button.component';
 
 @NgModule({
-  declarations: [SwitchComponent, UiButtonComponent, FullSpellcardComponent],
+  declarations: [
+    SwitchComponent,
+    UiButtonComponent,
+    FullSpellcardComponent,
+    IconButtonComponent,
+  ],
   imports: [CommonModule],
-  exports: [SwitchComponent, UiButtonComponent],
+  exports: [
+    SwitchComponent,
+    UiButtonComponent,
+    FullSpellcardComponent,
+    IconButtonComponent,
+  ],
 })
 export class SharedComponentsModule {}

src/assets/icons/UIIcons/remove.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-440v-80h560v80H200Z"/></svg>