styled the tooltips and added missing translations

src/app/journal/journal-notes/journal-notes.component.html

@@ -126,5 +126,7 @@
     {{ "notes.empty" | translate }}
   </div>
 }
-<ng-template #tooltip><div [innerHTML]="tooltipText"></div></ng-template>
+<ng-template #tooltip
+  ><div class="tooltip-content" [innerHTML]="tooltipText"></div
+></ng-template>
 <div #creationAnchor></div>

src/app/journal/journal-npcs/journal-npcs.component.html

@@ -17,7 +17,7 @@
               @if (currentNpc.name !== "") {
                 {{ currentNpc.name }}
               } @else {
-                {{ "notes.noName" | translate }}
+                {{ "npcs.noName" | translate }}
               }
             </div>
             <div class="unsaved">{{ "notes.unsaved" | translate }}</div>
@@ -121,10 +121,15 @@
     <div class="read-container">
       <div class="title-row">
         <div class="name-read">{{ currentNpc.name }}</div>
-        <icon-button
+        <!-- <icon-button
           [icon]="'flip'"
           (click)="showShortDescription = !showShortDescription"
-        ></icon-button>
+        ></icon-button> -->
+
+        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+          <mat-button-toggle value="bold">Kurz</mat-button-toggle>
+          <mat-button-toggle value="italic">Lang</mat-button-toggle>
+        </mat-button-toggle-group>
       </div>
       <divider [appearance]="'gold-2'" class="b-1 t-1"></divider>
       <div class="short-read">

src/app/shared-components/highlight/highlight.component.html

@@ -1 +1,6 @@
-<span [ngbTooltip]="tooltip!">{{ text }}</span>
+<span
+  [ngbTooltip]="tooltip!"
+  tooltipClass="my-custom-class"
+  [closeDelay]="500000"
+  >{{ text }}</span
+>

src/assets/i18n/de.json

@@ -822,11 +822,11 @@
   },
   "notes": {
     "title": "Titel",
+    "noTitle": "Noch kein Titel",
     "placeholder": "Hier die Notizen einfügen",
     "save": "Speichern",
     "discard": "Verwerfen",
     "sessions": "Sessions",
-    "noName": "Noch kein Name",
     "unsaved": "Nicht gespeichert",
     "empty": "Noch kein Eintrag vorhanden"
   },
@@ -839,6 +839,7 @@
     "shortPlaceholder": "Kurze Beschreibung",
     "longPlaceholder": "Ausführliche Beschreibung",
     "namePlaceholder": "Name",
+    "noName": "Noch kein Name",
     "short": "Kurzbeschreibung",
     "long": "Ausführliche Beschreibung",
     "empty": "Noch keine Personen hinzugefügt",

src/assets/i18n/en.json

@@ -817,11 +817,11 @@
   },
   "notes": {
     "title": "Title",
+    "noTitle": "No title yet",
     "placeholder": "Add notes here",
     "save": "Save",
     "discard": "Discard",
     "sessions": "Sessions",
-    "noName": "No Name yet",
     "unsaved": "Not saved",
     "empty": "No entries added yet"
   },
@@ -834,6 +834,7 @@
     "shortPlaceholder": "Short description",
     "longPlaceholder": "Detailed description",
     "namePlaceholder": "Name",
+    "noName": "No Name yet",
     "short": "Short Description",
     "long": "Detailed Description",
     "empty": "No persons added yet",

src/styles.scss

@@ -285,6 +285,32 @@ input[type="checkbox"]:checked::after {
   border: var(--gold-1) !important;
 }
 
+// Tooltip
+
+.my-custom-class .tooltip-inner {
+  background-color: rgb(42, 42, 42);
+  border: var(--gold-dark-3);
+}
+.my-custom-class.bs-tooltip-end .tooltip-arrow::before {
+  border-right-color: var(--gold-dark);
+}
+.my-custom-class.bs-tooltip-start .tooltip-arrow::before {
+  border-left-color: var(--gold-dark);
+}
+.my-custom-class.bs-tooltip-top .tooltip-arrow::before {
+  border-top-color: var(--gold-dark);
+}
+.my-custom-class.bs-tooltip-bottom .tooltip-arrow::before {
+  border-bottom-color: var(--gold-dark);
+}
+
+.tooltip-content {
+  padding: 0.5rem;
+  p {
+    margin-bottom: 0;
+  }
+}
+
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
   display: none;