From 4d7a6ada490e0f460ce64587071482c5b7a26191 Mon Sep 17 00:00:00 2001
From: Kilwizzy <bidikelvin282@gmail.com>
Date: Sun, 29 Mar 2026 08:00:14 +0100
Subject: [PATCH 1/2] ui: add clipboard copy for payment intent IDs in
 dashboard table

---
 frontend/src/components/RecentPayments.tsx | 38 +++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RecentPayments.tsx b/frontend/src/components/RecentPayments.tsx
index 6c9b812..43b4a34 100644
--- a/frontend/src/components/RecentPayments.tsx
+++ b/frontend/src/components/RecentPayments.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
+import toast from "react-hot-toast";
 import PaymentDetailModal from "@/components/PaymentDetailModal";
 import ExportCsvButton from "@/components/ExportCsvButton";
 import { localeToLanguageTag } from "@/i18n/config";
@@ -383,6 +384,21 @@ export default function RecentPayments({
     setSelectedPayment(null);
   };
 
+  const handleCopyId = async (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(id);
+    } catch {
+      const el = document.createElement("textarea");
+      el.value = id;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+    }
+    toast.success("Intent ID copied to clipboard");
+  };
+
   if (showSkeleton || loading) {
     return (
       <div className="rounded-xl border border-yellow-500/30 bg-yellow-500/10 p-8 text-center">
@@ -1003,7 +1019,27 @@ export default function RecentPayments({
                     </span>
                   </td>
                   <td className="px-4 py-3 font-medium text-white">
-                    {payment.amount} {payment.asset}
+                    <span className="inline-flex items-center gap-1.5">
+                      {payment.amount} {payment.asset}
+                      <button
+                        onClick={(event) => handleCopyId(payment.id, event)}
+                        className="text-slate-500 transition-colors hover:text-mint"
+                        aria-label="Copy intent ID"
+                        title={`Copy ${payment.id}`}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-3.5 w-3.5"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                        </svg>
+                      </button>
+                    </span>
                   </td>
                   <td className="hidden px-4 py-3 text-slate-400 sm:table-cell">
                     <code className="font-mono text-xs text-slate-300">

From 0974111cb639411c176de08f6a458971959ad6fe Mon Sep 17 00:00:00 2001
From: Kilwizzy <bidikelvin282@gmail.com>
Date: Sun, 29 Mar 2026 09:49:34 +0100
Subject: [PATCH 2/2] design: upgrade dark mode aesthetics to glassmorphism

- Set true black (#000000) backgrounds in Tailwind config and CSS variables
- Add backdrop-blur-xl to Modal, PaymentDetailModal, MerchantProfileCard,
  ApiHealthBadge, CommandPalette, KeyboardShortcuts, WithdrawalModal,
  and mobile Sidebar for glassmorphism effect
- Normalize all border opacities to border-white/10 for subtle consistency
- Replace bg-slate-900 surfaces with bg-black/80-90 + backdrop-blur-xl
---
 frontend/src/app/(public)/login/page.tsx        |  2 +-
 frontend/src/app/globals.css                    | 10 +++++-----
 frontend/src/components/ApiHealthBadge.tsx      |  2 +-
 frontend/src/components/CommandPalette.tsx      |  2 +-
 frontend/src/components/DensityGrid.tsx         |  2 +-
 frontend/src/components/KeyboardShortcuts.tsx   | 10 +++++-----
 frontend/src/components/MerchantProfileCard.tsx |  2 +-
 frontend/src/components/PaymentDetailModal.tsx  |  2 +-
 frontend/src/components/Sidebar.tsx             |  4 ++--
 frontend/src/components/WithdrawalModal.tsx     |  4 ++--
 frontend/src/components/ui/Modal.tsx            |  2 +-
 frontend/tailwind.config.js                     |  8 +++++++-
 12 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/(public)/login/page.tsx b/frontend/src/app/(public)/login/page.tsx
index 1e0fdde..f01032d 100644
--- a/frontend/src/app/(public)/login/page.tsx
+++ b/frontend/src/app/(public)/login/page.tsx
@@ -34,7 +34,7 @@ export default function LoginPage() {
       </div>
 
       {/* Footer */}
-      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between px-8 md:px-12 py-8 mt-auto z-50 text-[10px] font-bold tracking-[0.08em] text-slate-500 uppercase border-t border-white/5 md:border-t-0">
+      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between px-8 md:px-12 py-8 mt-auto z-50 text-[10px] font-bold tracking-[0.08em] text-slate-500 uppercase border-t border-white/10 md:border-t-0">
          <div className="text-white mb-4 md:mb-0">
             Stellar Pay
          </div>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 32625bb..0291266 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -14,8 +14,8 @@
 
 :root.dark {
   color-scheme: dark;
-  --color-night: #0b0c10;
-  --color-tide: #0f1a2b;
+  --color-night: #000000;
+  --color-tide: #0a0a0a;
   --color-mint: #5ef2c0;
   --color-glow: #b8ffe2;
 }
@@ -34,9 +34,9 @@ body {
 .dark body {
   background: radial-gradient(
     1200px circle at 10% -10%,
-    #15233b 0%,
-    #0b0c10 45%,
-    #050608 100%
+    #0a1628 0%,
+    #000000 45%,
+    #000000 100%
   );
   color: #f3f5f7;
   background-attachment: fixed;
diff --git a/frontend/src/components/ApiHealthBadge.tsx b/frontend/src/components/ApiHealthBadge.tsx
index fdf1e36..9d6c53e 100644
--- a/frontend/src/components/ApiHealthBadge.tsx
+++ b/frontend/src/components/ApiHealthBadge.tsx
@@ -78,7 +78,7 @@ export default function ApiHealthBadge() {
       </span>
 
       {/* Tooltip */}
-      <div className="pointer-events-none absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-white/10 bg-slate-900 px-3 py-2 text-xs text-white opacity-0 shadow-xl transition-opacity group-hover:opacity-100">
+      <div className="pointer-events-none absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-white/10 bg-black/80 px-3 py-2 text-xs text-white opacity-0 shadow-xl backdrop-blur-xl transition-opacity group-hover:opacity-100">
         <p className="font-semibold text-center">{config.label}</p>
         {(status === "error" && errorMsg) && (
           <p className="mt-0.5 text-[10px] text-slate-400 text-center">{errorMsg}</p>
diff --git a/frontend/src/components/CommandPalette.tsx b/frontend/src/components/CommandPalette.tsx
index c4c7e0e..423b190 100644
--- a/frontend/src/components/CommandPalette.tsx
+++ b/frontend/src/components/CommandPalette.tsx
@@ -247,7 +247,7 @@ export default function CommandPalette() {
       <div
         role="dialog"
         aria-label="Command palette"
-        className="w-full max-w-lg overflow-hidden rounded-xl border border-white/10 bg-night/95 shadow-2xl shadow-mint/5"
+        className="w-full max-w-lg overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl shadow-mint/5 backdrop-blur-xl"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={handlePaletteKeydown}
       >
diff --git a/frontend/src/components/DensityGrid.tsx b/frontend/src/components/DensityGrid.tsx
index fceed70..4ea4307 100644
--- a/frontend/src/components/DensityGrid.tsx
+++ b/frontend/src/components/DensityGrid.tsx
@@ -161,7 +161,7 @@ export default function DensityGrid({ data }: { data: DensityPoint[] }) {
         {CELL_COLORS.map((color, index) => (
           <span
             key={color}
-            className="h-3 w-3 rounded-[3px] border border-white/5"
+            className="h-3 w-3 rounded-[3px] border border-white/10"
             style={{
               backgroundColor: color,
               boxShadow: index === CELL_COLORS.length - 1 ? "0 0 12px rgba(94, 242, 192, 0.2)" : undefined,
diff --git a/frontend/src/components/KeyboardShortcuts.tsx b/frontend/src/components/KeyboardShortcuts.tsx
index d46aa33..2e79d8e 100644
--- a/frontend/src/components/KeyboardShortcuts.tsx
+++ b/frontend/src/components/KeyboardShortcuts.tsx
@@ -69,7 +69,7 @@ export default function KeyboardShortcuts() {
       onClick={() => setOpen(false)}
     >
       <div
-        className="w-full max-w-md overflow-hidden rounded-2xl border border-white/10 bg-black/90 p-6 shadow-2xl"
+        className="w-full max-w-md overflow-hidden rounded-2xl border border-white/10 bg-black/80 p-6 shadow-2xl backdrop-blur-xl"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-6 flex items-center justify-between">
@@ -85,7 +85,7 @@ export default function KeyboardShortcuts() {
         </div>
         
         <div className="flex flex-col gap-4">
-          <div className="flex items-center justify-between border-b border-white/5 pb-4">
+          <div className="flex items-center justify-between border-b border-white/10 pb-4">
             <span className="text-sm text-slate-300">New Payment</span>
             <kbd className="flex items-center gap-1 rounded border border-white/20 bg-white/5 px-2 py-1 font-mono text-xs text-slate-300 shadow-sm">
               <span>Alt</span>
@@ -94,7 +94,7 @@ export default function KeyboardShortcuts() {
             </kbd>
           </div>
           
-          <div className="flex items-center justify-between border-b border-white/5 pb-4">
+          <div className="flex items-center justify-between border-b border-white/10 pb-4">
             <span className="text-sm text-slate-300">Settings</span>
             <kbd className="flex items-center gap-1 rounded border border-white/20 bg-white/5 px-2 py-1 font-mono text-xs text-slate-300 shadow-sm">
               <span>Alt</span>
@@ -103,14 +103,14 @@ export default function KeyboardShortcuts() {
             </kbd>
           </div>
           
-          <div className="flex items-center justify-between border-b border-white/5 pb-4">
+          <div className="flex items-center justify-between border-b border-white/10 pb-4">
             <span className="text-sm text-slate-300">Focus Search</span>
             <kbd className="flex items-center gap-1 rounded border border-white/20 bg-white/5 px-2 py-1 font-mono text-xs text-slate-300 shadow-sm">
               /
             </kbd>
           </div>
           
-          <div className="flex items-center justify-between border-b border-white/5 pb-4">
+          <div className="flex items-center justify-between border-b border-white/10 pb-4">
             <span className="text-sm text-slate-300">Command Palette</span>
             <kbd className="flex items-center gap-1 rounded border border-white/20 bg-white/5 px-2 py-1 font-mono text-xs text-slate-300 shadow-sm">
               <span>Cmd/Ctrl</span>
diff --git a/frontend/src/components/MerchantProfileCard.tsx b/frontend/src/components/MerchantProfileCard.tsx
index bd2bab1..0ef2e11 100644
--- a/frontend/src/components/MerchantProfileCard.tsx
+++ b/frontend/src/components/MerchantProfileCard.tsx
@@ -77,7 +77,7 @@ export default function MerchantProfileCard() {
             onClick={() => setShowDropdown(false)}
           />
           
-          <div className="absolute right-0 z-50 mt-2 w-64 origin-top-right rounded-2xl border border-white/10 bg-slate-900 p-4 shadow-2xl backdrop-blur">
+          <div className="absolute right-0 z-50 mt-2 w-64 origin-top-right rounded-2xl border border-white/10 bg-black/80 p-4 shadow-2xl backdrop-blur-xl">
             {/* Profile Header */}
             <div className="mb-4 flex items-center gap-3 border-b border-white/10 pb-4">
               <Avatar
diff --git a/frontend/src/components/PaymentDetailModal.tsx b/frontend/src/components/PaymentDetailModal.tsx
index 92ff565..bc1f117 100644
--- a/frontend/src/components/PaymentDetailModal.tsx
+++ b/frontend/src/components/PaymentDetailModal.tsx
@@ -414,7 +414,7 @@ export default function PaymentDetailModal({
         aria-modal="true"
         aria-label="Payment details"
         tabIndex={-1}
-        className={`fixed right-0 top-0 z-50 flex h-full w-full max-w-lg flex-col bg-slate-900 shadow-2xl outline-none transition-transform duration-300 ease-in-out ${visible ? "translate-x-0" : "translate-x-full"
+        className={`fixed right-0 top-0 z-50 flex h-full w-full max-w-lg flex-col bg-black/90 shadow-2xl outline-none backdrop-blur-xl transition-transform duration-300 ease-in-out ${visible ? "translate-x-0" : "translate-x-full"
           }`}
       >
         {/* Header */}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 4ac21ec..6ace648 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -211,7 +211,7 @@ export default function Sidebar({
 
       <div className="border-t border-white/10 p-4">
         <div
-          className={`rounded-2xl border border-white/5 bg-black/40 p-4 transition-all ${isCollapsed ? "px-3" : ""}`}
+          className={`rounded-2xl border border-white/10 bg-black/40 p-4 transition-all ${isCollapsed ? "px-3" : ""}`}
         >
           {!isCollapsed && (
             <p className="text-xs font-medium uppercase tracking-[0.2em] text-slate-500">
@@ -266,7 +266,7 @@ export default function Sidebar({
         initial={false}
         animate={{ x: mobileOpen ? 0 : "-100%" }}
         transition={{ type: "spring", stiffness: 320, damping: 32 }}
-        className="fixed inset-y-0 left-0 z-[60] flex w-[86vw] max-w-[320px] flex-col border-r border-white/10 bg-[#050608]/95 backdrop-blur-xl lg:hidden"
+        className="fixed inset-y-0 left-0 z-[60] flex w-[86vw] max-w-[320px] flex-col border-r border-white/10 bg-black/90 backdrop-blur-xl lg:hidden"
       >
         {chrome}
       </motion.aside>
diff --git a/frontend/src/components/WithdrawalModal.tsx b/frontend/src/components/WithdrawalModal.tsx
index 8335f0a..8bea648 100644
--- a/frontend/src/components/WithdrawalModal.tsx
+++ b/frontend/src/components/WithdrawalModal.tsx
@@ -107,10 +107,10 @@ export default function WithdrawalModal({
           initial={{ scale: 0.9, opacity: 0, y: 20 }}
           animate={{ scale: 1, opacity: 1, y: 0 }}
           exit={{ scale: 0.9, opacity: 0, y: 20 }}
-          className="relative w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-[#0A0A0A] shadow-2xl"
+          className="relative w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-black/80 shadow-2xl backdrop-blur-xl"
         >
           {/* Header */}
-          <div className="flex items-center justify-between border-b border-white/5 p-6">
+          <div className="flex items-center justify-between border-b border-white/10 p-6">
             <div>
               <h2 className="text-xl font-bold text-white">Withdraw Funds</h2>
               <p className="text-sm text-slate-400">
diff --git a/frontend/src/components/ui/Modal.tsx b/frontend/src/components/ui/Modal.tsx
index 8f67388..0956614 100644
--- a/frontend/src/components/ui/Modal.tsx
+++ b/frontend/src/components/ui/Modal.tsx
@@ -32,7 +32,7 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }
       
       {/* Modals are generally center or sliding sheet in this app. Let's make a center modal for the VRT component itself. */}
       {/* However, the PaymentDetail was a right sliding sheet. We'll build a standard modal dialog. */}
-      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-slate-900 p-6 shadow-2xl transition-all" data-testid="modal-content">
+      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-black/80 p-6 shadow-2xl backdrop-blur-xl transition-all" data-testid="modal-content">
         <div className="flex items-center justify-between border-b border-white/10 pb-4 mb-4">
           <p className="font-mono text-xs uppercase tracking-[0.3em] text-mint">{title}</p>
           <button
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2961085..8ba988d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,7 +8,10 @@ module.exports = {
         night: "var(--color-night)",
         tide: "var(--color-tide)",
         mint: "var(--color-mint)",
-        glow: "var(--color-glow)"
+        glow: "var(--color-glow)",
+        gray: {
+          950: "#000000",
+        },
       },
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
@@ -24,6 +27,9 @@ module.exports = {
       animation: {
         "payment-confirmed": "payment-confirmed 1.2s ease-out forwards",
       },
+      backgroundColor: {
+        dark: "#000000",
+      },
     }
   },
   plugins: []