Task/remove more ineffective CSS classes (#8176)

Remove more ineffective CSS classes

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

@@ -24,7 +24,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -49,7 +49,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-body-secondary"
+                      class="text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -74,7 +74,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -99,7 +99,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-body-secondary"
+                      class="text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -124,7 +124,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -149,7 +149,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-body-secondary"
+                      class="text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -176,7 +176,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -200,7 +200,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -226,7 +226,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -252,7 +252,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -279,7 +279,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -305,7 +305,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -331,7 +331,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -357,7 +357,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -383,7 +383,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -409,7 +409,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -434,7 +434,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-body-secondary"
+                      class="text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />
@@ -459,7 +459,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -483,7 +483,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -509,7 +509,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -535,7 +535,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -561,7 +561,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -585,7 +585,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />
@@ -609,7 +609,7 @@
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
-                    class="chevron text-body-secondary"
+                    class="text-body-secondary"
                     name="chevron-forward-outline"
                     size="small"
                   />

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

@@ -33,7 +33,7 @@
       </mat-card>
     </div>
   </div>
-  <div class="proportion-charts row">
+  <div class="row">
     <div class="col-md-4">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">

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

@@ -63,7 +63,7 @@
       </mat-card>
     </div>
   </div>
-  <div class="proportion-charts row">
+  <div class="row">
     <div class="col-md-12 allocations-by-symbol">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">

apps/client/src/app/pages/resources/glossary/resources-glossary.component.html

@@ -3,8 +3,8 @@
     <div class="col">
       <h1 class="h3 mb-4 text-center" i18n>Glossary</h1>
       <div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Buy and Hold</h2>
             <div class="mb-1">
               Buy and hold is a passive investment strategy where you buy assets
@@ -20,8 +20,8 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Deflation</h2>
             <div class="mb-1">
               Deflation is a decrease of the general price level for goods and
@@ -36,8 +36,8 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Dollar-Cost Averaging (DCA)</h2>
             <div class="mb-1">
               Dollar-cost averaging is an investment strategy where you split
@@ -54,8 +54,8 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Financial Independence</h2>
             <div class="mb-1">
               Financial independence is the status of having enough income, for
@@ -71,8 +71,8 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">FIRE</h2>
             <div class="mb-1">
               FIRE is a movement that promotes saving and investing to achieve
@@ -83,8 +83,8 @@
             </div>
           </div>
         </div>
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Inflation</h2>
             <div class="mb-1">
               Inflation is an increase of the general price level for goods and
@@ -100,8 +100,8 @@
           </div>
         </div>
         @if (hasPermissionForSubscription) {
-          <div class="mb-4 media">
-            <div class="media-body">
+          <div class="mb-4">
+            <div>
               <h2 class="h5 mb-1 mt-0">Personal Finance Tools</h2>
               <div class="mb-1">
                 Personal finance tools are software applications that help
@@ -116,8 +116,8 @@
             </div>
           </div>
         }
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Stagflation</h2>
             <div class="mb-1">
               Stagflation describes a situation in which there is a stagnant
@@ -132,8 +132,8 @@
             </div>
           </div>
         </div>
-        <div class="media">
-          <div class="media-body">
+        <div>
+          <div>
             <h2 class="h5 mb-1 mt-0">Stealth Wealth</h2>
             <div class="mb-1">
               Stealth wealth is a lifestyle choice where you don’t openly show

apps/client/src/app/pages/resources/guides/resources-guides.component.html

@@ -3,8 +3,8 @@
     <div class="col">
       <h1 class="h3 mb-4 text-center" i18n>Guides</h1>
       <div class="mb-5">
-        <div class="mb-4 media">
-          <div class="media-body">
+        <div class="mb-4">
+          <div>
             <h2 class="h5 mb-1 mt-0">Boringly Getting Rich</h2>
             <div class="mb-1">
               The <i>Boringly Getting Rich</i> guide supports you to get started
@@ -19,8 +19,8 @@
             </div>
           </div>
         </div>
-        <div class="media">
-          <div class="media-body">
+        <div>
+          <div>
             <h2 class="h5 mb-1 mt-0">How do I get my finances in order?</h2>
             <div class="mb-1">
               Before you can think of long-term investing, you have to get your

apps/client/src/app/pages/resources/markets/resources-markets.component.html

@@ -1,8 +1,8 @@
 <div class="container">
   <h1 class="h3 mb-4 text-center" i18n>Markets</h1>
   <div class="mb-5">
-    <div class="mb-4 media">
-      <div class="media-body">
+    <div class="mb-4">
+      <div>
         <h2 class="h5 mb-1 mt-0">Crypto Coins Heatmap</h2>
         <div class="mb-1">
           With the <i>Crypto Coins Heatmap</i> you can track the daily market
@@ -15,8 +15,8 @@
         </div>
       </div>
     </div>
-    <div class="mb-4 media">
-      <div class="media-body">
+    <div class="mb-4">
+      <div>
         <h2 class="h5 mb-1 mt-0">Fear & Greed Index</h2>
         <div class="mb-1">
           The fear and greed index was developed by <i>CNNMoney</i> to measure
@@ -30,8 +30,8 @@
         </div>
       </div>
     </div>
-    <div class="mb-4 media">
-      <div class="media-body">
+    <div class="mb-4">
+      <div>
         <h2 class="h5 mb-1 mt-0">Inflation Chart</h2>
         <div class="mb-1">
           <i>Inflation Chart</i> helps you find the intrinsic value of stock
@@ -46,8 +46,8 @@
         </div>
       </div>
     </div>
-    <div class="media">
-      <div class="media-body">
+    <div>
+      <div>
         <h2 class="h5 mb-1 mt-0">Stock Heatmap</h2>
         <div class="mb-1">
           With the <i>Stock Heatmap</i> you can track the daily market movements

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

@@ -45,7 +45,7 @@
                   </div>
                   <div class="align-items-center d-flex">
                     <ion-icon
-                      class="chevron text-body-secondary"
+                      class="text-body-secondary"
                       name="chevron-forward-outline"
                       size="small"
                     />

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

@@ -410,7 +410,7 @@
         <nav class="d-flex justify-content-between my-5">
           @if (previousProduct()) {
             <a
-              class="fw-light link-primary text-decoration-none small"
+              class="fw-light text-decoration-none small"
               [routerLink]="getProductRouterLink(previousProduct())"
               [title]="getProductTitle(previousProduct())"
               >← <span i18n>Previous</span></a
@@ -420,7 +420,7 @@
           }
           @if (nextProduct()) {
             <a
-              class="fw-light link-primary text-decoration-none small"
+              class="fw-light text-decoration-none small"
               [routerLink]="getProductRouterLink(nextProduct())"
               [title]="getProductTitle(nextProduct())"
               ><span i18n>Next</span> →</a

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

@@ -25,7 +25,7 @@
           mat-button
           (click)="initialize()"
         >
-          <ion-icon class="m-0" name="close-circle-outline" />
+          <ion-icon name="close-circle-outline" />
         </button>
       } @else {
         <button
@@ -33,7 +33,7 @@
           mat-button
           (click)="onCloseAssistant()"
         >
-          <ion-icon class="m-0" name="close-outline" />
+          <ion-icon name="close-outline" />
         </button>
       }
     </div>