include some dark theme for portfolio

ChainSafe · Jun 11, 2024 · 2a36435 · 2a36435
1 parent e988ece
commit 2a36435
Showing 1 changed file with 31 additions and 38 deletions.
diff --git a/web/src/lib/components/Portfolio.svelte b/web/src/lib/components/Portfolio.svelte
@@ -31,12 +31,12 @@
 {#await promise}
 	<p>...waiting</p>
 {:then data}
-	<div class="w-[1012px] bg-stone-50 flex flex-col items-center gap-4 p-12">
+	<div class="w-[1024px] bg-gray-200 dark:bg-gray-800 flex flex-col items-center gap-4 rounded-xl">
 		<!-- Balance Section -->
-		<div class="w-full p-6 bg-white rounded-xl flex justify-between items-center relative">
+		<div class="w-full p-6 rounded-xl flex justify-between items-center relative py-9">
 			<div>
-				<div class="text-slate-800 text-lg font-normal text-left">Balance</div>
-				<div class="text-slate-800 text-4xl font-semibold">
+				<div class="text-slate-800 dark:text-slate-200 text-lg font-normal text-left">Balance</div>
+				<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold">
 					{#await total}
 						0
 					{:then result}
@@ -46,47 +46,40 @@
 					{/await}
 				</div>
 			</div>
-			<div
-				class="absolute right-0 top-0 bottom-0 w-[60%] bg-gradient-to-r from-white via-indigo-600 to-fuchsia-800 rounded-xl"
-			></div>
+			<div class="absolute right-0 top-0 bottom-0 w-[80%] bg-gradient-to-r from-transparent via-indigo-600 to-fuchsia-800 rounded-xl"></div>
 		</div>
 		<!-- Portfolio Section -->
-		<div class="w-full flex flex-col gap-4">
-			<div class="text-slate-800 text-2xl font-semibold text-left">Portfolio</div>
+		<div class="w-full flex flex-col gap-4 p-6 pt-3">
+			<div class="text-slate-800 dark:text-slate-200 text-2xl font-semibold text-left">Portfolio</div>
 			<div class="table-container">
 				<!-- Native Table Element -->
-				<table class="table table-hover">
+				<table class="table table-hover bg-white dark:bg-gray-800 text-slate-800 dark:text-slate-200 rounded-lg overflow-hidden">
 					<thead>
-						<tr class="font-medium">
-							<th>ASSET</th>
-							<th>BALANCE</th>
-							<th>DISTRIBUTION</th>
-						</tr>
+					<tr class="bg-gray-100 dark:bg-gray-700 font-medium">
+						<th class="p-2">ASSET</th>
+						<th class="p-2">BALANCE</th>
+						<th class="p-2">DISTRIBUTION</th>
+					</tr>
 					</thead>
 					<tbody>
-						{#each data.tokens as token, i}
-							<tr class="pt-2" on:click={() => handleListClick(i)}>
-								<td class="flex items-center gap-2 py-2">
-									<div
-										class="relative w-6 h-6 bg-gradient-to-b from-amber-500 to-amber-300 rounded-full overflow-hidden"
-									>
-										<img class="size-6" src={token.logoURI} alt={`${token.logoURI}-LOGO`} />
-									</div>
-									<div class="flex">
-										<div class="text-slate-800 text-base">{token.name}</div>
-										<div class="px-2 ml-2 py-0.5 bg-zinc-200 rounded text-slate-700 text-sm">
-											6.4%
-										</div>
-									</div>
-								</td>
-								<td class="text-slate-700 text-base text-left"
-									>{fromWei(token.total, token.decimals)} {token.symbol}</td
-								>
-								<td class="text-slate-700 text-base"
-									><Facepile balances={token.balances} networks={data.raw.networks} /></td
-								>
-							</tr>
-						{/each}
+					{#each data.tokens as token, i}
+						<tr class="pt-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" on:click={() => handleListClick(i)}>
+							<td class="flex items-center gap-2 py-2">
+								<div class="relative w-6 h-6 bg-gradient-to-b from-amber-500 to-amber-300 rounded-full overflow-hidden">
+									<img class="size-6" src={token.logoURI} alt={`${token.logoURI}-LOGO`} />
+								</div>
+								<div class="flex">
+									<div class="text-slate-800 dark:text-slate-200 text-base">{token.name}</div>
+								</div>
+							</td>
+							<td class="text-slate-700 dark:text-slate-300 text-base text-left">
+								{fromWei(token.total, token.decimals)} {token.symbol}
+							</td>
+							<td class="text-slate-700 dark:text-slate-300 text-base">
+								<Facepile balances={token.balances} networks={data.raw.networks} />
+							</td>
+						</tr>
+					{/each}
 					</tbody>
 				</table>
 			</div>