ccopeland/red
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): uniform card heights, tinted bottom section on client cards

Browse Source
This commit is contained in:
Chandler Copeland
2026-04-03 17:51:44 -06:00
parent ac42fa1fc7
commit f15e538f5c
2 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
teressa-copeland-homes/src/app/portal/_components/ClientCard.tsx
View File

@@ -12,32 +12,34 @@ type ClientCardProps = {
export function ClientCard({ id, name, email, contacts = [], docCount, lastActivity }: ClientCardProps) { export function ClientCard({ id, name, email, contacts = [], docCount, lastActivity }: ClientCardProps) {
return ( return (
<Link href={"/portal/clients/" + id} style={{ textDecoration: "none" }}> <Link href={"/portal/clients/" + id} style={{ textDecoration: "none", display: "flex" }}>
<div <div
style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", padding: "1.25rem", cursor: "pointer", transition: "box-shadow 0.2s" }} style={{ display: "flex", flexDirection: "column", width: "100%", backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", overflow: "hidden", cursor: "pointer", transition: "box-shadow 0.2s" }}
onMouseEnter={e => (e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.12)")} onMouseEnter={e => (e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.12)")}
onMouseLeave={e => (e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.07)")} onMouseLeave={e => (e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.07)")}
> >
{/* Primary contact */} {/* Top section — contact info, grows to fill */}
<p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p> <div style={{ flex: 1, padding: "1.25rem 1.25rem 1rem" }}>
<p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: contacts.length > 0 ? "0.5rem" : "0.75rem" }}>{email}</p> <p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p>
<p style={{ color: "#6B7280", fontSize: "0.875rem" }}>{email}</p>
{/* Additional contacts */} {contacts.length > 0 && (
{contacts.length > 0 && ( <div style={{ marginTop: "0.625rem", display: "flex", flexDirection: "column", gap: "0.3rem" }}>
<div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.5rem", marginBottom: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}> {contacts.map(c => (
{contacts.map(c => ( <div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}>
<div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}> <span style={{ fontSize: "0.75rem", color: "#C9A84C", fontWeight: 700, flexShrink: 0 }}>+</span>
<span style={{ fontSize: "0.75rem", color: "#9CA3AF", flexShrink: 0 }}>+</span> <div style={{ minWidth: 0 }}>
<div style={{ minWidth: 0 }}> <span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span>
<span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span> <span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span>
<span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span> </div>
</div> </div>
</div> ))}
))} </div>
</div> )}
)} </div>
<div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.75rem", display: "flex", justifyContent: "space-between" }}> {/* Bottom section — tinted, always at bottom */}
<div style={{ backgroundColor: "#F5F3EF", padding: "0.625rem 1.25rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ color: "#6B7280", fontSize: "0.75rem" }}>{docCount} document{docCount !== 1 ? "s" : ""}</span> <span style={{ color: "#6B7280", fontSize: "0.75rem" }}>{docCount} document{docCount !== 1 ? "s" : ""}</span>
<span style={{ color: "#9CA3AF", fontSize: "0.75rem" }}> <span style={{ color: "#9CA3AF", fontSize: "0.75rem" }}>
{lastActivity {lastActivity

2
teressa-copeland-homes/src/app/portal/_components/ClientsPageClient.tsx
View File

@@ -46,7 +46,7 @@ export function ClientsPageClient({ clients }: { clients: ClientRow[] }) {
</button> </button>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
{clients.map((client) => ( {clients.map((client) => (
<ClientCard <ClientCard
key={client.id} key={client.id}