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>
42 lines
1.7 KiB
JavaScript
42 lines
1.7 KiB
JavaScript
import ArrowLeftBlueA from "@/components/icons/ArrowLeftBlueA";
|
||
import TickCircleGreenA from "@/components/icons/TickCircleGreenA";
|
||
import { Button } from "@mui/material";
|
||
import Link from "next/link";
|
||
|
||
function SuccessPay({ setStep }) {
|
||
return (
|
||
<div className="w-full lg:w-[59%]">
|
||
<div
|
||
className={`opacity-page bg-transparent lg:bg-[var(--ap-surface)] border border-solid border-transparent lg:border-[var(--ap-border)] rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
|
||
>
|
||
<div className="pt-[8px] pb-[4px] grid place-items-center">
|
||
<div className="flex flex-col justify-center items-center gap-[14px]">
|
||
<TickCircleGreenA />
|
||
<p className="text-[var(--ap-text)] text-[20px] font-bold">
|
||
پرداخت شما با موفقیت انجام شد.
|
||
</p>
|
||
</div>
|
||
<p
|
||
className="text-[var(--ap-text)] text-[16px] font-normal text-center mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px] mb-[24px] md:mb-[16px]"
|
||
>
|
||
نوبت شما تأیید شد و پیامک تأیید برای بیمار ارسال میشود. برای نمایش نوبتها به قسمت نوبتهای من بروید.{" "}
|
||
</p>
|
||
<Link href="/dashboard">
|
||
<Button
|
||
variant="text"
|
||
className="!flex !items-center !justify-center !gap-[4px]"
|
||
>
|
||
<p className="text-[16px] font-medium text-[var(--ap-primary)]">
|
||
برو به نوبت های من
|
||
</p>
|
||
<ArrowLeftBlueA />
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default SuccessPay;
|