package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/journal/journal-home/navigation-panel/navigation-panel.component.html

@@ -83,7 +83,7 @@
         {{ "navigation.places" | translate }}
       </div>
     </li>
-    <li>
+    <!-- <li>
       <div
         class="navigation-entry"
         [class]="active === 9 ? 'active' : ''"
@@ -113,7 +113,7 @@
       >
         {{ "navigation.rules" | translate }}
       </div>
-    </li>
+    </li> -->
   </ul>
 
   <div class="settings-container">

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

@@ -84,9 +84,18 @@
       }
 
       <div class="footer">
-        <ui-button [width]="'w22'" (click)="addItem('consumables')"
-          >{{ "buttons.addEntry" | translate }}
-        </ui-button>
+        @if (foodActive === 1) {
+          <ui-button [width]="'w12'" (click)="addItem('consumables')"
+            >{{ "buttons.addEntry" | translate }}
+          </ui-button>
+          <ui-button [width]="'w12'" (click)="consumeFood()"
+            >{{ "buttons.consume" | translate }}
+          </ui-button>
+        } @else {
+          <ui-button [width]="'w22'" (click)="addItem('consumables')"
+            >{{ "buttons.addEntry" | translate }}
+          </ui-button>
+        }
       </div>
     </div>
 

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

@@ -237,6 +237,7 @@
   button {
     padding: 1rem 0;
   }
+  justify-content: space-around;
 }
 
 // Drag and Drop

src/app/journal/journal-inventory/journal-inventory.component.ts

