From 3a6be65a48cd9f195eecb510a8ddfbd3c0a906d1 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Mon, 19 May 2025 16:32:09 +0530
Subject: [PATCH]  replace add phone & email button with icon-only element for
 cleaner UI

---
 src/components/Directory/ManageDirectory.jsx | 63 ++++++++++----------
 src/components/Directory/UpdateContact.jsx   | 62 ++++++++++---------
 2 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx
index a460f1b5..c01e92c2 100644
--- a/src/components/Directory/ManageDirectory.jsx
+++ b/src/components/Directory/ManageDirectory.jsx
@@ -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 && (
diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx
index d210435c..e1a07c16 100644
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@@ -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 && (