From e554fe3cb231ea91c59e7b32c497f39611e74175 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Mon, 24 Nov 2025 21:00:28 +0100
Subject: [PATCH] refactor: improve InfoBox and NoteBox components with
 collapsible design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert InfoBox to collapsible details element with chevron indicators
- Add internationalized default title support for InfoBox
- Update NoteBox styling to match new design system
- Replace custom alert styling with consistent border-based design
- Add text-base class to fieldset legends for uniform sizing
- Remove className prop from InfoBox and NoteBox (no longer needed)
- Update translations for clearer payment instruction descriptions

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/ui/InfoBox.tsx          | 28 +++++++++++++++++++++-------
 app/ui/LocationEditForm.tsx | 16 ++++++++--------
 app/ui/NoteBox.tsx          | 11 ++++++-----
 app/ui/UserSettingsForm.tsx | 14 +++++++-------
 messages/en.json            |  9 +++++++--
 messages/hr.json            | 11 +++++++----
 6 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/app/ui/InfoBox.tsx b/app/ui/InfoBox.tsx
index 7c92cb2..c101ee5 100644
--- a/app/ui/InfoBox.tsx
+++ b/app/ui/InfoBox.tsx
@@ -1,9 +1,23 @@
+import { ChevronDownIcon, ChevronUpIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { useTranslations } from "next-intl";
 import { FC, ReactNode } from "react";
 
-export const InfoBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
-    <div className={`alert max-w-md flex flex-row items-start gap-[0.5rem] ${className}`}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <span className="text-left">{children}</span>
-    </div>
\ No newline at end of file
+export const InfoBox: FC<{
+  children: ReactNode;
+  title?: string;
+}> = ({ children, title }) => {
+
+    const t = useTranslations("info-box");
+
+  return (
+    <details className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
+      <summary className="flex cursor-pointer items-center justify-between">
+        <span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
+        <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
+        <span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
+      </summary>
+      <div className="mt-2 italic text-sm text-gray-400">{children}</div>
+    </details>
+  )
+}
+
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 185bc37..781812c 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -86,9 +86,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                     </fieldset>
 
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                        <legend className="fieldset-legend font-semibold uppercase">{t("tenant-payment-instructions-legend")}</legend>
+                        <legend className="fieldset-legend font-semibold uppercase text-base">{t("tenant-payment-instructions-legend")}</legend>
 
-                        <InfoBox className="p-1 pt-0 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
+                        <InfoBox>{t("tenant-payment-instructions-code-info")}</InfoBox>
 
                         <fieldset className="fieldset mt-2 p-2">
                             <legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
@@ -217,8 +217,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                         }
                 </fieldset>
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                        <legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend>
-                        <InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
+                        <legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
+                        <InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
 
                         <fieldset className="fieldset">
                             <label className="label cursor-pointer justify-start gap-3">
@@ -246,8 +246,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                     </fieldset>
 
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                        <legend className="fieldset-legend font-semibold uppercase">{t("auto-rent-notification-legend")}</legend>
-                        <InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
+                        <legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-rent-notification-legend")}</legend>
+                        <InfoBox>{t("auto-rent-notification-info")}</InfoBox>
 
                         <fieldset className="fieldset">
                             <label className="label cursor-pointer justify-start gap-3">
@@ -327,7 +327,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
                     )}
 
                     <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                        <legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend>
+                        <legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
                             {!location ? (
                                 <fieldset className="fieldset">
                                     <label className="label cursor-pointer justify-start gap-3">
@@ -342,7 +342,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
 
                             ) : (
                                 <>
-                                    <InfoBox className="p-1 mb-1">{t("update-scope-info")}</InfoBox>
+                                    <InfoBox>{t("update-scope-info")}</InfoBox>
                                     <fieldset className="fieldset mt-2 p-2">
                                         <legend className="fieldset-legend">{t("update-scope-legend")}</legend>
                                         <select defaultValue="current" className="select input-bordered w-full" name="updateScope">
diff --git a/app/ui/NoteBox.tsx b/app/ui/NoteBox.tsx
index ce60aa8..2a9e97a 100644
--- a/app/ui/NoteBox.tsx
+++ b/app/ui/NoteBox.tsx
@@ -1,7 +1,8 @@
+import { CogIcon } from "@heroicons/react/24/outline";
 import { FC, ReactNode } from "react";
 
-export const NoteBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
-    <div className={`alert max-w-md flex flex-row items-start gap-[.8rem] ml-1 ${className}`}>
-        <span className="w-6 h-6 text-xl">⚠️</span>
-        <span className="text-left">{children}</span>
-    </div>
\ No newline at end of file
+export const NoteBox: FC<{ children: ReactNode }> = ({ children }) =>
+
+<div className="group border border-gray-800 rounded-lg p-2 mb-1 max-w-md">
+  <div className="mt-2 italic text-sm"><CogIcon className="w-6 h-6 inline mt-[-.3em] text-blue-400" /> {children}</div>
+</div>
\ No newline at end of file
diff --git a/app/ui/UserSettingsForm.tsx b/app/ui/UserSettingsForm.tsx
index 42f310a..63b0aec 100644
--- a/app/ui/UserSettingsForm.tsx
+++ b/app/ui/UserSettingsForm.tsx
@@ -49,7 +49,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
     return (
         <>
             <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pt-1 pb-2 mt-4">
-                <legend className="fieldset-legend font-semibold uppercase">{t("general-settings-legend")}</legend>
+                <legend className="fieldset-legend font-semibold uppercase text-base">{t("general-settings-legend")}</legend>
 
                 <div className="form-control w-full">
                     <label className="label">
@@ -111,9 +111,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
             </fieldset>
 
             <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                <legend className="fieldset-legend font-semibold uppercase">{t("iban-payment-instructions--legend")}</legend>
+                <legend className="fieldset-legend font-semibold uppercase text-base">{t("iban-payment-instructions--legend")}</legend>
 
-                <InfoBox className="p-1 mb-1">{t("iban-payment-instructions--intro-message")}</InfoBox>
+                <InfoBox>{t("iban-payment-instructions--intro-message")}</InfoBox>
 
                 <fieldset className="fieldset">
                     <label className="label cursor-pointer justify-start gap-3">
@@ -230,7 +230,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                         </div>
                     </div>
 
-                    <NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
+                    <NoteBox>{t("payment-additional-notes")}</NoteBox>
                 </>
                 ) : // ELSE include hidden inputs to preserve existing values
                 <>
@@ -263,9 +263,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
             </fieldset>
 
             <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
-                <legend className="fieldset-legend font-semibold uppercase">{t("revolut-payment-instructions--legend")}</legend>
+                <legend className="fieldset-legend font-semibold uppercase text-base">{t("revolut-payment-instructions--legend")}</legend>
 
-                <InfoBox className="p-1 mb-1">{t("revolut-payment-instructions--intro-message")}</InfoBox>
+                <InfoBox>{t("revolut-payment-instructions--intro-message")}</InfoBox>
 
                 <fieldset className="fieldset">
                     <label className="label cursor-pointer justify-start gap-3">
@@ -325,7 +325,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                             ) : null
                          }
                     </div>
