change design and responsive & pay & detail account & success pay & faield pay & doctor id

This commit is contained in:
Ehsan
2024-08-30 20:22:41 +03:30
parent 451ae76cb1
commit b058066380
33 changed files with 589 additions and 147 deletions
@@ -8,9 +8,9 @@ function FailedPay({ setTypePay, setIsPay, fadeElement }) {
<div className="mt-[7px]">
<div className="flex flex-col justify-center items-center gap-[14px]">
<InfoCircleRedA />
<p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
</div>
<div className="flex mt-[24px] items-center justify-center gap-[24px]">
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
<Button
variant="outlined"
onClick={() => fadeElement(() => setIsPay(false))}
@@ -1,28 +1,31 @@
import ArrowLeftB from '@/components/icons/ArrowLeftB';
import { Button } from '@mui/material';
import ButtonFixed from '../ButtonFixed';
function Paying({ setTypePay, fadeElement }) {
return (
<>
<p className="text-[#3B3B3B] text-[20px] font-bold">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اطلاعات پرداخت
</p>
<div className='flex justify-between items-center mt-[30px]'>
<p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
<p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
</div>
<span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
<div className='flex items-center justify-between'>
<p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
<Button
className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
onClick={() => fadeElement(() => setTypePay('success'))}
variant="contained"
>
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
<ArrowLeftB />
</Button>
<div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
<p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
<p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
</div>
<span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
<ButtonFixed>
<div className='flex items-center justify-between gap-2'>
<p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
<Button
className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
onClick={() => fadeElement(() => setTypePay('success'))}
variant="contained"
>
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
<ArrowLeftB />
</Button>
</div>
</ButtonFixed>
</>
)
}
@@ -9,7 +9,19 @@ function SuccessPay() {
<TickCircleGreenA />
<p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
</div>
<p className="text-[#3B3B3B] text-[16px] font-normal mt-[32px] mb-[16px]">برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
<p
className="text-[#3B3B3B] text-[16px] font-normal
mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
mb-[24px] md:mb-[16px]"
>برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
<div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
<span className="w-full block h-px bg-[#EFEFEF]"></span>
<div className="flex items-center justify-between my-[20px]">
<p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
<p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
</div>
<span className="w-full block h-px bg-[#EFEFEF]"></span>
</div>
<Button
variant="text"
className="!flex !items-center !justify-center !gap-[4px]"