From 7d798476f0c8641317f6346b7eb6e7e09d42c1cb Mon Sep 17 00:00:00 2001
From: Tomasi - Developing <info@tomasi-developing.ch>
Date: Tue, 13 May 2025 10:35:21 +0200
Subject: [PATCH] Custom ko fi donate

---
 .../app/navigation/navigation.component.css   | 23 +++++++++++++++
 .../app/navigation/navigation.component.html  | 10 +++++++
 Ui/src/app/navigation/navigation.component.ts | 28 -------------------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/Ui/src/app/navigation/navigation.component.css b/Ui/src/app/navigation/navigation.component.css
index f50afaa..839dea6 100644
--- a/Ui/src/app/navigation/navigation.component.css
+++ b/Ui/src/app/navigation/navigation.component.css
@@ -7,3 +7,26 @@
 .user-menu {
   cursor: pointer;
 }
+.kofi-custom-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #794bc4;
+  color: white;
+  font-weight: 600;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 999px; /* pill-shape */
+  font-family: sans-serif;
+  font-size: 14px;
+  transition: background-color 0.3s ease;
+}
+
+.kofi-custom-button img {
+  height: 20px;
+  width: auto;
+}
+
+.kofi-custom-button:hover {
+  background-color: #5e37a4;
+}
diff --git a/Ui/src/app/navigation/navigation.component.html b/Ui/src/app/navigation/navigation.component.html
index 0a482c3..f0f4001 100644
--- a/Ui/src/app/navigation/navigation.component.html
+++ b/Ui/src/app/navigation/navigation.component.html
@@ -65,6 +65,16 @@
             </a>
           </li>
 
+          <li class="nav-item">
+            <a href="https://ko-fi.com/C0C11EVSE0"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="kofi-custom-button">
+              <img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi" />
+              <span>Donate</span>
+            </a>
+          </li>
+
         </ul>
 
         <!-- User menu (visible only when user is logged in) -->
diff --git a/Ui/src/app/navigation/navigation.component.ts b/Ui/src/app/navigation/navigation.component.ts
index 1825d07..c746fac 100644
--- a/Ui/src/app/navigation/navigation.component.ts
+++ b/Ui/src/app/navigation/navigation.component.ts
@@ -4,8 +4,6 @@ import {LoggedInUser} from "../models/user.model";
 import {Subscription} from "rxjs";
 import {environment} from "../../environments/environment";
 
-declare var kofiWidgetOverlay: any;
-
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
@@ -26,47 +24,21 @@ export class NavigationComponent implements OnInit, OnDestroy {
       next: ((response) => {
         if (response) {
           this.loggedInUser = response;
-          this.loadKoFiWidget();
         } else {
           this.loggedInUser = null;
-          this.removeKoFiWidget();
         }
       })
     });
   }
 
-
   onLogout() {
     this._authenticationService.logout();
-    this.removeKoFiWidget();
   }
 
-  loadKoFiWidget() {
-    if (document.getElementById('ko-fi-script')) return;
 
-    const script = document.createElement('script');
-    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js';
-    script.onload = () => {
-      kofiWidgetOverlay.draw('tomasideveloping', {
-        'type': 'floating-chat',
-        'floating-chat.donateButton.text': 'Donate',
-        'floating-chat.donateButton.background-color': '#794bc4',
-        'floating-chat.donateButton.text-color': '#fff'
-      });
-    };
-    document.body.appendChild(script);
-  }
 
-  removeKoFiWidget(): void {
-    const widget = document.querySelector('.kofi-widget');
-    if (widget) widget.remove();
-
-    const script = document.getElementById('ko-fi-script');
-    if (script) script.remove();
-  }
 
   ngOnDestroy() {
-    this.removeKoFiWidget();
     if (this._authStateChange$) {
       this._authStateChange$.unsubscribe();
     }