From a0a26cfa584bf96adea072f76df98813ccd67039 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 18 Jun 2022 11:57:27 +0200
Subject: [PATCH] Feature/simplify header (#1027)

* Hide pricing page link for Premium users

* Harmonize content

* Update changelog
---
 CHANGELOG.md                                          |  4 ++++
 .../src/app/components/header/header.component.html   |  8 ++++++--
 apps/client/src/app/pages/about/about-page.html       | 10 +++++-----
 apps/client/src/app/pages/account/account-page.html   |  4 +++-
 apps/client/src/app/pages/account/account-page.scss   |  9 ---------
 apps/client/src/app/pages/landing/landing-page.html   |  5 ++---
 apps/client/src/app/pages/pricing/pricing-page.html   | 11 +++++------
 7 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4fc7ded65..3107f1362 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Simplified the header
+
 ### Fixed
 
 - Fixed an issue with the currency inconsistency in the _Yahoo Finance_ service (convert from `ILA` to `ILS`)
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 18183103f..107ec00f8 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -66,7 +66,9 @@
       >Resources</a
     >
     <a
-      *ngIf="hasPermissionForSubscription"
+      *ngIf="
+        hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+      "
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
@@ -203,7 +205,9 @@
         >Resources</a
       >
       <a
-        *ngIf="hasPermissionForSubscription"
+        *ngIf="
+          hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+        "
         class="d-block d-sm-none"
         i18n
         mat-menu-item
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index 9f02c2355..d004dc1a6 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -4,11 +4,11 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>About Ghostfolio</h3>
       <div class="about-container">
         <p>
-          <strong>Ghostfolio</strong> is a lightweight wealth management
-          application for individuals to keep track of stocks, ETFs or
-          cryptocurrencies and make solid, data-driven investment decisions. The
-          source code is fully available as open source software (OSS). The
-          project has been initiated by
+          Ghostfolio is a lightweight wealth management application for
+          individuals to keep track of stocks, ETFs or cryptocurrencies and make
+          solid, data-driven investment decisions. The source code is fully
+          available as open source software (OSS). The project has been
+          initiated by
           <a href="https://dotsilver.ch" title="Website of Thomas Kaul"
             >Thomas Kaul</a
           >
diff --git a/apps/client/src/app/pages/account/account-page.html b/apps/client/src/app/pages/account/account-page.html
index 3c8b28dc3..ed99abc56 100644
--- a/apps/client/src/app/pages/account/account-page.html
+++ b/apps/client/src/app/pages/account/account-page.html
@@ -16,7 +16,9 @@
             <div class="pr-1 w-50" i18n>Membership</div>
             <div class="pl-1 w-50">
               <div class="align-items-center d-flex mb-1">
-                {{ user?.subscription?.type }}
+                <a [routerLink]="['/pricing']"
+                  >{{ user?.subscription?.type }}</a
+                >
                 <ion-icon
                   *ngIf="user?.subscription?.type === 'Premium'"
                   class="ml-1 text-muted"
diff --git a/apps/client/src/app/pages/account/account-page.scss b/apps/client/src/app/pages/account/account-page.scss
index bafd8d6e4..4a798522a 100644
--- a/apps/client/src/app/pages/account/account-page.scss
+++ b/apps/client/src/app/pages/account/account-page.scss
@@ -2,15 +2,6 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
-
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
-    }
-  }
-
   gf-access-table {
     overflow-x: auto;
 
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 8a9fb9f1f..1b5beed46 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -56,9 +56,8 @@
         <strong>personal investment strategy</strong>.
       </h2>
       <p class="lead">
-        <strong>Ghostfolio</strong> empowers busy people to keep track of
-        stocks, ETFs or cryptocurrencies and make solid, data-driven investment
-        decisions.
+        Ghostfolio empowers busy people to keep track of stocks, ETFs or
+        cryptocurrencies and make solid, data-driven investment decisions.
       </p>
     </div>
   </div>
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 1b7f7f87c..5730a4d5b 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -6,15 +6,14 @@
       </h3>
       <div class="mb-4">
         <p>
-          Our official
-          <strong>Ghostfolio Premium</strong> cloud offering is the easiest way
-          to get started. Due to the time it saves, this will be the best option
+          Our official Ghostfolio Premium cloud offering is the easiest way to
+          get started. Due to the time it saves, this will be the best option
           for most people. The revenue is used for covering the hosting costs.
         </p>
         <p>
-          If you prefer to run <strong>Ghostfolio</strong> on your own
-          infrastructure, please find the source code and further instructions
-          on <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+          If you prefer to run Ghostfolio on your own infrastructure, please
+          find the source code and further instructions on
+          <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
         </p>
       </div>
       <div class="row">