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

refactor: improve InfoBox and NoteBox components with collapsible design

Browse Source 
- 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>
This commit is contained in:
Knee Cola
2025-11-24 21:00:28 +01:00
parent fd0fbafb3a
commit e554fe3cb2
6 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/ui/UserSettingsForm.tsx
View File

@@ -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