From 5225fc4317167d81cc2d2a1bcec0ffbf22e42a67 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Date: Tue, 31 May 2022 16:50:51 +0530
Subject: [PATCH] A few booking page UI fixes (#2932)

---
 .../booking/pages/AvailabilityPage.tsx        | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 84eca3e9a2..c9f864ca31 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -258,12 +258,6 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           {eventType.description}
                         </p>
                       )}
-                      {eventType.locations.length === 1 && (
-                        <p className="text-bookinglight mb-2 dark:text-white">
-                          <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                          {locationKeyToString(eventType.locations[0], t)}
-                        </p>
-                      )}
                       {eventType.locations.length === 1 && (
                         <p className="text-bookinglight mb-2 dark:text-white">
                           {Object.values(AppStoreLocationType).includes(
@@ -278,12 +272,12 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                         </p>
                       )}
                       <p className="text-bookinglight mb-2 dark:text-white">
-                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] 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")}
                       </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" />
+                        <div className="text-bookinglight dark:text-white">
+                          <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -388,7 +382,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
                     <div className="mb-3 text-gray-600 dark:text-white">
                       <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                      <p className="mb-1 -ml-2 inline px-2 py-1">
+                      <p className="text-bookinglight mb-1 -ml-2 inline px-2 py-1">
                         {t("every_for_freq", {
                           freq: t(
                             `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
@@ -405,7 +399,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           setRecurringEventCount(parseInt(event?.target.value));
                         }}
                       />
-                      <p className="inline text-gray-600 dark:text-white">
+                      <p className="text-bookinglight inline dark:text-white">
                         {t(`${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
                           count: recurringEventCount,
                         })}
@@ -413,7 +407,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                     </div>
                   )}
                   {eventType.price > 0 && (
-                    <p className="mb-1 -ml-2 px-2 py-1 text-gray-600 dark:text-white">
+                    <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
                       <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       <IntlProvider locale="en">
                         <FormattedNumber
@@ -496,7 +490,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
   function TimezoneDropdown() {
     return (
       <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="min-w-32 mb-1 -ml-2 px-2 py-1 text-left text-gray-600 dark:text-white">
+        <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
           <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
           {timeZone()}
           {isTimeOptionsOpen ? (