From c644a10688ad72d0331ab8c4ea7e58c07b7ec33a Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 16 Aug 2022 01:05:48 +0530
Subject: [PATCH] fix: css for location (#3744)

* fix: css for location

* fix: recurring icon positioning

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../booking/pages/AvailabilityPage.tsx           | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 52f43c03b7..7e7b7110b1 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -512,9 +512,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="text-gray-600 dark:text-white">
-                          <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-500" />
-                          <div className="ml-[27px]">
+                        <div className="flex items-center text-gray-600 dark:text-white">
+                          <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 shrink-0 text-gray-500" />
+                          <div>
                             <p className="mb-1 -ml-2 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                             </p>
@@ -607,7 +607,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType.locations.length === 1 && (
-                    <p className="mr-6 w-10 break-words text-sm text-gray-600 dark:text-white">
+                    <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
                       {Object.values(AppStoreLocationType).includes(
                         eventType.locations[0].type as unknown as AppStoreLocationType
                       ) ? (
@@ -620,11 +620,11 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </p>
                   )}
                   {eventType.locations.length > 1 && (
-                    <div className="flex-warp mr-6 flex break-words font-medium text-gray-600 dark:text-white">
+                    <div className="flex-warp flex items-center font-medium text-gray-600 dark:text-white">
                       <div className="mr-[10px] ml-[2px] -mt-1 ">
                         <Icon.FiMapPin className="inline-block h-4 w-4 text-gray-500" />
                       </div>
-                      <p className="w-full">
+                      <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
                         {eventType.locations.map((el, i, arr) => {
                           return (
                             <span key={el.type}>
@@ -643,9 +643,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     {eventType.length} {t("minutes")}
                   </p>
                   {!rescheduleUid && eventType.recurringEvent && (
-                    <div className="text-gray-600 dark:text-white">
+                    <div className="flex items-center text-gray-600 dark:text-white">
                       <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-500" />
-                      <div className="ml-[27px]">
+                      <div>
                         <p className="mb-1 -ml-2 inline px-2 py-1">
                           {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                         </p>