change design and responsive & pay & detail account & success pay & faield pay & doctor id
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[4px]'>
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[2px] px-[5px] leading-[28px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[12px] font-normal'
|
||||
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,8 @@ const bime = [
|
||||
|
||||
function Form({ changeData, data, updateSelect, isForAnother }) {
|
||||
return (
|
||||
<div className="grid mt-[20px] items-start justify-center gap-x-[24px] gap-y-[16px] grid-cols-2">
|
||||
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
|
||||
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
|
||||
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
|
||||
<EditField changeData={changeData} data={data.phone} name='phone' />
|
||||
</Content>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Form from "./Form";
|
||||
import { Button } from "@mui/material";
|
||||
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
|
||||
import ArrowLeftB from "@/components/icons/ArrowLeftB";
|
||||
import ButtonFixed from "../ButtonFixed";
|
||||
|
||||
function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
|
||||
|
||||
@@ -40,7 +41,7 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
|
||||
/>
|
||||
{!isForAnother && (
|
||||
<Button
|
||||
className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
|
||||
className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
|
||||
onClick={() => {
|
||||
fadeElement(() => setIsForAnother(true))
|
||||
setData({
|
||||
@@ -54,16 +55,19 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
|
||||
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
className={`
|
||||
!gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px]
|
||||
${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
|
||||
variant="contained"
|
||||
onClick={() => fadeElement(() => setIsPay(true))}
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
<ButtonFixed>
|
||||
<Button
|
||||
className={`
|
||||
!flex !w-full md:!w-fit
|
||||
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] !min-w-[150px]
|
||||
${isForAnother ? '!mt-0 md:!mt-[94px]' : '!mt-0 md:!mt-[32px]'}`}
|
||||
variant="contained"
|
||||
onClick={() => fadeElement(() => setIsPay(true))}
|
||||
>
|
||||
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
|
||||
<ArrowLeftB />
|
||||
</Button>
|
||||
</ButtonFixed>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user