Task/replace custom utility classes with Bootstrap utilities (#8169)

Replace custom utility classes with Bootstrap utilities

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

@@ -19,12 +19,16 @@
               <div class="align-items-center d-flex text-nowrap">
                 <span
                   class="d-none d-sm-inline-block font-monospace"
-                  [class.text-line-through]="element.role === 'INACTIVE'"
+                  [class.text-decoration-line-through]="
+                    element.role === 'INACTIVE'
+                  "
                   >{{ element.id }}</span
                 >
                 <span
                   class="d-inline-block d-sm-none font-monospace"
-                  [class.text-line-through]="element.role === 'INACTIVE'"
+                  [class.text-decoration-line-through]="
+                    element.role === 'INACTIVE'
+                  "
                   >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
                 @if (element.subscription?.expiresAt) {
@@ -200,7 +204,7 @@
                       [title]="translate(element.lastRequestClient)"
                     />
                   } @else {
-                    <ion-icon class="hidden me-1" />
+                    <ion-icon class="invisible me-1" />
                   }
                   {{
                     formatRelativeTime({

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

@@ -166,7 +166,7 @@
     <div class="flex-grow-1 pt-0" mat-dialog-content>
       <div class="align-items-center d-flex h-100 justify-content-center">
         <gf-membership-card
-          class="gf-pointer-events-none"
+          class="pe-none"
           [name]="data?.user?.subscription?.type"
         />
       </div>

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

@@ -88,7 +88,7 @@
               <p i18n>Self-hosted, update manually.</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">
+                <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
                   <p class="m-0 text-muted">
                     <small>&nbsp;</small>
@@ -96,7 +96,7 @@
                 </div>
               }
               @if (durationExtension) {
-                <div class="d-none d-lg-block hidden mt-3">
+                <div class="d-none d-lg-block invisible mt-3">
                   <div class="badge p-3 w-100">&nbsp;</div>
                 </div>
               }
@@ -154,7 +154,7 @@
               <p i18n>Fully managed Ghostfolio cloud offering.</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">
+                <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
                   <p class="m-0 text-muted">
                     <small>&nbsp;</small>
@@ -162,7 +162,7 @@
                 </div>
               }
               @if (durationExtension) {
-                <div class="d-none d-lg-block hidden mt-3">
+                <div class="d-none d-lg-block invisible mt-3">
                   <div class="badge p-3 w-100">&nbsp;</div>
                 </div>
               }
@@ -238,7 +238,7 @@
                   </li>
                   <li class="align-items-center d-flex line-height-1 mb-1">
                     <ion-icon
-                      class="hidden me-1"
+                      class="invisible me-1"
                       name="checkmark-circle-outline"
                     />
                     <small

apps/client/src/styles.scss

@@ -349,10 +349,6 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
-.gf-pointer-events-none {
-  pointer-events: none;
-}
-
 .gf-spacer {
   flex: 1 1 auto;
 }
@@ -372,10 +368,6 @@ ngx-skeleton-loader {
   }
 }
 
-.hidden {
-  visibility: hidden;
-}
-
 .lead {
   font-weight: unset;
 }
@@ -511,10 +503,6 @@ ngx-skeleton-loader {
   }
 }
 
-.text-line-through {
-  text-decoration: line-through;
-}
-
 .with-placeholder-as-option {
   .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));

apps/client/src/styles/bootstrap.scss

@@ -50,7 +50,6 @@ $table-cell-padding-y: 0.75rem;
 @import 'bootstrap/scss/utilities';
 
 // Remove the utility groups that the app does not use
-// (keep 'pointer-events' and 'visibility')
 $unused-utilities: (
   'align-content',
   'bg-opacity',

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

@@ -125,7 +125,7 @@
               ></tr>
               <tr
                 *matFooterRowDef="displayedColumns"
-                class="hidden"
+                class="invisible"
                 mat-footer-row
               ></tr>
             </table>