Merge branch 'main' into task/enable-dark-mode-of-bootstrap

CHANGELOG.md

@@ -10,8 +10,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the colors of the muted texts and borders by enabling the dark mode of `bootstrap`
+- Reduced the size of the global stylesheet by removing the unused utilities of `bootstrap`
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
+### Fixed
+
+- Fixed the missing padding of the base currency and performance calculation labels in the user account settings
+
 ## 3.86.0 - 2026-10-13
 
 ### Added

apps/client/src/app/app.component.html

@@ -10,7 +10,7 @@
                 (click)="onCreateAccount()"
               >
                 <span i18n>You are using the Live Demo.</span>
-                <span class="a ml-2 p-1" i18n>Create Account</span>
+                <span class="a ms-2 p-1" i18n>Create Account</span>
               </div>
             </a>
           }

apps/client/src/app/components/access-table/access-table.component.html

@@ -46,9 +46,9 @@
     </ng-container>
 
     <ng-container matColumnDef="actions" stickyEnd>
-      <th *matHeaderCellDef class="px-1 text-right" mat-header-cell></th>
+      <th *matHeaderCellDef class="px-1 text-end" mat-header-cell></th>
 
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <button
           class="mx-1 no-min-width px-2"
           mat-button
@@ -70,7 +70,7 @@
               [routerLink]="accessDialogRouterLinks().get(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -78,7 +78,7 @@
           @if (element.type === 'PUBLIC') {
             <button mat-menu-item (click)="onCopyUrlToClipboard(element.id)">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="copy-outline" />
+                <ion-icon class="me-2" name="copy-outline" />
                 <span i18n>Copy link to clipboard</span>
               </span>
             </button>
@@ -93,10 +93,10 @@
           <button mat-menu-item (click)="onDeleteAccess(element.id)">
             <span class="align-items-center d-flex">
               @if (isReceivedAccess()) {
-                <ion-icon class="mr-2" name="trash-outline" />
+                <ion-icon class="me-2" name="trash-outline" />
                 <span i18n>Delete</span>
               } @else {
-                <ion-icon class="mr-2" name="remove-circle-outline" />
+                <ion-icon class="me-2" name="remove-circle-outline" />
                 <span i18n>Revoke</span>
               }
             </span>

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -41,7 +41,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="row w-100">
@@ -132,7 +132,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="albums-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Holdings</div>
+          <div class="d-none d-sm-block ms-2" i18n>Holdings</div>
         </ng-template>
         <gf-holdings-table
           [hasPermissionToOpenDetails]="false"
@@ -143,7 +143,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
+          <div class="d-none d-sm-block ms-2" i18n>Activities</div>
         </ng-template>
         <gf-activities-table
           [baseCurrency]="user?.settings?.baseCurrency"
@@ -175,7 +175,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="cash-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Cash Balances</div>
+          <div class="d-none d-sm-block ms-2" i18n>Cash Balances</div>
         </ng-template>
         <gf-account-balances
           [accountBalances]="accountBalances"

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -33,7 +33,7 @@
           >
             <ng-container i18n>Job ID</ng-container>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             {{ element.id }}
           </td>
         </ng-container>
@@ -113,13 +113,13 @@
         <ng-container matColumnDef="attempts">
           <th
             *matHeaderCellDef
-            class="px-1 py-2 text-right"
+            class="px-1 py-2 text-end"
             mat-header-cell
             mat-sort-header="attemptsMade"
           >
             <ng-container i18n>Attempts</ng-container>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             {{ element.attemptsMade }}
           </td>
         </ng-container>
@@ -179,7 +179,7 @@
         </ng-container>
 
         <ng-container matColumnDef="actions" stickyEnd>
-          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+          <th *matHeaderCellDef class="px-1 py-2 text-end" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
@@ -194,7 +194,7 @@
               </button>
             </mat-menu>
           </th>
-          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+          <td *matCellDef="let element" class="px-1 py-2 text-end" mat-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -192,7 +192,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
               <ng-container i18n>Activities Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.activitiesCount }}
             </td>
           </ng-container>
@@ -201,7 +201,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Historical Data</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.marketDataItemCount }}
             </td>
           </ng-container>
@@ -210,7 +210,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Sectors Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.sectorsCount }}
             </td>
           </ng-container>
@@ -219,7 +219,7 @@
             <th *matHeaderCellDef class="px-1" mat-header-cell>
               <ng-container i18n>Countries Count</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               {{ element.countriesCount }}
             </td>
           </ng-container>
@@ -243,7 +243,7 @@
           </ng-container>
 
           <ng-container matColumnDef="actions" stickyEnd>
-            <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+            <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
@@ -291,7 +291,7 @@
                 </button>
               </mat-menu>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               <button
                 class="mx-1 no-min-width px-2"
                 mat-button
@@ -311,7 +311,7 @@
                   "
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="create-outline" />
+                    <ion-icon class="me-2" name="create-outline" />
                     <span><ng-container i18n>Edit</ng-container>...</span>
                   </span>
                 </a>
@@ -334,7 +334,7 @@
                   "
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="trash-outline" />
+                    <ion-icon class="me-2" name="trash-outline" />
                     <span i18n>Delete</span>
                   </span>
                 </button>

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -4,7 +4,7 @@
       assetProfile?.name ?? data.symbol
     }}</span>
     <button
-      class="ml-1 no-min-width px-2"
+      class="ms-1 no-min-width px-2"
       mat-button
       type="button"
       [matMenuTriggerFor]="assetProfileActionsMenu"
@@ -112,7 +112,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container px-0 py-3">
           <div class="row w-100">
@@ -138,7 +138,7 @@
                     />
                   </mat-form-field>
                   <button
-                    class="ml-2 no-min-width px-2"
+                    class="ms-2 no-min-width px-2"
                     color="primary"
                     mat-flat-button
                     type="submit"
@@ -155,7 +155,7 @@
                     <ng-container i18n>Apply</ng-container>
                   </button>
                   <button
-                    class="ml-2 no-min-width px-2"
+                    class="ms-2 no-min-width px-2"
                     mat-button
                     type="button"
                     (click)="onCancelEditAssetProfileIdentifierMode()"
@@ -493,10 +493,10 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="server-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Historical Market Data</div>
+          <div class="d-none d-sm-block ms-2" i18n>Historical Market Data</div>
         </ng-template>
         <div class="container mt-3 p-0">
-          <div class="no-gutters row w-100">
+          <div class="g-0 row w-100">
             <div class="col-12">
               <gf-historical-market-data-editor
                 [currency]="assetProfile?.currency"
@@ -516,20 +516,17 @@
         <mat-tab>
           <ng-template mat-tab-label>
             <ion-icon name="git-compare-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Splits</div>
+            <div class="d-none d-sm-block ms-2" i18n>Splits</div>
           </ng-template>
           <div class="container mt-3 p-0">
-            <div class="no-gutters row w-100">
+            <div class="g-0 row w-100">
               <div class="col-12">
                 @if (splits.length > 0) {
                   <table class="gf-table mb-3 w-100">
                     <thead>
                       <tr class="mat-mdc-header-row">
                         <th class="mat-mdc-header-cell px-1 py-2" i18n>Date</th>
-                        <th
-                          class="mat-mdc-header-cell px-1 py-2 text-right"
-                          i18n
-                        >
+                        <th class="mat-mdc-header-cell px-1 py-2 text-end" i18n>
                           Split Ratio
                         </th>
                         <th class="mat-mdc-header-cell px-1 py-2"></th>
@@ -541,10 +538,10 @@
                           <td class="mat-mdc-cell px-1 py-2">
                             {{ split.date | date: defaultDateFormat }}
                           </td>
-                          <td class="mat-mdc-cell px-1 py-2 text-right">
+                          <td class="mat-mdc-cell px-1 py-2 text-end">
                             {{ split.numerator }}:{{ split.denominator }}
                           </td>
-                          <td class="mat-mdc-cell px-1 py-2 text-right">
+                          <td class="mat-mdc-cell px-1 py-2 text-end">
                             <button
                               mat-icon-button
                               type="button"
@@ -571,7 +568,7 @@
                       [matDatepicker]="dateOfSplit"
                     />
                     <mat-datepicker-toggle
-                      class="mr-2"
+                      class="me-2"
                       matSuffix
                       [for]="dateOfSplit"
                     >
@@ -610,7 +607,7 @@
                       />
                     </mat-form-field>
                   </div>
-                  <div class="text-right">
+                  <div class="text-end">
                     <button
                       color="primary"
                       mat-flat-button
@@ -632,7 +629,7 @@
         <mat-tab>
           <ng-template mat-tab-label>
             <ion-icon name="code-slash-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Scraper Configuration</div>
+            <div class="d-none d-sm-block ms-2" i18n>Scraper Configuration</div>
           </ng-template>
           <div class="container mt-3 p-0">
             <div [formGroup]="assetProfileForm">
@@ -715,7 +712,7 @@
                     <input formControlName="url" matInput type="text" />
                   </mat-form-field>
                 </div>
-                <div class="my-3 text-right">
+                <div class="my-3 text-end">
                   <button
                     color="accent"
                     mat-flat-button

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html

@@ -14,9 +14,9 @@
       >
         <mat-radio-button name="auto" value="auto" />
         <label class="m-0" for="auto" i18n>Search</label>
-        <mat-radio-button class="ml-3" name="manual" value="manual" />
+        <mat-radio-button class="ms-3" name="manual" value="manual" />
         <label class="m-0" for="manual" i18n>Add Manually</label>
-        <mat-radio-button class="ml-3" name="currency" value="currency" />
+        <mat-radio-button class="ms-3" name="currency" value="currency" />
         <label class="m-0" for="currency" i18n>Add Currency</label>
       </mat-radio-group>
     </div>

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -112,7 +112,7 @@
                     mat-flat-button
                     (click)="onSetSystemMessage()"
                   >
-                    <ion-icon class="mr-1" name="information-circle-outline" />
+                    <ion-icon class="me-1" name="information-circle-outline" />
                     <span i18n>Set Message</span>
                   </button>
                 }
@@ -130,12 +130,12 @@
                     mat-flat-button
                     (click)="onSyncDemoUserAccount()"
                   >
-                    <ion-icon class="mr-1" name="sync-outline" />
+                    <ion-icon class="me-1" name="sync-outline" />
                     <span i18n>Sync Demo User Account</span>
                   </button>
                 }
                 <button color="warn" mat-flat-button (click)="onFlushCache()">
-                  <ion-icon class="mr-1" name="close-circle-outline" />
+                  <ion-icon class="me-1" name="close-circle-outline" />
                   <span i18n>Flush Cache</span>
                 </button>
               </div>
@@ -166,7 +166,7 @@
                   </th>
                   <td *matCellDef="let element" class="px-1" mat-cell>
                     <gf-value
-                      class="text-monospace"
+                      class="font-monospace"
                       [enableCopyToClipboardButton]="true"
                       [value]="element.code"
                     />
@@ -174,14 +174,10 @@
                 </ng-container>
 
                 <ng-container matColumnDef="duration">
-                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                  <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
                     <ng-container i18n>Duration</ng-container>
                   </th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     {{ formatStringValue(element.duration) }}
                   </td>
                 </ng-container>
@@ -206,14 +202,10 @@
                 <ng-container matColumnDef="actions" stickyEnd>
                   <th
                     *matHeaderCellDef
-                    class="px-1 text-right"
+                    class="px-1 text-end"
                     mat-header-cell
                   ></th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     <button
                       class="mx-1 no-min-width px-2"
                       mat-button
@@ -232,7 +224,7 @@
                         (click)="onDeleteCoupon(element.code)"
                       >
                         <span class="align-items-center d-flex">
-                          <ion-icon class="mr-2" name="trash-outline" />
+                          <ion-icon class="me-2" name="trash-outline" />
                           <span i18n>Delete</span>
                         </span>
                       </button>
@@ -264,7 +256,7 @@
           </mat-card-content>
           <mat-card-actions align="end">
             <form #couponForm="ngForm" class="align-items-stretch d-flex">
-              <mat-form-field appearance="outline" class="mr-1 without-hint">
+              <mat-form-field appearance="outline" class="me-1 without-hint">
                 <mat-select
                   name="duration"
                   [value]="couponDuration"

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -56,7 +56,7 @@
       >
         <ng-container i18n>Accounts</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -79,7 +79,7 @@
         <mat-menu #platformMenu="matMenu" xPosition="before">
           <button mat-menu-item (click)="onUpdatePlatform(element)">
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
+              <ion-icon class="me-2" name="create-outline" />
               <span><ng-container i18n>Edit</ng-container>...</span>
             </span>
           </button>
@@ -90,7 +90,7 @@
             (click)="onDeletePlatform(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -74,12 +74,12 @@
                 >
                   Ghostfolio Premium
                   <gf-premium-indicator
