manawenuz/mortgagefi-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply dark theme for better readability

Browse Source
This commit is contained in:
Siavash Sameni
2025-08-25 17:09:14 +04:00
parent 6e51b31ee9
commit c954cac947
3 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
app/dapp/page.tsx
View File

@@ -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> <p className="text-sm text-gray-100">Connect wallet, detect your NFTs, and fetch debt details.</p>
{!isConnected && ( {!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="grid gap-4 md:grid-cols-2">
<div className="rounded border p-4 bg-white space-y-3"> <div className="rounded border p-4 bg-gray-800 border-gray-700 space-y-3">
<div className="font-medium text-gray-900">Inputs</div> <div className="font-medium text-gray-100">Inputs</div>
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">Network</span> <span className="text-gray-300">Network</span>
<select <select
value={selectedChainId} value={selectedChainId}
onChange={(e) => setSelectedChainId(Number(e.target.value))} 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={base.id}>Base</option>
<option value={arbitrum.id}>Arbitrum</option> <option value={arbitrum.id}>Arbitrum</option>
@@ -680,10 +680,10 @@ export default function DappPage() {
</label> </label>
{/* Preset selector for pair addresses */} {/* Preset selector for pair addresses */}
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">Preset</span> <span className="text-gray-300">Preset</span>
<select <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} value={presetKey}
onChange={(e) => { onChange={(e) => {
const key = e.target.value; const key = e.target.value;
@@ -701,56 +701,56 @@ export default function DappPage() {
))} ))}
</select> </select>
</label> </label>
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">ERC-721 Address</span> <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" /> <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>
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">Debt Contract</span> <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" /> <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> </label>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
onClick={() => loadChainDefaults(selectedChainId)} 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 Load defaults for selected network
</button> </button>
</div> </div>
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">Manual Wallet (optional)</span> <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" /> <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-900">If set, scans and reads will use this address instead of the connected one.</span> <span className="text-xs text-gray-400">If set, scans and reads will use this address instead of the connected one.</span>
</label> </label>
<label className="block text-sm text-gray-900"> <label className="block text-sm text-gray-200">
<span className="text-gray-900">Manual Token ID (optional)</span> <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" /> <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> </label>
<div className="flex items-center gap-2"> <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"> <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)'} {scanBusy ? 'Scanning…' : scanComplete ? 'Scan Complete' : 'Scan 12 more (ownerOf)'}
</button> </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 Reset
</button> </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 Delete Local Cache
</button> </button>
</div> </div>
{scanComplete && ( {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. Owner scan completed (gap limit reached). Reset or delete cache to rescan.
</div> </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(', ') : '—'} Cached IDs: {detectedTokenIds.length ? detectedTokenIds.map((id) => id.toString()).join(', ') : '—'}
</div> </div>
</div> </div>
<div className="rounded border p-4 bg-white"> <div className="rounded border p-4 bg-gray-800 border-gray-700">
<div className="font-medium text-gray-900">About</div> <div className="font-medium text-gray-100">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-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-900 mt-2">Base network is required. The app will attempt to detect your token IDs via on-chain queries.</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>
</div> </div>

6
app/layout.tsx
View File

@@ -18,16 +18,16 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <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> <Web3Provider>
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
<Navbar /> <Navbar />
<main className="flex-1"> <main className="flex-1">
{children} {children}
</main> </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"> <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. &copy; {new Date().getFullYear()} MortgageFi. All rights reserved.
</p> </p>
</div> </div>

16
components/Navbar.tsx
View File

@@ -16,14 +16,14 @@ function classNames(...classes: string[]) {
export default function Navbar() { export default function Navbar() {
return ( return (
<Disclosure as="nav" className="bg-white shadow-sm"> <Disclosure as="nav" className="bg-gray-900 border-b border-gray-800">
{({ open }) => ( {({ open }) => (
<> <>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <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 justify-between h-16">
<div className="flex"> <div className="flex">
<div className="flex-shrink-0 flex items-center"> <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>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8"> <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
{navigation.map((item) => ( {navigation.map((item) => (
@@ -34,8 +34,8 @@ export default function Navbar() {
rel={item.external ? "noopener noreferrer" : ""} rel={item.external ? "noopener noreferrer" : ""}
className={classNames( className={classNames(
item.current item.current
? 'border-indigo-500 text-gray-900' ? 'border-indigo-500 text-gray-100'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', : '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' 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium'
)} )}
aria-current={item.current ? 'page' : undefined} aria-current={item.current ? 'page' : undefined}
@@ -50,7 +50,7 @@ export default function Navbar() {
</div> </div>
<div className="-mr-2 flex items-center sm:hidden"> <div className="-mr-2 flex items-center sm:hidden">
{/* Mobile menu button */} {/* 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> <span className="sr-only">Open main menu</span>
{open ? ( {open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" /> <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -73,8 +73,8 @@ export default function Navbar() {
rel={item.external ? "noopener noreferrer" : ""} rel={item.external ? "noopener noreferrer" : ""}
className={classNames( className={classNames(
item.current item.current
? 'bg-indigo-50 border-indigo-500 text-indigo-700' ? 'bg-gray-800 border-indigo-500 text-gray-100'
: 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700', : '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' 'block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
)} )}
aria-current={item.current ? 'page' : undefined} aria-current={item.current ? 'page' : undefined}
@@ -82,7 +82,7 @@ export default function Navbar() {
{item.name} {item.name}
</Disclosure.Button> </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"> <div className="px-4">
<ConnectButton /> <ConnectButton />
</div> </div>