B4L/buildfor_life_budget
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode text color on budget amounts

Browse Source 
Budget/expense amounts on dashboard, project view, and expenses page
now show white text in dark mode instead of black.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alexander Grabowski
2026-04-06 13:25:55 +07:00
parent 80e02030d6
commit 49e500fdda
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/companies/[companyId]/expenses/+page.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
</p> </p>
</div> </div>
<div class="text-right"> <div class="text-right">
<p class="text-lg font-semibold">{formatCurrency(expense.amount, expense.currency)}</p> <p class="text-lg font-semibold dark:text-white">{formatCurrency(expense.amount, expense.currency)}</p>
<span <span
class="rounded-full px-2 py-0.5 text-xs font-medium class="rounded-full px-2 py-0.5 text-xs font-medium
{expense.status === 'approved' {expense.status === 'approved'
src/routes/(app)/companies/[companyId]/projects/[projectId]/+page.svelte
+3 -3
View File
@@ -33,11 +33,11 @@
<div class="mb-6 grid gap-4 sm:grid-cols-3"> <div class="mb-6 grid gap-4 sm:grid-cols-3">
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4"> <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
<p class="text-sm text-gray-500 dark:text-gray-400">Budget</p> <p class="text-sm text-gray-500 dark:text-gray-400">Budget</p>
<p class="text-xl font-bold">{formatCurrency(data.project.allocatedBudget, currency)}</p> <p class="text-xl font-bold dark:text-white">{formatCurrency(data.project.allocatedBudget, currency)}</p>
</div> </div>
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4"> <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
<p class="text-sm text-gray-500 dark:text-gray-400">Spent (Approved)</p> <p class="text-sm text-gray-500 dark:text-gray-400">Spent (Approved)</p>
<p class="text-xl font-bold">{formatCurrency(data.stats.totalApproved, currency)}</p> <p class="text-xl font-bold dark:text-white">{formatCurrency(data.stats.totalApproved, currency)}</p>
</div> </div>
<div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4"> <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
<p class="text-sm text-gray-500 dark:text-gray-400">Pending</p> <p class="text-sm text-gray-500 dark:text-gray-400">Pending</p>
@@ -68,7 +68,7 @@
<tr class="border-t border-gray-100 dark:border-gray-700"> <tr class="border-t border-gray-100 dark:border-gray-700">
<td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{expense.title}</td> <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{expense.title}</td>
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.categoryName ?? '—'}</td> <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.categoryName ?? '—'}</td>
<td class="px-4 py-3">{formatCurrency(expense.amount, expense.currency)}</td> <td class="px-4 py-3 dark:text-white">{formatCurrency(expense.amount, expense.currency)}</td>
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.expenseDate}</td> <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.expenseDate}</td>
<td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.submitterName ?? expense.submitterEmail}</td> <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{expense.submitterName ?? expense.submitterEmail}</td>
<td class="px-4 py-3"> <td class="px-4 py-3">
src/routes/(app)/dashboard/+page.svelte
+3 -3
View File
@@ -52,15 +52,15 @@
<div class="space-y-2 text-sm"> <div class="space-y-2 text-sm">
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-500 dark:text-gray-400">Budget</span> <span class="text-gray-500 dark:text-gray-400">Budget</span>
<span class="font-medium">{formatCurrency(company.totalBudget, company.currency)}</span> <span class="font-medium dark:text-white">{formatCurrency(company.totalBudget, company.currency)}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-500 dark:text-gray-400">Spent</span> <span class="text-gray-500 dark:text-gray-400">Spent</span>
<span class="font-medium">{formatCurrency(company.totalSpent, company.currency)}</span> <span class="font-medium dark:text-white">{formatCurrency(company.totalSpent, company.currency)}</span>
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-gray-500 dark:text-gray-400">Projects</span> <span class="text-gray-500 dark:text-gray-400">Projects</span>
<span class="font-medium">{company.projectCount}</span> <span class="font-medium dark:text-white">{company.projectCount}</span>
</div> </div>
{#if company.pendingExpenses > 0} {#if company.pendingExpenses > 0}
<div class="flex justify-between"> <div class="flex justify-between">