From 0bd8c23be74fa19e55b5b98b4cfdc4e08a300a3c Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 30 Aug 2022 12:50:34 +0100
Subject: [PATCH 1/2] Proposal to turn off eslint during 'yarn / next build'
 (#4027)

---
 apps/web/next.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index f829e319ba..65c077d531 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -78,6 +78,9 @@ plugins.push(withAxiom);
 /** @type {import("next").NextConfig} */
 const nextConfig = {
   i18n,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   experimental: {
     images: {
       unoptimized: true,

From 7d611c5527f831d029ef4c6b9470c13cfbf16079 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 30 Aug 2022 12:51:08 +0100
Subject: [PATCH 2/2] Border color - brand color - mobile 1 colum times (#4025)

---
 apps/web/components/booking/AvailableTimes.tsx         | 10 +++++-----
 apps/web/components/booking/pages/AvailabilityPage.tsx | 10 +++++-----
 packages/ui/v2/modules/booker/DatePicker.tsx           |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index 00c6b1a43c..600ed4f9e8 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -53,7 +53,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
           {date.toDate().toLocaleString(i18n.language, { month: "long" })}
         </span>
       </div>
-      <div className="grid flex-grow grid-cols-2 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
         {slots.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
@@ -87,8 +87,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                   <div
                     className={classNames(
-                      "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-4  font-medium opacity-25 dark:border-transparent ",
-                      brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                      "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2  font-medium opacity-25 dark:border-transparent ",
+                      brand === "#fff" || brand === "#ffffff" ? "" : ""
                     )}>
                     {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                     {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
@@ -98,8 +98,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     <a
                       className={classNames(
                         "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand",
-                        "dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 dark:hover:border-darkgray-900 mb-2 block rounded-md border-2 bg-white py-4 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
-                        brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                        "dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 dark:hover:border-darkgray-900 mb-2 block rounded-md border bg-white py-2 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
+                        brand === "#fff" || brand === "#ffffff" ? "" : ""
                       )}
                       data-testid="time">
                       {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 9235726218..5a4843423b 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -175,7 +175,7 @@ const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 w-full sm:mt-0 sm:min-w-[455px]",
+          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-0",
           selectedDate
             ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3 "
             : "sm:p-4"
@@ -391,7 +391,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
             {/* mobile: details */}
             <div className="block px-4 pt-4 sm:p-8 md:hidden">
               <div>
-                <div className="flex">
+                <div className="flex items-center space-x-4">
                   <UserAvatars
                     profile={profile}
                     users={eventType.users}
@@ -399,7 +399,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     size={9}
                     truncateAfter={5}
                   />
-                  <p className="dark:text-darkgray-600 break-words text-sm font-medium text-black">
+                  <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
                     {profile.name}
                   </p>
                 </div>
@@ -408,7 +408,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
                       {eventType.title}
                     </h1>
-                    <div className="flex flex-col space-y-2">
+                    <div className="flex flex-col space-y-3">
                       {eventType?.description && (
                         <div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
                           <div>
@@ -510,7 +510,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
                   {eventType.title}
                 </h1>
-                <div className="flex flex-col space-y-2 text-sm font-medium text-gray-600 dark:text-white">
+                <div className="flex flex-col space-y-3 text-sm font-medium text-gray-600 dark:text-white">
                   {eventType?.description && (
                     <div className="flex ">
                       <div>
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index 05cfffefac..9d59f2642b 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -41,7 +41,7 @@ export const Day = ({
       className={classNames(
         "disabled:text-bookinglighter  absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium hover:bg-gray-300 disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
         active
-          ? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast border-2 bg-gray-300"
+          ? "dark:bg-darkmodebrand dark:text-darkmodebrandcontrast bg-brand text-brandcontrast border-2"
           : !props.disabled
           ? "dark:bg-darkgray-200 bg-gray-100 dark:text-white"
           : "hover:bg-transparent"