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>
{!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>

6
app/layout.tsx
View File

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

16
components/Navbar.tsx
View File

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