knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: replace fieldset with divider in LocationCard monthly statement

Browse Source 
- Replace bordered fieldset with divider for cleaner visual separation
- Adjust spacing and margins for better alignment
- Remove card-based container in favor of simpler layout
- Maintain all functionality while improving visual consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-24 21:10:54 +01:00
parent a2ccde16e5
commit 248d29ef22
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/ui/LocationCard.tsx
View File

@@ -59,12 +59,13 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
{monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentUploadedAt ? {monthlyExpense > 0 || seenByTenant || utilBillsProofOfPaymentUploadedAt ?
<>
<div className="divider mt-1 mb-0 font-bold uppercase">{t("monthly-statement-legend")}</div>
<fieldset className="card card-compact card-bordered border-1 border-neutral p-3 mt-2 mr-[3.5rem]">
<legend className="fieldset-legend px-2 text-sm font-semibold uppercase">{t("monthly-statement-legend")}</legend>
{ {
monthlyExpense > 0 ? monthlyExpense > 0 ?
<div className="flex items-center gap-2 ml-4"> <div className="flex items-center gap-2 ml-2">
<BanknotesIcon className="h-5 w-5" /> <BanknotesIcon className="h-5 w-5" />
{t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong> {t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
<CheckCircleIcon className="h-5 w-5 text-success" /> <CheckCircleIcon className="h-5 w-5 text-success" />
@@ -72,7 +73,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
: null : null
} }
{seenByTenant && ( {seenByTenant && (
<div className="flex items-center gap-2 mt-2 ml-4"> <div className="flex items-center gap-2 mt-[-0.2rem] ml-2">
<EyeIcon className="h-5 w-5" /> <EyeIcon className="h-5 w-5" />
<span className="text-sm">{t("seen-by-tenant-label")}</span> <span className="text-sm">{t("seen-by-tenant-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" /> <CheckCircleIcon className="h-5 w-5 text-success" />
@@ -82,14 +83,14 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
<Link <Link
href={`/share/proof-of-payment/${_id}/`} href={`/share/proof-of-payment/${_id}/`}
target="_blank" target="_blank"
className="flex items-center gap-2 mt-2 ml-4" className="flex items-center gap-2 mt-[-0.2rem] ml-2"
> >
<TicketIcon className="h-5 w-5" /> <TicketIcon className="h-5 w-5" />
<span className="text-sm">{t("download-proof-of-payment-label")}</span> <span className="text-sm">{t("download-proof-of-payment-label")}</span>
<CheckCircleIcon className="h-5 w-5 text-success" /> <CheckCircleIcon className="h-5 w-5 text-success" />
</Link> </Link>
)} )}
</fieldset> : null </>: null
} }
<ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} /> <ShareIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".6em", right: "1.2em" }} onClick={handleCopyLinkClick} />