From d6b78f3457144c0f0c3dd5c834ca7411df9caf4a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 13 Jan 2022 19:07:23 +0100
Subject: [PATCH] Feature/add links to statistics section (#626)

* Add links and clean up style

* Update changelog
---
 CHANGELOG.md                                  |  6 +++
 .../src/app/pages/about/about-page.html       | 47 ++++++++++++++-----
 .../src/app/pages/about/about-page.scss       | 34 +-------------
 3 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bbec3061..c25f19f1 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index 44c8ae9c..ca337565 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/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>
-              <div class="h6 mb-0" i18n>Users in Slack community</div>
+              <a
+                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>
-              <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+              <a
+                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>
-              <div class="h6 mb-0" i18n>Stars on GitHub</div>
+              <a
+                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>
diff --git a/apps/client/src/app/pages/about/about-page.scss b/apps/client/src/app/pages/about/about-page.scss
index 2e451770..498665ef 100644
--- a/apps/client/src/app/pages/about/about-page.scss
+++ b/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,
-    &.changelog {
+    &.about-container {
       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');