From f47883fb0b597a17bc0f0549e9b85590f99bdc63 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 19 Jun 2023 20:29:12 +0200
Subject: [PATCH] Feature/add icon to external links in footer (#2083)

* Add icon for external links

* Update changelog
---
 CHANGELOG.md                           |  4 ++++
 apps/client/src/app/app.component.html | 28 +++++++++++++++++---------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c2bfd6fe..8c7eebdad 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
 
+### Added
+
+- Added an icon to the external links in the footer navigation
+
 ### Changed
 
 - Improved the language localization for German (`de`)
diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index fa135f2fa..b054e8d8c 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -101,9 +101,13 @@
             >
           </li>
           <li *ngIf="hasPermissionForSubscription">
-            <a href="https://status.ghostfol.io" title="Ghostfolio Status"
-              >Status</a
-            >
+            <a
+              class="align-items-baseline d-flex"
+              href="https://status.ghostfol.io"
+              target="_blank"
+              title="Ghostfolio Status"
+              >Status<ion-icon class="ml-1" name="open-outline"></ion-icon
+            ></a>
           </li>
         </ul>
       </div>
@@ -112,24 +116,30 @@
         <ul class="list-unstyled">
           <li>
             <a
+              class="align-items-baseline d-flex"
               href="https://github.com/ghostfolio/ghostfolio"
+              target="_blank"
               title="Find Ghostfolio on GitHub"
-              >GitHub</a
-            >
+              >GitHub<ion-icon class="ml-1" name="open-outline"></ion-icon
+            ></a>
           </li>
           <li>
             <a
+              class="align-items-baseline d-flex"
               href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              target="_blank"
               title="Join the Ghostfolio Slack community"
-              >Slack</a
-            >
+              >Slack<ion-icon class="ml-1" name="open-outline"></ion-icon
+            ></a>
           </li>
           <li>
             <a
+              class="align-items-baseline d-flex"
               href="https://twitter.com/ghostfolio_"
+              target="_blank"
               title="Follow Ghostfolio on Twitter"
-              >Twitter</a
-            >
+              >Twitter<ion-icon class="ml-1" name="open-outline"></ion-icon
+            ></a>
           </li>
           <li>&nbsp;</li>
           <li>