From 6179b0cc561a80ab8e23e8f843cb48dbd00be86d Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 1 Jun 2022 13:58:46 +0100
Subject: [PATCH] Fixing Spacing + text color (#2938)

* Fixing Spacing + text color

* Fix overflow

* Fixing mobile text color
---
 .../booking/pages/AvailabilityPage.tsx        | 261 +++++++++---------
 1 file changed, 137 insertions(+), 124 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index c9f864ca31..79cb4a9e75 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -252,56 +252,64 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                       <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
                         {eventType.title}
                       </h1>
-                      {eventType?.description && (
-                        <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>
-                      )}
-                      {eventType.locations.length === 1 && (
-                        <p className="text-bookinglight mb-2 dark:text-white">
-                          {Object.values(AppStoreLocationType).includes(
-                            eventType.locations[0].type as unknown as AppStoreLocationType
-                          ) ? (
-                            <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                          ) : (
+                      <div className="flex flex-col space-y-4">
+                        {eventType?.description && (
+                          <p className="text-gray-600 dark:text-white">
+                            <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                            {eventType.description}
+                          </p>
+                        )}
+                        {eventType.locations.length === 1 && (
+                          <p className="text-gray-600 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-gray-600 dark:text-white">
+                            {Object.values(AppStoreLocationType).includes(
+                              eventType.locations[0].type as unknown as AppStoreLocationType
+                            ) ? (
+                              <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                            ) : (
+                              <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                            )}
 
-                          {locationKeyToString(eventType.locations[0], t)}
+                            {locationKeyToString(eventType.locations[0], t)}
+                          </p>
+                        )}
+                        <p className="text-gray-600 dark:text-white">
+                          <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+                          {eventType.length} {t("minutes")}
                         </p>
-                      )}
-                      <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>
-                      {eventType.price > 0 && (
-                        <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}
-                              style="currency"
-                              currency={eventType.currency.toUpperCase()}
-                            />
-                          </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_mobile">
-                              {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>
+                        {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" />
+                            <IntlProvider locale="en">
+                              <FormattedNumber
+                                value={eventType.price / 100.0}
+                                style="currency"
+                                currency={eventType.currency.toUpperCase()}
+                              />
+                            </IntlProvider>
                           </div>
                         )}
+                        <div className="md:hidden">
+                          {booking?.startTime && rescheduleUid && (
+                            <div>
+                              <p
+                                className="mt-8 text-gray-600 dark:text-white"
+                                data-testid="former_time_p_mobile">
+                                {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>
@@ -337,88 +345,93 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   <h1 className="font-cal mb-4 break-words text-xl font-semibold text-gray-900 dark:text-white">
                     {eventType.title}
                   </h1>
-                  {eventType?.description && (
-                    <p className="text-bookinglight mb-3 dark:text-white">
-                      <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      {eventType.description}
-                    </p>
-                  )}
-                  {eventType.locations.length === 1 && (
-                    <p className="text-bookinglight mb-2 dark:text-white">
-                      {Object.values(AppStoreLocationType).includes(
-                        eventType.locations[0].type as unknown as AppStoreLocationType
-                      ) ? (
-                        <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      ) : (
-                        <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 && (
-                    <div className="text-bookinglight flex-warp mb-2 flex dark:text-white">
-                      <div className="mr-[10px] ml-[2px] -mt-1 ">
-                        <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                  <div className="flex flex-col space-y-4">
+                    {eventType?.description && (
+                      <div className="flex text-gray-600 dark:text-white">
+                        <div>
+                          <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        </div>
+                        <p>{eventType.description}</p>
                       </div>
-                      <p>
-                        {eventType.locations.map((el, i, arr) => {
-                          return (
-                            <span key={el.type}>
-                              {locationKeyToString(el, t)}{" "}
-                              {arr.length - 1 !== i && (
-                                <span className="font-light"> {t("or_lowercase")} </span>
-                              )}
-                            </span>
-                          );
-                        })}
+                    )}
+                    {eventType.locations.length === 1 && (
+                      <p className="text-gray-600  dark:text-white">
+                        {Object.values(AppStoreLocationType).includes(
+                          eventType.locations[0].type as unknown as AppStoreLocationType
+                        ) ? (
+                          <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        ) : (
+                          <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        )}
+
+                        {locationKeyToString(eventType.locations[0], t)}
                       </p>
-                    </div>
-                  )}
-                  <p className="text-bookinglight mb-3 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>
-                  {!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="text-bookinglight mb-1 -ml-2 inline px-2 py-1">
-                        {t("every_for_freq", {
-                          freq: t(
-                            `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
-                          ),
-                        })}
-                      </p>
-                      <input
-                        type="number"
-                        min="1"
-                        max={eventType.recurringEvent.count}
-                        className="w-16 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
-                        defaultValue={eventType.recurringEvent.count}
-                        onChange={(event) => {
-                          setRecurringEventCount(parseInt(event?.target.value));
-                        }}
-                      />
-                      <p className="text-bookinglight inline dark:text-white">
-                        {t(`${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
-                          count: recurringEventCount,
-                        })}
-                      </p>
-                    </div>
-                  )}
-                  {eventType.price > 0 && (
-                    <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
-                          value={eventType.price / 100.0}
-                          style="currency"
-                          currency={eventType.currency.toUpperCase()}
-                        />
-                      </IntlProvider>
+                    )}
+                    {eventType.locations.length > 1 && (
+                      <div className="flex-warp flex  text-gray-600 dark:text-white">
+                        <div className="mr-[10px] ml-[2px] -mt-1 ">
+                          <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                        </div>
+                        <p>
+                          {eventType.locations.map((el, i, arr) => {
+                            return (
+                              <span key={el.type}>
+                                {locationKeyToString(el, t)}{" "}
+                                {arr.length - 1 !== i && (
+                                  <span className="font-light"> {t("or_lowercase")} </span>
+                                )}
+                              </span>
+                            );
+                          })}
+                        </p>
+                      </div>
+                    )}
+                    <p className="text-gray-600 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>
-                  )}
-                  <TimezoneDropdown />
+                    {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                      <div className="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">
+                          {t("every_for_freq", {
+                            freq: t(
+                              `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
+                            ),
+                          })}
+                        </p>
+                        <input
+                          type="number"
+                          min="1"
+                          max={eventType.recurringEvent.count}
+                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          defaultValue={eventType.recurringEvent.count}
+                          onChange={(event) => {
+                            setRecurringEventCount(parseInt(event?.target.value));
+                          }}
+                        />
+                        <p className="inline text-gray-600 dark:text-white">
+                          {t(`${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
+                            count: recurringEventCount,
+                          })}
+                        </p>
+                      </div>
+                    )}
+                    {eventType.price > 0 && (
+                      <p className="-ml-2 px-2 py-1 text-gray-600 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}
+                            style="currency"
+                            currency={eventType.currency.toUpperCase()}
+                          />
+                        </IntlProvider>
+                      </p>
+                    )}
+                    <TimezoneDropdown />
+                  </div>
+
                   {previousPage === `${WEBAPP_URL}/${profile.slug}` && (
                     <div className="flex h-full flex-col justify-end">
                       <ArrowLeftIcon