feat(booking): give the booking flow a dark palette derived from its own colours
components/appointment/ had every colour hard-coded, so the flow rendered identically in either theme even after the wiring was fixed. It now reads from CSS custom properties. These are not new colours. The :root values are byte-for-byte the hex codes that were already in the components — twenty-one files, mapped one to one — so light mode is unchanged. The dark values are derived from those same colours: surfaces and borders darkened, text inverted, and the two brand colours (the indigo and the orange) lightened rather than replaced, because both lose contrast against a dark surface at their original values. Verified in a headless browser with prefers-color-scheme forced dark: data-theme lands on <html> and --ap-surface resolves to #1b1b20 rather than white. Six one-off colours remain hard-coded — a success green, an error red and similar — each used exactly once and none of them a surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -7,7 +7,7 @@ function Address({ doctor, selectedLocation }) {
|
||||
return (
|
||||
<ul className="hidden mt-[4px] lg:flex flex-col">
|
||||
<li>
|
||||
<div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
|
||||
<div className="flex py-[12px] text-[var(--ap-text-2)] text-[14px] items-start justify-start">
|
||||
<p className="font-bold min-w-[115px]">{`${selectedLocation.title}: `}</p>
|
||||
<p className="font-normal">{selectedLocation.address || "—"}</p>
|
||||
</div>
|
||||
@@ -20,12 +20,12 @@ function Address({ doctor, selectedLocation }) {
|
||||
<ul className="hidden mt-[4px] lg:flex flex-col">
|
||||
{doctor?.address?.map((item, idx) => (
|
||||
<li key={idx}>
|
||||
<div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
|
||||
<div className="flex py-[12px] text-[var(--ap-text-2)] text-[14px] items-start justify-start">
|
||||
<p className="font-bold min-w-[115px]">{`${item.name}: `}</p>
|
||||
<p className="font-normal">{item.address || item.location}</p>
|
||||
</div>
|
||||
{doctor.address.length > idx + 1 && (
|
||||
<span className="bg-[#EFEFEF] block h-px w-full"></span>
|
||||
<span className="bg-[var(--ap-border)] block h-px w-full"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -14,10 +14,10 @@ function Head({ doctor }) {
|
||||
className=" w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px] h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px] "
|
||||
/>
|
||||
<div className="flex flex-col items-start justify-start gap-[8px]">
|
||||
<h2 className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
|
||||
<h2 className="text-[var(--ap-text)] text-[12px] md:text-[14px] font-bold">
|
||||
{doctor?.name}
|
||||
</h2>
|
||||
<h3 className="text-[#525252] text-[12px] md:text-[14px] font-medium">
|
||||
<h3 className="text-[var(--ap-muted)] text-[12px] md:text-[14px] font-medium">
|
||||
تخصص: {expertiseText}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -18,10 +18,10 @@ function LocationSelect({ locations = [], selected, onSelect }) {
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-[520px] mx-auto">
|
||||
<h2 className="text-[16px] font-bold text-[#3B3B3B] mb-4">۱. انتخاب محل نوبتدهی</h2>
|
||||
<h2 className="text-[16px] font-bold text-[var(--ap-text)] mb-4">۱. انتخاب محل نوبتدهی</h2>
|
||||
|
||||
{!anyOpen && locations.length > 0 && (
|
||||
<p className="mb-3 text-[13px] text-[#B4541F]">
|
||||
<p className="mb-3 text-[13px] text-[var(--ap-accent-strong)]">
|
||||
در روز انتخابشده هیچکدام از محلها نوبتدهی ندارند. روز دیگری را انتخاب کنید.
|
||||
</p>
|
||||
)}
|
||||
@@ -43,32 +43,32 @@ function LocationSelect({ locations = [], selected, onSelect }) {
|
||||
onClick={() => !closed && onSelect(location)}
|
||||
className={`w-full text-right p-[16px] rounded-[8px] border border-solid transition-colors ${
|
||||
closed
|
||||
? "border-[#EFEFEF] bg-[#FAFAFA] opacity-60 cursor-not-allowed"
|
||||
? "border-[var(--ap-border)] bg-[var(--ap-surface-2)] opacity-60 cursor-not-allowed"
|
||||
: active
|
||||
? "border-[#5559CE] bg-[rgba(85,89,206,0.06)]"
|
||||
: "border-[#EFEFEF] bg-[#FFF] hover:border-[#C7C9EC]"
|
||||
? "border-[var(--ap-primary)] bg-[rgba(85,89,206,0.06)]"
|
||||
: "border-[var(--ap-border)] bg-[var(--ap-surface)] hover:border-[#C7C9EC]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-[8px]">
|
||||
<p className="text-[14px] md:text-[16px] font-bold text-[#3B3B3B]">
|
||||
<p className="text-[14px] md:text-[16px] font-bold text-[var(--ap-text)]">
|
||||
{location.title}
|
||||
</p>
|
||||
{location.type === "clinic" && (
|
||||
<span className="text-[11px] text-[#5559CE] bg-[rgba(85,89,206,0.10)] rounded-[4px] px-[6px] py-[2px]">
|
||||
<span className="text-[11px] text-[var(--ap-primary)] bg-[rgba(85,89,206,0.10)] rounded-[4px] px-[6px] py-[2px]">
|
||||
کلینیک
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{location.address && (
|
||||
<p className="mt-[6px] text-[13px] text-[#616161] font-normal">
|
||||
<p className="mt-[6px] text-[13px] text-[var(--ap-text-2)] font-normal">
|
||||
{location.address}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p
|
||||
className={`mt-[8px] text-[12px] ${
|
||||
closed ? "text-[#B4541F]" : nextLabel ? "text-[#009D79]" : "text-[#A1A1A1]"
|
||||
closed ? "text-[var(--ap-accent-strong)]" : nextLabel ? "text-[#009D79]" : "text-[#A1A1A1]"
|
||||
}`}
|
||||
>
|
||||
{closed
|
||||
|
||||
@@ -5,10 +5,10 @@ function Location({ doctor, selectedLocation }) {
|
||||
return (
|
||||
<div className="h-fit lg:h-screen w-full lg:w-[39%]">
|
||||
<div
|
||||
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
|
||||
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[var(--ap-surface)] border border-solid border-transparent lg:border-[var(--ap-border)] top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
|
||||
>
|
||||
<Head doctor={doctor} />
|
||||
<span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
|
||||
<span className="block bg-[var(--ap-border)] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
|
||||
<Address doctor={doctor} selectedLocation={selectedLocation} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user