From 57eb5a4328cc223274222489c5cd8d1dbf0eaabb Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Thu, 1 Jun 2023 13:38:52 +0200
Subject: [PATCH] Fix for booker colors in dark mode, we can't use bg-default
 in both places because we use a custom background in dark mode. Otherwise it
 would be a similar color in dark. So we need to supply a custom dark mode
 color. (#9259)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 packages/features/bookings/Booker/Booker.tsx                  | 4 ++--
 .../Booker/components/BookEventForm/BookFormAsModal.tsx       | 2 +-
 .../features/bookings/Booker/components/LargeCalendar.tsx     | 2 +-
 packages/features/bookings/Booker/components/Unavailable.tsx  | 2 +-
 packages/features/bookings/components/AvailableTimes.tsx      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index a85b5468f9..0372b4574f 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -103,7 +103,7 @@ const BookerComponent = ({
         since that's not a valid option, so it would set the layout to null.
       */}
       {!isMobile && (
-        <div className="[&>div]:bg-default fixed top-2 right-3 z-10">
+        <div className="[&>div]:bg-default dark:[&>div]:bg-muted fixed top-2 right-3 z-10">
           <ToggleGroup
             onValueChange={onLayoutToggle}
             defaultValue={layout}
@@ -133,7 +133,7 @@ const BookerComponent = ({
           className={classNames(
             // Sets booker size css variables for the size of all the columns.
             ...getBookerSizeClassNames(layout, bookerState),
-            "bg-default grid max-w-full auto-rows-fr items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
+            "bg-default dark:bg-muted grid max-w-full auto-rows-fr items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
             layout === "small_calendar" && "border-subtle rounded-md border"
           )}>
           <AnimatePresence>
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
index f220be657b..0ec430f37d 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
@@ -20,7 +20,7 @@ export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCan
       <DialogContent
         type={undefined}
         enableOverflow
-        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
+        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default dark:[&_.modalsticky]:bg-muted max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
         <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
         <div className="mt-4 flex space-x-2 rounded-md leading-none">
           <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx
index 9a2e2a668d..527f6a5ad4 100644
--- a/packages/features/bookings/Booker/components/LargeCalendar.tsx
+++ b/packages/features/bookings/Booker/components/LargeCalendar.tsx
@@ -11,7 +11,7 @@ export const LargeCalendar = () => {
   );
 
   return (
-    <div className="bg-default flex h-full w-full flex-col items-center justify-center">
+    <div className="bg-default dark:bg-muted flex h-full w-full flex-col items-center justify-center">
       Something big is coming...
       <br />
       <button
diff --git a/packages/features/bookings/Booker/components/Unavailable.tsx b/packages/features/bookings/Booker/components/Unavailable.tsx
index a6865dd650..1b88e86901 100644
--- a/packages/features/bookings/Booker/components/Unavailable.tsx
+++ b/packages/features/bookings/Booker/components/Unavailable.tsx
@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
   <div className="mx-auto w-full max-w-2xl">
-    <div className="border-subtle bg-default overflow-hidden rounded-lg border p-10">
+    <div className="border-subtle bg-default dark:bg-muted overflow-hidden rounded-lg border p-10">
       <h2 className="font-cal mb-4 text-3xl">{title}</h2>
       {children}
     </div>
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 9b32e441e4..046cc62936 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -39,7 +39,7 @@ export const AvailableTimes = ({
 
   return (
     <div className={classNames("text-default", className)}>
-      <header className="bg-muted before:bg-muted mb-5 flex w-full flex-row items-center font-medium">
+      <header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-5 flex w-full flex-row items-center font-medium">
         <span className={classNames(isLargeTimeslots && "w-full text-center")}>
           <span className="text-emphasis font-semibold">
             {nameOfDay(i18n.language, Number(date.format("d")), "short")}