-                    class="d-inline-block ml-1"
+                    class="d-inline-block ms-1"
                     [enableLink]="false"
                   />
                   @if (isGhostfolioApiKeyValid === false) {
                     <span
-                      class="badge badge-pill badge-secondary ml-2 text-uppercase"
+                      class="badge bg-secondary ms-2 px-2 rounded-pill text-uppercase"
                       i18n
                       >popular</span
                     >
@@ -130,7 +130,7 @@
             >
               <ng-container i18n>Asset Profiles</ng-container>
             </th>
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               <gf-value
                 class="d-inline-block justify-content-end"
                 [locale]="user?.settings?.locale"
@@ -175,7 +175,7 @@
           <ng-container matColumnDef="actions">
             <th *matHeaderCellDef class="px-1" mat-header-cell></th>
 
-            <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            <td *matCellDef="let element" class="px-1 text-end" mat-cell>
               @if (isGhostfolioDataProvider(element)) {
                 @if (hasGhostfolioApiKey) {
                   <button
@@ -193,7 +193,7 @@
                   >
                     <button mat-menu-item (click)="onRemoveGhostfolioApiKey()">
                       <span class="align-items-center d-flex">
-                        <ion-icon class="mr-2" name="trash-outline" />
+                        <ion-icon class="me-2" name="trash-outline" />
                         <span i18n>Remove API key</span>
                       </span>
                     </button>

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -37,7 +37,7 @@
         <ng-container i18n>User</ng-container>
       </th>
       <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
-        <span class="text-monospace">{{ element.userId }}</span>
+        <span class="font-monospace">{{ element.userId }}</span>
       </td>
     </ng-container>
 
@@ -50,7 +50,7 @@
       >
         <ng-container i18n>Accounts</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -68,7 +68,7 @@
       >
         <ng-container i18n>Activities</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -86,7 +86,7 @@
       >
         <ng-container i18n>Total</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [locale]="locale()"
@@ -113,7 +113,7 @@
             (click)="onUpdateTag(element)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="create-outline" />
+              <ion-icon class="me-2" name="create-outline" />
               <span><ng-container i18n>Edit</ng-container>...</span>
             </span>
           </button>
@@ -128,7 +128,7 @@
             (click)="onDeleteTag(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

apps/client/src/app/components/admin-users/admin-users.html

@@ -18,18 +18,18 @@
             >
               <div class="align-items-center d-flex text-nowrap">
                 <span
-                  class="d-none d-sm-inline-block text-monospace"
+                  class="d-none d-sm-inline-block font-monospace"
                   [class.text-line-through]="element.role === 'INACTIVE'"
                   >{{ element.id }}</span
                 >
                 <span
-                  class="d-inline-block d-sm-none text-monospace"
+                  class="d-inline-block d-sm-none font-monospace"
                   [class.text-line-through]="element.role === 'INACTIVE'"
                   >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
                 @if (element.subscription?.expiresAt) {
                   <gf-premium-indicator
-                    class="ml-1"
+                    class="ms-1"
                     i18n-title
                     title="Expires {{
                       formatRelativeTime({
@@ -94,14 +94,14 @@
           <ng-container matColumnDef="accounts">
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             >
               <ng-container i18n>Accounts</ng-container>
             </th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <gf-value
@@ -115,14 +115,14 @@
           <ng-container matColumnDef="activities">
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             >
               <ng-container i18n>Activities</ng-container>
             </th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <gf-value
@@ -137,14 +137,14 @@
             <ng-container matColumnDef="engagementPerDay">
               <th
                 *matHeaderCellDef
-                class="mat-mdc-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-end"
                 mat-header-cell
               >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <td
                 *matCellDef="let element"
-                class="mat-mdc-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-end"
                 mat-cell
               >
                 <gf-value
@@ -158,14 +158,14 @@
             <ng-container matColumnDef="dailyApiRequests">
               <th
                 *matHeaderCellDef
-                class="mat-mdc-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-end"
                 mat-header-cell
               >
                 <ng-container i18n>API Requests Today</ng-container>
               </th>
               <td
                 *matCellDef="let element"
-                class="mat-mdc-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-end"
                 mat-cell
               >
                 <gf-value
@@ -195,12 +195,12 @@
                 <div class="align-items-center d-flex">
                   @if (element.lastRequestClient) {
                     <ion-icon
-                      class="mr-1"
+                      class="me-1"
                       [name]="requestClientIcons[element.lastRequestClient]"
                       [title]="translate(element.lastRequestClient)"
                     />
                   } @else {
-                    <ion-icon class="hidden mr-1" />
+                    <ion-icon class="hidden me-1" />
                   }
                   {{
                     formatRelativeTime({
@@ -216,12 +216,12 @@
           <ng-container matColumnDef="actions" stickyEnd>
             <th
               *matHeaderCellDef
-              class="mat-mdc-header-cell px-1 py-2 text-right"
+              class="mat-mdc-header-cell px-1 py-2 text-end"
               mat-header-cell
             ></th>
             <td
               *matCellDef="let element"
-              class="mat-mdc-cell px-1 py-2 text-right"
+              class="mat-mdc-cell px-1 py-2 text-end"
               mat-cell
             >
               <button
@@ -238,7 +238,7 @@
                   [routerLink]="routerLinkAdminControlUsers.concat(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="person-outline" />
+                    <ion-icon class="me-2" name="person-outline" />
                     <span
                       ><ng-container i18n>View Details</ng-container>...</span
                     >
@@ -247,7 +247,7 @@
                 @if (hasPermissionToImpersonateAllUsers) {
                   <button mat-menu-item (click)="onImpersonateUser(element.id)">
                     <span class="align-items-center d-flex">
-                      <ion-icon class="mr-2" name="contract-outline" />
+                      <ion-icon class="me-2" name="contract-outline" />
                       <span i18n>Impersonate User</span>
                     </span>
                   </button>
@@ -257,7 +257,7 @@
                   (click)="onGenerateAccessToken(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="key-outline" />
+                    <ion-icon class="me-2" name="key-outline" />
                     <span i18n>Generate Security Token</span>
                   </span>
                 </button>
@@ -273,7 +273,7 @@
                   (click)="onDeleteUser(element.id)"
                 >
                   <span class="align-items-center d-flex">
-                    <ion-icon class="mr-2" name="trash-outline" />
+                    <ion-icon class="me-2" name="trash-outline" />
                     <span i18n>Delete</span>
                   </span>
                 </button>

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html

@@ -5,7 +5,7 @@
     >
       <span i18n>Performance</span>
       @if (user()?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </div>
   </div>
@@ -31,7 +31,7 @@
         @if (hasPermissionToAccessAdminControl) {
           <mat-option [routerLink]="routerLinkAdminControlMarketData">
             <div class="align-items-center d-flex">
-              <ion-icon class="mr-2 text-muted" name="arrow-forward-outline" />
+              <ion-icon class="me-2 text-muted" name="arrow-forward-outline" />
               <span i18n>Manage Benchmarks</span>
             </div>
           </mat-option>

apps/client/src/app/components/footer/footer.component.html

@@ -70,7 +70,7 @@
               href="https://status.ghostfol.io"
               target="_blank"
               title="Ghostfolio Status"
-              >Status<ion-icon class="ml-1" name="open-outline"
+              >Status<ion-icon class="ms-1" name="open-outline"
             /></a>
           </li>
         }
@@ -85,7 +85,7 @@
             href="https://github.com/ghostfolio/ghostfolio"
             target="_blank"
             title="Find Ghostfolio on GitHub"
-            >GitHub<ion-icon class="ml-1" name="open-outline"
+            >GitHub<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -94,7 +94,7 @@
             href="https://linkedin.com/company/ghostfolio"
             target="_blank"
             title="Follow Ghostfolio on LinkedIn"
-            >LinkedIn<ion-icon class="ml-1" name="open-outline"
+            >LinkedIn<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -103,7 +103,7 @@
             href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
             target="_blank"
             title="Join the Ghostfolio Slack community"
-            >Slack<ion-icon class="ml-1" name="open-outline"
+            >Slack<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>
@@ -112,7 +112,7 @@
             href="https://x.com/ghostfolio_"
             target="_blank"
             title="Follow Ghostfolio on X (formerly Twitter)"
-            >X (formerly Twitter)<ion-icon class="ml-1" name="open-outline"
+            >X (formerly Twitter)<ion-icon class="ms-1" name="open-outline"
           /></a>
         </li>
         <li>&nbsp;</li>
@@ -192,6 +192,6 @@
 </div>
 <div class="container d-none d-md-block mt-5">
   <div class="d-flex justify-content-center">
-    <div class="font-weight-bold line-height-1 logotype">Ghostfolio</div>
+    <div class="fw-bold line-height-1 logotype">Ghostfolio</div>
   </div>
 </div>

apps/client/src/app/components/header/header.component.html

@@ -19,7 +19,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold':
+            'fw-bold':
               currentRoute() === internalRoutes.home.path ||
               currentRoute() === internalRoutes.zen.path,
             'text-decoration-underline':
@@ -36,8 +36,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold':
-              currentRoute() === internalRoutes.portfolio.path,
+            'fw-bold': currentRoute() === internalRoutes.portfolio.path,
             'text-decoration-underline':
               currentRoute() === internalRoutes.portfolio.path
           }"
@@ -51,7 +50,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === internalRoutes.accounts.path,
+            'fw-bold': currentRoute() === internalRoutes.accounts.path,
             'text-decoration-underline':
               currentRoute() === internalRoutes.accounts.path
           }"
@@ -66,8 +65,7 @@
             i18n
             mat-button
             [class]="{
-              'font-weight-bold':
-                currentRoute() === internalRoutes.adminControl.path,
+              'fw-bold': currentRoute() === internalRoutes.adminControl.path,
               'text-decoration-underline':
                 currentRoute() === internalRoutes.adminControl.path
             }"
@@ -82,7 +80,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeResources,
+            'fw-bold': currentRoute() === routeResources,
             'text-decoration-underline': currentRoute() === routeResources
           }"
           [routerLink]="routerLinkResources"
@@ -97,7 +95,7 @@
             class="d-none d-sm-block rounded"
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routePricing,
+              'fw-bold': currentRoute() === routePricing,
               'text-decoration-underline': currentRoute() === routePricing
             }"
             [routerLink]="routerLinkPricing"
@@ -105,7 +103,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge badge-warning ml-1">%</span>
+                <span class="badge bg-warning ms-1 text-dark">%</span>
               }
             </span>
           </a>
@@ -117,7 +115,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeAbout,
+            'fw-bold': currentRoute() === routeAbout,
             'text-decoration-underline': currentRoute() === routeAbout
           }"
           [routerLink]="routerLinkAbout"
@@ -198,7 +196,7 @@
                   }
                 </span>
                 <gf-premium-indicator
-                  class="d-inline-block ml-1"
+                  class="d-inline-block ms-1"
                   [enableLink]="false" /></span
             ></a>
             <hr class="m-0" />
@@ -207,7 +205,7 @@
             <button mat-menu-item (click)="impersonateAccount(null)">
               <span class="align-items-center d-flex">
                 <ion-icon
-                  class="mr-2"
+                  class="me-2"
                   [name]="
                     hasImpersonationId
                       ? 'radio-button-off-outline'
@@ -221,7 +219,7 @@
               <button mat-menu-item (click)="impersonateAccount(accessItem.id)">
                 <span class="align-items-center d-flex">
                   <ion-icon
-                    class="mr-2"
+                    class="me-2"
                     name="square-outline"
                     [name]="
                       accessItem.id === impersonationId
@@ -243,7 +241,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
+            [class.fw-bold]="
               currentRoute() === internalRoutes.home.path ||
               currentRoute() === internalRoutes.zen.path
             "
@@ -254,9 +252,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.portfolio.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.portfolio.path"
             [routerLink]="routerLinkPortfolio"
             >Portfolio</a
           >
@@ -264,18 +260,14 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.accounts.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.accounts.path"
             [routerLink]="routerLinkAccounts"
             >Accounts</a
           >
           <a
             i18n
             mat-menu-item
-            [class.font-weight-bold]="
-              currentRoute() === internalRoutes.account.path
-            "
+            [class.fw-bold]="currentRoute() === internalRoutes.account.path"
             [routerLink]="routerLinkAccount"
             >My Ghostfolio</a
           >
@@ -284,7 +276,7 @@
               class="d-flex d-sm-none"
               i18n
               mat-menu-item
-              [class.font-weight-bold]="
+              [class.fw-bold]="
                 currentRoute() === internalRoutes.adminControl.path
               "
               [routerLink]="routerLinkAdminControl"
@@ -296,7 +288,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="currentRoute() === routeResources"
+            [class.fw-bold]="currentRoute() === routeResources"
             [routerLink]="routerLinkResources"
             >Resources</a
           >
@@ -307,13 +299,13 @@
             <a
               class="d-flex d-sm-none"
               mat-menu-item
-              [class.font-weight-bold]="currentRoute() === routePricing"
+              [class.fw-bold]="currentRoute() === routePricing"
               [routerLink]="routerLinkPricing"
             >
               <span class="align-items-center d-flex">
                 <span i18n>Pricing</span>
                 @if (currentRoute() !== routePricing && hasPromotion()) {
-                  <span class="badge badge-warning ml-1">%</span>
+                  <span class="badge bg-warning ms-1 text-dark">%</span>
                 }
               </span>
             </a>
@@ -322,7 +314,7 @@
             class="d-flex d-sm-none"
             i18n
             mat-menu-item
-            [class.font-weight-bold]="currentRoute() === routeAbout"
+            [class.fw-bold]="currentRoute() === routeAbout"
             [routerLink]="routerLinkAbout"
             >About Ghostfolio</a
           >
@@ -354,7 +346,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeFeatures,
+            'fw-bold': currentRoute() === routeFeatures,
             'text-decoration-underline': currentRoute() === routeFeatures
           }"
           [routerLink]="routerLinkFeatures"
@@ -367,7 +359,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeAbout,
+            'fw-bold': currentRoute() === routeAbout,
             'text-decoration-underline': currentRoute() === routeAbout
           }"
           [routerLink]="routerLinkAbout"
@@ -380,7 +372,7 @@
             class="d-sm-block rounded"
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routePricing,
+              'fw-bold': currentRoute() === routePricing,
               'text-decoration-underline': currentRoute() === routePricing
             }"
             [routerLink]="routerLinkPricing"
@@ -388,7 +380,7 @@
             <span class="align-items-center d-flex">
               <span i18n>Pricing</span>
               @if (currentRoute() !== routePricing && hasPromotion()) {
-                <span class="badge badge-warning ml-1">%</span>
+                <span class="badge bg-warning ms-1 text-dark">%</span>
               }
             </span>
           </a>
@@ -401,7 +393,7 @@
             i18n
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routeMarkets,
+              'fw-bold': currentRoute() === routeMarkets,
               'text-decoration-underline': currentRoute() === routeMarkets
             }"
             [routerLink]="routerLinkMarkets"
@@ -427,7 +419,7 @@
         </button>
       </li>
       @if (currentRoute() !== 'register' && hasPermissionToCreateUser) {
-        <li class="list-inline-item ml-1">
+        <li class="list-inline-item ms-1">
           <a
             class="d-none d-sm-block px-3 rounded"
             color="primary"

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -46,7 +46,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="reader-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Overview</div>
+          <div class="d-none d-sm-block ms-2" i18n>Overview</div>
         </ng-template>
         <div class="container mt-3 p-0">
           <div class="row w-100">
@@ -371,7 +371,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="swap-vertical-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
+          <div class="d-none d-sm-block ms-2" i18n>Activities</div>
         </ng-template>
         <gf-activities-table
           [baseCurrency]="data.baseCurrency"
@@ -405,7 +405,7 @@
       <mat-tab>
         <ng-template mat-tab-label>
           <ion-icon name="wallet-outline" />
-          <div class="d-none d-sm-block ml-2" i18n>Accounts</div>
+          <div class="d-none d-sm-block ms-2" i18n>Accounts</div>
         </ng-template>
         <gf-accounts-table
           [accounts]="accounts"
@@ -425,9 +425,9 @@
         <mat-tab [disabled]="!hasPermissionToReadMarketDataOfOwnAssetProfile">
           <ng-template mat-tab-label>
             <ion-icon name="server-outline" />
-            <div class="d-none d-sm-block ml-2" i18n>Market Data</div>
+            <div class="d-none d-sm-block ms-2" i18n>Market Data</div>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" [enableLink]="false" />
+              <gf-premium-indicator class="ms-1" [enableLink]="false" />
             }
           </ng-template>
           <gf-historical-market-data-editor
@@ -459,7 +459,7 @@
                 mat-stroked-button
                 (click)="onCloseHolding()"
               >
-                <ion-icon class="mr-1" name="arrow-down-circle-outline" /><span
+                <ion-icon class="me-1" name="arrow-down-circle-outline" /><span
                   i18n
                   >Close Holding</span
                 >
@@ -473,7 +473,7 @@
                 color="warn"
                 mat-stroked-button
                 [href]="reportDataGlitchMailHref"
-                ><ion-icon class="mr-1" name="flag-outline" /><span i18n
+                ><ion-icon class="me-1" name="flag-outline" /><span i18n
                   >Report Data Glitch</span
                 >...</a
               >
@@ -488,7 +488,7 @@
                   )
                 "
                 (click)="onClose()"
-                ><ion-icon class="mr-1" name="create-outline" /><span i18n
+                ><ion-icon class="me-1" name="create-outline" /><span i18n
                   >Manage Asset Profile</span
                 >...</a
               >

apps/client/src/app/components/home-overview/home-overview.html

@@ -10,14 +10,14 @@
       <div class="col introduction">
         <h4 i18n>Welcome to Ghostfolio</h4>
         <p i18n>Ready to take control of your personal finances?</p>
-        <ol class="font-weight-bold">
+        <ol class="fw-bold">
           <li
             class="mb-2"
             [class.text-muted]="(user()?.accounts?.length ?? 0) > 1"
           >
             <a class="d-block" [routerLink]="routerLinkAccounts"
               ><span i18n>Setup your accounts</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Get a comprehensive financial overview by adding your bank and
                 brokerage accounts.</span
               ></a
@@ -26,7 +26,7 @@
           <li class="mb-2">
             <a class="d-block" [routerLink]="routerLinkPortfolioActivities">
               <span i18n>Capture your activities</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Record your investment activities to keep your portfolio up to
                 date.</span
               ></a
@@ -35,7 +35,7 @@
           <li class="mb-2">
             <a class="d-block" [routerLink]="routerLinkPortfolio">
               <span i18n>Monitor and analyze your portfolio</span><br />
-              <span class="font-weight-normal" i18n
+              <span class="fw-normal" i18n
                 >Track your progress in real-time with comprehensive analysis
                 and insights.</span
               >
@@ -70,7 +70,7 @@
           <gf-line-chart
             class="position-absolute"
             unit="%"
-            [class.pr-3]="deviceType() === 'mobile'"
+            [class.pe-3]="deviceType() === 'mobile'"
             [colorScheme]="user()?.settings?.colorScheme"
             [hidden]="historicalDataItems()?.length === 0"
             [historicalDataItems]="historicalDataItems()"
