From 5f57694148efb8c61d9acad15877824ced57dbfb Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Sun, 17 Apr 2022 16:55:11 +0530
Subject: [PATCH] Fix Mobile UI for Booking Availability Page. Make it
 consistent with booking page (#2533)

---
 .../booking/pages/AvailabilityPage.tsx        | 38 ++++++++++++++-----
 .../components/booking/pages/BookingPage.tsx  |  2 +-
 apps/web/pages/success.tsx                    |  3 --
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index c561bad55b..2fd0dfc33b 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -182,18 +182,20 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   />
                   <div className="mt-4 sm:-mt-2">
                     <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">
-                      {eventType.title}
+                    <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}
+                      </h1>
                       {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" />
                           {eventType.description}
                         </p>
                       )}
-                      <div>
-                        <ClockIcon className="mr-[10px] -mt-1 inline-block h-4 w-4" />
+                      <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" />
                         {eventType.length} {t("minutes")}
-                      </div>
+                      </p>
                       {eventType.price > 0 && (
                         <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" />
@@ -206,12 +208,29 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           </IntlProvider>
                         </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 className="px-4 sm:flex sm:p-4 sm:py-5">
+                {/* Following div is marked hidden. Should we remove it ? */}
                 <div
                   className={
                     "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}
                   </h1>
                   {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" />
                       {eventType.description}
                     </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" />
                     {eventType.length} {t("minutes")}
                   </p>
@@ -273,7 +292,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   )}
                   {booking?.startTime && rescheduleUid && (
                     <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")}
                       </p>
                       <p className="text-gray-500 line-through dark:text-white">
@@ -283,6 +302,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                     </div>
                   )}
                 </div>
+
                 <DatePicker
                   date={selectedDate}
                   periodType={eventType?.periodType}
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index fe317dd029..dd22a8fb8c 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -372,7 +372,7 @@ const BookingPage = ({
                   </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}>
                   <div className="mb-4">
                     <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 4b88e1c5f6..f39a496f32 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -223,9 +223,6 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
               <div
                 className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : "fixed inset-0")}
                 aria-hidden="true">
-                <span className="inline-block h-screen align-middle" aria-hidden="true">
-                  &#8203;
-                </span>
                 <div
                   className={classNames(
                     "inline-block transform overflow-hidden rounded-sm",