From d5b7195d677b7f40a6ba8ac77e5caf7dfb1fc119 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Thu, 1 Sep 2022 11:22:49 +0200
Subject: [PATCH] fixed dark mode skeleton on public page (#4064)

---
 .../components/booking/AvailableEventLocations.tsx   |  2 +-
 apps/web/components/booking/AvailableTimes.tsx       |  4 ++--
 .../components/booking/pages/AvailabilityPage.tsx    | 12 ++++++------
 packages/ui/skeleton/index.tsx                       |  2 +-
 packages/ui/v2/modules/booker/DatePicker.tsx         |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 9a75762d65..ef6bd54c35 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -6,7 +6,7 @@ import { Props } from "./pages/AvailabilityPage";
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   return locations.length ? (
     <div>
-      <div className="flex-warp mr-6 flex break-words text-sm text-gray-600 dark:text-white">
+      <div className="flex-warp dark:text-darkgray-600 mr-6 flex break-words text-sm text-gray-600">
         <p className="w-full">
           {locations.map((location) => {
             const eventLocationType = getEventLocationType(location.type);
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index 600ed4f9e8..db7a44d6b4 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -43,7 +43,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   }, []);
 
   return (
-    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-4">
+    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-5">
       <div className="mb-4 text-left text-base">
         <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
           {nameOfDay(i18n.language, Number(date.format("d")))}
@@ -98,7 +98,7 @@ 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 bg-white py-2 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
+                        "dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 dark:hover:border-darkgray-900 mb-2 block rounded-md border bg-white py-2.5 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
                         brand === "#fff" || brand === "#ffffff" ? "" : ""
                       )}
                       data-testid="time">
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index c1b7ca0d9d..31979efbd9 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -240,7 +240,7 @@ function TimezoneDropdown({
 
   return (
     <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 mb-2 -ml-2 px-2 text-left text-gray-600 dark:text-white">
+      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
         <p className="text-sm font-medium">
           <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
           {timeZone}
@@ -408,7 +408,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </h1>
                     <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 className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
                           <div>
                             <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                           </div>
@@ -416,18 +416,18 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       {eventType?.requiresConfirmation && (
-                        <p className="dark:text-darkgray-600 text-gray-600 dark:text-white">
+                        <p className="dark:text-darkgray-600 dark:text-darkgray-600 text-gray-600">
                           <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           {t("requires_confirmation")}
                         </p>
                       )}
                       <AvailableEventLocations locations={eventType.locations} />
-                      <p className="text-gray-600 dark:text-white">
+                      <p className="dark:text-darkgray-600 text-gray-600">
                         <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                         {eventType.length} {t("minutes")}
                       </p>
                       {eventType.price > 0 && (
-                        <div className="text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 text-gray-600">
                           <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           <IntlProvider locale="en">
                             <FormattedNumber
@@ -506,7 +506,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-3 text-sm font-medium text-gray-600 dark:text-white">
+                <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
                   {eventType?.description && (
                     <div className="flex ">
                       <div>
diff --git a/packages/ui/skeleton/index.tsx b/packages/ui/skeleton/index.tsx
index 19df84d949..1811ef9cd6 100644
--- a/packages/ui/skeleton/index.tsx
+++ b/packages/ui/skeleton/index.tsx
@@ -33,7 +33,7 @@ const SkeletonText: React.FC<SkeletonBaseProps> = ({ width, height, className })
   return (
     <div
       className={classNames(
-        `dark:white-300 animate-pulse rounded-md bg-gray-300 w-${width} h-${height}`,
+        `dark:white-300 animate-pulse rounded-md bg-gray-300 dark:bg-gray-300/50 w-${width} h-${height}`,
         className
       )}
     />
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index ca793eaa60..fefda1d312 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -89,7 +89,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:bg-gray-900 dark:text-gray-400"
+              className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-md border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:bg-black dark:text-gray-600/40"
               key={`e-${idx}`}
               disabled>
               <SkeletonText width="5" height="4" />