refactor: improve InfoBox and NoteBox components with collapsible design
- 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
@@ -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>
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
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>
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user