-                    <NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
+                    <NoteBox>{t("payment-additional-notes")}</NoteBox>
                 </>
                 )
                 : // ELSE include hidden input to preserve existing value
diff --git a/messages/en.json b/messages/en.json
index 29be3d5..e61aaa7 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -204,7 +204,8 @@
     "title": "User settings",
 
     "iban-payment-instructions--legend": "Payment to Your IBAN",
-    "iban-payment-instructions--intro-message": "By activating this option, payment instructions will be included in the monthly statement sent to the tenant, allowing a direct payment via IBAN to be made to your bank account.",
+    "iban-payment-instructions--intro-title": "What does this option do?",
+    "iban-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain payment details and a 2D barcode allowing a direct payment to your bank account.",
     "iban-payment-instructions--toggle-label": "enable IBAN payment instructions",
 
     "iban-form-title": "Payment Information for IBAN",
@@ -220,7 +221,8 @@
 
     "revolut-form-title": "Payment Information for Revolut",
     "revolut-payment-instructions--legend": "Payment to Your Revolut Profile",
-    "revolut-payment-instructions--intro-message": "By activating this option, payment instructions will be included in the monthly statement sent to the tenant, allowing a direct payment via Revolut to be made to your  Revolut profile.",
+    "revolut-payment-instructions--intro-title": "What does this option do?",
+    "revolut-payment-instructions--intro-message": "By activating this option, the monthly statement sent to the tenant will contain a link allowing a direct payment to your Revolut account.",
     "revolut-payment-instructions--toggle-label": "enable Revolut payment instructions",
 
     "revolut-profile-label": "Revolut profile name",
@@ -246,5 +248,8 @@
       "owner-revolut-profile-invalid": "Invalid Revolut profile format. Must start with '@' and contain only English letters and numbers (e.g., '@john123')",
       "validation-failed": "Validation failed. Please check the form and try again."
     }
+  },
+  "info-box": {
+    "default-title": "What is this option for?"
   }
 }
\ No newline at end of file
diff --git a/messages/hr.json b/messages/hr.json
index f9b549b..d437e10 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -203,8 +203,8 @@
     "title": "Korisničke postavke",
     
     "iban-payment-instructions--legend": "Uplata na vaš IBAN",
-    "iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, upute za uplatu bit će uključene u mjesečni izvještaj poslan podstanaru, omogućujući im da izvrše izravnu uplatu putem IBAN-a na vaš bankovni račun.",
-    "iban-payment-instructions--toggle-label": "uključi IBAN uplatu",
+    "iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će podatke za uplatu i 2D barkod putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na bankovni račun.",
+    "iban-payment-instructions--toggle-label": "omogući IBAN uplatu",
 
     "iban-form-title": "Informacije za uplatu na IBAN",
     "iban-owner-name-label": "Vaše ime i prezime",
@@ -217,8 +217,8 @@
     "iban-owner-iban-placeholder": "IBAN putem kojeg ćete primate uplate",
 
     "revolut-payment-instructions--legend": "Uplata na vaš Revolut profil",
-    "revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, upute za uplatu bit će uključene u mjesečni izvještaj poslan podstanaru, omogućujući im da izvrše izravnu uplatu putem Revolut-a na vaš profil.",
-    "revolut-payment-instructions--toggle-label": "uključi Revolut uplatu",
+    "revolut-payment-instructions--intro-message": "Aktiviranjem ove opcije, mjesečni obračun poslan podstanaru sadržavati će link putem kojeg će podstanar moći izvršiti izravnu uplatu sredstava na vaš Revolut račun.",
+    "revolut-payment-instructions--toggle-label": "omogući Revolut uplatu",
 
     "revolut-form-title": "Informacije za uplatu na Revolut",
     "revolut-profile-label": "Naziv vašeg Revolut profila",
@@ -243,5 +243,8 @@
       "validation-failed": "Validacija nije uspjela. Molimo provjerite formu i pokušajte ponovno."
     },
     "payment-additional-notes": "VAŽNO: da bi upute za uplatu bile prikazane podstanaru, morate tu ovu opciju uključiti i u postavkama pripadajuće nekretnine."
+  },
+  "info-box": {
+    "default-title": "Čemu služi ova opcija?"
   }
 }
\ No newline at end of file