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

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

View File

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