align "Add a Note" button to right and switch to left consistently

This commit is contained in:
Pramod Mahajan 2025-06-20 11:25:14 +05:30
parent c3d172ea8e
commit 6e570ee411
2 changed files with 41 additions and 43 deletions

View File

@ -88,7 +88,8 @@ const NotesDirectory = ({
};
const onCancel = () => {
setValue("note", "");
setValue( "note", "" );
};
const handleSwitch = () => {
setIsActive(!IsActive);
@ -103,48 +104,45 @@ const NotesDirectory = ({
<p className="fw-semibold m-0">Notes :</p>
</div>
<div className="d-flex align-items-center justify-content-between mb-5">
{contactNotes?.length > 0 && (
<div className="m-0 d-flex aligin-items-center">
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
value={IsActive}
/>
<span className="switch-toggle-slider">
<span className="switch-on">
{/* <i class="icon-base bx bx-check"></i> */}
</span>
<span className="switch-off">
{/* <i class="icon-base bx bx-x"></i> */}
</span>
</span>
<span className="switch-label ">Include Deleted Notes</span>
</label>
</div>
)}
{!addNote && (
<div
className={`
${
contactNotes?.length > 0
? "d-flex justify-content-center px-2"
: "d-flex justify-content-center px-2w-100"
}`}
>
<span
className={`btn btn-sm ${
addNote ? "btn-danger" : "btn-primary"
}`}
onClick={() => setAddNote(!addNote)}
>
{addNote ? "Hide Editor" : "Add a Note"}
</span>
</div>
)}
<div className="m-0 d-flex align-items-center">
{contactNotes?.length > 0 ? (
<label className="switch switch-primary">
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
value={IsActive}
/>
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">Include Deleted Notes</span>
</label>
) : (
<div style={{ visibility: "hidden" }}>
<label className="switch switch-primary">
<input type="checkbox" className="switch-input" />
<span className="switch-toggle-slider">
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span className="switch-label">Include Deleted Notes</span>
</label>
</div>
)}
</div>
<div className="d-flex justify-content-end">
<span
className={`btn btn-sm ${addNote ? "btn-danger" : "btn-primary"}`}
onClick={() => setAddNote(!addNote)}
>
{addNote ? "Hide Editor" : "Add a Note"}
</span>
</div>
</div>
{addNote && (
<div className="card m-2 mb-5">

View File

@ -78,7 +78,7 @@ const Editor = ({
aria-disabled={loading}
onClick={onCancel}
>
Cancel
Clear
</span>
<span
type="submit"