admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

UI Alignment and Icon Styling Issue in Contact Card Design in Directory.

Browse Source
This commit is contained in:
Kartik Sharma 2025-07-25 12:54:02 +05:30
parent 9ce6da35fb
commit fcdcb10f70
1 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Directory/ProfileContactDirectory.jsx
View File

@ -55,6 +55,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<div className="col-12 col-md-6 d-flex flex-column text-start"> <div className="col-12 col-md-6 d-flex flex-column text-start">
{contactProfile?.contactEmails?.length > 0 && ( {contactProfile?.contactEmails?.length > 0 && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-envelope bx-xs me-1"></i>
<p className="m-0">Email :</p>
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center"> <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-envelope bx-xs me-1"></i> <i className="bx bx-envelope bx-xs me-1"></i>
<p className="m-0">Email :</p> <p className="m-0">Email :</p>
@ -67,6 +70,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
{email.emailAddress} {email.emailAddress}
</span> </span>
<i <i
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
? "text-secondary"
: "text-primary"
}`}
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
? "text-secondary" ? "text-secondary"
: "text-primary" : "text-primary"
@ -84,17 +91,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
{contactProfile?.contactPhones?.length > 0 && ( {contactProfile?.contactPhones?.length > 0 && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
style={{ width: "100px", minWidth: "110px" }}
className="d-flex align-items-center"
>
<i className="bx bx-phone bx-xs me-1"></i> <i className="bx bx-phone bx-xs me-1"></i>
<p className="m-0">Phone :</p> <p className="m-0">Phone :</p>
</div> </div>
<div> <div>
<ul className="list-inline mb-0"> <ul className="list-inline mb-0">
{contactProfile.contactPhones.map((phone, idx) => ( {contactProfile?.contactPhones.map((phone, idx) => (
<li className="list-inline-item me-1" key={idx}> <li className="list-inline-item me-3" key={idx}>
{phone.phoneNumber} {phone.phoneNumber}
{idx < contactProfile.contactPhones.length - 1 && ","} {idx < contactProfile.contactPhones.length - 1 && ","}
</li> </li>
@ -107,6 +111,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
{contactProfile?.createdAt && ( {contactProfile?.createdAt && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-calendar-week bx-xs me-1"></i>
<p className="m-0">Created :</p>
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center"> <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-calendar-week bx-xs me-1"></i> <i className="bx bx-calendar-week bx-xs me-1"></i>
<p className="m-0">Created :</p> <p className="m-0">Created :</p>
@ -120,6 +127,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} )}
{contactProfile?.address && ( {contactProfile?.address && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-map bx-xs me-1"></i>
<p className="m-0">Location :</p>
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center"> <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
<i className="bx bx-map bx-xs me-1"></i> <i className="bx bx-map bx-xs me-1"></i>
<p className="m-0">Location :</p> <p className="m-0">Location :</p>
@ -136,6 +146,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
<div className="col-12 col-md-6 d-flex flex-column text-start"> <div className="col-12 col-md-6 d-flex flex-column text-start">
{contactProfile?.organization && ( {contactProfile?.organization && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
<i className="fa-solid fa-briefcase me-1"></i>
<p className="m-0">Organization :</p>
<div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center"> <div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
<i className="fa-solid fa-briefcase me-1"></i> <i className="fa-solid fa-briefcase me-1"></i>
<p className="m-0">Organization :</p> <p className="m-0">Organization :</p>
@ -149,6 +162,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} )}
{contactProfile?.contactCategory && ( {contactProfile?.contactCategory && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
<i className="bx bx-user bx-xs me-1"></i>
<p className="m-0">Category :</p>
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center"> <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
<i className="bx bx-user bx-xs me-1"></i> <i className="bx bx-user bx-xs me-1"></i>
<p className="m-0">Category :</p> <p className="m-0">Category :</p>
@ -162,8 +178,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div> </div>
</div> </div>
)} )}
{contactProfile?.tags?.length > 0 && (
{contactProfile?.tags?.length > 0 && ( {contactProfile?.tags?.length > 0 && (
<div className="d-flex mb-2"> <div className="d-flex mb-2">
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
<i className="fa-solid fa-tag me-2"></i>
<p className="m-0">Tags :</p>
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center"> <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
<i className="fa-solid fa-tag me-2"></i> <i className="fa-solid fa-tag me-2"></i>
<p className="m-0">Tags :</p> <p className="m-0">Tags :</p>
@ -181,9 +201,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} )}
{contactProfile?.buckets?.length > 0 && ( {contactProfile?.buckets?.length > 0 && (
<div className="d-flex">
<div className="d-flex"> <div className="d-flex">
{contactProfile?.contactEmails?.length > 0 && ( {contactProfile?.contactEmails?.length > 0 && (
<div className="d-flex mb-2 align-items-center"> <div className="d-flex mb-2 align-items-center">
<div style={{ width: "100px", minWidth: "130px" }}>
<p className="m-0">
<i className="bx bx-layer me-0"></i>Buckets :
</p>
<div style={{ width: "100px", minWidth: "130px" }}> <div style={{ width: "100px", minWidth: "130px" }}>
<p className="m-0"> <p className="m-0">
<i className="bx bx-layer me-0"></i>Buckets : <i className="bx bx-layer me-0"></i>Buckets :
@ -205,10 +230,15 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div> </div>
)} )}
</div> </div>
</div> </div>
{contactProfile?.projects?.length > 0 && ( {contactProfile?.projects?.length > 0 && (
<div className="d-flex mb-2 align-items-start"> <div className="d-flex mb-2 align-items-start">
<div style={{ minWidth: "110px" }}>
<p className="m-0 text-start">
<i className="bx bx-building-house me-0"></i>Projects :
</p>
<div style={{ minWidth: "110px" }}> <div style={{ minWidth: "110px" }}>
<p className="m-0 text-start"> <p className="m-0 text-start">
<i className="bx bx-building-house me-0"></i>Projects : <i className="bx bx-building-house me-0"></i>Projects :
@ -228,7 +258,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
)} )}
<div className="d-flex mb-2 align-items-start"> <div className="d-flex mb-2 align-items-start">
<div style={{ minWidth: "110px" }}>
<p className="m-0 text-start">
<i className="bx bx-book me-0"></i>Description :
</p>
<div style={{ minWidth: "110px" }}> <div style={{ minWidth: "110px" }}>
<p className="m-0 text-start"> <p className="m-0 text-start">
<i className="bx bx-book me-0"></i>Description : <i className="bx bx-book me-0"></i>Description :
@ -248,6 +283,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
</div> </div>
<hr className="my-1" /> <hr className="my-1" />
<NotesDirectory <NotesDirectory
refetchProfile={refetch} refetchProfile={refetch}