From dbe2b08e1cf187e80f1e16793841142a1b1e39a4 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Sat, 22 Nov 2025 23:56:56 +0100
Subject: [PATCH] Improve proof of payment upload UI with fieldset styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Wrapped upload section in a styled fieldset with legend
- Adjusted spacing and layout for better visual hierarchy
- Updated translations:
  - Added "upload-proof-of-payment-legend" key
  - English: "Proof of payment"
  - Croatian: "Potvrda o uplati"
  - Updated label text to be more descriptive
  - English: "Here you can upload proof of payment:"
  - Croatian: "Ovdje možete priložiti potvrdu o uplati:"

The upload section now has a consistent fieldset styling
matching other sections of the form.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/ui/ViewLocationCard.tsx | 70 ++++++++++++++++++++-----------------
 messages/en.json            |  3 +-
 messages/hr.json            |  3 +-
 3 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/app/ui/ViewLocationCard.tsx b/app/ui/ViewLocationCard.tsx
index 4bd69ca..d77fed0 100644
--- a/app/ui/ViewLocationCard.tsx
+++ b/app/ui/ViewLocationCard.tsx
@@ -122,41 +122,45 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     </>
                     : null
                 }
-                {attachment ? (
-                    <div className="mt-4">
-                        <Link
-                            href={`/share/proof-of-payment/${_id}/`}
-                            target="_blank"
-                            className='text-center w-full max-w-[20em] text-nowrap truncate inline-block'
-                        >
-                            <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
-                            {decodeURIComponent(attachment.fileName)}
-                        </Link>
-                    </div>
-                ) : (
-                    <div className="form-control w-full mb-4 mt-4">
-                        <label className="label">
-                            <span className="label-text">{t("upload-proof-of-payment-label")}</span>
-                        </label>
-                        <div className="flex items-center gap-2">
-                            <input
-                                id="utilBillsProofOfPaymentAttachment"
-                                name="utilBillsProofOfPaymentAttachment"
-                                type="file"
-                                accept="application/pdf"
-                                className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words"
-                                onChange={handleFileChange}
-                                disabled={isUploading}
-                            />
-                            {isUploading && (
-                                <span className="loading loading-spinner loading-sm"></span>
+                <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">
+                    <legend className="fieldset-legend font-semibold uppercase">{t("upload-proof-of-payment-legend")}</legend>
+
+                    {attachment ? (
+                        <div className="mt-3 ml-[-.5rem]">
+                            <Link
+                                href={`/share/proof-of-payment/${_id}/`}
+                                target="_blank"
+                                className='text-center w-full max-w-[20rem] text-nowrap truncate inline-block'
+                            >
+                                <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
+                                {decodeURIComponent(attachment.fileName)}
+                            </Link>
+                        </div>
+                    ) : (
+                        <div className="form-control w-full">
+                            <label className="label">
+                                <span className="label-text">{t("upload-proof-of-payment-label")}</span>
+                            </label>
+                            <div className="flex items-center gap-2">
+                                <input
+                                    id="utilBillsProofOfPaymentAttachment"
+                                    name="utilBillsProofOfPaymentAttachment"
+                                    type="file"
+                                    accept="application/pdf"
+                                    className="file-input file-input-bordered grow file-input-sm my-2 block max-w-[17em] md:max-w-[80em] break-words"
+                                    onChange={handleFileChange}
+                                    disabled={isUploading}
+                                />
+                                {isUploading && (
+                                    <span className="loading loading-spinner loading-sm"></span>
+                                )}
+                            </div>
+                            {uploadError && (
+                                <p className="text-sm text-red-500 mt-1">{uploadError}</p>
                             )}
                         </div>
-                        {uploadError && (
-                            <p className="text-sm text-red-500 mt-1">{uploadError}</p>
-                        )}
-                    </div>
-                )}
+                    )}
+                </fieldset>
             </div>
         </div>);
 };
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
index ec106d6..7b4cb2c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -68,7 +68,8 @@
       "payment-reference-label": "Reference number:",
       "payment-purpose-code-label": "Purpose code:",
       "payment-description-label": "Payment description:",
-      "upload-proof-of-payment-label": "Upload proof of payment:"
+      "upload-proof-of-payment-legend": "Proof of payment",
+      "upload-proof-of-payment-label": "Here you can upload proof of payment:"
     },
     "month-card": {
       "payed-total-label": "Total monthly expenditure:",
diff --git a/messages/hr.json b/messages/hr.json
index d0edbb2..0591a95 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -68,7 +68,8 @@
       "payment-reference-label": "Poziv na broj:",
       "payment-purpose-code-label": "Šifra namjene:",
       "payment-description-label": "Opis plaćanja:",
-      "upload-proof-of-payment-label": "Priložite potvrdu o uplati:"
+      "upload-proof-of-payment-legend": "Potvrda o uplati",
+      "upload-proof-of-payment-label": "Ovdje možete priložiti potvrdu o uplati:"
     },
     "month-card": {
       "payed-total-label": "Ukupni mjesečni trošak:",