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,12 +119,42 @@ 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 && (
+        <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}
@@ -135,15 +167,9 @@ const NotesDirectory = ({
               <p className="text-danger small mt-1">{errors.note.message}</p>
             )}
           </form>
-      )}
-      <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 */}