From e96dffb3ec0751278175f7255f734a891f430563 Mon Sep 17 00:00:00 2001 From: Satyam-Rastogi Date: Mon, 13 Apr 2026 14:01:07 +0530 Subject: [PATCH] fix(ui): light mode color corrections for LeadProjectPage and OwnerProjectDetail MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace hardcoded dark-only NEO_PANEL_CLASS bg with dark: prefixed variants so SpotlightCard's bg-white shows through in light mode - Add light mode fallbacks to all NEON color constants (sky/amber/orange/green/red solid colors replace neon glows) - Fix progress bar and stepper tracks from bg-black/80 to bg-zinc-200 dark:bg-black/80 - Update stepper node colors to use theme-aware border/text/bg classes - Fix all section header text-white → text-zinc-900 dark:text-white throughout NeoCard content - Replace bg-black/30, bg-white/[0.03], border-white/5, divide-white/5 inner elements with light mode equivalents - Fix table headers (bg-[#18181b]/80 → bg-zinc-100 dark:), row hover states, and body text colors - Fix action buttons, doc rows, timeline items, and activity feed for proper light mode rendering --- src/pages/LeadProjectPage.jsx | 178 ++++++++--------- src/pages/owner/OwnerProjectDetail.jsx | 266 ++++++++++++------------- 2 files changed, 222 insertions(+), 222 deletions(-) diff --git a/src/pages/LeadProjectPage.jsx b/src/pages/LeadProjectPage.jsx index 68fec7b..96d3ccd 100644 --- a/src/pages/LeadProjectPage.jsx +++ b/src/pages/LeadProjectPage.jsx @@ -19,11 +19,11 @@ import { } from 'lucide-react'; // ── Neomorphic constants (mirrors OwnerProjectDetail) ───────────────────────── -const NEO_PANEL_CLASS = "bg-zinc-900/60 backdrop-blur-3xl border border-white/5 shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.02)] rounded-3xl relative overflow-hidden transition-all duration-300"; -const NEON_GREEN = "text-[#39ff14] drop-shadow-[0_0_8px_rgba(57,255,20,0.4)]"; -const NEON_GOLD = "text-[#fda913] drop-shadow-[0_0_8px_rgba(253,169,19,0.4)]"; -const NEON_ORANGE = "text-[#ff4500] drop-shadow-[0_0_8px_rgba(255,69,0,0.4)]"; -const NEON_BLUE = "text-[#00f0ff] drop-shadow-[0_0_8px_rgba(0,240,255,0.4)]"; +const NEO_PANEL_CLASS = "dark:bg-zinc-900/60 dark:backdrop-blur-3xl border border-zinc-200 dark:border-white/5 dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.02)] rounded-3xl relative overflow-hidden transition-all duration-300"; +const NEON_GREEN = "text-green-600 dark:text-[#39ff14] dark:drop-shadow-[0_0_8px_rgba(57,255,20,0.4)]"; +const NEON_GOLD = "text-amber-600 dark:text-[#fda913] dark:drop-shadow-[0_0_8px_rgba(253,169,19,0.4)]"; +const NEON_ORANGE = "text-orange-600 dark:text-[#ff4500] dark:drop-shadow-[0_0_8px_rgba(255,69,0,0.4)]"; +const NEON_BLUE = "text-sky-600 dark:text-[#00f0ff] dark:drop-shadow-[0_0_8px_rgba(0,240,255,0.4)]"; function formatCurrency(n) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(n || 0); @@ -62,7 +62,7 @@ function NeoCard({ children, className = '', spotlightColor = 'rgba(255,255,255, // ── Animated progress bar ───────────────────────────────────────────────────── function NeoProgress({ pct, color = '#3B82F6', height = 'h-1.5' }) { return ( -
+
@@ -138,13 +138,13 @@ function StageActivityItem({ entry, isLast }) { isRegress ? : }
- {!isLast &&
} + {!isLast &&
}
-
+
{entry.from ? ( -

+

{entry.from} {entry.to} @@ -154,7 +154,7 @@ function StageActivityItem({ entry, isLast }) { )}

by {entry.by} · {formatDate(entry.date)}

- {entry.note &&

{entry.note}

} + {entry.note &&

{entry.note}

}
@@ -390,10 +390,10 @@ export default function LeadProjectPage() {
-

Project Progression

+

Project Progression

-
+
-
- {isActive ? : } +
+ {isActive ? : }
- {step} + {step}
); })} @@ -419,7 +419,7 @@ export default function LeadProjectPage() {
-

Contact & Contractor

+

Contact & Contractor

{[ @@ -431,11 +431,11 @@ export default function LeadProjectPage() { { icon: Phone, label: 'Crew Phone', value: proj.contractorPhone }, { icon: Shield, label: 'Assigned Agent', value: lead.assignedAgentName }, ].map(({ icon: Icon, label, value }) => value ? ( -
+

{label}

-

{value}

+

{value}

) : null)} @@ -445,7 +445,7 @@ export default function LeadProjectPage() {
-

Open Items

+

Open Items

{[ @@ -454,16 +454,16 @@ export default function LeadProjectPage() { { label: 'Pending Invoices', count: (proj.invoices || []).filter(i => i.status === 'pending').length, color: '#00f0ff' }, { label: 'Milestones Done', count: (proj.milestones || []).filter(m => m.status === 'completed').length + '/' + (proj.milestones?.length || 0), color: '#39ff14' }, ].map(item => ( -
+

{item.count}

-

{item.label}

+

{item.label}

))}
{lead.notes && (

Field Notes

-

{lead.notes}

+

{lead.notes}

)} @@ -477,7 +477,7 @@ export default function LeadProjectPage() {
-

Contact

+

Contact

{[ { icon: User, label: 'Name', value: lead.name }, @@ -488,11 +488,11 @@ export default function LeadProjectPage() { { icon: Shield, label: 'Category', value: lead.insuranceType }, { icon: User, label: 'Assigned Agent', value: lead.assignedAgentName }, ].map(({ icon: Icon, label, value }) => value ? ( -
+

{label}

-

{value}

+

{value}

) : null)} @@ -501,24 +501,24 @@ export default function LeadProjectPage() {
-

Pipeline Position

+

Pipeline Position

{stageColumns.map((col, i) => ( + style={i === stageIdx ? { color: col.color } : { color: i < stageIdx ? '#71717a' : '#a1a1aa' }}> {col.name} - {i < stageColumns.length - 1 && } + {i < stageColumns.length - 1 && } ))}
{lead.notes && (

Notes

-

{lead.notes}

+

{lead.notes}

)}
@@ -541,28 +541,28 @@ export default function LeadProjectPage() { { icon: Mail, label: 'Email', value: lead.email }, { icon: MapPin, label: 'Address', value: lead.address }, ].map(({ icon: Icon, label, value }) => value ? ( -
+
-

{label}

{value}

+

{label}

{value}

) : null)}

Quick Actions

{lead.phone && ( - - Call {lead.phone} + + Call {lead.phone} )} {lead.email && ( - - Email {lead.email} + + Email {lead.email} )} {lead.address && ( - View on Maps + className="flex items-center gap-3 px-4 py-3 rounded-xl bg-zinc-50 dark:bg-white/5 hover:bg-zinc-100 dark:hover:bg-white/10 border border-zinc-100 dark:border-white/5 transition-colors"> + View on Maps )} @@ -592,7 +592,7 @@ export default function LeadProjectPage() {
-

Budget Breakdown

+

Budget Breakdown

@@ -618,11 +618,11 @@ export default function LeadProjectPage() { {/* Table */} -

Line Item Breakdown

+

Line Item Breakdown

- + @@ -630,12 +630,12 @@ export default function LeadProjectPage() { - + {(proj.budgetBreakdown || []).map((b, i) => { const rem = b.allocated - b.actual; return ( - - + + @@ -645,11 +645,11 @@ export default function LeadProjectPage() { })} - - - - - + + + + + @@ -666,7 +666,7 @@ export default function LeadProjectPage() {
-

Project Milestones

+

Project Milestones

{(proj.milestones || []).filter(m => m.status === 'completed').length} / {proj.milestones?.length || 0} complete @@ -675,15 +675,15 @@ export default function LeadProjectPage() { {(proj.milestones || []).map((m, i) => { const dotColor = m.status === 'completed' ? '#39ff14' : m.status === 'in_progress' ? '#00f0ff' : '#3f3f46'; return ( -
-
+
+
-

{m.name}

+

{m.name}

{m.status.replace('_', ' ')}
{m.date &&

{formatDate(m.date)}

} @@ -701,8 +701,8 @@ export default function LeadProjectPage() {
-

Change Orders

- +

Change Orders

+ {proj.changeOrders?.length || 0}
@@ -714,9 +714,9 @@ export default function LeadProjectPage() { ) : (
{proj.changeOrders.map(co => ( -
+
-

{co.title}

+

{co.title}

{co.status} @@ -738,8 +738,8 @@ export default function LeadProjectPage() {
-

Requests for Information

- +

Requests for Information

+ {proj.rfis?.length || 0}
@@ -751,7 +751,7 @@ export default function LeadProjectPage() { ) : (
Category Allocated CommittedRemaining
{b.category}
{b.category} {formatCurrency(b.allocated)} {formatCurrency(b.committed)} {formatCurrency(b.actual)}
Total{formatCurrency(proj.estimatedAmount)}{formatCurrency(proj.budgetBreakdown?.reduce((s, b) => s + b.committed, 0))}{formatCurrency(proj.actualCost)}
Total{formatCurrency(proj.estimatedAmount)}{formatCurrency(proj.budgetBreakdown?.reduce((s, b) => s + b.committed, 0))}{formatCurrency(proj.actualCost)} = 0 ? 'text-emerald-400' : 'text-red-400'}`}> {formatCurrency(proj.estimatedAmount - proj.actualCost)}
- + @@ -761,11 +761,11 @@ export default function LeadProjectPage() { - + {proj.rfis.map((r, i) => ( - + - +
ID SubjectClosed
{r.id.toUpperCase()}{r.subject}{r.subject} {r.status} @@ -801,11 +801,11 @@ export default function LeadProjectPage() {
-

Invoice Schedule

+

Invoice Schedule

- + @@ -814,11 +814,11 @@ export default function LeadProjectPage() { - + {(proj.invoices || []).map(inv => ( - - - + + +
Description AmountPaid
{inv.description}{formatCurrency(inv.amount)}
{inv.description}{formatCurrency(inv.amount)}
-

Project Documents

- {docs.length} +

Project Documents

+ {docs.length}
- - + + + ); @@ -902,23 +902,23 @@ export default function LeadProjectPage() {
-

Work Timeline

+

Work Timeline

-
+
{proj.workTimeline.map((a, i) => (
-
-
+
+
-
{a.action}
- {a.details &&
{a.details}
} +
{a.action}
+ {a.details &&
{a.details}
}
{a.date}
- {a.user &&
{a.user}
} + {a.user &&
{a.user}
}
@@ -934,9 +934,9 @@ export default function LeadProjectPage() {
-

Stage Movement Log

+

Stage Movement Log

- + {lead.activity?.length ?? 0} entries
diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx index 7c88d14..06f125f 100644 --- a/src/pages/owner/OwnerProjectDetail.jsx +++ b/src/pages/owner/OwnerProjectDetail.jsx @@ -19,12 +19,12 @@ import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal'; import CreateItemModal from '../../components/owner/CreateItemModal'; // --- NEOMORPHIC STYLING CONSTANTS --- -const NEO_PANEL_CLASS = "bg-zinc-900/60 backdrop-blur-3xl border border-white/5 shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.02)] rounded-3xl relative overflow-hidden transition-all duration-300"; -const NEON_GREEN = "text-[#39ff14] drop-shadow-[0_0_8px_rgba(57,255,20,0.4)]"; -const NEON_GOLD = "text-[#fda913] drop-shadow-[0_0_8px_rgba(253,169,19,0.4)]"; -const NEON_ORANGE = "text-[#ff4500] drop-shadow-[0_0_8px_rgba(255,69,0,0.4)]"; -const NEON_RED = "text-[#ff003c] drop-shadow-[0_0_8px_rgba(255,0,60,0.4)]"; -const NEON_BLUE = "text-[#00f0ff] drop-shadow-[0_0_8px_rgba(0,240,255,0.4)]"; +const NEO_PANEL_CLASS = "dark:bg-zinc-900/60 dark:backdrop-blur-3xl border border-zinc-200 dark:border-white/5 dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.02)] rounded-3xl relative overflow-hidden transition-all duration-300"; +const NEON_GREEN = "text-green-600 dark:text-[#39ff14] dark:drop-shadow-[0_0_8px_rgba(57,255,20,0.4)]"; +const NEON_GOLD = "text-amber-600 dark:text-[#fda913] dark:drop-shadow-[0_0_8px_rgba(253,169,19,0.4)]"; +const NEON_ORANGE = "text-orange-600 dark:text-[#ff4500] dark:drop-shadow-[0_0_8px_rgba(255,69,0,0.4)]"; +const NEON_RED = "text-red-600 dark:text-[#ff003c] dark:drop-shadow-[0_0_8px_rgba(255,0,60,0.4)]"; +const NEON_BLUE = "text-sky-600 dark:text-[#00f0ff] dark:drop-shadow-[0_0_8px_rgba(0,240,255,0.4)]"; // ----------------------------------------------------------------- // SHARED UI COMPONENTS @@ -41,7 +41,7 @@ const NeoCard = ({ children, className = "", innerClassName = "", spotlightColor const ProgressBar = ({ progress, goal = 100, colorClass = "bg-[#39ff14]", shadowClass = "shadow-[0_0_10px_#39ff14]", height = "h-1.5" }) => { const pct = Math.min((progress / goal) * 100, 100); return ( -
+
{
-

Project Progression

+

Project Progression

{/* Stepper Line */} -
+
{ return (
- {isActive ? : } + {isActive ? : }
- + {step}
@@ -345,31 +345,31 @@ const OwnerProjectDetail = () => {
-

Relationship Intel

+

Relationship Intel

-
- {project.customerName?.[0] || 'C'} +
+ {project.customerName?.[0] || 'C'}
-

{project.customerName || 'Customer Records'}

-

{contractor?.vendorName || project.contractorId}

+

{project.customerName || 'Customer Records'}

+

{contractor?.vendorName || project.contractorId}

- -
-
-

PREFERENTIAL ROUTING

-

Responds fastest to SMS in the evenings. Critical approvals required via email.

+
+

PREFERENTIAL ROUTING

+

Responds fastest to SMS in the evenings. Critical approvals required via email.

Last Contact: 2 hours ago

@@ -382,19 +382,19 @@ const OwnerProjectDetail = () => {
-

Performance Snapshot

+

Performance Snapshot

- - + + - 96% + 96%
-

Inspection Coverage

+

Inspection Coverage

Damage Verification Complete

@@ -402,7 +402,7 @@ const OwnerProjectDetail = () => { {/* Embedded Map/Evidence Thumbnails */}
{['Hail_Damaged_Shingles.jpg', 'Cracked_Storm_Shingles.jpg', 'Broken_Roof_Surface.jpg', 'Curled_Aging_Shingles.jpg', 'Storm_Worn_Roof.jpg', 'Red_Shingle_Cottage.jpg'].map((img, i) => ( -
+
Evidence
@@ -412,31 +412,31 @@ const OwnerProjectDetail = () => { {/* Evidence Summary */} -
+
-

Evidence Summary

+

Evidence Summary

-
Hail Impacts Detected - 178 +
Hail Impacts Detected + 178
-
Gutters Denting - Moderate +
Gutters Denting + Moderate
-
Window Screens - 4 / 12 +
Window Screens + 4 / 12
-
+
- - AI Confidence: - 92% + + AI Confidence: + 92%
-
@@ -444,25 +444,25 @@ const OwnerProjectDetail = () => { {/* Financial Overview */} -
+
-

Financial Overview

+

Financial Overview

- Estimated Scope - {formatCurrency(project.approvedBudget || 34190)} + Estimated Scope + {formatCurrency(project.approvedBudget || 34190)}
- Supplements Potential - + {formatCurrency(4800)} + Supplements Potential + + {formatCurrency(4800)}
-
- Insurance Probability - 82% +
+ Insurance Probability + 82%
- Net Profit Projection + Net Profit Projection {formatCurrency(project.budget - project.spent || 14200)}
@@ -475,7 +475,7 @@ const OwnerProjectDetail = () => {
-

Action Needed

+

Action Needed

{/* Pulled from Project Risks / Mocks */} @@ -489,20 +489,20 @@ const OwnerProjectDetail = () => {
-
+

Project Timeline Highlights

-
Inspection Completed
+
Inspection Completed
Feb 20 - Pending QC + Pending QC
-
Claim Filed
+
Claim Filed
- Not Scheduled + Not Scheduled
@@ -513,16 +513,16 @@ const OwnerProjectDetail = () => {
-

Quick Actions

+

Quick Actions

- - -
@@ -543,7 +543,7 @@ const OwnerProjectDetail = () => {
-

Budget Breakdown

+

Budget Breakdown

Allocated vs Committed vs Actual ($k)

-
+
@@ -578,20 +578,20 @@ const OwnerProjectDetail = () => {
- + {['Category', 'Allocated', 'Committed', 'Actual', 'Variance'].map(h => ( ))} - + {(project.budgetBreakdown || []).map((b, i) => { const variance = b.actual - b.allocated; return ( - - - + + +
{h}
{b.category}{formatCurrency(b.allocated)}
{b.category}{formatCurrency(b.allocated)} {formatCurrency(b.committed)} {formatCurrency(b.actual)} 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}> @@ -608,7 +608,7 @@ const OwnerProjectDetail = () => { ) : ( -

No detailed budget breakdown available.

+

No detailed budget breakdown available.

Budget: {formatCurrency(project.approvedBudget || project.budget)}  ·  Spent: {formatCurrency(project.actualCost || project.spent)}

 )} @@ -618,10 +618,10 @@ const OwnerProjectDetail = () => { {/* CHANGE ORDERS TAB */} {activeTab === 'changeOrders' && ( -
+
-

Change Orders

+

Change Orders