Custom ko fi donate

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;
+}

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) -->

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();
     }