@@ -96,7 +96,7 @@
         </div>
       </div>
       @if (showExperimentalHoldings()) {
-        <div class="col-xl-4 d-none d-xl-block ml-5 p-0 position-relative">
+        <div class="col-xl-4 d-none d-xl-block ms-5 p-0 position-relative">
           <mat-card
             appearance="outlined"
             class="h-100 holdings position-absolute w-100"

apps/client/src/app/components/home-watchlist/home-watchlist.html

@@ -3,7 +3,7 @@
     <span class="align-items-center d-flex justify-content-center">
       <span i18n>Watchlist</span>
       @if (user?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </span>
   </h1>

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -40,7 +40,7 @@
             href="../api/v1/auth/google"
             mat-stroked-button
             ><img
-              class="mr-2"
+              class="me-2"
               src="../assets/icons/google.svg"
               style="height: 1rem"
             /><span i18n>Sign in with Google</span></a

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,6 +1,6 @@
 <div class="container p-0">
   <div class="d-flex flex-wrap">
-    <div class="px-1 status-container text-muted text-right">
+    <div class="px-1 status-container text-end text-muted">
       @if ((errors()?.length ?? 0) > 0 && !isLoading()) {
         <ion-icon
           i18n-title
@@ -23,7 +23,7 @@
       </div>
     }
     <div
-      class="display-4 font-weight-bold m-0 text-center value-container"
+      class="display-4 fw-bold m-0 text-center value-container"
       [hidden]="isLoading()"
     >
       <span #value id="value"></span>

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -27,7 +27,7 @@
           other {activities}
         }</ng-container>
         <span
-          class="align-items-center d-none d-sm-flex ml-1"
+          class="align-items-center d-none d-sm-flex ms-1"
           matTooltipPosition="above"
           [matTooltip]="buyAndSellActivitiesTooltip"
         >
@@ -116,7 +116,7 @@
     <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.fees)) {
-        <span class="mr-1">-</span>
+        <span class="me-1">-</span>
       }
       <gf-value
         class="justify-content-end"
