Feature/various improvements on pricing page (#5982)

* Various improvements

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Disabled the action to delete activities if the activities table is empty
 - Improved the validation of the currency management in the admin control panel
+- Improved the content of the pricing page
 - Resolved the data source of the `GHOSTFOLIO` data provider in the export functionality
 - Resolved the data source of the `GHOSTFOLIO` data provider in the import functionality
 - Refreshed the cryptocurrencies list

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

@@ -27,6 +27,9 @@
                   own infrastructure.
                 </p>
                 <ul class="list-unstyled mb-3">
+                  <li class="mb-2">
+                    <ng-container>&nbsp;</ng-container>
+                  </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
@@ -116,6 +119,9 @@
                   For new investors who are just getting started with trading.
                 </p>
                 <ul class="list-unstyled mb-3">
+                  <li class="mb-2">
+                    <ng-container>&nbsp;</ng-container>
+                  </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Unlimited Transactions</span>
@@ -188,17 +194,13 @@
                   financial assets.
                 </p>
                 <ul class="list-unstyled mb-3">
-                  <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-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" />
-                    <span i18n>Unlimited Accounts</span>
-                  </li>
-                  <li class="align-items-center d-flex mb-1">
-                    <ion-icon class="mr-1" name="checkmark-circle-outline" />
-                    <span i18n>Portfolio Performance</span>
+                  <li class="mb-2">
+                    <span
+                      ><ng-container i18n>Everything in</ng-container>
+                      <ng-container>&nbsp;</ng-container>
+                      <strong>Basic</strong>,
+                      <ng-container i18n>plus</ng-container>:</span
+                    >
                   </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
@@ -216,23 +218,7 @@
                     <ion-icon class="mr-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" />
-                    <span i18n>Data Import and Export</span>
-                    <span
-                      class="align-items-center d-flex ml-1"
-                      matTooltipPosition="above"
-                      [matTooltip]="importAndExportTooltipPremium"
-                    >
-                      <ion-icon name="information-circle-outline" />
-                    </span>
-                  </li>
-                  <li
-                    class="align-items-center d-flex"
-                    [ngClass]="{
-                      'mb-1': !user?.settings?.isExperimentalFeatures
-                    }"
-                  >
+                  <li class="align-items-center d-flex">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <span i18n>Professional Data Provider</span>
                     <span
@@ -243,18 +229,17 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
-                  @if (user?.settings?.isExperimentalFeatures) {
                   <li class="align-items-center d-flex line-height-1 mb-1">
                     <ion-icon
                       class="hidden mr-1"
                       name="checkmark-circle-outline"
                     />
-                      <small class="text-muted"
+                    <small
                       ><ng-container i18n>with API access for</ng-container>
-                        Open Source</small
+                      <ng-container>&nbsp;</ng-container>
+                      <strong>Open Source</strong></small
                     >
                   </li>
-                  }
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon class="mr-1" name="checkmark-circle-outline" />
                     <a i18n [routerLink]="routerLinkFeatures"

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

@@ -14,6 +14,10 @@
   }
 
   .mat-mdc-card {
+    transition:
+      border-color 0.5s ease,
+      box-shadow 0.5s ease;
+
     &:hover,
     &.active {
       border-color: rgba(var(--palette-primary-500), 1);