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 597fa279ea
commit 3a6be65a48
2 changed files with 61 additions and 64 deletions

View File

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

View File

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