@@ -154,7 +154,7 @@
         PerformanceCalculationType.ROAI
       ) {
         <abbr
-          class="d-none d-sm-inline-block initialism ml-2 text-muted"
+          class="d-none d-sm-inline-block initialism ms-2 text-muted"
           i18n-title
           title="Return on Average Investment (total return with dividends)"
           >(ROAI)</abbr
@@ -214,7 +214,7 @@
     >
       @if (hasHoldingsBreakdown) {
         <span
-          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+          class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
             class="caret text-muted"
@@ -230,7 +230,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -292,7 +292,7 @@
     >
       @if (hasCashBreakdown) {
         <span
-          class="align-items-center caret-container d-inline-flex justify-content-center ml-n3"
+          class="align-items-center caret-container d-inline-flex justify-content-center"
         >
           <ion-icon
             class="caret text-muted"
@@ -308,7 +308,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -371,7 +371,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -398,7 +398,7 @@
     <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
     <div class="d-flex justify-content-end">
       @if (isNumber(summary?.liabilitiesInBaseCurrency)) {
-        <span class="mr-1">-</span>
+        <span class="me-1">-</span>
       }
       <gf-value
         class="justify-content-end"
@@ -415,7 +415,7 @@
     <div class="col"><hr /></div>
   </div>
   <div class="d-flex py-1">
-    <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
+    <div class="flex-grow-1 fw-bold text-truncate" i18n>Net Worth</div>
     <div class="justify-content-end">
       <gf-value
         class="justify-content-end"
@@ -456,7 +456,7 @@
         user?.settings?.isExperimentalFeatures
       ) {
         <gf-value
-          class="d-lg-inline-block d-none ml-2 small text-muted"
+          class="d-lg-inline-block d-none ms-2 small text-muted"
           [isLoading]="isLoading"
           [isPercent]="true"
           [locale]="locale"
@@ -486,7 +486,7 @@
         user?.subscription?.type !== 'Basic'
       ) {
         <ion-icon
-          class="mr-1 text-muted"
+          class="me-1 text-muted"
           name="ellipsis-horizontal-circle-outline"
         />
       }

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss

@@ -2,6 +2,7 @@
   display: block;
 
   .caret-container {
+    margin-left: -1rem;
     width: 1rem;
 
     .caret {

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -15,7 +15,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold range</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
@@ -61,7 +61,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Min</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"
@@ -99,7 +99,7 @@
           <h6 class="d-flex mb-0">
             <ng-container i18n>Threshold Max</ng-container>:
             <gf-value
-              class="ml-1"
+              class="ms-1"
               [isPercent]="threshold.unit === '%'"
               [locale]="data.locale"
               [precision]="2"

apps/client/src/app/components/rule/rule.component.html

@@ -4,7 +4,7 @@
       <div>
         <ngx-skeleton-loader
           animation="pulse"
-          class="mr-2"
+          class="me-2"
           [theme]="{
             height: '2rem',
             width: '2rem'
@@ -13,7 +13,7 @@
       </div>
     } @else {
       <div
-        class="align-items-center d-flex icon-container mr-2 px-2"
+        class="align-items-center d-flex icon-container me-2 px-2"
         [class]="{
           okay: rule?.value === true,
           warn: rule?.value === false
@@ -65,7 +65,7 @@
             @if (rule?.isActive && rule?.configuration) {
               <button mat-menu-item (click)="onCustomizeRule(rule)">
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="options-outline" />
+                  <ion-icon class="me-2" name="options-outline" />
                   <span><ng-container i18n>Customize</ng-container>...</span>
                 </span>
               </button>
@@ -74,12 +74,12 @@
             <button mat-menu-item (click)="onUpdateRule(rule)">
               @if (rule?.isActive) {
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="remove-circle-outline" />
+                  <ion-icon class="me-2" name="remove-circle-outline" />
                   <span i18n>Deactivate</span>
                 </span>
               } @else {
                 <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="add-circle-outline" />
+                  <ion-icon class="me-2" name="add-circle-outline" />
                   <span i18n>Activate</span>
                 </span>
               }

apps/client/src/app/components/rules/rules.component.html

@@ -1,5 +1,5 @@
 <div class="container p-0">
-  <div class="row no-gutters">
+  <div class="g-0 row">
     <div class="col">
       @if (isLoading) {
         <gf-rule [isLoading]="true" />

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html

@@ -9,38 +9,38 @@
       <div>
         <h5 class="align-items-center d-flex justify-content-center mb-3">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
-        <div class="font-weight-normal h5 mb-3 text-center" i18n>
+        <div class="fw-normal h5 mb-3 text-center" i18n>
           Are you an ambitious investor who needs the full picture?
         </div>
         <p i18n>
           Upgrade to Ghostfolio Premium today and gain access to exclusive
           features to enhance your investment experience:
         </p>
-        <ul class="list-unstyled mb-3 pl-3">
+        <ul class="list-unstyled mb-3 ps-3">
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Portfolio Summary</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Portfolio Allocations</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Performance Benchmarks</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>FIRE Calculator</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>Professional Data Provider</span>
           </li>
           <li class="align-items-center d-flex mb-1">
-            <ion-icon class="mr-1" name="checkmark-circle-outline" />
+            <ion-icon class="me-1" name="checkmark-circle-outline" />
             <span i18n>and more Features...</span>
           </li>
         </ul>
@@ -68,7 +68,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -80,13 +80,13 @@
         </div>
       </div>
       <div>
-        <div class="font-weight-normal h5 text-center" i18n>
+        <div class="fw-normal h5 text-center" i18n>
           Get access to 80’000+ tickers from over 50 exchanges
         </div>
         <p class="my-2 text-center" i18n>with</p>
         <h5 class="align-items-center d-flex justify-content-center">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
       </div>
     </div>
@@ -108,7 +108,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -122,10 +122,10 @@
       <div>
         <h5 class="align-items-center d-flex justify-content-center">
           <span>Ghostfolio Premium</span>
-          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+          <gf-premium-indicator class="ms-1" [enableLink]="false" />
         </h5>
         <p class="my-2 text-center" i18n>for</p>
-        <div class="font-weight-normal h5 text-center">
+        <div class="fw-normal h5 text-center">
           <ng-container i18n>less than</ng-container> $1
           <ng-container i18n>per week</ng-container>
         </div>
@@ -151,7 +151,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Upgrade Plan</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }
@@ -161,7 +161,7 @@
       mat-dialog-title
     >
       <span>Ghostfolio Premium</span>
-      <gf-premium-indicator class="ml-1" [enableLink]="false" />
+      <gf-premium-indicator class="ms-1" [enableLink]="false" />
     </h1>
     <div class="flex-grow-1 pt-0" mat-dialog-content>
       <div class="align-items-center d-flex h-100 justify-content-center">
@@ -191,7 +191,7 @@
         (click)="closeDialog()"
       >
         <span i18n>Join now</span>
-        <ion-icon class="ml-1" name="arrow-forward-outline" />
+        <ion-icon class="ms-1" name="arrow-forward-outline" />
       </a>
     </div>
   }

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -58,7 +58,7 @@
           [matDatepicker]="expiresAt"
           [min]="minExpiresAt"
         />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="expiresAt">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="expiresAt">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -31,7 +31,7 @@
             />
           </button>
         </mat-form-field>
-        <div class="pl-2">
+        <div class="ps-2">
           <button
             color="warn"
             mat-flat-button
@@ -65,7 +65,7 @@
   <h1 class="align-items-center d-flex h3 justify-content-center mb-3">
     <span i18n>Granted Access</span>
     @if (user?.subscription?.type === 'Basic') {
-      <gf-premium-indicator class="ml-1" />
+      <gf-premium-indicator class="ms-1" />
     }
   </h1>
   <gf-access-table

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -38,7 +38,7 @@
               @if (durationExtension) {
                 <div class="mt-1 text-center">
                   <div
-                    class="badge badge-pill badge-warning font-weight-normal px-2 py-1"
+                    class="badge bg-warning fw-normal px-2 py-1 rounded-pill text-dark"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
@@ -57,7 +57,7 @@
                   [href]="trySubscriptionMailHref"
                   ><span i18n>Try Premium</span>
                   <gf-premium-indicator
-                    class="d-inline-block ml-1"
+                    class="d-inline-block ms-1"
                     [enableLink]="false"
                   />
                 </a>

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -9,10 +9,10 @@
             [class.mb-2]="!hasImpersonationId"
             [class.mb-4]="hasImpersonationId"
           >
-            <div class="align-items-center d-flex pt-1 pt-1 w-50">
+            <div class="align-items-center d-flex pe-1 pt-1 w-50">
               <ng-container i18n>Base Currency</ng-container>
             </div>
-            <div class="pl-1 w-50" [formGroup]="baseCurrencyForm">
+            <div class="ps-1 w-50" [formGroup]="baseCurrencyForm">
               <mat-form-field
                 appearance="outline"
                 class="w-100"
@@ -32,10 +32,10 @@
           </div>
           @if (user?.settings?.isExperimentalFeatures && !user?.subscription) {
             <div class="d-flex mb-2">
-              <div class="align-items-center d-flex pt-1 pt-1 w-50">
+              <div class="align-items-center d-flex pe-1 pt-1 w-50">
                 <ng-container i18n>Performance Calculation</ng-container>
               </div>
-              <div class="pl-1 w-50">
+              <div class="ps-1 w-50">
                 <mat-form-field appearance="outline" class="w-100 without-hint">
                   <mat-select
                     name="performanceCalculationType"
@@ -57,7 +57,7 @@
             </div>
           }
           <div class="align-items-center d-flex mb-2">
-            <div class="pr-1 w-50">
+            <div class="pe-1 w-50">
               <div i18n>Language</div>
               @if (isCommunityLanguage()) {
                 <div class="hint-text text-muted" i18n>
@@ -72,7 +72,7 @@
                 </div>
               }
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   name="language"
@@ -152,13 +152,13 @@
             </div>
           </div>
           <div class="align-items-center d-flex mb-4">
-            <div class="pr-1 w-50">
+            <div class="pe-1 w-50">
               <div i18n>Locale</div>
               <div class="hint-text text-muted">
                 <ng-container i18n>Date and number format</ng-container>
               </div>
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field
                 appearance="outline"
                 class="w-100 with-value-hint"
@@ -197,10 +197,10 @@
             </div>
           </div>
           <div class="d-flex">
-            <div class="align-items-center d-flex pr-1 pt-1 w-50">
+            <div class="align-items-center d-flex pe-1 pt-1 w-50">
               <ng-container i18n>Appearance</ng-container>
             </div>
-            <div class="pl-1 w-50">
+            <div class="ps-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">
                 <mat-select
                   class="with-placeholder-as-option"
@@ -222,14 +222,14 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Presenter View</div>
           <div class="hint-text text-muted" i18n>
             Protection for sensitive information like absolute performances and
             quantity values
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -240,13 +240,13 @@
         </div>
       </div>
       <div class="d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Zen Mode</div>
           <div class="hint-text text-muted" i18n>
             Distraction-free experience for turbulent times
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -257,11 +257,11 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Biometric Authentication</div>
           <div class="hint-text text-muted" i18n>Sign in with fingerprint</div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -274,13 +274,13 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           <div i18n>Experimental Features</div>
           <div class="hint-text text-muted" i18n>
             Sneak peek at upcoming functionality
           </div>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <mat-slide-toggle
             color="primary"
             hideIcon="true"
@@ -292,13 +292,13 @@
       </div>
       @if (deviceType() !== 'mobile' && hasPermissionToEnableGhostfolioAi) {
         <div class="align-items-center d-flex mt-4 py-1">
-          <div class="pr-1 w-50">
+          <div class="pe-1 w-50">
             <div>Ghostfolio AI</div>
             <div class="hint-text text-muted" i18n>
               Powered by third-party AI providers
             </div>
           </div>
-          <div class="pl-1 w-50">
+          <div class="ps-1 w-50">
             <mat-slide-toggle
               color="primary"
               hideIcon="true"
@@ -310,12 +310,12 @@
         </div>
       }
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50">
+        <div class="pe-1 w-50">
           Ghostfolio <ng-container i18n>User ID</ng-container>
         </div>
-        <div class="pl-1 w-50">
+        <div class="ps-1 w-50">
           <gf-value
-            class="text-monospace"
+            class="font-monospace"
             [enableCopyToClipboardButton]="true"
             [isLoading]="isLoading"
             [value]="user?.id"
@@ -323,8 +323,8 @@
         </div>
       </div>
       <div class="align-items-center d-flex py-1">
-        <div class="pr-1 w-50"></div>
-        <div class="pl-1 text-monospace w-50">
+        <div class="pe-1 w-50"></div>
+        <div class="font-monospace ps-1 w-50">
           <button color="primary" i18n mat-flat-button (click)="onExport()">
             Export Data
           </button>
@@ -335,8 +335,8 @@
       ) {
         <hr class="mt-5" />
         <div class="d-flex py-1">
-          <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
-          <div class="pl-1 w-50">
+          <div class="pe-1 text-danger w-50" i18n>Danger Zone</div>
+          <div class="ps-1 w-50">
             @if (
               hasPermissionToDeleteOwnUser &&
               hasPermissionToUpdateOwnAccessToken

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@@ -1,6 +1,6 @@
 <div class="align-items-center d-flex justify-content-end" mat-dialog-title>
   <button
-    class="ml-1 no-min-width px-2"
+    class="ms-1 no-min-width px-2"
     mat-button
     type="button"
     [matMenuTriggerFor]="userDetailActionsMenu"
@@ -219,17 +219,13 @@
                 </ng-container>
 
                 <ng-container matColumnDef="price">
-                  <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+                  <th *matHeaderCellDef class="px-1 text-end" mat-header-cell>
                     <ng-container i18n>Price</ng-container>
                   </th>
-                  <td
-                    *matCellDef="let element"
-                    class="px-1 text-right"
-                    mat-cell
-                  >
+                  <td *matCellDef="let element" class="px-1 text-end" mat-cell>
                     @if (element.price === null) {
                       <span>–</span>
-                      <span class="ml-1">{{ baseCurrency }}</span>
+                      <span class="ms-1">{{ baseCurrency }}</span>
                     } @else {
                       <gf-value
                         class="d-inline-block justify-content-end"
@@ -240,7 +236,7 @@
                       />
                     }
                   </td>
-                  <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+                  <td *matFooterCellDef class="px-1 text-end" mat-footer-cell>
                     <gf-value
                       class="d-inline-block justify-content-end"
                       [isCurrency]="true"

apps/client/src/app/pages/about/oss-friends/oss-friends-page.html

@@ -27,7 +27,7 @@
                     <span
                       ><ng-container i18n>Visit</ng-container>
                       {{ ossFriend.name }}</span
-                    ><ion-icon class="ml-1" name="arrow-forward-outline" />
+                    ><ion-icon class="ms-1" name="arrow-forward-outline" />
                   </a>
                 </mat-card-actions>
               </mat-card>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -38,7 +38,7 @@
           type="number"
           (keydown.enter)="$event.stopPropagation()"
         />
-        <span class="ml-2" matTextSuffix>{{
+        <span class="ms-2" matTextSuffix>{{
           accountForm.get('currency')?.value
         }}</span>
       </mat-form-field>
@@ -48,7 +48,7 @@
         <mat-label i18n>Platform</mat-label>
         @if (selectedPlatform) {
           <gf-entity-logo
-            class="ml-3"
+            class="ms-3"
             matPrefix
             [hasPlaceholder]="true"
             [tooltip]="selectedPlatform.name ?? ''"
@@ -71,7 +71,7 @@
             <mat-option [value]="platformEntry">
               <span class="d-flex">
                 <gf-entity-logo
-                  class="mr-1"
+                  class="me-1"
                   [hasPlaceholder]="true"
                   [tooltip]="platformEntry.name ?? ''"
                   [url]="platformEntry.url"

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html

@@ -29,7 +29,7 @@
           type="number"
           (keydown.enter)="$event.stopPropagation()"
         />
-        <span class="ml-2" matTextSuffix>{{ currency }}</span>
+        <span class="ms-2" matTextSuffix>{{ currency }}</span>
       </mat-form-field>
     </div>
   </div>

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html

@@ -143,58 +143,58 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Aktie</span>
+              <span class="badge bg-light text-dark">Aktie</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Altersvorsorge</span>
+              <span class="badge bg-light text-dark">Altersvorsorge</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Anlage</span>
+              <span class="badge bg-light text-dark">Anlage</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Feedback</span>
+              <span class="badge bg-light text-dark">Feedback</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investition</span>
+              <span class="badge bg-light text-dark">Investition</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategie</span>
+              <span class="badge bg-light text-dark">Strategie</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Trading</span>
+              <span class="badge bg-light text-dark">Trading</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">TypeScript</span>
+              <span class="badge bg-light text-dark">TypeScript</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Vermögen</span>
+              <span class="badge bg-light text-dark">Vermögen</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html

@@ -138,43 +138,43 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html

@@ -120,61 +120,61 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">BuildInPublic</span>
+              <span class="badge bg-light text-dark">BuildInPublic</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Docker</span>
+              <span class="badge bg-light text-dark">Docker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Image</span>
+              <span class="badge bg-light text-dark">Image</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Progress</span>
+              <span class="badge bg-light text-dark">Progress</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html

@@ -102,79 +102,79 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Anonymity</span>
+              <span class="badge bg-light text-dark">Anonymity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Auth Provider</span>
+              <span class="badge bg-light text-dark">Auth Provider</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Authentication</span>
+              <span class="badge bg-light text-dark">Authentication</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Blockchain</span>
+              <span class="badge bg-light text-dark">Blockchain</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptography</span>
+              <span class="badge bg-light text-dark">Cryptography</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">dfinity</span>
+              <span class="badge bg-light text-dark">dfinity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Face ID</span>
+              <span class="badge bg-light text-dark">Face ID</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fingerprint</span>
+              <span class="badge bg-light text-dark">Fingerprint</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Internet Computer</span>
+              <span class="badge bg-light text-dark">Internet Computer</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Internet Identity</span>
+              <span class="badge bg-light text-dark">Internet Identity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OAuth</span>
+              <span class="badge bg-light text-dark">OAuth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Password</span>
+              <span class="badge bg-light text-dark">Password</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">passwordless</span>
+              <span class="badge bg-light text-dark">passwordless</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Security</span>
+              <span class="badge bg-light text-dark">Security</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Technology</span>
+              <span class="badge bg-light text-dark">Technology</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Touch ID</span>
+              <span class="badge bg-light text-dark">Touch ID</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">WebAuthn</span>
+              <span class="badge bg-light text-dark">WebAuthn</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html

@@ -115,91 +115,91 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Assets</span>
+              <span class="badge bg-light text-dark">Assets</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Budget</span>
+              <span class="badge bg-light text-dark">Budget</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cash</span>
+              <span class="badge bg-light text-dark">Cash</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Debt</span>
+              <span class="badge bg-light text-dark">Debt</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Equity</span>
+              <span class="badge bg-light text-dark">Equity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Expense</span>
+              <span class="badge bg-light text-dark">Expense</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fund</span>
+              <span class="badge bg-light text-dark">Fund</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Goal</span>
+              <span class="badge bg-light text-dark">Goal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Guide</span>
+              <span class="badge bg-light text-dark">Guide</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Income</span>
+              <span class="badge bg-light text-dark">Income</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Money</span>
+              <span class="badge bg-light text-dark">Money</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Net Worth</span>
+              <span class="badge bg-light text-dark">Net Worth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Pension</span>
+              <span class="badge bg-light text-dark">Pension</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Planning</span>
+              <span class="badge bg-light text-dark">Planning</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Salary</span>
+              <span class="badge bg-light text-dark">Salary</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Saving</span>
+              <span class="badge bg-light text-dark">Saving</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Spreadsheet</span>
+              <span class="badge bg-light text-dark">Spreadsheet</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html

@@ -108,85 +108,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Blockchain</span>
+              <span class="badge bg-light text-dark">Blockchain</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">BuildInPublic</span>
+              <span class="badge bg-light text-dark">BuildInPublic</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cloud</span>
+              <span class="badge bg-light text-dark">Cloud</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Future</span>
+              <span class="badge bg-light text-dark">Future</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Goal</span>
+              <span class="badge bg-light text-dark">Goal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Internet Identity</span>
+              <span class="badge bg-light text-dark">Internet Identity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Message Queue</span>
+              <span class="badge bg-light text-dark">Message Queue</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OpenSaaS</span>
+              <span class="badge bg-light text-dark">OpenSaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Planning</span>
+              <span class="badge bg-light text-dark">Planning</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Progress</span>
+              <span class="badge bg-light text-dark">Progress</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">User Feedback</span>
+              <span class="badge bg-light text-dark">User Feedback</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Worker</span>
+              <span class="badge bg-light text-dark">Worker</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.html

@@ -96,82 +96,82 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest</span>
+              <span class="badge bg-light text-dark">Hacktoberfest</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">NestJS</span>
+              <span class="badge bg-light text-dark">NestJS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">October</span>
+              <span class="badge bg-light text-dark">October</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">TypeScript</span>
+              <span class="badge bg-light text-dark">TypeScript</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html

@@ -18,7 +18,7 @@
             <span class="align-items-center d-inline-flex"
               ><strong>Ghostfolio Premium</strong>
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
@@ -56,82 +56,82 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">2022</span>
+              <span class="badge bg-light text-dark">2022</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Friday</span>
+              <span class="badge bg-light text-dark">Black Friday</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cloud</span>
+              <span class="badge bg-light text-dark">Cloud</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Deal</span>
+              <span class="badge bg-light text-dark">Deal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio Premium</span>
+              <span class="badge bg-light text-dark">Ghostfolio Premium</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hosting</span>
+              <span class="badge bg-light text-dark">Hosting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Pricing</span>
+              <span class="badge bg-light text-dark">Pricing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Subscription</span>
+              <span class="badge bg-light text-dark">Subscription</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.html

@@ -95,70 +95,70 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Assets</span>
+              <span class="badge bg-light text-dark">Assets</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Decision</span>
+              <span class="badge bg-light text-dark">Decision</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Goal</span>
+              <span class="badge bg-light text-dark">Goal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Management</span>
+              <span class="badge bg-light text-dark">Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Monitoring</span>
+              <span class="badge bg-light text-dark">Monitoring</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Net Worth</span>
+              <span class="badge bg-light text-dark">Net Worth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Opportunity</span>
+              <span class="badge bg-light text-dark">Opportunity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Performance</span>
+              <span class="badge bg-light text-dark">Performance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Progress</span>
+              <span class="badge bg-light text-dark">Progress</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Risk</span>
+              <span class="badge bg-light text-dark">Risk</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Spreadsheet</span>
+              <span class="badge bg-light text-dark">Spreadsheet</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Success</span>
+              <span class="badge bg-light text-dark">Success</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.html

@@ -81,94 +81,94 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">AGPL-3.0</span>
+              <span class="badge bg-light text-dark">AGPL-3.0</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Aktie</span>
+              <span class="badge bg-light text-dark">Aktie</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Altersvorsorge</span>
+              <span class="badge bg-light text-dark">Altersvorsorge</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Anlage</span>
+              <span class="badge bg-light text-dark">Anlage</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Asset</span>
+              <span class="badge bg-light text-dark">Asset</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Feedback</span>
+              <span class="badge bg-light text-dark">Feedback</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finanzwissen</span>
+              <span class="badge bg-light text-dark">Finanzwissen</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Immobilien</span>
+              <span class="badge bg-light text-dark">Immobilien</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Innovation</span>
+              <span class="badge bg-light text-dark">Innovation</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investieren</span>
+              <span class="badge bg-light text-dark">Investieren</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Lizenz</span>
+              <span class="badge bg-light text-dark">Lizenz</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Media</span>
+              <span class="badge bg-light text-dark">Media</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">P2P</span>
+              <span class="badge bg-light text-dark">P2P</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Performance</span>
+              <span class="badge bg-light text-dark">Performance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Presse</span>
+              <span class="badge bg-light text-dark">Presse</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Sackgeld</span>
+              <span class="badge bg-light text-dark">Sackgeld</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Säule 3a</span>
+              <span class="badge bg-light text-dark">Säule 3a</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Schweiz</span>
+              <span class="badge bg-light text-dark">Schweiz</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Taschengeld</span>
+              <span class="badge bg-light text-dark">Taschengeld</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Tool</span>
+              <span class="badge bg-light text-dark">Tool</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Vermögen</span>
+              <span class="badge bg-light text-dark">Vermögen</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Vorsorge</span>
+              <span class="badge bg-light text-dark">Vorsorge</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.html

@@ -99,100 +99,100 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Announcement</span>
+              <span class="badge bg-light text-dark">Announcement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">App Store</span>
+              <span class="badge bg-light text-dark">App Store</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Assets</span>
+              <span class="badge bg-light text-dark">Assets</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cloud</span>
+              <span class="badge bg-light text-dark">Cloud</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Commodity</span>
+              <span class="badge bg-light text-dark">Commodity</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Debian</span>
+              <span class="badge bg-light text-dark">Debian</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Development</span>
+              <span class="badge bg-light text-dark">Development</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Docker</span>
+              <span class="badge bg-light text-dark">Docker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Home Server</span>
+              <span class="badge bg-light text-dark">Home Server</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investing</span>
+              <span class="badge bg-light text-dark">Investing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Linux</span>
+              <span class="badge bg-light text-dark">Linux</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Operating System</span>
+              <span class="badge bg-light text-dark">Operating System</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OS</span>
+              <span class="badge bg-light text-dark">OS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Server</span>
+              <span class="badge bg-light text-dark">Personal Server</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
+              <span class="badge bg-light text-dark">Privacy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Raspberry Pi</span>
+              <span class="badge bg-light text-dark">Raspberry Pi</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Security</span>
+              <span class="badge bg-light text-dark">Security</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Spreadsheet</span>
+              <span class="badge bg-light text-dark">Spreadsheet</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stocks</span>
+              <span class="badge bg-light text-dark">Stocks</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ubuntu</span>
+              <span class="badge bg-light text-dark">Ubuntu</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Umbrel</span>
+              <span class="badge bg-light text-dark">Umbrel</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">VPS</span>
+              <span class="badge bg-light text-dark">VPS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.html

@@ -135,115 +135,115 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Achievement</span>
+              <span class="badge bg-light text-dark">Achievement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Analysis</span>
+              <span class="badge bg-light text-dark">Analysis</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Asset</span>
+              <span class="badge bg-light text-dark">Asset</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">BuildInPublic</span>
+              <span class="badge bg-light text-dark">BuildInPublic</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Collaboration</span>
+              <span class="badge bg-light text-dark">Collaboration</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Development</span>
+              <span class="badge bg-light text-dark">Development</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GUI</span>
+              <span class="badge bg-light text-dark">GUI</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">i18n</span>
+              <span class="badge bg-light text-dark">i18n</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Import</span>
+              <span class="badge bg-light text-dark">Import</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Innovation</span>
+              <span class="badge bg-light text-dark">Innovation</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Internationalization</span>
+              <span class="badge bg-light text-dark">Internationalization</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investor</span>
+              <span class="badge bg-light text-dark">Investor</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Milestone</span>
+              <span class="badge bg-light text-dark">Milestone</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Platform</span>
+              <span class="badge bg-light text-dark">Platform</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Progress</span>
+              <span class="badge bg-light text-dark">Progress</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Tool</span>
+              <span class="badge bg-light text-dark">Tool</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Translation</span>
+              <span class="badge bg-light text-dark">Translation</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Umbrel</span>
+              <span class="badge bg-light text-dark">Umbrel</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Unraid</span>
+              <span class="badge bg-light text-dark">Unraid</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.html

@@ -145,85 +145,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Analysis</span>
+              <span class="badge bg-light text-dark">Analysis</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Assets</span>
+              <span class="badge bg-light text-dark">Assets</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Budgeting</span>
+              <span class="badge bg-light text-dark">Budgeting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Buy & Hold</span>
+              <span class="badge bg-light text-dark">Buy & Hold</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrencies</span>
+              <span class="badge bg-light text-dark">Cryptocurrencies</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Diversification</span>
+              <span class="badge bg-light text-dark">Diversification</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETFs</span>
+              <span class="badge bg-light text-dark">ETFs</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">FIRE</span>
+              <span class="badge bg-light text-dark">FIRE</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Management</span>
+              <span class="badge bg-light text-dark">Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Minimalism</span>
+              <span class="badge bg-light text-dark">Minimalism</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Monitoring</span>
+              <span class="badge bg-light text-dark">Monitoring</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Planning</span>
+              <span class="badge bg-light text-dark">Planning</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
+              <span class="badge bg-light text-dark">Privacy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Retirement</span>
+              <span class="badge bg-light text-dark">Retirement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Spreadsheet</span>
+              <span class="badge bg-light text-dark">Spreadsheet</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.html

@@ -158,82 +158,82 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">App</span>
+              <span class="badge bg-light text-dark">App</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Budgeting</span>
+              <span class="badge bg-light text-dark">Budgeting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Calculator</span>
+              <span class="badge bg-light text-dark">Calculator</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">FIRE</span>
+              <span class="badge bg-light text-dark">FIRE</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Frugality</span>
+              <span class="badge bg-light text-dark">Frugality</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Health</span>
+              <span class="badge bg-light text-dark">Health</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Independence</span>
+              <span class="badge bg-light text-dark">Independence</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Index Fund</span>
+              <span class="badge bg-light text-dark">Index Fund</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Lifestyle</span>
+              <span class="badge bg-light text-dark">Lifestyle</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Management</span>
+              <span class="badge bg-light text-dark">Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Movement</span>
+              <span class="badge bg-light text-dark">Movement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Planning</span>
+              <span class="badge bg-light text-dark">Planning</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Retirement</span>
+              <span class="badge bg-light text-dark">Retirement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Savings</span>
+              <span class="badge bg-light text-dark">Savings</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Simulation</span>
+              <span class="badge bg-light text-dark">Simulation</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Strategy</span>
+              <span class="badge bg-light text-dark">Strategy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Trinity Study</span>
+              <span class="badge bg-light text-dark">Trinity Study</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Withdrawal</span>
+              <span class="badge bg-light text-dark">Withdrawal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Work-Life Balance</span>
+              <span class="badge bg-light text-dark">Work-Life Balance</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.html

@@ -72,79 +72,79 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Asset</span>
+              <span class="badge bg-light text-dark">Asset</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Collaboration</span>
+              <span class="badge bg-light text-dark">Collaboration</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Dashboard</span>
+              <span class="badge bg-light text-dark">Dashboard</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Initiative</span>
+              <span class="badge bg-light text-dark">Initiative</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Innovation</span>
+              <span class="badge bg-light text-dark">Innovation</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS Friends</span>
+              <span class="badge bg-light text-dark">OSS Friends</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Platform</span>
+              <span class="badge bg-light text-dark">Platform</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
+              <span class="badge bg-light text-dark">Privacy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Technology</span>
+              <span class="badge bg-light text-dark">Technology</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Tracking</span>
+              <span class="badge bg-light text-dark">Tracking</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/09/ghostfolio-2/ghostfolio-2-page.html

@@ -191,79 +191,79 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Announcement</span>
+              <span class="badge bg-light text-dark">Announcement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Collaboration</span>
+              <span class="badge bg-light text-dark">Collaboration</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Contribution</span>
+              <span class="badge bg-light text-dark">Contribution</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Evolution</span>
+              <span class="badge bg-light text-dark">Evolution</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio 2.0</span>
+              <span class="badge bg-light text-dark">Ghostfolio 2.0</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nest.js</span>
+              <span class="badge bg-light text-dark">Nest.js</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Platform</span>
+              <span class="badge bg-light text-dark">Platform</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
+              <span class="badge bg-light text-dark">Privacy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Release</span>
+              <span class="badge bg-light text-dark">Release</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stack</span>
+              <span class="badge bg-light text-dark">Stack</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Technology</span>
+              <span class="badge bg-light text-dark">Technology</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/09/hacktoberfest-2023/hacktoberfest-2023-page.html

@@ -101,79 +101,79 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Docker</span>
+              <span class="badge bg-light text-dark">Docker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest</span>
+              <span class="badge bg-light text-dark">Hacktoberfest</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">NestJS</span>
+              <span class="badge bg-light text-dark">NestJS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">October</span>
+              <span class="badge bg-light text-dark">October</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">TypeScript</span>
+              <span class="badge bg-light text-dark">TypeScript</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">UX</span>
+              <span class="badge bg-light text-dark">UX</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/11/black-week-2023/black-week-2023-page.html

@@ -19,7 +19,7 @@
             <span class="align-items-center d-inline-flex"
               ><strong>Ghostfolio Premium</strong>
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
@@ -60,85 +60,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">2023</span>
+              <span class="badge bg-light text-dark">2023</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Friday</span>
+              <span class="badge bg-light text-dark">Black Friday</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Week</span>
+              <span class="badge bg-light text-dark">Black Week</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cloud</span>
+              <span class="badge bg-light text-dark">Cloud</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Deal</span>
+              <span class="badge bg-light text-dark">Deal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio Premium</span>
+              <span class="badge bg-light text-dark">Ghostfolio Premium</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hosting</span>
+              <span class="badge bg-light text-dark">Hosting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Pricing</span>
+              <span class="badge bg-light text-dark">Pricing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Subscription</span>
+              <span class="badge bg-light text-dark">Subscription</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.html

@@ -182,85 +182,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Code</span>
+              <span class="badge bg-light text-dark">Code</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Collaboration</span>
+              <span class="badge bg-light text-dark">Collaboration</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Development</span>
+              <span class="badge bg-light text-dark">Development</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Feature</span>
+              <span class="badge bg-light text-dark">Feature</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest</span>
+              <span class="badge bg-light text-dark">Hacktoberfest</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investing</span>
+              <span class="badge bg-light text-dark">Investing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Learning</span>
+              <span class="badge bg-light text-dark">Learning</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Lessons learned</span>
+              <span class="badge bg-light text-dark">Lessons learned</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Mindset</span>
+              <span class="badge bg-light text-dark">Mindset</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">October</span>
+              <span class="badge bg-light text-dark">October</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Programming</span>
+              <span class="badge bg-light text-dark">Programming</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Takeaways</span>
+              <span class="badge bg-light text-dark">Takeaways</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">User Experience</span>
+              <span class="badge bg-light text-dark">User Experience</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">UX</span>
+              <span class="badge bg-light text-dark">UX</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html

@@ -104,82 +104,82 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Docker</span>
+              <span class="badge bg-light text-dark">Docker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest</span>
+              <span class="badge bg-light text-dark">Hacktoberfest</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest 2024</span>
+              <span class="badge bg-light text-dark">Hacktoberfest 2024</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">NestJS</span>
+              <span class="badge bg-light text-dark">NestJS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">October</span>
+              <span class="badge bg-light text-dark">October</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">TypeScript</span>
+              <span class="badge bg-light text-dark">TypeScript</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">UX</span>
+              <span class="badge bg-light text-dark">UX</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2024/11/black-weeks-2024/black-weeks-2024-page.html

@@ -19,7 +19,7 @@
             <span class="align-items-center d-inline-flex"
               >Ghostfolio Premium
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
@@ -70,94 +70,94 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">2024</span>
+              <span class="badge bg-light text-dark">2024</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Friday</span>
+              <span class="badge bg-light text-dark">Black Friday</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Weeks</span>
+              <span class="badge bg-light text-dark">Black Weeks</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Dashboard</span>
+              <span class="badge bg-light text-dark">Dashboard</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Deal</span>
+              <span class="badge bg-light text-dark">Deal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">DeFi</span>
+              <span class="badge bg-light text-dark">DeFi</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio Premium</span>
+              <span class="badge bg-light text-dark">Ghostfolio Premium</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hosting</span>
+              <span class="badge bg-light text-dark">Hosting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Pricing</span>
+              <span class="badge bg-light text-dark">Pricing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Promotion</span>
+              <span class="badge bg-light text-dark">Promotion</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Sale</span>
+              <span class="badge bg-light text-dark">Sale</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Subscription</span>
+              <span class="badge bg-light text-dark">Subscription</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web3</span>
+              <span class="badge bg-light text-dark">Web3</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web 3.0</span>
+              <span class="badge bg-light text-dark">Web 3.0</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2025/09/hacktoberfest-2025/hacktoberfest-2025-page.html

@@ -100,85 +100,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Dashboard</span>
+              <span class="badge bg-light text-dark">Dashboard</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Docker</span>
+              <span class="badge bg-light text-dark">Docker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">GitHub</span>
+              <span class="badge bg-light text-dark">GitHub</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest</span>
+              <span class="badge bg-light text-dark">Hacktoberfest</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Hacktoberfest 2025</span>
+              <span class="badge bg-light text-dark">Hacktoberfest 2025</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">NestJS</span>
+              <span class="badge bg-light text-dark">NestJS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">October</span>
+              <span class="badge bg-light text-dark">October</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Redis</span>
+              <span class="badge bg-light text-dark">Redis</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">TypeScript</span>
+              <span class="badge bg-light text-dark">TypeScript</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">UX</span>
+              <span class="badge bg-light text-dark">UX</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Web Application</span>
+              <span class="badge bg-light text-dark">Web Application</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2025/11/black-weeks-2025/black-weeks-2025-page.html

@@ -18,7 +18,7 @@
             <span class="align-items-center d-inline-flex"
               >Ghostfolio Premium
               <gf-premium-indicator
-                class="d-inline-block ml-1"
+                class="d-inline-block ms-1"
                 [enableLink]="false"
               />
             </span>
@@ -58,85 +58,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">2025</span>
+              <span class="badge bg-light text-dark">2025</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Friday</span>
+              <span class="badge bg-light text-dark">Black Friday</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Black Weeks</span>
+              <span class="badge bg-light text-dark">Black Weeks</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Cryptocurrency</span>
+              <span class="badge bg-light text-dark">Cryptocurrency</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Deal</span>
+              <span class="badge bg-light text-dark">Deal</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Discount</span>
+              <span class="badge bg-light text-dark">Discount</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">ETF</span>
+              <span class="badge bg-light text-dark">ETF</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Finance</span>
+              <span class="badge bg-light text-dark">Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio Premium</span>
+              <span class="badge bg-light text-dark">Ghostfolio Premium</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio Tracker</span>
+              <span class="badge bg-light text-dark">Portfolio Tracker</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Pricing</span>
+              <span class="badge bg-light text-dark">Pricing</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Promotion</span>
+              <span class="badge bg-light text-dark">Promotion</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">SaaS</span>
+              <span class="badge bg-light text-dark">SaaS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Sale</span>
+              <span class="badge bg-light text-dark">Sale</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Savings</span>
+              <span class="badge bg-light text-dark">Savings</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stock</span>
+              <span class="badge bg-light text-dark">Stock</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Subscription</span>
+              <span class="badge bg-light text-dark">Subscription</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth</span>
+              <span class="badge bg-light text-dark">Wealth</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/2026/04/ghostfolio-3/ghostfolio-3-page.html

@@ -180,85 +180,85 @@
         <section class="mb-4">
           <ul class="list-inline">
             <li class="list-inline-item">
-              <span class="badge badge-light">Angular</span>
+              <span class="badge bg-light text-dark">Angular</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Announcement</span>
+              <span class="badge bg-light text-dark">Announcement</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Collaboration</span>
+              <span class="badge bg-light text-dark">Collaboration</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Community</span>
+              <span class="badge bg-light text-dark">Community</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Contribution</span>
+              <span class="badge bg-light text-dark">Contribution</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Evolution</span>
+              <span class="badge bg-light text-dark">Evolution</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Fintech</span>
+              <span class="badge bg-light text-dark">Fintech</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio</span>
+              <span class="badge bg-light text-dark">Ghostfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio 3.0</span>
+              <span class="badge bg-light text-dark">Ghostfolio 3.0</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Ghostfolio Premium</span>
+              <span class="badge bg-light text-dark">Ghostfolio Premium</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Internationalization</span>
+              <span class="badge bg-light text-dark">Internationalization</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Investment</span>
+              <span class="badge bg-light text-dark">Investment</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nest.js</span>
+              <span class="badge bg-light text-dark">Nest.js</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Nx</span>
+              <span class="badge bg-light text-dark">Nx</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Open Source</span>
+              <span class="badge bg-light text-dark">Open Source</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">OSS</span>
+              <span class="badge bg-light text-dark">OSS</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Personal Finance</span>
+              <span class="badge bg-light text-dark">Personal Finance</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Platform</span>
+              <span class="badge bg-light text-dark">Platform</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Portfolio</span>
+              <span class="badge bg-light text-dark">Portfolio</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Prisma</span>
+              <span class="badge bg-light text-dark">Prisma</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Privacy</span>
+              <span class="badge bg-light text-dark">Privacy</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Release</span>
+              <span class="badge bg-light text-dark">Release</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Self-Hosting</span>
+              <span class="badge bg-light text-dark">Self-Hosting</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Software</span>
+              <span class="badge bg-light text-dark">Software</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Stack</span>
+              <span class="badge bg-light text-dark">Stack</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Technology</span>
+              <span class="badge bg-light text-dark">Technology</span>
             </li>
             <li class="list-inline-item">
-              <span class="badge badge-light">Wealth Management</span>
+              <span class="badge bg-light text-dark">Wealth Management</span>
             </li>
           </ul>
         </section>

apps/client/src/app/pages/blog/blog-page.html

@@ -11,7 +11,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2026/04/ghostfolio-3"
@@ -38,7 +38,7 @@
         <mat-card appearance="outlined" class="mb-3">
           <mat-card-content class="p-0">
             <div class="container p-0">
-              <div class="flex-nowrap no-gutters row">
+              <div class="flex-nowrap g-0 row">
                 <a
                   class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2025/11/black-weeks-2025"
@@ -63,7 +63,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2025/09/hacktoberfest-2025"
@@ -88,7 +88,7 @@
         <mat-card appearance="outlined" class="mb-3">
           <mat-card-content class="p-0">
             <div class="container p-0">
-              <div class="flex-nowrap no-gutters row">
+              <div class="flex-nowrap g-0 row">
                 <a
                   class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2024/11/black-weeks-2024"
@@ -113,7 +113,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2024/09/hacktoberfest-2024"
@@ -138,7 +138,7 @@
         <mat-card appearance="outlined" class="mb-3">
           <mat-card-content class="p-0">
             <div class="container p-0">
-              <div class="flex-nowrap no-gutters row">
+              <div class="flex-nowrap g-0 row">
                 <a
                   class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2023/11/black-week-2023"
@@ -163,7 +163,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/11/hacktoberfest-2023-debriefing"
@@ -189,7 +189,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/09/hacktoberfest-2023"
@@ -213,7 +213,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/09/ghostfolio-2"
@@ -239,7 +239,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/08/ghostfolio-joins-oss-friends"
@@ -265,7 +265,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/07/exploring-the-path-to-fire"
@@ -292,7 +292,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/05/unlock-your-financial-potential-with-ghostfolio"
@@ -318,7 +318,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/03/ghostfolio-reaches-1000-stars-on-github"
@@ -344,7 +344,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2023/02/ghostfolio-meets-umbrel"
@@ -370,7 +370,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../de/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt"
@@ -396,7 +396,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/12/the-importance-of-tracking-your-personal-finances"
@@ -423,7 +423,7 @@
         <mat-card appearance="outlined" class="mb-3">
           <mat-card-content class="p-0">
             <div class="container p-0">
-              <div class="flex-nowrap no-gutters row">
+              <div class="flex-nowrap g-0 row">
                 <a
                   class="d-flex overflow-hidden p-3 w-100"
                   href="../en/blog/2022/11/black-friday-2022"
@@ -448,7 +448,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/10/hacktoberfest-2022"
@@ -472,7 +472,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/08/500-stars-on-github"
@@ -496,7 +496,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
@@ -522,7 +522,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/07/how-do-i-get-my-finances-in-order"
@@ -548,7 +548,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2022/01/ghostfolio-first-months-in-open-source"
@@ -574,7 +574,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../en/blog/2021/07/hello-ghostfolio"
@@ -598,7 +598,7 @@
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content class="p-0">
           <div class="container p-0">
-            <div class="flex-nowrap no-gutters row">
+            <div class="flex-nowrap g-0 row">
               <a
                 class="d-flex overflow-hidden p-3 w-100"
                 href="../de/blog/2021/07/hallo-ghostfolio"

apps/client/src/app/pages/faq/overview/faq-overview-page.html

@@ -136,7 +136,7 @@
           fully available as open source software (OSS). Thanks to our generous
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           users and
@@ -164,7 +164,7 @@
           >By offering
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false" /></a
           >, a subscription plan with a managed hosting service and enhanced
           features, we fund our business while providing added value to our
@@ -190,7 +190,7 @@
           >Any support for Ghostfolio is welcome. Be it with a
           <a class="align-items-center d-inline-flex" [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           subscription to finance the operational costs for the hosting

apps/client/src/app/pages/faq/saas/saas-page.html

@@ -54,7 +54,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           is a fully managed Ghostfolio cloud offering for ambitious investors.
@@ -78,7 +78,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           by signing up for Ghostfolio and applying for a trial (see
@@ -114,7 +114,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           does not include auto-renewal. Upon expiration, you can choose whether

apps/client/src/app/pages/faq/self-hosting/self-hosting-page.html

@@ -145,7 +145,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false" /></a
           >), <code>MANUAL</code>, and <code>YAHOO</code> are officially
           supported while all other data providers are considered
@@ -166,7 +166,7 @@
             target="_blank"
             [href]="pricingUrl"
             >Ghostfolio Premium<gf-premium-indicator
-              class="d-inline-block ml-1"
+              class="d-inline-block ms-1"
               [enableLink]="false"
           /></a>
           subscription via an API key.</mat-card-content

apps/client/src/app/pages/features/features-page.html

@@ -140,7 +140,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Calculations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -160,7 +160,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Portfolio Allocations</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -178,7 +178,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Static Analysis</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -196,7 +196,7 @@
                 <h4 class="gf-text-wrap-balance">
                   <span i18n>Watchlist</span>
                   @if (hasPermissionForSubscription) {
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   }
                 </h4>
                 <p class="m-0">
@@ -214,11 +214,11 @@
                   <span class="gf-text-wrap-balance">
                     <span>Ghostfolio MCP</span>
                     @if (hasPermissionForSubscription) {
-                      <gf-premium-indicator class="d-inline-block ml-1" />
+                      <gf-premium-indicator class="d-inline-block ms-1" />
                     }
                   </span>
                   <span
-                    class="badge badge-pill badge-secondary ml-auto text-uppercase"
+                    class="badge bg-secondary ms-auto px-2 rounded-pill text-uppercase"
                     i18n
                     >new</span
                   >
@@ -238,7 +238,7 @@
                 <div class="flex-grow-1">
                   <h4 class="gf-text-wrap-balance">
                     <span i18n>Market Mood</span>
-                    <gf-premium-indicator class="d-inline-block ml-1" />
+                    <gf-premium-indicator class="d-inline-block ms-1" />
                   </h4>
                   <p class="m-0">
                     Check the current market mood (<a

apps/client/src/app/pages/landing/landing-page.html

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col text-center">
       <div>
-        <h1 class="font-weight-bold gf-text-wrap-balance intro" i18n>
+        <h1 class="fw-bold gf-text-wrap-balance intro" i18n>
           Manage your wealth like a boss
         </h1>
       </div>
@@ -177,43 +177,43 @@
       </p>
       <ul class="list-unstyled">
         <li class="d-flex mb-3">
-          <span class="mr-3">💼 </span
+          <span class="me-3">💼 </span
           ><span i18n
             >trading stocks, ETFs or cryptocurrencies on multiple
             platforms</span
           >
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🏦</span
+          <span class="me-3">🏦</span
           ><span i18n>pursuing a buy & hold strategy</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🎯</span
+          <span class="me-3">🎯</span
           ><span i18n
             >interested in getting insights of your portfolio composition</span
           >
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">👻</span
+          <span class="me-3">👻</span
           ><span i18n>valuing privacy and data ownership</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🧘</span><span i18n>into minimalism</span>
+          <span class="me-3">🧘</span><span i18n>into minimalism</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🧺</span
+          <span class="me-3">🧺</span
           ><span i18n>caring about diversifying your financial resources</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🆓</span
+          <span class="me-3">🆓</span
           ><span i18n>interested in financial independence</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">🙅</span
+          <span class="me-3">🙅</span
           ><span i18n>saying no to spreadsheets in {{ currentYear }}</span>
         </li>
         <li class="d-flex mb-3">
-          <span class="mr-3">😎</span><span i18n>still reading this list</span>
+          <span class="me-3">😎</span><span i18n>still reading this list</span>
         </li>
       </ul>
       <div class="mt-4 text-center">
@@ -236,7 +236,7 @@
           <div #carouselItem gfCarouselItem>
             <div class="d-flex px-4">
               <gf-logo
-                class="mr-3 mt-2 pt-1"
+                class="me-3 mt-2 pt-1"
                 size="medium"
                 [showLabel]="false"
               />
@@ -291,12 +291,12 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>Sign up anonymously*</div>
+              <div class="fw-bold" i18n>Sign up anonymously*</div>
               <div class="text-muted" i18n>
                 <small>* no e-mail address nor credit card required</small>
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">1</div>
+            <div class="ps-2 text-end text-muted">1</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -304,11 +304,11 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>
+              <div class="fw-bold" i18n>
                 Add any of your historical transactions
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">2</div>
+            <div class="ps-2 text-end text-muted">2</div>
           </mat-card-content>
         </mat-card>
       </div>
@@ -316,11 +316,11 @@
         <mat-card appearance="outlined" class="h-100">
           <mat-card-content class="d-flex flex-row">
             <div class="flex-grow-1">
-              <div class="font-weight-bold" i18n>
+              <div class="fw-bold" i18n>
                 Get valuable insights of your portfolio composition
               </div>
             </div>
-            <div class="pl-2 text-muted text-right">3</div>
+            <div class="ps-2 text-end text-muted">3</div>
           </mat-card-content>
         </mat-card>
       </div>

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -142,7 +142,7 @@
           [matDatepicker]="date"
           [matDatepickerFilter]="dateFilter"
         />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -193,7 +193,7 @@
           </mat-label>
           <input formControlName="unitPrice" matInput type="number" />
           <div
-            class="ml-2"
+            class="ms-2"
             matTextSuffix
             [class.d-none]="!activityForm.get('currency')?.value"
           >
@@ -215,7 +215,7 @@
           isToday(activityForm.get('date')?.value)
         ) {
           <button
-            class="ml-2 mt-1 no-min-width"
+            class="ms-2 mt-1 no-min-width"
             i18n-title
             mat-button
             title="Apply current market price"
@@ -239,7 +239,7 @@
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />
         <div
-          class="ml-2"
+          class="ms-2"
           matTextSuffix
           [class.d-none]="!activityForm.get('currency')?.value"
         >

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -99,7 +99,7 @@
             }
             <p class="mb-0 mt-3 text-center">
               <small>
-                <span class="mr-1" i18n
+                <span class="me-1" i18n
                   >The following file formats are supported:</span
                 >
                 <a
@@ -108,7 +108,7 @@
                   >CSV</a
                 >
                 @if (isGhostfolioAiEnabled) {
-                  <span class="mr-1">, JPG,</span>
+                  <span class="me-1">, JPG,</span>
                 } @else {
                   <span class="mx-1" i18n>or</span>
                 }
@@ -165,9 +165,9 @@
             @if (rowsWithoutMatch.length > 0) {
               <mat-accordion class="d-block mb-3" displayMode="flat">
                 <mat-expansion-panel>
-                  <mat-expansion-panel-header class="pl-1">
+                  <mat-expansion-panel-header class="ps-1">
                     <mat-panel-title>
-                      <div class="align-items-center d-flex mr-2">
+                      <div class="align-items-center d-flex me-2">
                         <ion-icon name="warning-outline" />
                       </div>
                       <ng-container i18n>{rowsWithoutMatch.length, plural,
@@ -188,8 +188,8 @@
               </mat-accordion>
             }
             @if (isMaxActivitiesOfGhostfolioAiReached) {
-              <div class="align-items-center d-flex mb-3 pl-1">
-                <ion-icon class="mr-2" name="warning-outline" />
+              <div class="align-items-center d-flex mb-3 ps-1">
+                <ion-icon class="me-2" name="warning-outline" />
                 <span i18n
                   >Ghostfolio AI has processed the maximum of
                   {{ maxActivitiesOfGhostfolioAi }} activities. The file can
@@ -223,7 +223,7 @@
               <ng-container i18n>Back</ng-container>
             </button>
             <button
-              class="ml-1"
+              class="ms-1"
               color="primary"
               mat-flat-button
               [disabled]="!selectedActivities?.length"
@@ -237,10 +237,10 @@
             <mat-accordion displayMode="flat">
               @for (message of errorMessages; track message; let i = $index) {
                 <mat-expansion-panel [disabled]="!details[i]">
-                  <mat-expansion-panel-header class="pl-1">
+                  <mat-expansion-panel-header class="ps-1">
                     <mat-panel-title class="w-100">
                       <div class="d-flex w-100">
-                        <div class="align-items-center d-flex mr-2">
+                        <div class="align-items-center d-flex me-2">
                           <ion-icon name="warning-outline" />
                         </div>
                         <div class="text-truncate" title="{{ message }}">
@@ -261,7 +261,7 @@
               <ng-container i18n>Back</ng-container>
             </button>
             <button
-              class="ml-1"
+              class="ms-1"
               color="primary"
               mat-flat-button
               [disabled]="true"

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -59,7 +59,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Currency</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -81,7 +81,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Asset Class</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -126,7 +126,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Sector</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -149,7 +149,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Continent</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -171,7 +171,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Market</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -194,7 +194,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>Regions</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -262,7 +262,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By Country</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -304,7 +304,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By ETF Provider</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
         </mat-card-header>
@@ -329,7 +329,7 @@
           <mat-card-title class="align-items-center d-flex text-truncate">
             <span i18n>By ETF Holding</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </mat-card-title>
           <mat-card-subtitle>

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -26,16 +26,16 @@
               >
                 <span class="align-items-center d-flex">
                   @if (user?.subscription?.type === 'Basic') {
-                    <gf-premium-indicator class="mr-2" />
+                    <gf-premium-indicator class="me-2" />
                   } @else {
                     @if (isLoadingPortfolioPrompt) {
                       <mat-spinner
-                        class="mr-2"
+                        class="me-2"
                         color="accent"
                         [diameter]="16"
                       />
                     } @else {
-                      <ion-icon class="mr-2" name="copy-outline" />
+                      <ion-icon class="me-2" name="copy-outline" />
                     }
                   }
                   <ng-container i18n
@@ -51,16 +51,16 @@
               >
                 <span class="align-items-center d-flex">
                   @if (user?.subscription?.type === 'Basic') {
-                    <gf-premium-indicator class="mr-2" />
+                    <gf-premium-indicator class="me-2" />
                   } @else {
                     @if (isLoadingAnalysisPrompt) {
                       <mat-spinner
-                        class="mr-2"
+                        class="me-2"
                         color="accent"
                         [diameter]="16"
                       />
                     } @else {
-                      <ion-icon class="mr-2" name="copy-outline" />
+                      <ion-icon class="me-2" name="copy-outline" />
                     }
                   }
                   <ng-container i18n
@@ -152,11 +152,11 @@
         <mat-card-content>
           <div class="d-flex py-1">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>Absolute Asset Performance</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -171,8 +171,8 @@
               />
             </div>
           </div>
-          <div class="d-flex mb-3 ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex mb-3 ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Asset Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -189,11 +189,11 @@
           </div>
           <div class="d-flex py-1">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>Absolute Currency Performance</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -213,8 +213,8 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Currency Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -236,7 +236,7 @@
           </div>
           <div><hr /></div>
           <div class="d-flex py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Absolute Net Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -251,15 +251,15 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>Net Performance</ng-container>
               @if (
                 user?.settings?.performanceCalculationType ===
                 PerformanceCalculationType.ROAI
               ) {
                 <abbr
-                  class="d-none d-sm-inline-block initialism ml-2 text-muted"
+                  class="d-none d-sm-inline-block initialism ms-2 text-muted"
                   i18n-title
                   title="Return on Average Investment (total return with dividends)"
                   >(ROAI)</abbr
@@ -280,13 +280,13 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1 text-muted">
+          <div class="d-flex ms-3 py-1 text-muted">
             <div
-              class="align-items-center d-flex flex-grow-1 mr-2 text-truncate"
+              class="align-items-center d-flex flex-grow-1 me-2 text-truncate"
             >
               <span i18n>thereof Dividend</span>
               @if (user?.subscription?.type === 'Basic') {
-                <gf-premium-indicator class="ml-1" />
+                <gf-premium-indicator class="ms-1" />
               }
             </div>
             <div class="d-flex justify-content-end">
@@ -301,8 +301,8 @@
               />
             </div>
           </div>
-          <div class="d-flex ml-3 py-1 text-muted">
-            <div class="flex-grow-1 mr-2 text-truncate">
+          <div class="d-flex ms-3 py-1 text-muted">
+            <div class="flex-grow-1 me-2 text-truncate">
               <ng-container i18n>thereof Dividend Performance</ng-container>
             </div>
             <div class="d-flex justify-content-end">
@@ -330,7 +330,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="holdings mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ms-1 ps-3">
             @for (holding of top3; track holding) {
               <li class="py-1">
                 <a
@@ -342,7 +342,7 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 name">
+                  <div class="flex-grow-1 me-2 name">
                     <span class="align-top d-inline-block mw-100 text-truncate">
                       {{ holding.assetProfile.name }}
                     </span>
@@ -383,7 +383,7 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <ol class="holdings mb-0 ml-1 pl-3">
+          <ol class="holdings mb-0 ms-1 ps-3">
             @for (holding of bottom3; track holding) {
               <li class="py-1">
                 <a
@@ -395,7 +395,7 @@
                   }"
                   [routerLink]="[]"
                 >
-                  <div class="flex-grow-1 mr-2 name">
+                  <div class="flex-grow-1 me-2 name">
                     <span class="align-top d-inline-block mw-100 text-truncate">
                       {{ holding.assetProfile.name }}
                     </span>
@@ -439,7 +439,7 @@
           >
             <span i18n>Performance Timeline</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </div>
         </div>
@@ -467,7 +467,7 @@
         >
           <span i18n>Portfolio Evolution</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
       </div>
@@ -495,7 +495,7 @@
         >
           <span i18n>Investment Timeline</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
         <gf-toggle
@@ -553,7 +553,7 @@
         >
           <span i18n>Dividend Timeline</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </div>
         <gf-toggle

apps/client/src/app/pages/portfolio/fire/fire-page.html

@@ -6,7 +6,7 @@
         <h4 class="align-items-center d-flex mb-3">
           <span i18n>Calculator</span>
           @if (user?.subscription?.type === 'Basic') {
-            <gf-premium-indicator class="ml-1" />
+            <gf-premium-indicator class="ms-1" />
           }
         </h4>
         <gf-fire-calculator
@@ -41,7 +41,7 @@
     <h4 class="align-items-center d-flex">
       <span i18n>Sustainable retirement income</span>
       @if (user?.subscription?.type === 'Basic') {
-        <gf-premium-indicator class="ml-1" />
+        <gf-premium-indicator class="ms-1" />
       }
     </h4>
     @if (isLoading) {
@@ -67,7 +67,7 @@
         <div class="mb-2">
           <ng-container i18n
             >If you retire today, you would be able to withdraw
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -82,7 +82,7 @@
               per year</span
             >
             or
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -96,7 +96,7 @@
               />
               per month</span
             >, based on your total assets of
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isCurrency]="true"
@@ -116,7 +116,7 @@
             user?.settings?.isExperimentalFeatures
           ) {
             <select
-              class="border-0 cursor-pointer d-inline-block font-weight-bold safe-withdrawal-rate-select"
+              class="border-0 cursor-pointer d-inline-block fw-bold safe-withdrawal-rate-select"
               [formControl]="safeWithdrawalRateControl"
             >
               @for (rate of safeWithdrawalRateOptions; track rate) {
@@ -127,7 +127,7 @@
             >.
           } @else {
             <ng-container>&nbsp;</ng-container>
-            <span class="font-weight-bold"
+            <span class="fw-bold"
               ><gf-value
                 class="d-inline-block"
                 [isPercent]="true"
@@ -141,9 +141,9 @@
         @if (user?.settings?.isExperimentalFeatures) {
           <div>
             <ng-container i18n
-              >By <span class="font-weight-bold">{{ retirementDateLabel }}</span
+              >By <span class="fw-bold">{{ retirementDateLabel }}</span
               >, this is projected to increase to
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isCurrency]="true"
@@ -158,7 +158,7 @@
                 per year</span
               >
               or
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isCurrency]="true"
@@ -172,7 +172,7 @@
                 />
                 per month</span
               >, assuming a
-              <span class="font-weight-bold"
+              <span class="fw-bold"
                 ><gf-value
                   class="d-inline-block"
                   [isPercent]="true"

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.html

@@ -19,7 +19,7 @@
           <div class="d-flex">
             <ngx-skeleton-loader
               animation="pulse"
-              class="mr-2"
+              class="me-2"
               [theme]="{
                 height: '2rem',
                 width: '2rem'
@@ -36,7 +36,7 @@
           </div>
         } @else {
           <div
-            class="align-items-center d-flex icon-container mr-2 px-2"
+            class="align-items-center d-flex icon-container me-2 px-2"
             [class]="{
               okay:
                 statistics?.rulesFulfilledCount ===
@@ -71,7 +71,7 @@
           <h4 class="align-items-center d-flex m-0">
             <span>{{ category.name }}</span>
             @if (user?.subscription?.type === 'Basic') {
-              <gf-premium-indicator class="ml-1" />
+              <gf-premium-indicator class="ms-1" />
             }
           </h4>
           <gf-rules

apps/client/src/app/pages/pricing/pricing-page.html

@@ -31,42 +31,42 @@
                     <ng-container>&nbsp;</ng-container>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span>Ghostfolio MCP</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Data Import and Export</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipOSS"
                     >
@@ -74,19 +74,19 @@
                     </span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Community Support</span>
                   </li>
                 </ul>
               </div>
               <p i18n>Self-hosted, update manually.</p>
-              <p class="h5 text-right" i18n>Free</p>
+              <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block hidden mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
@@ -115,7 +115,7 @@
                   <h4 class="flex-grow-1 m-0">Basic</h4>
                   @if (user?.subscription?.type === 'Basic') {
                     <div>
-                      <ion-icon class="mr-1" name="checkmark-outline" />
+                      <ion-icon class="me-1" name="checkmark-outline" />
                     </div>
                   }
                 </div>
@@ -127,22 +127,22 @@
                     <ng-container>&nbsp;</ng-container>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Accounts</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Performance</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Data Import and Export</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="importAndExportTooltipBasic"
                     >
@@ -152,7 +152,7 @@
                 </ul>
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
-              <p class="h5 text-right" i18n>Free</p>
+              <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
                 <div class="d-none d-lg-block hidden mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
@@ -177,19 +177,21 @@
           >
             <mat-card-content class="d-flex flex-column h-100">
               @if (label) {
-                <div class="badge-container position-absolute text-right">
-                  <span class="badge badge-warning m-1">{{ label }}</span>
+                <div class="badge-container position-absolute text-end">
+                  <span class="badge bg-warning m-1 text-dark">{{
+                    label
+                  }}</span>
                 </div>
               }
               <div class="flex-grow-1">
                 <div class="align-items-center d-flex mb-2">
                   <h4 class="align-items-center d-flex flex-grow-1 m-0">
                     <span>Premium</span>
-                    <gf-premium-indicator class="ml-1" [enableLink]="false" />
+                    <gf-premium-indicator class="ms-1" [enableLink]="false" />
                   </h4>
                   @if (user?.subscription?.type === 'Premium') {
                     <div>
-                      <ion-icon class="mr-1" name="checkmark-outline" />
+                      <ion-icon class="me-1" name="checkmark-outline" />
                     </div>
                   }
                 </div>
@@ -204,30 +206,30 @@
                     >:
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Summary</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Portfolio Allocations</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Performance Benchmarks</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>FIRE Calculator</span>
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span>Ghostfolio MCP</span>
                   </li>
                   <li class="align-items-center d-flex">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
                     <span
-                      class="align-items-center d-flex ml-1"
+                      class="align-items-center d-flex ms-1"
                       matTooltipPosition="above"
                       [matTooltip]="professionalDataProviderTooltipPremium"
                     >
@@ -236,7 +238,7 @@
                   </li>
                   <li class="align-items-center d-flex line-height-1 mb-1">
                     <ion-icon
-                      class="hidden mr-1"
+                      class="hidden me-1"
                       name="checkmark-circle-outline"
                     />
                     <small
@@ -246,21 +248,21 @@
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"
                       >and more Features...</a
                     >
                   </li>
                   <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
+                    <ion-icon class="me-1" name="checkmark-circle-outline" />
                     <span i18n>Email and Chat Support</span>
                   </li>
                 </ul>
               </div>
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
               @if (price) {
-                <p class="h5 text-right">
-                  <span class="font-weight-normal">
+                <p class="h5 text-end">
+                  <span class="fw-normal">
                     @if (coupon) {
                       <del class="text-muted"
                         >{{ baseCurrency }}&nbsp;{{ price }}</del
@@ -299,7 +301,7 @@
               @if (durationExtension) {
                 <div class="mt-3">
                   <div
-                    class="badge badge-warning font-weight-normal line-height-1 p-3 w-100"
+                    class="badge bg-warning fw-normal line-height-1 p-3 text-dark w-100"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>

apps/client/src/app/pages/register/register-page.html

@@ -35,7 +35,7 @@
               href="../api/v1/auth/google"
               mat-stroked-button
               ><img
-                class="mr-2"
+                class="me-2"
                 src="../assets/icons/google.svg"
                 style="height: 1rem"
               /><span i18n>Continue with Google</span></a

apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>
   <span i18n>Create Account</span>
   @if (role === 'ADMIN') {
-    <span class="badge badge-light ml-2">{{ role }}</span>
+    <span class="badge bg-light ms-2 text-dark">{{ role }}</span>
   }
 </h1>
 <div class="px-0" mat-dialog-content>
@@ -34,7 +34,7 @@
           <ng-container i18n
             >and I agree to the
             <a
-              class="font-weight-bold"
+              class="fw-bold"
               target="_blank"
               [routerLink]="routerLinkAboutTermsOfService"
               >Terms of Service</a
@@ -56,7 +56,7 @@
             (click)="createAccount()"
           >
             <span i18n>Continue</span>
-            <ion-icon class="ml-1" name="arrow-forward-outline" />
+            <ion-icon class="ms-1" name="arrow-forward-outline" />
           </button>
         </div>
       </div>
@@ -78,14 +78,14 @@
           type="text"
           [value]="accessToken"
         ></textarea>
-        <div class="float-right mt-1">
+        <div class="float-end mt-1">
           <button
             color="secondary"
             mat-flat-button
             [cdkCopyToClipboard]="accessToken ?? ''"
             (click)="enableCreateAccountButton()"
           >
-            <ion-icon class="mr-1" name="copy-outline" />
+            <ion-icon class="me-1" name="copy-outline" />
             <span i18n>Copy to clipboard</span>
           </button>
         </div>

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -25,7 +25,7 @@
         <mat-card appearance="outlined" [class.mb-3]="!$last">
           <mat-card-content class="p-0">
             <div class="container p-0">
-              <div class="flex-nowrap no-gutters row">
+              <div class="flex-nowrap g-0 row">
                 <a
                   class="d-flex overflow-hidden p-3 w-100"
                   i18n-title

apps/client/src/app/pages/resources/personal-finance-tools/product-page.html

@@ -68,12 +68,12 @@
             </thead>
             <tbody>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right"></td>
+                <td class="mat-mdc-cell px-3 py-2 text-end"></td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product1().slogan }}</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product2().slogan }}</td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Category</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Category</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     category of product1().categories;
@@ -94,12 +94,12 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Founded</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Founded</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product1().founded }}</td>
                 <td class="mat-mdc-cell px-1 py-2">{{ product2().founded }}</td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Origin</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Origin</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @if (product1().origin; as origin) {
                     <span aria-hidden="true">{{ origin.emojiFlag }}</span
@@ -114,7 +114,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Region</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Region</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @for (
                     region of product1().regions;
@@ -145,7 +145,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Available on
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -168,7 +168,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Available in
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -191,7 +191,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right">
+                <td class="mat-mdc-cell px-3 py-2 text-end">
                   Open Source Software
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -230,7 +230,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Self-Hosting
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -269,7 +269,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>
                   Use anonymously
                 </td>
                 <td class="mat-mdc-cell px-1 py-2">
@@ -308,9 +308,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>
-                  Free Plan
-                </td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Free Plan</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   @if (product1().hasFreePlan === true) {
                     <span
@@ -347,7 +345,7 @@
                 </td>
               </tr>
               <tr class="mat-mdc-row">
-                <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Pricing</td>
+                <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Pricing</td>
                 <td class="mat-mdc-cell px-1 py-2">
                   <span i18n>Starting from</span> ${{ price() }} /
                   <span i18n>year</span>
@@ -362,7 +360,7 @@
               </tr>
               @if (product1().note || product2().note) {
                 <tr class="mat-mdc-row">
-                  <td class="mat-mdc-cell px-3 py-2 text-right" i18n>Notes</td>
+                  <td class="mat-mdc-cell px-3 py-2 text-end" i18n>Notes</td>
                   <td class="mat-mdc-cell px-1 py-2">{{ product1().note }}</td>
                   <td class="mat-mdc-cell px-1 py-2">{{ product2().note }}</td>
                 </tr>
@@ -402,7 +400,7 @@
           <ul class="list-inline">
             @for (tag of tags(); track tag) {
               <li class="list-inline-item">
-                <span class="badge badge-light">{{ tag }}</span>
+                <span class="badge bg-light text-dark">{{ tag }}</span>
               </li>
             }
           </ul>
@@ -410,7 +408,7 @@
         <nav class="d-flex justify-content-between my-5">
           @if (previousProduct()) {
             <a
-              class="font-weight-light link-primary text-decoration-none small"
+              class="fw-light link-primary text-decoration-none small"
               [routerLink]="getProductRouterLink(previousProduct())"
               [title]="getProductTitle(previousProduct())"
               >← <span i18n>Previous</span></a
@@ -420,7 +418,7 @@
           }
           @if (nextProduct()) {
             <a
-              class="font-weight-light link-primary text-decoration-none small"
+              class="fw-light link-primary text-decoration-none small"
               [routerLink]="getProductRouterLink(nextProduct())"
               [title]="getProductTitle(nextProduct())"
               ><span i18n>Next</span> →</a

apps/client/src/styles.scss

@@ -401,12 +401,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-checkbox {
-  label {
-    margin-bottom: 0;
-  }
-}
-
 .mat-mdc-dialog-container {
   .mdc-dialog__content {
     --mat-dialog-supporting-text-color: rgba(var(--dark-primary-text));
@@ -449,7 +443,7 @@ ngx-skeleton-loader {
   }
 
   .mat-mdc-menu-item {
-    &.font-weight-bold {
+    &.fw-bold {
       .mat-mdc-menu-item-text {
         --mat-menu-item-label-text-weight: 700;
       }
@@ -490,10 +484,6 @@ ngx-skeleton-loader {
   min-width: unset !important;
 }
 
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
 .page {
   display: flex;
   overflow-y: auto;
@@ -521,10 +511,6 @@ ngx-skeleton-loader {
   }
 }
 
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
 .text-line-through {
   text-decoration: line-through;
 }

apps/client/src/styles/bootstrap.scss

@@ -29,6 +29,13 @@ $enable-rfs: false;
 $enable-smooth-scroll: false;
 $figure-caption-font-size: 90%;
 $green: #28a745;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
 $grid-gutter-width: 30px;
 $hr-opacity: 1;
 $initialism-font-size: 90%;
@@ -42,95 +49,64 @@ $table-cell-padding-y: 0.75rem;
 @import 'bootstrap/scss/mixins';
 @import 'bootstrap/scss/utilities';
 
-// Compatibility mappings for legacy Bootstrap 4 utility classes
-$utilities: map.merge(
-  $utilities,
-  (
-    'margin-right-compat': (
-      responsive: true,
-      property: margin-right,
-      class: mr,
-      values: map.merge(
-          map.merge(
-            $spacers,
-            (
-              auto: auto
-            )
-          ),
-          negativify-map($spacers)
-        )
-    ),
-    'margin-left-compat': (
-      responsive: true,
-      property: margin-left,
-      class: ml,
-      values: map.merge(
-          map.merge(
-            $spacers,
-            (
-              auto: auto
-            )
-          ),
-          negativify-map($spacers)
-        )
-    ),
-    'padding-right-compat': (
-      responsive: true,
-      property: padding-right,
-      class: pr,
-      values: $spacers
-    ),
-    'padding-left-compat': (
-      responsive: true,
-      property: padding-left,
-      class: pl,
-      values: $spacers
-    ),
-    'text-align-compat': (
-      responsive: true,
-      property: text-align,
-      class: text,
-      values: (
-        left: left,
-        right: right
-      )
-    ),
-    'font-weight-compat': (
-      property: font-weight,
-      class: font-weight,
-      values: (
-        bold: $font-weight-bold,
-        normal: $font-weight-normal,
-        light: $font-weight-light,
-        bolder: $font-weight-bolder,
-        lighter: $font-weight-lighter
-      )
-    ),
-    'font-style-compat': (
-      property: font-style,
-      class: font,
-      values: (
-        italic: italic
-      )
-    ),
-    'float-compat': (
-      responsive: true,
-      property: float,
-      values: (
-        left: left,
-        right: right
-      )
-    ),
-    'font-family-compat': (
-      property: font-family,
-      class: text,
-      values: (
-        monospace: var(--bs-font-monospace)
-      )
-    )
-  )
+// Remove the utility groups that the app does not use
+// (keep 'pointer-events' and 'visibility')
+$unused-utilities: (
+  'align-content',
+  'bg-opacity',
+  'border-color',
+  'border-end',
+  'border-opacity',
+  'border-start',
+  'border-width',
+  'bottom',
+  'column-gap',
+  'end',
+  'flex',
+  'focus-ring',
+  'font-size',
+  'font-style',
+  'gap',
+  'gradient',
+  'line-height',
+  'link-offset',
+  'link-opacity',
+  'link-underline',
+  'link-underline-opacity',
+  'max-height',
+  'min-viewport-height',
+  'min-viewport-width',
+  'object-fit',
+  'opacity',
+  'order',
+  'overflow-y',
+  'rounded-bottom',
+  'rounded-end',
+  'rounded-start',
+  'rounded-top',
+  'row-gap',
+  'shadow',
+  'start',
+  'subtle-background-color',
+  'subtle-border-color',
+  'text-color',
+  'text-opacity',
+  'top',
+  'translate-middle',
+  'user-select',
+  'viewport-height',
+  'viewport-width',
+  'z-index'
 );
 
+@each $key in $unused-utilities {
+  @if not map.has-key($utilities, $key) {
+    @error 'The utility group "#{$key}" does not exist';
+  }
+}
+
+$utilities: map.remove($utilities, $unused-utilities...);
+
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
@@ -170,33 +146,6 @@ $utilities: map.merge(
 // Utilities
 @import 'bootstrap/scss/utilities/api';
 
-// Grid & layout compatibility
-.no-gutters {
-  --bs-gutter-x: 0;
-  --bs-gutter-y: 0;
-}
-
-// Badge compatibility
-.badge-pill {
-  border-radius: var(--bs-border-radius-pill, 50rem);
-  padding-left: 0.6em;
-  padding-right: 0.6em;
-}
-
-.badge-secondary {
-  background-color: var(--bs-secondary);
-}
-
-.badge-light {
-  background-color: var(--bs-light);
-  color: var(--bs-dark);
-}
-
-.badge-warning {
-  background-color: var(--bs-warning);
-  color: var(--bs-dark);
-}
-
 // Typography compatibility
 small,
 .small {

libs/ui/src/lib/access-level-icon/access-level-icon.component.html

@@ -1,19 +1,19 @@
 <span class="align-items-center d-flex">
   @switch (accessLevel()) {
     @case ('CREATE_READ_RESTRICTED_UPDATE_DELETE') {
-      <span aria-hidden="true" class="mr-1">🔏</span>
+      <span aria-hidden="true" class="me-1">🔏</span>
       <ng-container i18n>Restricted view and manage</ng-container>
     }
     @case ('CREATE_READ_UPDATE_DELETE') {
-      <span aria-hidden="true" class="mr-1">🖋️</span>
+      <span aria-hidden="true" class="me-1">🖋️</span>
       <ng-container i18n>View and manage</ng-container>
     }
     @case ('READ') {
-      <span aria-hidden="true" class="mr-1">🔓</span>
+      <span aria-hidden="true" class="me-1">🔓</span>
       <ng-container i18n>View</ng-container>
     }
     @case ('READ_RESTRICTED') {
-      <span aria-hidden="true" class="mr-1">🔒</span>
+      <span aria-hidden="true" class="me-1">🔒</span>
       <ng-container i18n>Restricted view</ng-container>
     }
   }

libs/ui/src/lib/account-balances/account-balances.component.html

@@ -22,7 +22,7 @@
             [matDatepicker]="date"
             [max]="maxDate"
           />
-          <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+          <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
             <ion-icon
               class="text-muted"
               matDatepickerToggleIcon
@@ -35,7 +35,7 @@
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <ng-container i18n>Value</ng-container>
       </th>
       <td *matCellDef="let element" class="px-2" mat-cell>
@@ -52,7 +52,7 @@
         <div class="d-flex justify-content-end">
           <mat-form-field appearance="outline" class="without-hint">
             <input formControlName="balance" matInput type="number" />
-            <div class="ml-2" matTextSuffix>
+            <div class="ms-2" matTextSuffix>
               {{ accountCurrency() }}
             </div>
           </mat-form-field>
@@ -81,7 +81,7 @@
             (click)="onDeleteAccountBalance(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

libs/ui/src/lib/account-selector/account-selector.component.html

@@ -14,7 +14,7 @@
       <div class="align-items-center align-middle d-inline-flex line-height-1">
         @if (selectedAccount()?.platform?.url) {
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [tooltip]="selectedAccount()?.platform?.name ?? ''"
             [url]="selectedAccount()?.platform?.url ?? ''"
           />
@@ -31,7 +31,7 @@
       <mat-option [value]="account.id">
         <div class="align-items-center d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="account.platform?.name ?? ''"
             [url]="account.platform?.url ?? ''"

libs/ui/src/lib/accounts-table/accounts-table.component.html

@@ -6,7 +6,7 @@
       [disabled]="dataSource?.data.length < 2"
       [routerLink]="transferCashBalanceRouterLink"
     >
-      <ion-icon class="mr-2" name="arrow-redo-outline" />
+      <ion-icon class="me-2" name="arrow-redo-outline" />
       <span><ng-container i18n>Transfer Cash Balance</ng-container>...</span>
     </button>
   </div>
@@ -52,7 +52,7 @@
       <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <div class="align-items-center d-flex">
           <gf-entity-logo
-            class="d-sm-none mr-1"
+            class="d-sm-none me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.platform?.name"
             [url]="element.platform?.url"
@@ -100,7 +100,7 @@
       >
         <div class="d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.platform?.name"
             [url]="element.platform?.url"
@@ -125,10 +125,10 @@
         <span class="d-block d-sm-none">#</span>
         <span class="d-none d-sm-block" i18n>Activities</span>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         {{ element.activitiesCount }}
       </td>
-      <td *matFooterCellDef class="px-1 text-right" mat-footer-cell>
+      <td *matFooterCellDef class="px-1 text-end" mat-footer-cell>
         {{ activitiesCount() }}
       </td>
     </ng-container>
@@ -142,7 +142,7 @@
       >
         <ng-container i18n>Quantity</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         <gf-value
           class="d-inline-block justify-content-end"
           [isCurrency]="true"
@@ -164,7 +164,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -176,7 +176,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -199,7 +199,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -211,7 +211,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -234,7 +234,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -246,7 +246,7 @@
       </td>
       <td
         *matFooterCellDef
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-footer-cell
       >
         <gf-value
@@ -269,7 +269,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-cell
       >
         <gf-value
@@ -335,7 +335,7 @@
               [routerLink]="accountDialogRouterLinks().get(element.id)?.detail"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="wallet-outline" />
+                <ion-icon class="me-2" name="wallet-outline" />
                 <span><ng-container i18n>View Details</ng-container>...</span>
               </span>
             </a>
@@ -346,7 +346,7 @@
               [routerLink]="accountDialogRouterLinks().get(element.id)?.update"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -359,7 +359,7 @@
               (click)="onDeleteAccount(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="trash-outline" />
+                <ion-icon class="me-2" name="trash-outline" />
                 <span i18n>Delete</span>
               </span>
             </button>

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -27,7 +27,7 @@
           mat-stroked-button
           (click)="onImport()"
         >
-          <ion-icon class="mr-2" name="cloud-upload-outline" />
+          <ion-icon class="me-2" name="cloud-upload-outline" />
           <span><ng-container i18n>Import Activities</ng-container>...</span>
         </button>
       }
@@ -53,7 +53,7 @@
             (click)="onImportDividends()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="color-wand-outline" />
+              <ion-icon class="me-2" name="color-wand-outline" />
               <span><ng-container i18n>Import Dividends</ng-container>...</span>
             </span>
           </button>
@@ -66,7 +66,7 @@
             (click)="onExport()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="cloud-download-outline" />
+              <ion-icon class="me-2" name="cloud-download-outline" />
               @if (canExportActivities()) {
                 <span i18n
                   >Export {{ (totalItems ?? 0) > 1 ? totalItems : '' }}
@@ -86,7 +86,7 @@
             (click)="onExportDrafts()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="calendar-clear-outline" />
+              <ion-icon class="me-2" name="calendar-clear-outline" />
               <span i18n>Export Drafts as ICS</span>
             </span>
           </button>
@@ -104,7 +104,7 @@
             (click)="onDeleteActivities()"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               @if (canDeleteActivities()) {
                 <span i18n
                   >Delete {{ (totalItems ?? 0) > 1 ? totalItems : '' }}
@@ -188,7 +188,7 @@
         <div class="align-items-center d-flex text-nowrap">
           <span class="text-truncate">{{ element.assetProfile?.name }}</span>
           @if (isDraftActivity(element)) {
-            <span class="badge badge-secondary ml-1" i18n>Draft</span>
+            <span class="badge bg-secondary ms-1" i18n>Draft</span>
           }
         </div>
         @if (
@@ -306,7 +306,7 @@
     <ng-container matColumnDef="value">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Value</ng-container>
@@ -343,7 +343,7 @@
     <ng-container matColumnDef="valueInBaseCurrency">
       <th
         *matHeaderCellDef
-        class="d-lg-none d-xl-none px-1 text-right"
+        class="d-lg-none d-xl-none px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Value</ng-container>
@@ -367,7 +367,7 @@
       <td *matCellDef="let element" class="px-1" mat-cell>
         <div class="d-flex">
           <gf-entity-logo
-            class="mr-1"
+            class="me-1"
             [hasPlaceholder]="true"
             [tooltip]="element.account?.platform?.name"
             [url]="element.account?.platform?.url"
@@ -430,7 +430,7 @@
               (click)="onImport()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="cloud-upload-outline" />
+                <ion-icon class="me-2" name="cloud-upload-outline" />
                 <span
                   ><ng-container i18n>Import Activities</ng-container>...</span
                 >
@@ -444,7 +444,7 @@
               (click)="onImportDividends()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="color-wand-outline" />
+                <ion-icon class="me-2" name="color-wand-outline" />
                 <span
                   ><ng-container i18n>Import Dividends</ng-container>...</span
                 >
@@ -459,7 +459,7 @@
               (click)="onExport()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="cloud-download-outline" />
+                <ion-icon class="me-2" name="cloud-download-outline" />
                 <span i18n>Export Activities</span>
               </span>
             </button>
@@ -472,7 +472,7 @@
               (click)="onExportDrafts()"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <ion-icon class="me-2" name="calendar-clear-outline" />
                 <span i18n>Export Drafts as ICS</span>
               </span>
             </button>
@@ -498,7 +498,7 @@
           @if (canClickActivity(element)) {
             <button mat-menu-item (click)="onClickActivity(element)">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="tablet-landscape-outline" />
+                <ion-icon class="me-2" name="tablet-landscape-outline" />
                 <span><ng-container i18n>View Holding</ng-container>...</span>
               </span>
             </button>
@@ -509,7 +509,7 @@
               [routerLink]="activityDialogRouterLinks().get(element.id)?.update"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="create-outline" />
+                <ion-icon class="me-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
             </a>
@@ -520,7 +520,7 @@
               [routerLink]="activityDialogRouterLinks().get(element.id)?.clone"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="copy-outline" />
+                <ion-icon class="me-2" name="copy-outline" />
                 <span><ng-container i18n>Clone</ng-container>...</span>
               </span>
             </a>
@@ -532,7 +532,7 @@
               (click)="onExportDraft(element.id)"
             >
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="calendar-clear-outline" />
+                <ion-icon class="me-2" name="calendar-clear-outline" />
                 <span i18n>Export Draft as ICS</span>
               </span>
             </button>
@@ -544,7 +544,7 @@
             (click)="onDeleteActivity(element.id)"
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

libs/ui/src/lib/assistant/assistant.html

@@ -4,7 +4,7 @@
     (keydown.tab)="$event.stopPropagation()"
   >
     <div class="align-items-center d-flex search-container">
-      <ion-icon class="ml-2 mr-0" name="search-outline" />
+      <ion-icon class="me-0 ms-2" name="search-outline" />
       <input
         #search
         autocomplete="off"
@@ -55,7 +55,7 @@
             isLoading.quickLinks || searchResults?.quickLinks?.length !== 0
           ) {
             <div class="mb-2">
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Quick Links</ng-container>
               </div>
               @for (
@@ -81,7 +81,7 @@
           }
           @if (isLoading.accounts || searchResults?.accounts?.length !== 0) {
             <div>
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Accounts</ng-container>
               </div>
               @for (
@@ -107,7 +107,7 @@
           }
           @if (isLoading.holdings || searchResults?.holdings?.length !== 0) {
             <div>
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Holdings</ng-container>
               </div>
               @for (
@@ -137,7 +137,7 @@
               searchResults?.assetProfiles?.length !== 0)
           ) {
             <div class="mt-2">
-              <div class="font-weight-bold px-3 text-muted title">
+              <div class="fw-bold px-3 text-muted title">
                 <ng-container i18n>Asset Profiles</ng-container>
               </div>
               @for (

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -41,7 +41,7 @@
     <ng-container matColumnDef="trend50d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>50-Day Trend</ng-container>
@@ -70,7 +70,7 @@
     <ng-container matColumnDef="trend200d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>200-Day Trend</ng-container>
@@ -99,7 +99,7 @@
     <ng-container matColumnDef="date">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-1 text-right"
+        class="d-none d-lg-table-cell px-1 text-end"
         mat-header-cell
       >
         <ng-container i18n>Last All Time High</ng-container>
@@ -133,7 +133,7 @@
         >
         <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
       </th>
-      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-end" mat-cell>
         @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
             class="d-inline-block justify-content-end"
@@ -193,7 +193,7 @@
             "
           >
             <span class="align-items-center d-flex">
-              <ion-icon class="mr-2" name="trash-outline" />
+              <ion-icon class="me-2" name="trash-outline" />
               <span i18n>Delete</span>
             </span>
           </button>

libs/ui/src/lib/currency-selector/currency-selector.component.html

@@ -1,6 +1,6 @@
 @if (countryCodeOfSelectedCurrency) {
   <gf-entity-logo
-    class="flex-shrink-0 mr-1"
+    class="flex-shrink-0 me-1"
     [countryCode]="countryCodeOfSelectedCurrency"
   />
 }
@@ -23,7 +23,7 @@
     <mat-option class="line-height-1" [value]="currency">
       <span class="align-items-center d-flex">
         <gf-entity-logo
-          class="mr-1"
+          class="me-1"
           [countryCode]="getCountryCodeFromCurrency(currency)"
           [hasPlaceholder]="true"
         />

libs/ui/src/lib/fear-and-greed-index/fear-and-greed-index.component.html

@@ -8,15 +8,13 @@
   />
 } @else {
   <div class="align-items-center d-flex flex-row">
-    <div class="h2 mb-0 mr-2">{{ fearAndGreedIndexEmoji() }}</div>
+    <div class="h2 mb-0 me-2">{{ fearAndGreedIndexEmoji() }}</div>
     <div>
       <div class="h4 mb-0">
-        <span class="mr-2">{{ fearAndGreedIndexText() }}</span>
+        <span class="me-2">{{ fearAndGreedIndexText() }}</span>
         @let value = fearAndGreedIndex() | number: '1.0-0';
         <small class="text-muted"
-          ><span [class.font-weight-bold]="value">{{
-            value ?? placeholder
-          }}</span
+          ><span [class.fw-bold]="value">{{ value ?? placeholder }}</span
           >/100</small
         >
       </div>

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -14,7 +14,7 @@
             step="100"
             type="number"
           />
-          <span class="ml-2" matTextSuffix>{{ currency }}</span>
+          <span class="ms-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -25,7 +25,7 @@
             step="0.25"
             type="number"
           />
-          <div class="ml-2" matTextSuffix>%</div>
+          <div class="ms-2" matTextSuffix>%</div>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -39,7 +39,7 @@
             [min]="minDate"
           />
           <mat-datepicker-toggle
-            class="mr-2"
+            class="me-2"
             matSuffix
             [disabled]="hasPermissionToUpdateUserSettings !== true"
             [for]="date"
@@ -66,7 +66,7 @@
             step="100"
             type="number"
           />
-          <span class="ml-2" matTextSuffix>{{ currency }}</span>
+          <span class="ms-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
       </form>
     </div>

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.html

@@ -9,7 +9,7 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Date</mat-label>
         <input formControlName="date" matInput [matDatepicker]="date" />
-        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
+        <mat-datepicker-toggle class="me-2" matSuffix [for]="date">
           <ion-icon
             class="text-muted"
             matDatepickerToggleIcon
@@ -23,10 +23,10 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Market Price</mat-label>
         <input formControlName="marketPrice" matInput type="number" />
-        <span class="ml-2" matTextSuffix>{{ data.currency }}</span>
+        <span class="ms-2" matTextSuffix>{{ data.currency }}</span>
       </mat-form-field>
       <button
-        class="ml-2 mt-1 no-min-width"
+        class="ms-2 mt-1 no-min-width"
         i18n-title
         mat-button
         title="Fetch market price"

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.html

@@ -1,7 +1,7 @@
 <div>
   @for (itemByMonth of marketDataByMonth | keyvalue; track itemByMonth) {
     <div class="d-flex">
-      <div class="date mr-1 text-nowrap">{{ itemByMonth.key }}</div>
+      <div class="date me-1 text-nowrap">{{ itemByMonth.key }}</div>
       <div class="align-items-center d-flex flex-grow-1 px-1">
         @for (day of days; track day) {
           <div

libs/ui/src/lib/logo/logo.component.html

@@ -1,5 +1,5 @@
 <span class="align-items-center d-flex"
-  ><span class="d-inline-block logo" [class.mr-1]="showLabel"></span>
+  ><span class="d-inline-block logo" [class.me-1]="showLabel"></span>
   @if (showLabel) {
     <span class="label">{{ label ?? 'Ghostfolio' }}</span>
   }

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -20,8 +20,8 @@
         <div class="mt-5">
           <div class="heading text-muted" i18n>API Key</div>
           <div class="align-items-center d-flex">
-            <div class="text-monospace value">* * * * * * * * *</div>
-            <div class="ml-1">
+            <div class="font-monospace value">* * * * * * * * *</div>
+            <div class="ms-1">
               <button
                 class="bg-transparent no-min-width"
                 i18n-title

libs/ui/src/lib/notifications/prompt-dialog/prompt-dialog.html

@@ -9,7 +9,7 @@
     }
     <input matInput [formControl]="formControl" />
     @if (valueSuffix) {
-      <span class="ml-2" matTextSuffix>{{ valueSuffix }}</span>
+      <span class="ms-2" matTextSuffix>{{ valueSuffix }}</span>
     }
   </mat-form-field>
 </div>

libs/ui/src/lib/page-tabs/page-tabs.component.html

@@ -21,7 +21,7 @@
             *ngTemplateOutlet="tabContent; context: { $implicit: tab }"
           />
           <ion-icon
-            class="d-none d-sm-block external-link-icon ml-auto text-muted"
+            class="d-none d-sm-block external-link-icon ms-auto text-muted"
             name="open-outline"
           />
         </button>
@@ -45,14 +45,16 @@
 </nav>
 
 <ng-template #tabContent let-tab>
-  <span class="align-items-center d-flex justify-content-start text-left w-100">
+  <span
+    class="align-items-center d-flex justify-content-start text-start w-100"
+  >
     <ion-icon
       class="flex-shrink-0"
       [name]="tab.iconName"
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
     <span
-      class="d-none d-sm-block line-height-normal ml-1 overflow-hidden p-0 text-truncate"
+      class="d-none d-sm-block line-height-normal ms-1 overflow-hidden p-0 text-truncate"
       [innerHTML]="tab.label"
     ></span>
   </span>

libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html

@@ -22,7 +22,7 @@
         <span class="align-items-center d-flex line-height-1"
           ><span>{{ lookupItem.name }}</span>
           @if (lookupItem.dataProviderInfo.isPremium) {
-            <gf-premium-indicator class="ml-1" [enableLink]="false" />
+            <gf-premium-indicator class="ms-1" [enableLink]="false" />
           }
         </span>
         <small class="text-muted"

libs/ui/src/lib/tags-selector/tags-selector.component.html

@@ -58,7 +58,7 @@
           @if (hasPermissionToCreateTag && tagNameToCreate()) {
             <mat-option [value]="tagNameToCreate()">
               <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="add-circle-outline" />
+                <ion-icon class="me-2" name="add-circle-outline" />
                 <ng-container i18n>Create</ng-container> "{{
                   tagNameToCreate()
                 }}"

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -21,7 +21,7 @@
     </ng-container>
 
     <ng-container matColumnDef="valueInBaseCurrency">
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <ng-container i18n>Value</ng-container>
       </th>
       <td *matCellDef="let element" class="px-2" mat-cell>
@@ -36,7 +36,7 @@
     </ng-container>
 
     <ng-container matColumnDef="allocationInPercentage" stickyEnd>
-      <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
+      <th *matHeaderCellDef class="px-2 text-end" mat-header-cell>
         <span class="d-none d-sm-block" i18n>Allocation</span>
         <span class="d-block d-sm-none" i18n-title title="Allocation">%</span>
       </th>

libs/ui/src/lib/value/value.component.html

@@ -1,5 +1,5 @@
 @if (icon) {
-  <div class="align-self-center mr-3">
+  <div class="align-self-center me-3">
     <ion-icon class="h3 m-0" [name]="icon" />
   </div>
 }
@@ -12,7 +12,7 @@
   <ng-template #copyIcon>
     @if (enableCopyToClipboardButton) {
       <button
-        class="ml-1 no-height no-min-width p-1"
+        class="ms-1 no-height no-min-width p-1"
         mat-button
         type="button"
         [title]="isCopied ? copiedTitle : copyToClipboardTitle"
@@ -44,26 +44,26 @@
       @if (isNumber || value === null) {
         @if (colorizeSign && !useAbsoluteValue && value !== null) {
           @if (+value > 0) {
-            <div class="mr-1 text-success">+</div>
+            <div class="me-1 text-success">+</div>
           }
           @if (+value < 0) {
-            <div class="mr-1 text-danger">-</div>
+            <div class="me-1 text-danger">-</div>
           }
         }
         <div
           class="mb-0 value"
-          [class.font-weight-bold]="size === 'large'"
+          [class.fw-bold]="size === 'large'"
           [class.h2]="size === 'large'"
           [class.h4]="size === 'medium'"
         >
           @if (value === null) {
-            <span class="text-monospace text-muted">*****</span>
+            <span class="font-monospace text-muted">*****</span>
           } @else {
             {{ formattedValue }}
           }
         </div>
         @if (isPercent || unit) {
-          <div class="ml-1">
+          <div class="ms-1">
             {{ isPercent ? '%' : unit }}
           </div>
         }
@@ -71,7 +71,7 @@
       @if (isString) {
         <div
           class="mb-0 text-truncate value"
-          [class.font-weight-bold]="size === 'large'"
+          [class.fw-bold]="size === 'large'"
           [class.h2]="size === 'large'"
           [class.h4]="size === 'medium'"
         >