From f794babdb4518cd4173fe5aaed79c8194e128f35 Mon Sep 17 00:00:00 2001
From: "aditya.chandel" <8075870+adityachandelgit@users.noreply.github.com>
Date: Sat, 9 Aug 2025 09:40:55 -0600
Subject: [PATCH] Improve support component

---
 .../booklore/exception/APIException.java      |  2 -
 .../src/app/dialog-launcher.service.ts        |  4 +-
 .../layout-topbar/app.topbar.component.html   |  4 +-
 .../github-support-dialog.html                | 73 +++++++++++++++----
 4 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/exception/APIException.java b/booklore-api/src/main/java/com/adityachandel/booklore/exception/APIException.java
index 8146f519b..769e32916 100644
--- a/booklore-api/src/main/java/com/adityachandel/booklore/exception/APIException.java
+++ b/booklore-api/src/main/java/com/adityachandel/booklore/exception/APIException.java
@@ -14,5 +14,3 @@ public class APIException extends RuntimeException {
         this.message = formattedMessage;
     }
 }
-
-
diff --git a/booklore-ui/src/app/dialog-launcher.service.ts b/booklore-ui/src/app/dialog-launcher.service.ts
index fbf0f3890..6eb0e1934 100644
--- a/booklore-ui/src/app/dialog-launcher.service.ts
+++ b/booklore-ui/src/app/dialog-launcher.service.ts
@@ -42,8 +42,8 @@ export class DialogLauncherService {
   openGithubSupportDialog(): void {
     this.open({
       component: GithubSupportDialog,
-      header: 'Support BookLore on GitHub',
-      top: '25%'
+      header: 'Support Booklore',
+      top: '15%'
     });
   }
 
diff --git a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
index a89e38cad..72d035429 100644
--- a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
+++ b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
@@ -83,13 +83,13 @@
           </p-popover>
         </li>
 
-        <li class="relative group overflow-hidden !border-transparent topbar-item" pTooltip="Love BookLore?" tooltipPosition="bottom" (click)="openGithubSupportDialog()">
+        <li class="relative group overflow-hidden !border-transparent topbar-item" (click)="openGithubSupportDialog()">
           <span
             style="animation-duration: 2s; background: conic-gradient(from 90deg, #f97316, #f59e0b, #eab308, #84cc16, #22c55e, #10b981, #14a8a6, #06b6d4, #0ea5e9, #3b82f6, #6366f1, #8b5cf6, #a855f7, #d946ef, #ec4899, #f43f5e)"
             class="absolute -top-5 -left-5 w-20 h-20 animate-spin">
           </span>
           <span style="inset: 1px; border-radius: 4px" class="absolute z-2 bg-surface-900 transition-all"></span>
-          <i class="pi pi-thumbs-up z-10"></i>
+          <i class="pi pi-heart z-10"></i>
         </li>
         <li class="relative">
           <button type="button"
diff --git a/booklore-ui/src/app/utilities/component/github-support-dialog/github-support-dialog.html b/booklore-ui/src/app/utilities/component/github-support-dialog/github-support-dialog.html
index bf8954f7e..4e6b2935a 100644
--- a/booklore-ui/src/app/utilities/component/github-support-dialog/github-support-dialog.html
+++ b/booklore-ui/src/app/utilities/component/github-support-dialog/github-support-dialog.html
@@ -1,14 +1,61 @@
-<p class="mb-4" style="max-width: 450px; word-wrap: break-word; line-height: 1.5; font-size: 1rem;">
-  I hope <strong>Booklore</strong> has made managing your book collection easier and more enjoyable.
-  If you appreciate the project, please consider giving it a ⭐ on GitHub. Your support truly means a lot and motivates me to keep improving.
-</p>
-<p class="mb-4 text-left italic text-gray-300" style="max-width: 450px; font-size: 0.9rem;">
-  — Aditya (Creator of BookLore)
-</p>
-<div class="flex justify-center" style="max-width: 450px; margin: auto;">
-  <p-button
-    label="Go to GitHub"
-    icon="pi pi-github"
-    (click)="openGithub()">
-  </p-button>
+<div class="flex flex-col items-center justify-center p-2 md:p-4 rounded-lg border border-neutral-700" style="max-width: 700px; margin: auto;">
+  <div class="mb-4 w-full text-center">
+    <span class="inline-block px-3 py-1 rounded-full bg-blue-800/60 text-blue-200 text-xs font-semibold tracking-wide mb-2">
+      Open Source & Community Driven
+    </span>
+    <h2 class="text-2xl font-bold text-white mb-2 tracking-tight">
+      Booklore
+    </h2>
+    <p class="text-base text-zinc-200 leading-relaxed">
+      Booklore is designed to help you manage your book collection with ease and enjoyment.<br>
+      If you find Booklore valuable, please consider supporting its continued development.
+    </p>
+  </div>
+  <div class="mb-4 w-full text-center">
+    <p class="text-zinc-200 italic text-sm">
+      Your feedback and support help me keep Booklore improving for everyone.<br>
+      <span class="text-zinc-300">- Aditya (Creator of Booklore)</span>
+    </p>
+  </div>
+  <div class="flex md:flex-row flex-col justify-center items-center gap-3 w-full mb-4">
+    <a href="https://github.com/booklore-app/booklore" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
+      <p-button
+        label="Star on GitHub"
+        icon="pi pi-github"
+        outlined
+        severity="success"
+        [style]="{ 'min-width': '160px' }">
+      </p-button>
+    </a>
+    <a href="https://opencollective.com/booklore" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
+      <p-button
+        label="Open Collective"
+        icon="pi pi-globe"
+        severity="info"
+        outlined>
+      </p-button>
+    </a>
+    <a href="https://account.venmo.com/u/AdityaChandel" target="_blank" rel="noopener noreferrer" class="sm:w-auto">
+      <p-button
+        label="Buy me a coffee"
+        icon="pi pi-heart"
+        outlined
+        severity="danger">
+      </p-button>
+    </a>
+  </div>
+  <div class="w-full text-center mt-2">
+    <span class="block mb-1 font-medium text-green-300 text-sm">Booklore will always remain free for everyone. That is my commitment to you.</span>
+    <div class="text-gray-400 text-sm space-y-2 mt-2">
+      <p>
+        <span class="font-semibold text-blue-300">Open Collective</span> contributions directly support development, infrastructure, and ongoing improvements.
+      </p>
+      <p>
+        <span class="font-semibold text-red-300">Venmo</span> is a wonderful way to show personal appreciation, think of it as buying me a coffee for my hard work.
+      </p>
+      <p class="text-yellow-200 pt-2">
+        Every contribution, no matter the size, helps keep Booklore open, growing, and accessible to all.
+      </p>
+    </div>
+  </div>
 </div>