Merge pull request 'Font size and button styling mismatch in Contact Profile (Web Directory)' (#332) from Kartik_Bug#887 into Issues_Aug_1W

Reviewed-on: #332
Merged

src/components/Directory/NotesDirectory.jsx

@@ -128,24 +128,40 @@ const NotesDirectory = ({
                 className="switch switch-primary"
                 style={{
                   visibility:
-                    contactProfile?.notes?.length > 0 ||
+                    contactProfile?.notes?.length > 0 || contactNotes?.length > 0
-                    contactNotes?.length > 0
                       ? "visible"
                       : "hidden",
+                  fontSize: "15px",        // smaller text
                 }}
               >
-              <input
+                <input
                   type="checkbox"
                   className="switch-input"
                   onChange={() => handleSwitch(!IsActive)}
-                  value={IsActive}
+                  checked={IsActive}
+                  style={{
+                    transform: "scale(0.8)", // smaller toggle
+                  }}
                 />
-                <input type="checkbox" className="switch-input" />
+                <span
-                <span className="switch-toggle-slider">
+                  className="switch-toggle-slider"
+                  style={{
+                    width: "30px",    // narrower slider
+                    height: "15px",   // shorter slider
+                  }}
+                >
                   <span className="switch-on"></span>
                   <span className="switch-off"></span>
                 </span>
-                <span className="switch-label">Include Deleted Notes</span>
+                <span
+                  className="switch-label"
+                  style={{
+                    fontSize: "14px", // smaller label text
+                    marginLeft: "-14px"
+                  }}
+                >
+                  Include Deleted Notes
+                </span>
               </label>
 
               {!showEditor && (
@@ -208,23 +224,23 @@ const NotesDirectory = ({
         )}
         {!isLoading && notesToDisplay.length > 0
           ? notesToDisplay
-              .slice()
+            .slice()
-              .reverse()
+            .reverse()
-              .map((noteItem) => (
+            .map((noteItem) => (
-                <NoteCardDirectory
+              <NoteCardDirectory
-                  refetchProfile={refetchProfile}
+                refetchProfile={refetchProfile}
-                  refetchNotes={refetch}
+                refetchNotes={refetch}
-                  refetchContact={refetch}
+                refetchContact={refetch}
-                  noteItem={noteItem}
+                noteItem={noteItem}
-                  contactId={contactProfile?.id}
+                contactId={contactProfile?.id}
-                  setProfileContact={setProfileContact}
+                setProfileContact={setProfileContact}
-                  key={noteItem.id}
+                key={noteItem.id}
-                />
+              />
-              ))
+            ))
           : !isLoading &&
-            !showEditor && (
+          !showEditor && (
-              <div className="text-center mt-5">{noNotesMessage}</div>
+            <div className="text-center mt-5">{noNotesMessage}</div>
-            )}
+          )}
       </div>
     </div>
   );