Fix "Edit Booking" Icon (#2536)

apps/web/components/booking/BookingListItem.tsx

@@ -1,4 +1,4 @@
-import { BanIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
+import { BanIcon, CheckIcon, ClockIcon, XIcon, PencilAltIcon } from "@heroicons/react/outline";
 import { PaperAirplaneIcon } from "@heroicons/react/outline";
 import { BookingStatus } from "@prisma/client";
 import dayjs from "dayjs";
@@ -87,7 +87,7 @@ function BookingListItem(booking: BookingItem) {
       actions: [
         {
           id: "edit",
-          icon: ClockIcon,
+          icon: PencilAltIcon,
           label: t("edit_booking"),
           href: `/reschedule/${booking.uid}`,
         },

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -213,7 +213,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           <div>
                             <p
                               className="mt-8 mb-2 text-gray-600 dark:text-white"
-                              data-testid="former_time_p">
+                              data-testid="former_time_p_mobile">
                               {t("former_time")}
                             </p>
                             <p className="text-gray-500 line-through dark:text-white">
@@ -230,7 +230,6 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
               </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 " +
@@ -292,7 +291,9 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   )}
                   {booking?.startTime && rescheduleUid && (
                     <div>
-                      <p className="mt-4 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_desktop">
                         {t("former_time")}
                       </p>
                       <p className="text-gray-500 line-through dark:text-white">

apps/web/playwright/reschedule.test.ts

@@ -104,7 +104,7 @@ test.describe("Reschedule Tests", async () => {
     await page.goto(
       `/${originalBooking?.user?.username}/${eventType?.slug}?rescheduleUid=${originalBooking?.uid}`
     );
-    const formerTimeElement = await page.locator('[data-testid="former_time_p"]');
+    const formerTimeElement = await page.locator('[data-testid="former_time_p_desktop"]');
     await expect(formerTimeElement).toBeVisible();
   });