Task/replace custom line height class with Bootstrap utility (#8194)

* Replaced custom line height class

* Replace line-height-normal with lh-normal

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

@@ -87,11 +87,7 @@
             >
               <ng-container i18n>Name</ng-container>
             </th>
-            <td
-              *matCellDef="let element"
-              class="line-height-normal px-1"
-              mat-cell
-            >
+            <td *matCellDef="let element" class="lh-normal px-1" mat-cell>
               <div class="text-truncate">{{ element.name }}</div>
               @if (!isUUID(element.symbol)) {
                 <div>
@@ -110,7 +106,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>
@@ -132,7 +128,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>{{ translate(element.assetClass) }}</div>
@@ -152,7 +148,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>{{ translate(element.assetSubClass) }}</div>

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

@@ -90,7 +90,7 @@
                   }
                 </a>
                 @if (isGhostfolioApiKeyValid === true) {
-                  <div class="line-height-1">
+                  <div class="lh-1">
                     <small class="text-body-secondary">
                       <ng-container i18n>Valid until</ng-container>
                       {{

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="fw-bold line-height-1 logotype">Ghostfolio</div>
+    <div class="fw-bold lh-1 logotype">Ghostfolio</div>
   </div>
 </div>

apps/client/src/app/components/markets/markets.html

@@ -58,7 +58,7 @@
       />
       @if (benchmarks()?.length) {
         <div
-          class="gf-text-wrap-balance line-height-1 mt-3 text-body-secondary text-center"
+          class="gf-text-wrap-balance lh-1 mt-3 text-body-secondary text-center"
         >
           <small i18n>
             Calculations are based on delayed market data and may not be

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

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block"
           ><ng-container i18n>Our</ng-container> OSS Friends</span
         >

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

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="mb-5 row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Blog</span>
         <small class="text-body-secondary" i18n
           >Discover the latest Ghostfolio updates and insights on personal

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

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Features</span>
         <small class="text-body-secondary" i18n>
           Check out the numerous features of Ghostfolio to manage your wealth

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

@@ -21,9 +21,7 @@
             <span
               ><b>{{ typesTranslationMap['BUY'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -31,9 +29,7 @@
             <span
               ><b>{{ typesTranslationMap['FEE'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >One-time fee, annual account fees</small
             >
           </mat-option>
@@ -41,9 +37,7 @@
             <span
               ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Distribution of corporate earnings</small
             >
           </mat-option>
@@ -51,9 +45,7 @@
             <span
               ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Revenue for lending out money</small
             >
           </mat-option>
@@ -61,9 +53,7 @@
             <span
               ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
@@ -71,9 +61,7 @@
             <span
               ><b>{{ typesTranslationMap['SELL'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -81,9 +69,7 @@
             <span
               ><b>{{ typesTranslationMap['VALUABLE'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Luxury items, real estate, private companies</small
             >
           </mat-option>

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

@@ -38,7 +38,6 @@
                 }}</mat-select-trigger>
                 @for (holding of holdings; track holding) {
                   <mat-option
-                    class="line-height-1"
                     [value]="{
                       assetProfile: {
                         dataSource: holding.assetProfile.dataSource,

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

@@ -236,7 +236,7 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
-                  <li class="align-items-center d-flex line-height-1 mb-1">
+                  <li class="align-items-center d-flex lh-1 mb-1">
                     <ion-icon
                       class="invisible me-1"
                       name="checkmark-circle-outline"
@@ -300,9 +300,7 @@
               }
               @if (durationExtension) {
                 <div class="mt-3">
-                  <div
-                    class="badge bg-warning fw-normal line-height-1 p-3 text-dark w-100"
-                  >
+                  <div class="badge bg-warning fw-normal p-3 text-dark w-100">
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
                     <ng-container i18n

apps/client/src/styles.scss

@@ -372,14 +372,6 @@ ngx-skeleton-loader {
   font-weight: unset;
 }
 
-.line-height-1 {
-  line-height: 1;
-}
-
-.line-height-normal {
-  line-height: normal !important;
-}
-
 .mat-mdc-button-base {
   .mdc-button__label {
     align-items: center;

apps/client/src/styles/bootstrap.scss

@@ -67,7 +67,6 @@ $unused-utilities: (
   'font-style',
   'gap',
   'gradient',
-  'line-height',
   'link-offset',
   'link-opacity',
   'link-underline',
@@ -106,6 +105,16 @@ $unused-utilities: (
 
 $utilities: map.remove($utilities, $unused-utilities...);
 
+$utilities: map.set(
+  $utilities,
+  'line-height',
+  'values',
+  (
+    1: 1,
+    normal: normal
+  )
+);
+
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';

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

@@ -11,7 +11,7 @@
     (closed)="onPanelClosed()"
   >
     <mat-select-trigger>
-      <div class="align-items-center align-middle d-inline-flex line-height-1">
+      <div class="align-items-center align-middle d-inline-flex lh-1">
         @if (selectedAccount()?.platform?.url) {
           <gf-entity-logo
             class="me-1"
@@ -36,7 +36,7 @@
             [tooltip]="account.platform?.name ?? ''"
             [url]="account.platform?.url ?? ''"
           />
-          <div class="line-height-1">
+          <div class="lh-1">
             <span>{{ account.name }}</span>
             <br />
             <small class="text-body-secondary">

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

@@ -184,7 +184,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-normal px-1" mat-cell>
+      <td *matCellDef="let element" class="lh-normal px-1" mat-cell>
         <div class="align-items-center d-flex text-nowrap">
           <span class="text-truncate">{{ element.assetProfile?.name }}</span>
           @if (isDraftActivity(element)) {

libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@@ -1,6 +1,6 @@
 <a
   #link
-  class="d-block line-height-1 px-3 py-1 text-truncate"
+  class="d-block lh-1 px-3 py-1 text-truncate"
   [queryParams]="queryParams"
   [routerLink]="routerLink"
   (click)="onClick()"

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

@@ -22,11 +22,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td
-        *matCellDef="let element"
-        class="line-height-normal px-1 text-nowrap"
-        mat-cell
-      >
+      <td *matCellDef="let element" class="lh-normal px-1 text-nowrap" mat-cell>
         <div class="text-truncate">
           {{ element?.name }}
         </div>

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

@@ -20,7 +20,7 @@
   (optionSelected)="onUpdateCurrency($event)"
 >
   @for (currency of filteredCurrencies; track currency) {
-    <mat-option class="line-height-1" [value]="currency">
+    <mat-option [value]="currency">
       <span class="align-items-center d-flex">
         <gf-entity-logo
           class="me-1"

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

@@ -8,7 +8,7 @@
   >
     <span
       aria-hidden="true"
-      class="align-items-center d-flex emoji justify-content-center line-height-1 position-absolute"
+      class="align-items-center d-flex emoji justify-content-center lh-1 position-absolute"
     >
       {{ emojiFlag }}
     </span>

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

@@ -36,7 +36,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="line-height-normal px-1"
+        class="lh-normal px-1"
         mat-cell
         [class.w-100]="mode() === 'simple'"
       >

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

@@ -54,7 +54,7 @@
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
     <span
-      class="d-none d-sm-block line-height-normal ms-1 overflow-hidden p-0 text-truncate"
+      class="d-none d-sm-block lh-normal ms-1 overflow-hidden p-0 text-truncate"
       [innerHTML]="tab.label"
     ></span>
   </span>

libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html

@@ -21,7 +21,7 @@
         <mat-option [value]="null" />
         @for (holding of holdings(); track holding.assetProfile.name) {
           <mat-option [value]="holding">
-            <div class="line-height-1 text-truncate">
+            <div class="lh-1 text-truncate">
               <span>{{ holding.assetProfile.name }}</span>
               <br />
               <small class="text-body-secondary"

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

@@ -15,11 +15,10 @@
   @if (!isLoading) {
     @for (lookupItem of lookupItems; track lookupItem) {
       <mat-option
-        class="line-height-1"
         [disabled]="lookupItem.dataProviderInfo.isPremium"
         [value]="lookupItem"
       >
-        <span class="align-items-center d-flex line-height-1"
+        <span class="align-items-center d-flex lh-1"
           ><span>{{ lookupItem.name }}</span>
           @if (lookupItem.dataProviderInfo.isPremium) {
             <gf-premium-indicator class="ms-1" [enableLink]="false" />
@@ -40,7 +39,7 @@
       </mat-option>
     } @empty {
       @if (control.value?.length > 1) {
-        <mat-option class="line-height-1" disabled="true" i18n
+        <mat-option disabled="true" i18n
           >Oops! Could not find any assets.</mat-option
         >
       }

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

@@ -74,7 +74,7 @@
               <ng-container matColumnDef="name">
                 <td
                   *matCellDef="let parentHolding"
-                  class="line-height-normal px-2"
+                  class="lh-normal px-2"
                   mat-cell
                 >
                   <div class="text-truncate">{{ parentHolding?.name }}</div>