From 9675bf014d580ab59a4f7123253398d0713c6d2c Mon Sep 17 00:00:00 2001 From: Goutam0612 Date: Tue, 7 Jul 2026 23:39:03 +0530 Subject: [PATCH] Sidebar light-theme fix; remove Property step from registration - dashboard sidebar now uses the --sidebar token so it turns white in light mode instead of staying black; active nav item stays readable - registration: drop the Property / Job ID step (job ID + find-by-address), flow is now Account -> Verify -> Address with steps renumbered Co-Authored-By: Claude Opus 4.8 (1M context) --- src/app/dashboard/dashboard.css | 12 +++- src/components/portal/register-flow.tsx | 89 ++----------------------- 2 files changed, 16 insertions(+), 85 deletions(-) diff --git a/src/app/dashboard/dashboard.css b/src/app/dashboard/dashboard.css index 59ba5cf..5322c9b 100644 --- a/src/app/dashboard/dashboard.css +++ b/src/app/dashboard/dashboard.css @@ -239,7 +239,7 @@ .dash-root .view { position: relative; z-index: 1; } /* ---- sidebar (premium nav) ---- */ - .dash-root .dash-sidebar { width: 236px; flex: 0 0 236px; background: #040404 } + .dash-root .dash-sidebar { width: 236px; flex: 0 0 236px; background: var(--sidebar); } .dash-root .dash-brand { padding: 20px 18px 16px; } .dash-root .dash-brand .bk { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; } .dash-root .dash-nav { padding: 4px 12px 14px; } @@ -279,7 +279,15 @@ background: linear-gradient(90deg, rgba(17, 9, 9, 0) 0%, rgba(253, 169, 19, 0.21) 100%); } .dash-root .nav-item.active svg { color: #fff; } - + + /* Light theme: the faint orange gradient + white text is invisible on a + white sidebar, so use readable orange text/icon instead. */ + .dash-root[data-theme="light"] .nav-item.active { + background: linear-gradient(90deg, rgba(253, 169, 19, 0) 0%, rgba(253, 169, 19, 0.16) 100%); + color: var(--orange); + } + .dash-root[data-theme="light"] .nav-item.active svg { color: var(--orange); } + /* ---- coming-soon placeholder ---- */ .dash-root .coming-soon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; gap: 8px; } .dash-root .coming-soon-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); margin-bottom: 8px; } diff --git a/src/components/portal/register-flow.tsx b/src/components/portal/register-flow.tsx index 0c755ee..635435d 100644 --- a/src/components/portal/register-flow.tsx +++ b/src/components/portal/register-flow.tsx @@ -12,7 +12,7 @@ import { TERMS, PRIVACY, passwordStrength, type AddrCountry, } from "./data"; -const STEPS = ["Account", "Property", "Verify", "Address"]; +const STEPS = ["Account", "Verify", "Address"]; const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; export function RegisterFlow() { @@ -34,11 +34,7 @@ export function RegisterFlow() { const [termsOk, setTermsOk] = useState(false); const [privacyOk, setPrivacyOk] = useState(false); - // step 1 - const [allotment, setAllotment] = useState(""); - const [plotVerified, setPlotVerified] = useState(false); - - // step 2 + // verify step const [emailVerified, setEmailVerified] = useState(false); const [phoneVerified, setPhoneVerified] = useState(false); @@ -53,7 +49,6 @@ export function RegisterFlow() { first.trim() && last.trim() && EMAIL_RE.test(sso?.email || email) && phoneOk && pwOk && termsOk && privacyOk && (isSelf || (alloeIdOk && (isEmployee || (alloeFirst.trim() && alloeLast.trim())))); - const step1Valid = /^LUP-\d{6}$/.test(allotment) || plotVerified; const step2Valid = emailVerified && phoneVerified; function finish() { @@ -88,24 +83,16 @@ export function RegisterFlow() { )} {step === 1 && ( - setStep(0)} onContinue={() => setStep(2)} - /> - )} - - {step === 2 && ( setStep(1)} onContinue={() => setStep(3)} + valid={step2Valid} onBack={() => setStep(0)} onContinue={() => setStep(2)} /> )} - {step === 3 && ( - setStep(2)} onFinish={finish} /> + {step === 2 && ( + setStep(1)} onFinish={finish} /> )} ); @@ -278,71 +265,7 @@ function StepAccount(p: { // module-level reviewed flags (per mount lifetime) — enables the checkboxes after a doc is read const reviewed = { terms: false, privacy: false }; -/* ====================== STEP 1 — ALLOTMENT ====================== */ -function StepAllotment(p: { - allotment: string; setAllotment: (v: string) => void; - plotVerified: boolean; setPlotVerified: (v: boolean) => void; - valid: boolean; onBack: () => void; onContinue: () => void; -}) { - const [mode, setMode] = useState<"have" | "forgot">("have"); - const [houseNo, setHouseNo] = useState(""); - const [street, setStreet] = useState(""); - const [city, setCity] = useState(""); - const [busy, setBusy] = useState(false); - const fmtOk = /^LUP-\d{6}$/.test(p.allotment); - - function findPlot() { - if (!houseNo || !street || !city) return; - setBusy(true); - setTimeout(() => { setBusy(false); p.setPlotVerified(true); }, 800); - } - - return ( -
- -

Identify the property

-

Find the property by its job ID, or look it up by address.

- -
- - -
- - {mode === "have" ? ( -
- - p.setAllotment(e.target.value.toUpperCase())} placeholder="LUP-123456" /> - Format: LUP- followed by 6 digits. -
- ) : ( -
-
-
setHouseNo(e.target.value)} placeholder="123" />
-
setStreet(e.target.value)} placeholder="Street name" />
-
-
setCity(e.target.value)} placeholder="City or ZIP code" />
- {!p.plotVerified ? ( - - ) : ( -
- - LUP-****** · Verified · {houseNo} {street}, {city} -
- )} -

Sensitive details stay masked until verified (verify-to-reveal).

-
- )} - - {mode === "have" && p.allotment && !fmtOk &&

Enter a valid ID like LUP-123456.

} - - -
- ); -} - -/* ====================== STEP 2 — VERIFY ====================== */ +/* ====================== STEP 1 — VERIFY ====================== */ function StepVerify(p: { emailValue: string; cc: string; phone: string; country: typeof countryCodes[number]; emailVerified: boolean; setEmailVerified: (v: boolean) => void;