mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Fix Mobile UI for Booking Availability Page. Make it consistent with booking page (#2533)

Browse source
This commit is contained in:
Hariom Balhara 2022-04-17 16:55:11 +05:30 committed by GitHub
parent 73c97e85d4
commit 5f57694148
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
apps/web/components/booking/pages/AvailabilityPage.tsx
View file

@ -182,18 +182,20 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
/> />
<div className="mt-4 sm:-mt-2"> <div className="mt-4 sm:-mt-2">
<p className="text-sm font-medium text-black dark:text-white">{profile.name}</p> <p className="text-sm font-medium text-black dark:text-white">{profile.name}</p>
<div className="mt-2 flex gap-2 text-xl font-medium dark:text-gray-100"> <div className="mt-2 gap-2 dark:text-gray-100">
<h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
{eventType.title} {eventType.title}
</h1>
{eventType?.description && ( {eventType?.description && (
<p className="mb-2 text-gray-600 dark:text-white"> <p className="text-bookinglight mb-2 dark:text-white">
<InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" /> <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
{eventType.description} {eventType.description}
</p> </p>
)} )}
<div> <p className="text-bookinglight mb-2 dark:text-white">
<ClockIcon className="mr-[10px] -mt-1 inline-block h-4 w-4" /> <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
{eventType.length} {t("minutes")} {eventType.length} {t("minutes")}
</div> </p>
{eventType.price > 0 && ( {eventType.price > 0 && (
<div className="text-gray-600 dark:text-white"> <div className="text-gray-600 dark:text-white">
<CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" /> <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
@ -206,12 +208,29 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
</IntlProvider> </IntlProvider>
</div> </div>
)} )}
<div className="md:hidden">
{booking?.startTime && rescheduleUid && (
<div>
<p
className="mt-8 mb-2 text-gray-600 dark:text-white"
data-testid="former_time_p">
{t("former_time")}
</p>
<p className="text-gray-500 line-through dark:text-white">
<CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
{typeof booking.startTime === "string" &&
parseDate(dayjs(booking.startTime), i18n)}
</p>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="px-4 sm:flex sm:p-4 sm:py-5"> <div className="px-4 sm:flex sm:p-4 sm:py-5">
{/* Following div is marked hidden. Should we remove it ? */}
<div <div
className={ className={
"hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " + "hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
@ -239,12 +258,12 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
{eventType.title} {eventType.title}
</h1> </h1>
{eventType?.description && ( {eventType?.description && (
<p className="mb-2 text-gray-600 dark:text-white"> <p className="text-bookinglight mb-2 dark:text-white">
<InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" /> <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
{eventType.description} {eventType.description}
</p> </p>
)} )}
<p className="mb-1 -ml-2 px-2 py-1 text-gray-600 dark:text-white"> <p className="text-bookinglight mb-2 dark:text-white">
<ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" /> <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
{eventType.length} {t("minutes")} {eventType.length} {t("minutes")}
</p> </p>
@ -273,7 +292,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
)} )}
{booking?.startTime && rescheduleUid && ( {booking?.startTime && rescheduleUid && (
<div> <div>
<p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p"> <p className="mt-4 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
{t("former_time")} {t("former_time")}
</p> </p>
<p className="text-gray-500 line-through dark:text-white"> <p className="text-gray-500 line-through dark:text-white">
@ -283,6 +302,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
</div> </div>
)} )}
</div> </div>
<DatePicker <DatePicker
date={selectedDate} date={selectedDate}
periodType={eventType?.periodType} periodType={eventType?.periodType}

2
apps/web/components/booking/pages/BookingPage.tsx
View file

@ -372,7 +372,7 @@ const BookingPage = ({
</div> </div>
)} )}
</div> </div>
<div className="sm:w-1/2 sm:pl-8 sm:pr-4"> <div className="mt-8 sm:w-1/2 sm:pl-8 sm:pr-4">
<Form form={bookingForm} handleSubmit={bookEvent}> <Form form={bookingForm} handleSubmit={bookEvent}>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white"> <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">

3
apps/web/pages/success.tsx
View file

@ -223,9 +223,6 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
<div <div
className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : "fixed inset-0")} className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : "fixed inset-0")}
aria-hidden="true"> aria-hidden="true">
<span className="inline-block h-screen align-middle" aria-hidden="true">
&#8203;
</span>
<div <div
className={classNames( className={classNames(
"inline-block transform overflow-hidden rounded-sm", "inline-block transform overflow-hidden rounded-sm",