feat: integrate FontAwesome icons across various components

- Updated apartment-list component to use FontAwesome icons for better visual representation.
- Refactored brand-mark component to utilize FontAwesome for the brand icon.
- Enhanced dashboard-page with FontAwesome icons for improved navigation.
- Replaced SVG icons with FontAwesome in settings-page for consistency and better performance.
- Updated sign-in-page to use FontAwesome for the sign-in action icon.
- Refactored tenant-card to incorporate FontAwesome icons for attachments.
- Enhanced workspace-navigation with FontAwesome icons for all navigation items.
- Applied consistent styling for fa-icon elements across components.

frontend/src/app/components/settings-page/settings-page.css

@@ -61,10 +61,15 @@
   background: var(--surface-accent);
   color: var(--accent);
 }
-.settings-icon svg {
+.settings-icon fa-icon {
+  display: flex;
   width: 24px;
   height: 24px;
 }
+.settings-icon fa-icon svg {
+  width: 100%;
+  height: 100%;
+}
 .settings-copy h2 {
   margin-bottom: 5px;
 }

frontend/src/app/components/settings-page/settings-page.html

@@ -8,10 +8,7 @@
   </header>
   <article class="settings-card" aria-labelledby="appearance-heading">
     <div class="settings-copy">
-      <span class="settings-icon" aria-hidden="true"
-        ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-          <path d="M12 3a9 9 0 1 0 9 9c0-.5-.04-1-.12-1.47A7 7 0 0 1 12 3Z" /></svg
-      ></span>
+      <span class="settings-icon" aria-hidden="true"><fa-icon [icon]="faMoon" /></span>
       <div>
         <p class="eyebrow">Interface</p>
         <h2 id="appearance-heading">Apparence</h2>
@@ -47,11 +44,7 @@
     aria-labelledby="session-heading"
   >
     <div class="settings-copy">
-      <span class="settings-icon" aria-hidden="true"
-        ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-          <circle cx="12" cy="8" r="4" />
-          <path d="M4 21a8 8 0 0 1 16 0" /></svg
-      ></span>
+      <span class="settings-icon" aria-hidden="true"><fa-icon [icon]="faUser" /></span>
       <div>
         <p class="eyebrow">Compte</p>
         <h2 id="session-heading">Session</h2>

frontend/src/app/components/settings-page/settings-page.ts

@@ -1,4 +1,6 @@
 import { Component, inject } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faMoon, faUser } from '@fortawesome/free-solid-svg-icons';
 import { MatButtonModule } from '@angular/material/button';
 import { MatRadioModule } from '@angular/material/radio';
 import { SessionService } from '../../services/session.service';
@@ -6,13 +8,17 @@ import { ThemeService } from '../../services/theme.service';
 
 @Component({
   selector: 'app-settings-page',
-  imports: [MatButtonModule, MatRadioModule],
+  imports: [FontAwesomeModule, MatButtonModule, MatRadioModule],
   templateUrl: './settings-page.html',
   styleUrl: './settings-page.css',
 })
 export class SettingsPage {
+  readonly faMoon = faMoon;
+  readonly faUser = faUser;
   readonly session = inject(SessionService);
   readonly theme = inject(ThemeService);
 
-  logout(): void { window.location.href = '/logout'; }
+  logout(): void {
+    window.location.href = '/logout';
+  }
 }