Feature/simplify about page (#892)

* Simplify about page

* Update changelog

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the allocations page with no filtering
 - Harmonized the _No data available_ label in the portfolio proportion chart component
 - Improved the _FIRE_ calculator for the _Live Demo_
+- Simplified the about page
 - Upgraded `angular` from version `13.2.2` to `13.3.6`
 - Upgraded `Nx` from version `13.8.5` to `14.1.4`
 - Upgraded `storybook` from version `6.4.18` to `6.4.22`

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

@@ -22,7 +22,6 @@ export class AboutPageComponent implements OnDestroy, OnInit {
   public hasPermissionForStatistics: boolean;
   public hasPermissionForSubscription: boolean;
   public isLoggedIn: boolean;
-  public lastPublish = environment.lastPublish;
   public statistics: Statistics;
   public user: User;
   public version = environment.version;

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

@@ -2,14 +2,13 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>About Ghostfolio</h3>
-      <mat-card class="about-container">
+      <div class="about-container">
-        <mat-card-content>
         <p>
           <strong>Ghostfolio</strong> is a lightweight wealth management
-            application for individuals to keep track of their wealth like
+          application for individuals to keep track of stocks, ETFs or
-            stocks, ETFs or cryptocurrencies and make solid, data-driven
+          cryptocurrencies and make solid, data-driven investment decisions. The
-            investment decisions. The source code is fully available as open
+          source code is fully available as open source software (OSS). The
-            source software (OSS). The project has been initiated by
+          project has been initiated by
           <a href="https://dotsilver.ch" title="Website of Thomas Kaul"
             >Thomas Kaul</a
           >
@@ -19,9 +18,8 @@
             title="Contributors to Ghostfolio"
             >contributors</a
           >.
-            <ng-container *ngIf="lastPublish">
+          <ng-container *ngIf="version">
-              This instance is running Ghostfolio {{ version }} and has been
+            This instance is running Ghostfolio {{ version }}.
-              last published on {{ lastPublish }}.
           </ng-container>
           <ng-container *ngIf="hasPermissionForStatistics" i18n
             >Check the system status at
@@ -32,7 +30,8 @@
         </p>
         <p>
           If you encounter a bug or would like to suggest an improvement or a
-            new <a [routerLink]="['/features']">feature</a>, please join the
+          new
+          <a [routerLink]="['/features']">feature</a>, please join the
           Ghostfolio
           <a
             href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
@@ -97,8 +96,7 @@
             title="Ghostfolio is an independent & bootstrapped business"
           ></div>
         </div>
-        </mat-card-content>
+      </div>
-      </mat-card>
     </div>
   </div>
 

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

@@ -2,8 +2,7 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card {
+  .about-container {
-    &.about-container {
     a {
       color: rgba(var(--palette-primary-500), 1);
       font-weight: 500;
@@ -12,7 +11,6 @@
         color: rgba(var(--palette-primary-300), 1);
       }
     }
-    }
 
     .independent-and-bootstrapped-logo {
       background-image: url('/assets/bootstrapped-dark.svg');
@@ -29,7 +27,7 @@
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));
 
-  .mat-card {
+  .about-container {
     .independent-and-bootstrapped-logo {
       background-image: url('/assets/bootstrapped-light.svg');
       opacity: 1;