Replaced inline styles with Bootstrap utility classes

This commit is contained in:
Pramod Mahajan 2025-05-31 12:08:47 +05:30
parent d826acbb45
commit dbf7178db0
2 changed files with 43 additions and 48 deletions

View File

@ -94,14 +94,15 @@ const CardViewDirectory = ({
</div>
</div>
<ul className="list-inline m-0 ps-4">
<li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
<i className="fa-solid fa-briefcase me-2"></i>
</li>
<li className="list-inline-item text-small">
{contact.organization}
</li>
</ul>
<ul className="list-inline m-0 ps-4 d-flex align-items-start">
<li className="list-inline-item me-1 small">
<i className="fa-solid fa-briefcase me-2"></i>
</li>
<li className="list-inline-item text-break small">
{contact.organization}
</li>
</ul>
</div>
<div
className="card-footer text-start px-1 py-1"
@ -113,16 +114,17 @@ const CardViewDirectory = ({
}}
>
<hr className="my-0" />
{contact.contactEmails[0] && (
<ul className="list-inline my-1 ">
<li className="list-inline-item me-2">
<i className="bx bx-envelope bx-xs"></i>
</li>
<li className="list-inline-item text-small">
{contact.contactEmails[0]?.emailAddress}
</li>
</ul>
)}
{contact.contactEmails[0] && (
<ul className="list-unstyled my-1 d-flex align-items-start">
<li className="me-2">
<i className="bx bx-envelope bx-xs mt-1"></i>
</li>
<li className="flex-grow-1 text-break small">
{contact.contactEmails[0].emailAddress}
</li>
</ul>
)}
{contact.contactPhones[0] && (
<ul className="list-inline m-0 ">

View File

@ -58,23 +58,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Email:</p>
</div>
<div>
<ul className="list-inline mb-0">
<div style={{ flex: 1 }}>
<ul className="list-unstyled mb-0">
{contactProfile.contactEmails.map((email, idx) => (
<li
className="list-inline-item me-3 d-flex align-items-center"
key={idx}
>
<i className="bx bx-envelope bx-xs me-1"></i>
<span className="me-2">{email.emailAddress}</span>
<li className="d-flex align-items-center mb-1" key={idx}>
<i className="bx bx-envelope bx-xs me-1 mt-1"></i>
<span className="me-1 flex-grow text-break overflow-wrap">
{email.emailAddress}
</span>
<i
className={`bx bx-copy cursor-pointer ${
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
copiedIndex === idx
? "text-secondary"
: "text-primary"
}`}
title={copiedIndex === idx ? "Copied!" : "Copy Email"}
style={{ fontSize: "16px" }}
style={{ flexShrink: 0 }}
onClick={() => handleCopy(email.emailAddress, idx)}
></i>
</li>
@ -103,33 +102,28 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)}
{contactProfile?.createdAt && (
<div className="d-flex mb-2">
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Created : </p>
</div>
<div>
<ul className="list-inline mb-0">
<div className="d-flex align-items-center">
<li className="list-inline-item">
<i className="bx bx-calendar-week bx-xs me-1"></i>
{moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
</li>
</ul>
</div>
</div>
)}
{contactProfile?.address && (
<div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Location : </p>
<p className="m-0">Location:</p>
</div>
<div>
<ul className="list-inline mb-0">
<li className="list-inline-item">
<i className="bx bx-map bx-xs me-1"></i>
{contactProfile?.address}
</li>
</ul>
<div className="d-flex align-items-center">
<i className="bx bx-map bx-xs me-1 "></i>
<span className="text-break small">
{contactProfile.address}
</span>
</div>
</div>
)}
@ -141,13 +135,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<div style={{ width: "100px", minWidth: "100px" }}>
<p className="m-0">Orgnization : </p>
</div>
<div>
<ul className="list-inline mb-0">
<li className="list-inline-item">
<i className="fa-solid fa-briefcase me-2"></i>
{contactProfile.organization}
</li>
</ul>
<div className="d-flex align-items-center">
<i className="fa-solid fa-briefcase me-2"></i>
<span style={{ wordBreak: "break-word" }}>
{contactProfile.organization}
</span>
</div>
</div>
)}