From 68cb4b27d1c9ca389ee758beb077f76e0b5ca84d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 19 Oct 2024 15:20:15 +0200
Subject: [PATCH] Feature/add logotype to footer (#3947)

* Add logo type to footer

* Update changelog
---
 CHANGELOG.md                             |  4 ++++
 apps/client/src/app/app.component.html   | 11 ++++++++---
 apps/client/src/app/app.component.scss   |  7 +++++++
 libs/ui/src/lib/logo/logo.component.scss |  1 +
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ccf35095c..c41dc64aa 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 the logotype to the footer
+
 ### Changed
 
 - Improved the backgrounds of the chart of the holdings tab on the home page (experimental)
diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index ff21a229d..b12855488 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -46,7 +46,7 @@
 </main>
 
 @if (showFooter) {
-  <footer class="d-flex justify-content-center py-4 w-100">
+  <footer class="justify-content-center overflow-hidden py-4 w-100">
     <div class="container">
       <div class="mb-3 row">
         <div class="col-sm">
@@ -187,7 +187,7 @@
           </ul>
         </div>
       </div>
-      <div class="row text-center">
+      <div class="mb-2 row text-center">
         <div class="col">
           © 2021 - {{ currentYear }}
           <a href="https://ghostfol.io">Ghostfolio</a>
@@ -195,12 +195,17 @@
       </div>
       <div class="row text-center text-muted">
         <div class="col">
-          <small i18n
+          <small class="d-block" i18n
             >The risk of loss in trading can be substantial. It is not advisable
             to invest money you may need in the short term.</small
           >
         </div>
       </div>
     </div>
+    <div class="container d-none d-md-block mt-5">
+      <div class="row justify-content-center">
+        <div class="font-weight-bold line-height-1 logotype">Ghostfolio</div>
+      </div>
+    </div>
   </footer>
 }
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index 6037e9639..241d3331e 100644
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@@ -35,6 +35,13 @@
   footer {
     background-color: rgba(var(--palette-foreground-text), 0.05);
     font-size: 90%;
+
+    .logotype {
+      font-size: 13vw;
+      letter-spacing: -0.03em;
+      margin-bottom: -5svw;
+      opacity: 0.05;
+    }
   }
 
   header {
diff --git a/libs/ui/src/lib/logo/logo.component.scss b/libs/ui/src/lib/logo/logo.component.scss
index c1ab3776a..f0cbd5f75 100644
--- a/libs/ui/src/lib/logo/logo.component.scss
+++ b/libs/ui/src/lib/logo/logo.component.scss
@@ -1,6 +1,7 @@
 :host {
   .label {
     font-weight: 600;
+    letter-spacing: -0.03em;
   }
 
   .logo {