replace add phone & email button with icon-only element for cleaner UI

This commit is contained in:
Pramod Mahajan 2025-05-19 16:32:09 +05:30
parent 35b036398f
commit 8a53e2d8de
2 changed files with 61 additions and 64 deletions

View File

@ -204,23 +204,22 @@ useEffect(() => {
placeholder="email@example.com"
/>
{index === emailFields.length - 1 ? (
<button
type="button"
className="btn btn-xs btn-primary ms-1"
onClick={handleAddEmail}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-plus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-primary ms-1"
// onClick={handleAddEmail}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer" onClick={handleAddEmail} />
) : (
<button
type="button"
className="btn btn-xs btn-danger ms-1 p-0"
onClick={() => removeEmail(index)}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-minus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-danger ms-1 p-0"
// onClick={() => removeEmail(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer" onClick={() => removeEmail(index)} />
)}
</div>
{errors.contactEmails?.[index]?.emailAddress && (
@ -264,23 +263,23 @@ useEffect(() => {
placeholder="9876543210"
/>
{index === phoneFields.length - 1 ? (
<button
type="button"
className="btn btn-xs btn-primary ms-1"
onClick={handleAddPhone}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-plus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-primary ms-1"
// onClick={handleAddPhone}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer" onClick={handleAddPhone} />
) : (
<button
type="button"
className="btn btn-xs btn-danger ms-1"
onClick={() => removePhone(index)}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-minus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-danger ms-1"
// onClick={() => removePhone(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer" onClick={() => removePhone(index)} />
)}
</div>
{errors.contactPhones?.[index]?.phoneNumber && (

View File

@ -239,23 +239,23 @@ await submitContact({ ...cleaned, id: existingContact.id });
placeholder="email@example.com"
/>
{index === emailFields.length - 1 ? (
<button
type="button"
className="btn btn-xs btn-primary ms-1"
onClick={handleAddEmail}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-plus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-primary ms-1"
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer" onClick={handleAddEmail}/>
) : (
<button
type="button"
className="btn btn-xs btn-danger ms-1 p-0"
onClick={() => removeEmail(index)}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-minus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-danger ms-1 p-0"
// onClick={() => removeEmail(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer" />
)}
</div>
{errors.contactEmails?.[index]?.emailAddress && (
@ -299,23 +299,21 @@ await submitContact({ ...cleaned, id: existingContact.id });
placeholder="9876543210"
/>
{index === phoneFields.length - 1 ? (
<button
type="button"
className="btn btn-xs btn-primary ms-1"
onClick={handleAddPhone}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-plus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-primary ms-1"
// onClick={handleAddPhone}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-plus-circle bx-xs ms-1 cursor-pointer" onClick={handleAddPhone} />
) : (
<button
type="button"
className="btn btn-xs btn-danger ms-1"
onClick={() => removePhone(index)}
style={{ width: "24px", height: "24px" }}
>
<i className="bx bx-minus-circle bx-xs" />
</button>
// <button
// type="button"
// className="btn btn-xs btn-danger ms-1"
// onClick={() => removePhone(index)}
// style={{ width: "24px", height: "24px" }}
// >
<i className="bx bx-minus-circle bx-xs ms-1 cursor-pointer" onClick={() => removePhone(index)} />
)}
</div>
{errors.contactPhones?.[index]?.phoneNumber && (