From 248d29ef22ed6dfaa63b60737fa711d91d037fb2 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 24 Nov 2025 21:10:54 +0100
Subject: [PATCH] style: replace fieldset with divider in LocationCard monthly
 statement
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/ui/LocationCard.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/ui/LocationCard.tsx b/app/ui/LocationCard.tsx
index 238a4ff..e8352d1 100644
--- a/app/ui/LocationCard.tsx
+++ b/app/ui/LocationCard.tsx
@@ -59,12 +59,13 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
 
 
                 {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 ?
-                                <div className="flex items-center gap-2 ml-4">
+                                <div className="flex items-center gap-2 ml-2">
                                     <BanknotesIcon className="h-5 w-5" />
                                     {t("payed-total-label")} <strong>{formatCurrency(monthlyExpense, currency ?? "EUR")}</strong>
                                     <CheckCircleIcon className="h-5 w-5 text-success" />
@@ -72,7 +73,7 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                                 : null
                         }
                         {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" />
                                 <span className="text-sm">{t("seen-by-tenant-label")}</span>
                                 <CheckCircleIcon className="h-5 w-5 text-success" />
@@ -82,14 +83,14 @@ export const LocationCard: FC<LocationCardProps> = ({ location, currency }) => {
                             <Link
                                 href={`/share/proof-of-payment/${_id}/`}
                                 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" />
                                 <span className="text-sm">{t("download-proof-of-payment-label")}</span>
                                 <CheckCircleIcon className="h-5 w-5 text-success" />
                             </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} />