From 3305c0b0d922dc9e7d512fead73905edc1eaece5 Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Thu, 12 Jun 2025 18:12:25 +0530
Subject: [PATCH] Add cosmatic changes to quill editor on contact notes page

---
 public/assets/css/default.css               | 14 +++++
 src/components/Directory/NotesDirectory.jsx | 68 ++++++++++++++-------
 src/components/common/TextEditor/Editor.jsx |  2 +-
 3 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index a0024e3d..32b8644b 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -199,3 +199,17 @@
   .dropdown-menu[data-bs-popper] {
   inset-block-start: 100%;
 }
+
+.ql-toolbar.ql-snow {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.ql-container.ql-snow {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  max-height: 200px;
+}
+
+.ql-editor {
+  max-height: 200px;
+}
diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index b8128ef6..2b08b70e 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -101,6 +101,8 @@ const NotesDirectory = ({
     <div className="text-start">
       <div className="d-flex align-items-center justify-content-between">
         <p className="fw-semibold m-0">Notes :</p>
+      </div>
+      <div className="d-flex align-items-center justify-content-between mb-5">
         <div className="m-0 d-flex aligin-items-center">
           <label className="switch switch-primary">
             <input
@@ -117,33 +119,57 @@ const NotesDirectory = ({
                 {/* <i class="icon-base bx bx-x"></i> */}
               </span>
             </span>
-            <span className="switch-label ">Show Including Inactive Notes</span>
+            <span className="switch-label ">Include Deleted Notes</span>
           </label>
         </div>
+        {!addNote && (
+          <div className="d-flex justify-content-center px-2">
+            <span
+              className={`btn btn-sm   ${
+                addNote ? "btn-danger" : "btn-primary"
+              }`}
+              onClick={() => setAddNote(!addNote)}
+            >
+              {addNote ? "Hide Editor" : "Add Note"}
+            </span>
+          </div>
+        )}
       </div>
 
       {addNote && (
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Editor
-            value={noteValue}
-            loading={IsSubmitting}
-            onChange={handleEditorChange}
-            onCancel={onCancel}
-            onSubmit={handleSubmit(onSubmit)}
-          />
-          {errors.notes && (
-            <p className="text-danger small mt-1">{errors.note.message}</p>
-          )}
-        </form>
+        <div className="card m-2 mb-5">
+          <button
+            type="button"
+            class="btn  btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
+            aria-label="Close"
+            style={{ backgroundColor: "#eee", color: "white" }}
+            onClick={() => setAddNote(!addNote)}
+          ></button>
+          {/* <div className="d-flex justify-content-end px-2">
+            <span
+              className={`btn btn-sm   ${
+                addNote ? "btn-danger" : "btn-primary"
+              }`}
+              onClick={() => setAddNote(!addNote)}
+            >
+              {addNote ? "Hide Editor" : "Add Note"}
+            </span>
+          </div> */}
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Editor
+              value={noteValue}
+              loading={IsSubmitting}
+              onChange={handleEditorChange}
+              onCancel={onCancel}
+              onSubmit={handleSubmit(onSubmit)}
+            />
+            {errors.notes && (
+              <p className="text-danger small mt-1">{errors.note.message}</p>
+            )}
+          </form>
+        </div>
       )}
-      <div className="d-flex justify-content-end px-2">
-        <span
-          className={`btn btn-sm   ${addNote ? "btn-danger" : "btn-primary"}`}
-          onClick={() => setAddNote(!addNote)}
-        >
-          {addNote ? "Hide Editor" : "Add Note"}
-        </span>
-      </div>
+
       <div className=" justify-content-start  px-1 mt-1">
         {isLoading && (
           <div className="text-center">
diff --git a/src/components/common/TextEditor/Editor.jsx b/src/components/common/TextEditor/Editor.jsx
index d44c9158..cb076ad3 100644
--- a/src/components/common/TextEditor/Editor.jsx
+++ b/src/components/common/TextEditor/Editor.jsx
@@ -33,7 +33,7 @@ const Editor = ({
   ];
 
   return (
-    <div className="editor-wrapper m-5">
+    <div className="editor-wrapper m-2 mt-5">
       <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
         <div className="d-flex justify-content-between align-items-center w-100">
           {/* Left: Quill Format Buttons */}