Improve proof of payment upload UI with fieldset styling

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

@@ -122,19 +122,22 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     </>
                     : null
                 }
+                <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-4">
+                        <div className="mt-3 ml-[-.5rem]">
                             <Link
                                 href={`/share/proof-of-payment/${_id}/`}
                                 target="_blank"
-                            className='text-center w-full max-w-[20em] text-nowrap truncate inline-block'
+                                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 mb-4 mt-4">
+                        <div className="form-control w-full">
                             <label className="label">
                                 <span className="label-text">{t("upload-proof-of-payment-label")}</span>
                             </label>
@@ -157,6 +160,7 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                             )}
                         </div>
                     )}
+                </fieldset>
             </div>
         </div>);
 };

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:",

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:",