Feature/add links to statistics section (#626)

* Add links and clean up style

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Added links to the statistics section on the about page
+
 ## 1.102.0 - 11.01.2022
 
 ### Changed

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

@@ -132,16 +132,35 @@
               </div>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.slackCommunityUsers ?? '-' }}</h3>
+              <a
-              <div class="h6 mb-0" i18n>Users in Slack community</div>
+                class="d-block"
+                href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              >
+                <h3 class="mb-0">
+                  {{ statistics?.slackCommunityUsers ?? '-' }}
+                </h3>
+                <div class="h6 mb-0" i18n>Users in Slack community</div>
+              </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.gitHubContributors ?? '-' }}</h3>
+              <a
-              <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+                class="d-block"
+                href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
+              >
+                <h3 class="mb-0">
+                  {{ statistics?.gitHubContributors ?? '-' }}
+                </h3>
+                <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+              </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.gitHubStargazers ?? '-' }}</h3>
+              <a
-              <div class="h6 mb-0" i18n>Stars on GitHub</div>
+                class="d-block"
+                href="https://github.com/ghostfolio/ghostfolio/stargazers"
+              >
+                <h3 class="mb-0">{{ statistics?.gitHubStargazers ?? '-' }}</h3>
+                <div class="h6 mb-0" i18n>Stars on GitHub</div>
+              </a>
             </div>
           </div>
         </mat-card-content>
@@ -150,22 +169,28 @@
   </div>
 
   <div class="row">
-    <div *ngIf="hasPermissionForBlog" class="col-md-6 col-xs-12 my-2">
-      <a class="py-2 w-100" i18n mat-stroked-button [routerLink]="['/blog']"
-        >Blog</a
-      >
-    </div>
     <div
       class="col-md-6 col-xs-12 my-2"
       [ngClass]="{ 'offset-md-3': !hasPermissionForBlog }"
     >
       <a
         class="py-2 w-100"
+        color="primary"
         i18n
         mat-stroked-button
         [routerLink]="['/about', 'changelog']"
         >Changelog & License</a
       >
     </div>
+    <div *ngIf="hasPermissionForBlog" class="col-md-6 col-xs-12 my-2">
+      <a
+        class="py-2 w-100"
+        color="primary"
+        i18n
+        mat-flat-button
+        [routerLink]="['/blog']"
+        >Blog</a
+      >
+    </div>
   </div>
 </div>

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

@@ -2,13 +2,8 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  a {
-    color: rgb(var(--dark-primary-text));
-  }
-
   .mat-card {
-    &.about-container,
+    &.about-container {
-    &.changelog {
       a {
         color: rgba(var(--palette-primary-500), 1);
         font-weight: 500;
@@ -19,29 +14,6 @@
       }
     }
 
-    &.changelog {
-      ::ng-deep {
-        markdown {
-          h1,
-          p {
-            display: none;
-          }
-
-          h2 {
-            font-size: 18px;
-
-            &:not(:first-of-type) {
-              margin-top: 2rem;
-            }
-          }
-
-          h3 {
-            font-size: 15px;
-          }
-        }
-      }
-    }
-
     .independent-and-bootstrapped-logo {
       background-image: url('/assets/bootstrapped-dark.svg');
       background-position: center;
@@ -57,10 +29,6 @@
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));
 
-  a {
-    color: rgb(var(--light-primary-text));
-  }
-
   .mat-card {
     .independent-and-bootstrapped-logo {
       background-image: url('/assets/bootstrapped-light.svg');