Add cosmatic changes to quill editor on contact notes page

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;
+}

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)}>
+        <div className="card m-2 mb-5">
-          <Editor
+          <button
-            value={noteValue}
+            type="button"
-            loading={IsSubmitting}
+            class="btn  btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
-            onChange={handleEditorChange}
+            aria-label="Close"
-            onCancel={onCancel}
+            style={{ backgroundColor: "#eee", color: "white" }}
-            onSubmit={handleSubmit(onSubmit)}
+            onClick={() => setAddNote(!addNote)}
-          />
+          ></button>
-          {errors.notes && (
+          {/* <div className="d-flex justify-content-end px-2">
-            <p className="text-danger small mt-1">{errors.note.message}</p>
+            <span
-          )}
+              className={`btn btn-sm   ${
-        </form>
+                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">

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 */}