Task/migrate text utility classes to Bootstrap 5 (#8164)

Migrate text utility classes to Bootstrap 5

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

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

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

@@ -526,10 +526,7 @@
                     <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"
@@ -610,7 +607,7 @@
                       />
                     </mat-form-field>
                   </div>
-                  <div class="text-right">
+                  <div class="text-end">
                     <button
                       color="primary"
                       mat-flat-button
@@ -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-overview/admin-overview.html

@@ -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

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()"

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

@@ -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

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()"

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

@@ -18,12 +18,12 @@
             >
               <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
                 >
@@ -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
@@ -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

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

@@ -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"
@@ -117,7 +115,7 @@
           i18n
           mat-button
           [class]="{
-            'font-weight-bold': currentRoute() === routeAbout,
+            'fw-bold': currentRoute() === routeAbout,
             'text-decoration-underline': currentRoute() === routeAbout
           }"
           [routerLink]="routerLinkAbout"
@@ -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,7 +299,7 @@
             <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">
@@ -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"
@@ -401,7 +393,7 @@
             i18n
             mat-button
             [class]="{
-              'font-weight-bold': currentRoute() === routeMarkets,
+              'fw-bold': currentRoute() === routeMarkets,
               'text-decoration-underline': currentRoute() === routeMarkets
             }"
             [routerLink]="routerLinkMarkets"

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
               >

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

@@ -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"

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

@@ -11,7 +11,7 @@
           <span>Ghostfolio Premium</span>
           <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>
@@ -80,7 +80,7 @@
         </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>
@@ -125,7 +125,7 @@
           <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>

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 badge-pill badge-warning fw-normal px-2 py-1"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>

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

@@ -315,7 +315,7 @@
         </div>
         <div class="ps-1 w-50">
           <gf-value
-            class="text-monospace"
+            class="font-monospace"
             [enableCopyToClipboardButton]="true"
             [isLoading]="isLoading"
             [value]="user?.id"
@@ -324,7 +324,7 @@
       </div>
       <div class="align-items-center d-flex py-1">
         <div class="pe-1 w-50"></div>
-        <div class="ps-1 text-monospace w-50">
+        <div class="font-monospace ps-1 w-50">
           <button color="primary" i18n mat-flat-button (click)="onExport()">
             Export Data
           </button>

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

@@ -219,14 +219,10 @@
                 </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="ms-1">{{ baseCurrency }}</span>
@@ -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/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>
@@ -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="ps-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="ps-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="ps-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/fire/fire-page.html

@@ -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/pricing/pricing-page.html

@@ -86,7 +86,7 @@
                 </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>
@@ -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,7 +177,7 @@
           >
             <mat-card-content class="d-flex flex-column h-100">
               @if (label) {
-                <div class="badge-container position-absolute text-right">
+                <div class="badge-container position-absolute text-end">
                   <span class="badge badge-warning m-1">{{ label }}</span>
                 </div>
               }
@@ -259,8 +259,8 @@
               </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 +299,7 @@
               @if (durationExtension) {
                 <div class="mt-3">
                   <div
-                    class="badge badge-warning font-weight-normal line-height-1 p-3 w-100"
+                    class="badge badge-warning fw-normal line-height-1 p-3 w-100"
                   >
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>

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

@@ -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
@@ -78,7 +78,7 @@
           type="text"
           [value]="accessToken"
         ></textarea>
-        <div class="float-right mt-1">
+        <div class="float-end mt-1">
           <button
             color="secondary"
             mat-flat-button

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>
@@ -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

@@ -443,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;
       }

apps/client/src/styles/bootstrap.scss

@@ -4,8 +4,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-@use 'sass:map';
-
 // Configuration
 @import 'bootstrap/scss/functions';
 
@@ -43,55 +41,6 @@ $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,
-  (
-    '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)
-      )
-    )
-  )
-);
-
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';

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

@@ -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>

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

@@ -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

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

@@ -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>

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

@@ -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"

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

@@ -14,9 +14,7 @@
         <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/membership-card/membership-card.component.html

@@ -20,7 +20,7 @@
         <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="font-monospace value">* * * * * * * * *</div>
             <div class="ms-1">
               <button
                 class="bg-transparent no-min-width"

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

@@ -45,7 +45,9 @@
 </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"

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

@@ -52,12 +52,12 @@
         }
         <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 }}
           }
@@ -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'"
         >