Various frontend improvements (#137)

* Various frontend improvements

* Clean up import

apps/client/src/app/components/header/header.component.html

@@ -136,6 +136,7 @@
         <hr class="m-0" />
       </ng-container>
       <a
+        *ngIf="user?.settings?.viewMode === 'DEFAULT'"
         class="d-block d-sm-none"
         i18n
         mat-menu-item

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

@@ -25,6 +25,11 @@
                 Valid until {{ user.subscription.expiresAt | date:
                 defaultDateFormat }}
               </div>
+              <div *ngIf="!user.subscription.expiresAt">
+                <button color="primary" disabled i18n mat-flat-button>
+                  Upgrade
+                </button>
+              </div>
             </div>
           </div>
           <div class="d-flex mt-4 py-1">

apps/client/src/app/pages/account/account-page.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -17,6 +18,7 @@ import { AccountPageComponent } from './account-page.component';
     CommonModule,
     FormsModule,
     GfPortfolioAccessTableModule,
+    MatButtonModule,
     MatCardModule,
     MatFormFieldModule,
     MatSelectModule,

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -5,7 +5,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { AdminData, User } from '@ghostfolio/common/interfaces';
-import { formatDistanceToNowStrict, isValid, parseISO, sub } from 'date-fns';
+import { formatDistanceToNowStrict, isValid, parseISO } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -76,16 +76,11 @@ export class AdminPageComponent implements OnInit {
 
   public formatDistanceToNow(aDateString: string) {
     if (aDateString) {
-      const distanceString = formatDistanceToNowStrict(
+      const distanceString = formatDistanceToNowStrict(parseISO(aDateString), {
-        sub(parseISO(aDateString), { seconds: 10 }),
+        addSuffix: true
-        {
+      });
-          addSuffix: true
-        }
-      );
 
-      return distanceString === 'less than a minute ago'
+      return distanceString === '0 seconds ago' ? 'just now' : distanceString;
-        ? 'just now'
-        : distanceString;
     }
 
     return '';

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

@@ -2,17 +2,21 @@
   <div class="row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Pricing Plans</h3>
-      <p>
+      <mat-card class="mb-4">
-        Our official
+        <mat-card-content>
-        <strong>Ghostfolio</strong> cloud offering is the easiest way to get
+          <p>
-        started. Due to the time it saves, this will be the best option for most
+            Our official
-        people. The revenue is used for covering the hosting costs.
+            <strong>Ghostfolio</strong> cloud offering is the easiest way to get
-      </p>
+            started. Due to the time it saves, this will be the best option for
-      <p class="mb-5">
+            most people. The revenue is used for covering the hosting costs.
-        If you prefer to run <strong>Ghostfolio</strong> on your own
+          </p>
-        infrastructure, please find the source code and further instructions on
+          <p>
-        <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+            If you prefer to run <strong>Ghostfolio</strong> on your own
-      </p>
+            infrastructure, please find the source code and further instructions
+            on <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+          </p>
+        </mat-card-content>
+      </mat-card>
       <div class="row">
         <div class="col-xs-12 col-md-4 mb-3">
           <mat-card class="d-flex flex-column h-100">

apps/client/src/styles.scss

@@ -126,14 +126,16 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-card-header-text {
+.mat-card {
-  margin: 0 !important;
+  &:not([class*='mat-elevation-z']) {
+    border: 1px solid
+      rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
+    box-shadow: none;
+  }
 }
 
-.mat-card:not([class*='mat-elevation-z']) {
+.mat-card-header-text {
-  border: 1px solid
+  margin: 0 !important;
-    rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
-  box-shadow: none;
 }
 
 .mat-row {