hamedandClaude Opus 5
51c21938eb
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>
94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import { useState } from "react";
|
||
import Hour from "./hour";
|
||
import Time from "./Time";
|
||
|
||
function Date({
|
||
doctor,
|
||
setStep,
|
||
disabledDates,
|
||
setSelectedSlot,
|
||
setSelectedDate,
|
||
serviceMode = false,
|
||
selectedServiceUuids = [],
|
||
onChangeService,
|
||
selectedLocation = null,
|
||
clinicUuid = null,
|
||
onChangeLocation,
|
||
onDateChange,
|
||
closedOnDate = false,
|
||
}) {
|
||
const [date, setDate] = useState();
|
||
|
||
const pickDate = (value) => {
|
||
setDate(value);
|
||
onDateChange?.(value);
|
||
};
|
||
|
||
return (
|
||
<div className="w-full lg:w-[61%]">
|
||
<div
|
||
className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[var(--ap-border)] bg-transparent lg:bg-[var(--ap-surface)]"
|
||
>
|
||
{(onChangeLocation || (serviceMode && onChangeService)) && (
|
||
<div className="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1">
|
||
{onChangeLocation && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeLocation}
|
||
className="text-[13px] text-[var(--ap-primary)] hover:underline"
|
||
>
|
||
← تغییر محل{selectedLocation?.title ? ` (${selectedLocation.title})` : ""}
|
||
</button>
|
||
)}
|
||
{serviceMode && onChangeService && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeService}
|
||
className="text-[13px] text-[var(--ap-primary)] hover:underline"
|
||
>
|
||
← تغییر سرویس
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
{closedOnDate && (
|
||
<div className="mb-3 rounded-[8px] border border-solid border-[var(--ap-accent)] bg-[rgba(241,119,50,0.08)] p-[12px]">
|
||
<p className="text-[13px] text-[var(--ap-accent-strong)] leading-relaxed">
|
||
«{selectedLocation?.title}» در روز انتخابشده نوبتدهی ندارد.
|
||
{onChangeLocation && (
|
||
<button
|
||
type="button"
|
||
onClick={onChangeLocation}
|
||
className="mr-1 font-medium text-[var(--ap-primary)] hover:underline"
|
||
>
|
||
انتخاب محل دیگر
|
||
</button>
|
||
)}
|
||
</p>
|
||
</div>
|
||
)}
|
||
<Time
|
||
setDate={pickDate}
|
||
isStep
|
||
disabledDates={disabledDates}
|
||
clinicUuid={clinicUuid}
|
||
/>
|
||
<Hour
|
||
isStep
|
||
setStep={setStep}
|
||
doctor={doctor}
|
||
date={date}
|
||
setSelectedSlot={setSelectedSlot}
|
||
setSelectedDate={setSelectedDate}
|
||
serviceMode={serviceMode}
|
||
selectedServiceUuids={selectedServiceUuids}
|
||
clinicUuid={clinicUuid}
|
||
selectedLocation={selectedLocation}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Date;
|