From c954cac9479e9b7310a0e5cec8ef06efa6caeb6d Mon Sep 17 00:00:00 2001
From: Siavash Sameni <manwe@MacBook-Air.local>
Date: Mon, 25 Aug 2025 17:09:14 +0400
Subject: [PATCH] feat(ui): apply dark theme for better readability

---
 app/dapp/page.tsx     | 62 +++++++++++++++++++++----------------------
 app/layout.tsx        |  6 ++---
 components/Navbar.tsx | 16 +++++------
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/app/dapp/page.tsx b/app/dapp/page.tsx
index 7c77784..cfeccc2 100644
--- a/app/dapp/page.tsx
+++ b/app/dapp/page.tsx
@@ -661,18 +661,18 @@ export default function DappPage() {
       <p className="text-sm text-gray-100">Connect wallet, detect your NFTs, and fetch debt details.</p>
 
       {!isConnected && (
-        <div className="rounded border p-4 bg-yellow-50">Please connect your wallet using the Connect Wallet button in the navbar.</div>
+        <div className="rounded border p-4 bg-amber-900/40 border-amber-700 text-amber-200">Please connect your wallet using the Connect Wallet button in the navbar.</div>
       )}
 
       <div className="grid gap-4 md:grid-cols-2">
-        <div className="rounded border p-4 bg-white space-y-3">
-          <div className="font-medium text-gray-900">Inputs</div>
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">Network</span>
+        <div className="rounded border p-4 bg-gray-800 border-gray-700 space-y-3">
+          <div className="font-medium text-gray-100">Inputs</div>
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">Network</span>
             <select
               value={selectedChainId}
               onChange={(e) => setSelectedChainId(Number(e.target.value))}
-              className="mt-1 w-full border rounded px-2 py-1"
+              className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
             >
               <option value={base.id}>Base</option>
               <option value={arbitrum.id}>Arbitrum</option>
@@ -680,10 +680,10 @@ export default function DappPage() {
           </label>
 
           {/* Preset selector for pair addresses */}
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">Preset</span>
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">Preset</span>
             <select
-              className="mt-1 w-full border rounded px-2 py-1"
+              className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700"
               value={presetKey}
               onChange={(e) => {
                 const key = e.target.value;
@@ -701,56 +701,56 @@ export default function DappPage() {
               ))}
             </select>
           </label>
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">ERC-721 Address</span>
-            <input value={nftAddress} onChange={(e) => setNftAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.nft} className="mt-1 w-full border rounded px-2 py-1" />
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">ERC-721 Address</span>
+            <input value={nftAddress} onChange={(e) => setNftAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.nft} className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
           </label>
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">Debt Contract</span>
-            <input value={debtAddress} onChange={(e) => setDebtAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.debt} className="mt-1 w-full border rounded px-2 py-1" />
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">Debt Contract</span>
+            <input value={debtAddress} onChange={(e) => setDebtAddress(e.target.value)} placeholder={DEFAULTS[selectedChainId as keyof typeof DEFAULTS]?.debt} className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
           </label>
           <div className="flex items-center gap-2">
             <button
               type="button"
               onClick={() => loadChainDefaults(selectedChainId)}
-              className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded"
+              className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600"
             >
               Load defaults for selected network
             </button>
           </div>
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">Manual Wallet (optional)</span>
-            <input value={manualWallet} onChange={(e) => setManualWallet(e.target.value)} placeholder="0xYourWallet" className="mt-1 w-full border rounded px-2 py-1" />
-            <span className="text-xs text-gray-900">If set, scans and reads will use this address instead of the connected one.</span>
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">Manual Wallet (optional)</span>
+            <input value={manualWallet} onChange={(e) => setManualWallet(e.target.value)} placeholder="0xYourWallet" className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
+            <span className="text-xs text-gray-400">If set, scans and reads will use this address instead of the connected one.</span>
           </label>
-          <label className="block text-sm text-gray-900">
-            <span className="text-gray-900">Manual Token ID (optional)</span>
-            <input value={manualTokenId} onChange={(e) => setManualTokenId(e.target.value)} placeholder="e.g., 103" className="mt-1 w-full border rounded px-2 py-1" />
+          <label className="block text-sm text-gray-200">
+            <span className="text-gray-300">Manual Token ID (optional)</span>
+            <input value={manualTokenId} onChange={(e) => setManualTokenId(e.target.value)} placeholder="e.g., 103" className="mt-1 w-full border rounded px-2 py-1 bg-gray-900 text-gray-100 border-gray-700 placeholder-gray-400" />
           </label>
           <div className="flex items-center gap-2">
             <button onClick={scanMore} disabled={!effectiveWallet || scanBusy || !nftAddress || scanComplete} className="px-3 py-1.5 bg-indigo-600 text-white rounded disabled:opacity-50">
               {scanBusy ? 'Scanning…' : scanComplete ? 'Scan Complete' : 'Scan 12 more (ownerOf)'}
             </button>
-            <button onClick={resetScan} disabled={!effectiveWallet || scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded">
+            <button onClick={resetScan} disabled={!effectiveWallet || scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
               Reset
             </button>
-            <button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-200 text-gray-900 rounded">
+            <button onClick={deleteLocalCache} disabled={scanBusy || !nftAddress} className="px-3 py-1.5 bg-gray-700 text-gray-100 rounded hover:bg-gray-600">
               Delete Local Cache
             </button>
           </div>
           {scanComplete && (
-            <div className="text-xs text-green-700 bg-green-50 border border-green-200 rounded p-2 mt-2">
+            <div className="text-xs text-green-200 bg-green-900/30 border border-green-700 rounded p-2 mt-2">
               Owner scan completed (gap limit reached). Reset or delete cache to rescan.
             </div>
           )}
-          <div className="text-xs text-gray-900">
+          <div className="text-xs text-gray-300">
             Cached IDs: {detectedTokenIds.length ? detectedTokenIds.map((id) => id.toString()).join(', ') : '—'}
           </div>
         </div>
-        <div className="rounded border p-4 bg-white">
-          <div className="font-medium text-gray-900">About</div>
-          <p className="text-sm text-gray-900 mt-1">Enter your NFT contract and token ID(s), then fetch debt details from the mortgage contract.</p>
-          <p className="text-xs text-gray-900 mt-2">Base network is required. The app will attempt to detect your token IDs via on-chain queries.</p>
+        <div className="rounded border p-4 bg-gray-800 border-gray-700">
+          <div className="font-medium text-gray-100">About</div>
+          <p className="text-sm text-gray-300 mt-1">Enter your NFT contract and token ID(s), then fetch debt details from the mortgage contract.</p>
+          <p className="text-xs text-gray-400 mt-2">Base network is required. The app will attempt to detect your token IDs via on-chain queries.</p>
         </div>
       </div>
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 0cd4230..4b75592 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -18,16 +18,16 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-gray-50 min-h-screen`}>
+      <body className={`${inter.className} bg-gray-900 text-gray-100 min-h-screen`}>
         <Web3Provider>
           <div className="min-h-screen flex flex-col">
             <Navbar />
             <main className="flex-1">
               {children}
             </main>
-            <footer className="bg-white border-t border-gray-200 py-6">
+            <footer className="bg-gray-900 border-t border-gray-800 py-6">
               <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <p className="text-center text-gray-500 text-sm">
+                <p className="text-center text-gray-400 text-sm">
                   &copy; {new Date().getFullYear()} MortgageFi. All rights reserved.
                 </p>
               </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 0af68f7..43db104 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -16,14 +16,14 @@ function classNames(...classes: string[]) {
 
 export default function Navbar() {
   return (
-    <Disclosure as="nav" className="bg-white shadow-sm">
+    <Disclosure as="nav" className="bg-gray-900 border-b border-gray-800">
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="flex justify-between h-16">
               <div className="flex">
                 <div className="flex-shrink-0 flex items-center">
-                  <span className="text-xl font-bold text-indigo-600">MortgageFi</span>
+                  <span className="text-xl font-bold text-indigo-400">MortgageFi</span>
                 </div>
                 <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                   {navigation.map((item) => (
@@ -34,8 +34,8 @@ export default function Navbar() {
                       rel={item.external ? "noopener noreferrer" : ""}
                       className={classNames(
                         item.current
-                          ? 'border-indigo-500 text-gray-900'
-                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                          ? 'border-indigo-500 text-gray-100'
+                          : 'border-transparent text-gray-300 hover:border-gray-700 hover:text-white',
                         'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium'
                       )}
                       aria-current={item.current ? 'page' : undefined}
@@ -50,7 +50,7 @@ export default function Navbar() {
               </div>
               <div className="-mr-2 flex items-center sm:hidden">
                 {/* Mobile menu button */}
-                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-300 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                   <span className="sr-only">Open main menu</span>
                   {open ? (
                     <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -73,8 +73,8 @@ export default function Navbar() {
                   rel={item.external ? "noopener noreferrer" : ""}
                   className={classNames(
                     item.current
-                      ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
-                      : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700',
+                      ? 'bg-gray-800 border-indigo-500 text-gray-100'
+                      : 'border-transparent text-gray-300 hover:bg-gray-800 hover:border-gray-700 hover:text-white',
                     'block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
                   )}
                   aria-current={item.current ? 'page' : undefined}
@@ -82,7 +82,7 @@ export default function Navbar() {
                   {item.name}
                 </Disclosure.Button>
               ))}
-              <div className="pt-4 pb-3 border-t border-gray-200">
+              <div className="pt-4 pb-3 border-t border-gray-800">
                 <div className="px-4">
                   <ConnectButton />
                 </div>