@@ -49,12 +49,6 @@ export class JournalInventoryComponent {
   private data = inject(DataService);
   private modal = inject(ModalService);
 
-  // constructor(
-  //   private detailsAccessor: DetailsService,
-  //   private dataAccessor: DataService,
-  //   private modalAccessor: ModalService,
-  // ) {}
-
   public ngOnInit(): void {
     this.weaponsAndArmor = this.data.weaponsAndArmor;
     this.consumables = this.data.consumables;
@@ -166,6 +160,21 @@ export class JournalInventoryComponent {
     }
   }
 
+  /**
+   * Consumes one unit of food from the inventory.
+   * It always uses the first entry in the list.
+   * If the food item is empty, it will be removed from the list.
+   */
+  public consumeFood(): void {
+    if (this.food.length > 0) {
+      this.food[0].quantity--;
+      if (this.food[0].quantity === 0) {
+        this.food.splice(0, 1);
+      }
+      this.updateFood();
+    }
+  }
+
   // Updates
 
   public updateDatabase(listname: string): void {

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

@@ -17,6 +17,7 @@ import { registerLocaleData } from '@angular/common';
 import { DataService } from 'src/services/data/data.service';
 import { TooltipService } from 'src/services/tooltip/tooltip.service';
 import { HighlightComponent } from 'src/app/shared-components/highlight/highlight.component';
+import { NotesService } from 'src/services/notes/notes.service';
 
 @Component({
   selector: 'app-journal-notes',
@@ -53,7 +54,7 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
 
   public tooltipText: string = '';
 
-  public npcDescriptions: any = {};
+  public descriptions: any = {};
 
   tooltipifiedEntry: JournalEntry = {
     title: 'Title',
@@ -61,9 +62,10 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
     created: new Date(),
   };
 
-  private _adapter: DateAdapter<any> = inject(DateAdapter);
   private dataService: DataService = inject(DataService);
   private tooltipService: TooltipService = inject(TooltipService);
+  private notesService: NotesService = inject(NotesService);
+  private _adapter: DateAdapter<any> = inject(DateAdapter);
   private renderer: Renderer2 = inject(Renderer2);
   private el: ElementRef = inject(ElementRef);
 
@@ -72,8 +74,13 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
     this._adapter.setLocale('de');
     this.entries = this.dataService.notesData;
 
-    // if the list is empty, set the currentIndex to -1 to hide the entry-container
-    if (this.entries.length === 0) {
+    if (this.notesService.isUnsaved) {
+      const { entry, index, isNewEntry } = this.notesService.getEntry();
+      this.currentEntry = entry;
+      this.currentIndex = index;
+      this.isNewEntry = isNewEntry;
+      this.isInEditMode = true;
+    } else if (this.entries.length === 0) {
       this.currentIndex = -1;
     } else {
       this.selectEntry(0);
@@ -89,7 +96,6 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
    * @param index The index of the selected entry.
    */
   public selectEntry(index: number): void {
-    // hier
     if (this.isInEditMode || index !== this.currentIndex) {
       this.currentIndex = index;
       this.currentEntry = this.getEntryAt(index);
@@ -138,6 +144,7 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
     this.entries[this.currentIndex] = this.currentEntry;
     this.tooltipify();
     this.uploadNotes();
+    this.notesService.markAsSaved();
   }
 
   /**
@@ -156,6 +163,7 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
     }
     this.isInEditMode = false;
     this.tooltipify();
+    this.notesService.markAsSaved();
   }
 
   /**
@@ -202,27 +210,32 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
       this.getEntryAt(this.currentIndex).content,
     );
 
+    console.log(result.content);
+
     this.tooltipifiedEntry.content = result.content;
-    this.npcDescriptions = result.npcDescriptions;
+    console.log(result.descriptions);
+
+    this.descriptions = result.descriptions;
+    console.log(result.identifiers);
+
     setTimeout(() => {
-      result.npcs.forEach((name: string) => {
+      result.identifiers.forEach((name: string) => {
         this.addHighlightsToText(name);
       });
     });
   }
 
   /**
-   * Adds a highlight component to the names that are mentioned in the current entry.
-   * Highlights and adds tooltips to the names that are mentioned in the current entry.
-   * @param name The name of the person which is currently highlighted.
+   * Adds a highlight component to the persons and locations that are mentioned in the current entry.
+   * @param identifier The name of the person or location which is currently highlighted.
    */
-  private addHighlightsToText(name: string) {
+  private addHighlightsToText(identifier: string) {
     // get all elements where a highlight component should be added to
-    const parent = this.el.nativeElement.querySelectorAll('.' + name);
+    const parent = this.el.nativeElement.querySelectorAll('.' + identifier);
     parent.forEach((element: any) => {
       const componentRef =
         this.creationAnchor.createComponent(HighlightComponent);
-      componentRef.instance.text = name;
+      componentRef.instance.text = identifier;
       componentRef.instance.tooltip = this.tooltip;
       this.renderer.appendChild(element, componentRef.location.nativeElement);
       // add a mouseover event listener to the highlight component, when it is hovered over, the tooltip-text is set
@@ -230,13 +243,22 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
         componentRef.location.nativeElement,
         'mouseover',
         () => {
-          this.tooltipText = this.npcDescriptions[name];
+          this.tooltipText = this.descriptions[identifier];
         },
       );
     });
   }
 
-  ngOnDestroy(): void {
-    this.editor.destroy();
+  /**
+   * Saves unsaved changes to restore them when visiting the page the next time.
+   */
+  ngOnDestroy() {
+    if (this.isInEditMode) {
+      this.notesService.setEntry(
+        this.currentEntry,
+        this.currentIndex,
+        this.isNewEntry,
+      );
+    }
   }
 }

src/app/journal/journal-stats/info-row/conditions/exhaustion-details/exhaustion-details.component.html

@@ -41,7 +41,7 @@
         <td>{{ "exhaustion.5" | translate }}</td>
       </tr>
       <tr [ngClass]="{ highlighted: exhaustion > 5 }">
-        <td>5</td>
+        <td>6</td>
         <td>{{ "exhaustion.6" | translate }}</td>
       </tr>
     </tbody>

src/app/journal/journal.module.ts

@@ -101,7 +101,6 @@ import { CustomSpellsModalComponent } from './journal-spellbook/custom-spells-mo
 import { DurationPipe } from '../../pipes/duration/duration.pipe';
 import { CombinedComponent } from './journal-character/combined/combined.component';
 import { DividerComponent } from '../shared-components/divider/divider.component';
-import { TooltipDirective } from 'src/directives/tooltip/tooltip.directive';
 
 @NgModule({
   declarations: [
@@ -207,7 +206,6 @@ import { TooltipDirective } from 'src/directives/tooltip/tooltip.directive';
     NgbCollapseModule,
     MatButtonToggleModule,
     MatIconModule,
-    TooltipDirective,
     NgbTooltipModule,
   ],
 })

src/app/journal/spell-modal/spell-modal.component.scss

@@ -65,8 +65,8 @@
   }
 
   input {
-    -moz-appearance: textfield;
-    appearance: textfield;
+    -webkit-appearance: none;
+    appearance: none;
   }
 }
 

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

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

src/assets/i18n/de.json

@@ -73,7 +73,8 @@
     "deleteSelected": "Ausgewählte löschen",
     "addToFavorites": "Zu Favoriten hinzufügen",
     "alradyInFavorites": "Bereits in Favoriten",
-    "finalDelete": "Endgültig löschen?"
+    "finalDelete": "Endgültig löschen?",
+    "consume": "Verbrauchen"
   },
   "time": {
     "none": "Keine Kosten",
@@ -875,6 +876,6 @@
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
     "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden",
-    "version": "0.13.2"
+    "version": "0.13.3"
   }
 }

src/assets/i18n/en.json

@@ -70,7 +70,8 @@
     "close": "Close",
     "discard": "Discard",
     "export": "Export",
-    "deleteSelected": "Delete Selected"
+    "deleteSelected": "Delete Selected",
+    "consume": "Consume"
   },
   "time": {
     "none": "No cost",
@@ -707,7 +708,7 @@
     "weight": "Weight",
     "value": "Value",
     "quantity": "Quanitty",
-    "ready": "Ready to eat",
+    "ready": "Ready",
     "total": "Total Weight",
     "description": "Description",
     "modal": {
@@ -870,7 +871,7 @@
     "hint": "The app is still in a development stage and errors may occur",
     "issues": "<p>Please note errors and comments on the <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git server in Issues</a>.<p>",
     "okay": "Understood",
-    "version": "0.13.2",
+    "version": "0.13.3",
     "test": "Test"
   }
 }

src/directives/tooltip/tooltip.directive.spec.ts

@@ -1,8 +0,0 @@
-import { TooltipDirective } from './tooltip.directive';
-
-describe('TooltipDirective', () => {
-  it('should create an instance', () => {
-    const directive = new TooltipDirective();
-    expect(directive).toBeTruthy();
-  });
-});

src/directives/tooltip/tooltip.directive.ts

@@ -1,35 +0,0 @@
-import {
-  Directive,
-  ViewContainerRef,
-  ComponentFactoryResolver,
-  Renderer2,
-  ElementRef,
-} from '@angular/core';
-// import { TooltipComponent } from 'src/app/shared-components/tooltip/tooltip/tooltip.component';
-
-@Directive({
-  selector: '[tooltip]',
-  standalone: true,
-})
-export class TooltipDirective {
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private componentFactoryResolver: ComponentFactoryResolver,
-    private renderer: Renderer2,
-    private el: ElementRef,
-  ) {
-    // this.showTooltip();
-  }
-
-  // showTooltip() {
-  //   const factory =
-  //     this.componentFactoryResolver.resolveComponentFactory(TooltipComponent);
-  //   const componentRef = this.viewContainerRef.createComponent(factory);
-  //   componentRef.instance.content = 'This is a tooltip';
-
-  //   this.renderer.appendChild(
-  //     this.el.nativeElement,
-  //     componentRef.location.nativeElement,
-  //   );
-  // }
-}

src/services/notes/notes.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NotesService } from './notes.service';
+
+describe('NotesService', () => {
+  let service: NotesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NotesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/notes/notes.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { JournalEntry } from 'src/interfaces/interfaces';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotesService {
+  public isUnsaved: boolean = false;
+
+  private isNewEntry: boolean = false;
+
+  private unsavedEntry: JournalEntry | null = null;
+
+  private unsavedIndex: number = -1;
+
+  /**
+   * Stores the unsaved entry and the index where it can be found.
+   * @param entry The entry that was edited but not yet saved.
+   * @param index The index of the entry in the entries list.
+   */
+  public setEntry(
+    entry: JournalEntry,
+    index: number,
+    isNewEntry: boolean,
+  ): void {
+    this.unsavedEntry = entry;
+    this.unsavedIndex = index;
+    this.isNewEntry = isNewEntry;
+    this.isUnsaved = true;
+  }
+
+  /**
+   * Returns the entry that was edited but not yet saved when leaving the notes view.
+   * @returns The unsaved entry and its index.
+   */
+  public getEntry(): { [key: string]: any } {
+    return {
+      entry: this.unsavedEntry,
+      index: this.unsavedIndex,
+      isNewEntry: this.isNewEntry,
+    };
+  }
+
+  /**
+   * Marks the entry as saved and resets the unsaved entry and index.
+   */
+  public markAsSaved(): void {
+    this.isUnsaved = false;
+    this.unsavedEntry = null;
+    this.isNewEntry = false;
+    this.unsavedIndex = -1;
+  }
+}

src/services/tooltip/tooltip.service.ts

@@ -9,9 +9,9 @@ export class TooltipService {
   private dataService: DataService = inject(DataService);
 
   public tooltipifyEntry(entry: string): any {
-    const content = this.replaceNpcs(entry);
-    const matches = entry.match(/(?<=@)\w+/g);
-    const uniqueMatches = [...new Set(matches)];
+    const content = this.replaceIdentifiers(entry);
+    const personMatches = entry.match(/(?<=@)\w+/g);
+    const uniquePersons = [...new Set(personMatches)];
     // get the descriptions from the data service
     const npcs = this.dataService.npcs;
     const npcArray = Object.keys(npcs)
@@ -19,27 +19,59 @@ export class TooltipService {
       .flat();
     let npcsDescription: any = {};
 
-    uniqueMatches.forEach((name) => {
+    uniquePersons.forEach((person) => {
       const npc = npcArray.find(
-        (npc: Npc) => npc.name === name || npc.identifier === name,
+        (npc: Npc) => npc.name === person || npc.identifier === person,
       );
       if (npc) {
         // Add it to the npcDescription object
-        npcsDescription[name] = npc.shortDescription;
+        npcsDescription[person] = npc.shortDescription;
       } else {
         // Add a placeholder to the npcDescription object
-        npcsDescription[name] = 'Keine Person mit diesem Name gefunden.';
+        npcsDescription[person] = 'Keine Person mit diesem Name gefunden.';
+      }
+    });
+
+    const locationsMatches = entry.match(/(?<=#)\w+/g);
+    const uniqueLocations = [...new Set(locationsMatches)];
+    // get the descriptions from the data service
+    const locationArray = this.dataService.places;
+    // const locationArray = Object.keys(locations)
+    //   .map((key) => locations[key])
+    //   .flat();
+    let locationsDescription: any = {};
+
+    uniqueLocations.forEach((location) => {
+      const loc = locationArray.find(
+        (loc) => loc.name === location || loc.identifier === location,
+      );
+      if (loc) {
+        // Add it to the npcDescription object
+        locationsDescription[location] = loc.shortDescription;
+      } else {
+        // Add a placeholder to the npcDescription object
+        locationsDescription[location] = 'Kein Ort mit diesem Name gefunden.';
       }
     });
 
     return {
       content: content,
-      npcs: uniqueMatches,
-      npcDescriptions: npcsDescription,
+      identifiers: [...uniquePersons, ...uniqueLocations],
+      descriptions: { ...npcsDescription, ...locationsDescription },
     };
   }
 
-  private replaceNpcs(content: string): string {
-    return content.replace(/@(\w+)/g, "<span class='$1'></span>");
+  private replaceIdentifiers(content: string): string {
+    content = content.replace(/@(\w+)/g, "<span class='$1'></span>");
+    content = content.replace(/#(\w+)/g, "<span class='$1'></span>");
+    return content;
   }
+
+  // private replaceNpcs(content: string): string {
+  //   return content.replace(/@(\w+)/g, "<span class='$1'></span>");
+  // }
+
+  // private replaceLocations(content: string): string {
+  //   return content.replace(/#(\w+)/g, "<span class='$1'></span>");
+  // }
 }

src/styles.scss

@@ -4,12 +4,15 @@
 // @import url("./button-styles.scss");
 // @import url("./colors.scss");
 
-@import "helpers";
-@import "button-styles";
-@import "colors";
 @import "responsive";
 @import "fonts";
-@import "info-row";
+
+@import "./styles/material";
+@import "./styles/helpers";
+@import "./styles/button-styles";
+@import "./styles/colors";
+@import "./styles/info-row";
+@import "./styles/tooltips";
 
 // #region new styles
 
@@ -285,36 +288,6 @@ 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;
-  }
-}
-
-.tooltip.show {
-  opacity: 1;
-}
-
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
   display: none;
@@ -329,79 +302,79 @@ body {
 
 // Overriding the default styles of angular material
 
-.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
-  .mdc-list-item__primary-text {
-  color: var(--primary) !important;
-}
-
-.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
-.mat-primary
-  .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
-  color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-notched-outline__trailing {
-  border-color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__leading,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__notch,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
-  .mdc-notched-outline__trailing {
-  border-color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled)
-  .mdc-text-field__input {
-  caret-color: var(--primary) !important;
-}
-
-.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
-  color: var(--primary) !important;
-}
-
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-floating-label,
-.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mdc-floating-label--float-above {
-  color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button
-  .mdc-radio
-  .mdc-radio__native-control:enabled:checked
-  + .mdc-radio__background
-  .mdc-radio__outer-circle {
-  border-color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button
-  .mdc-radio
-  .mdc-radio__native-control:enabled
-  + .mdc-radio__background
-  .mdc-radio__inner-circle {
-  border-color: var(--primary) !important;
-}
-
-.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
-  background-color: var(--primary) !important;
-}
-
-.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
-.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
-  background-color: var(--gold) !important;
-}
-
-.mdc-switch:enabled .mdc-switch__track::before {
-  background-color: var(--grey-light) !important;
-}
-.mdc-switch:enabled .mdc-switch__track::after {
-  background-color: var(--grey) !important;
-}
+// .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
+//   .mdc-list-item__primary-text {
+//   color: var(--primary) !important;
+// }
+
+// .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
+// .mat-primary
+//   .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+//   color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__leading,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__notch,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-notched-outline__trailing {
+//   border-color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__leading,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__notch,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+//   .mdc-notched-outline__trailing {
+//   border-color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled)
+//   .mdc-text-field__input {
+//   caret-color: var(--primary) !important;
+// }
+
+// .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+//   color: var(--primary) !important;
+// }
+
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-floating-label,
+// .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+//   .mdc-floating-label--float-above {
+//   color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button
+//   .mdc-radio
+//   .mdc-radio__native-control:enabled:checked
+//   + .mdc-radio__background
+//   .mdc-radio__outer-circle {
+//   border-color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button
+//   .mdc-radio
+//   .mdc-radio__native-control:enabled
+//   + .mdc-radio__background
+//   .mdc-radio__inner-circle {
+//   border-color: var(--primary) !important;
+// }
+
+// .mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
+//   background-color: var(--primary) !important;
+// }
+
+// .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+// .mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+//   background-color: var(--gold) !important;
+// }
+
+// .mdc-switch:enabled .mdc-switch__track::before {
+//   background-color: var(--grey-light) !important;
+// }
+// .mdc-switch:enabled .mdc-switch__track::after {
+//   background-color: var(--grey) !important;
+// }

src/styles/material.scss

@@ -0,0 +1,76 @@
+.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
+  .mdc-list-item__primary-text {
+  color: var(--primary) !important;
+}
+
+.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
+.mat-primary
+  .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+  color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--primary) !important;
+}
+
+.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+  color: var(--primary) !important;
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mdc-floating-label--float-above {
+  color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled:checked
+  + .mdc-radio__background
+  .mdc-radio__outer-circle {
+  border-color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button
+  .mdc-radio
+  .mdc-radio__native-control:enabled
+  + .mdc-radio__background
+  .mdc-radio__inner-circle {
+  border-color: var(--primary) !important;
+}
+
+.mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
+  background-color: var(--primary) !important;
+}
+
+.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+  background-color: var(--gold) !important;
+}
+
+.mdc-switch:enabled .mdc-switch__track::before {
+  background-color: var(--grey-light) !important;
+}
+.mdc-switch:enabled .mdc-switch__track::after {
+  background-color: var(--grey) !important;
+}

src/styles/tooltips.scss

@@ -0,0 +1,27 @@
+.tooltip-styles .tooltip-inner {
+  background-color: rgb(42, 42, 42);
+  border: var(--gold-dark-3);
+}
+.tooltip-styles.bs-tooltip-end .tooltip-arrow::before {
+  border-right-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-start .tooltip-arrow::before {
+  border-left-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-top .tooltip-arrow::before {
+  border-top-color: var(--gold-dark);
+}
+.tooltip-styles.bs-tooltip-bottom .tooltip-arrow::before {
+  border-bottom-color: var(--gold-dark);
+}
+
+.tooltip-content {
+  padding: 0.5rem;
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.tooltip.show {
+  opacity: 1;
+}