Feature/improvements in pricing page (#1440)

* Improve pricing page

* Update changelog

CHANGELOG.md

@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Removed bottom margin tag from the body element
+- Removed the bottom margin from the body element
+- Improved the pricing page
 
 ## 1.210.0 - 08.11.2022
 

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

@@ -12,7 +12,8 @@
         </p>
         <p *ngIf="user?.subscription?.type === 'Basic'">
           If you plan to open an account at <i>DEGIRO</i>, <i>frankly</i>,
-          <i>Interactive Brokers</i>, <i>Swissquote</i>, or <i>VIAC</i>, please
+          <i>Interactive Brokers</i>, <i>Swissquote</i>, <i>VIAC</i>, or
+          <i>Zak</i>, please
           <a href="mailto:hi@ghostfol.io?Subject=Referral link for..."
             >contact us</a
           >
@@ -26,7 +27,7 @@
         </p>
       </div>
       <div class="row">
-        <div class="col-xs-12 col-md-4 mb-3">
+        <div class="col-xs-12 col-lg-4 mb-3">
           <mat-card class="d-flex flex-column h-100">
             <div class="flex-grow-1">
               <h4>Open Source</h4>
@@ -72,11 +73,20 @@
                 </li>
               </ul>
             </div>
-            <p>Self-hosted.</p>
+            <p>Self-hosted, update manually.</p>
             <p class="h5 text-right">Free</p>
+            <div
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="d-none d-lg-block hidden mt-3 text-center"
+            >
+              <a color="primary" mat-flat-button>&nbsp;</a>
+              <p class="m-0 text-muted">
+                <small>&nbsp;</small>
+              </p>
+            </div>
           </mat-card>
         </div>
-        <div class="col-xs-12 col-md-4 mb-3">
+        <div class="col-xs-12 col-lg-4 mb-3">
           <mat-card
             class="d-flex flex-column h-100"
             [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
@@ -124,9 +134,18 @@
             </div>
             <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
             <p class="h5 text-right">Free</p>
+            <div
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="d-none d-lg-block hidden mt-3 text-center"
+            >
+              <a color="primary" mat-flat-button>&nbsp;</a>
+              <p class="m-0 text-muted">
+                <small>&nbsp;</small>
+              </p>
+            </div>
           </mat-card>
         </div>
-        <div class="col-xs-12 col-md-4 mb-3">
+        <div class="col-xs-12 col-lg-4 mb-3">
           <mat-card
             class="d-flex flex-column h-100"
             [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
@@ -198,24 +217,28 @@
                 >&nbsp;<span>per year</span></span
               >
             </p>
+            <div
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="mt-3 text-center"
+            >
+              <a color="primary" mat-flat-button [routerLink]="['/account']">
+                Upgrade Plan
+              </a>
+              <p class="m-0 text-muted">
+                <small>One-time payment, no auto-renewal.</small>
+              </p>
+            </div>
           </mat-card>
         </div>
       </div>
     </div>
   </div>
-  <div *ngIf="user?.subscription?.type === 'Basic'" class="row">
-    <div class="col mt-3 text-center">
-      <a color="primary" mat-flat-button [routerLink]="['/account']">
-        Upgrade Plan
-      </a>
-    </div>
-  </div>
   <div *ngIf="!user" class="row">
     <div class="col mt-3 text-center">
       <a color="primary" mat-flat-button [routerLink]="['/register']">
         Get Started
       </a>
-      <p class="text-muted"><small>It's free</small></p>
+      <p class="m-0 text-muted"><small>It’s free.</small></p>
     </div>
   </div>
 </div>

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

@@ -12,6 +12,7 @@
   }
 
   .mat-card {
+    &:hover,
     &.active {
       border-color: rgba(var(--palette-primary-500), 1);
       box-shadow: 0 0 0 1px rgba(var(--palette-primary-500), 1);

apps/client/src/styles.scss

@@ -165,6 +165,10 @@ ngx-skeleton-loader {
   @include gf-table;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .lead {
   font-weight: unset;
 }