Merge branch 'main' into feat/v2-datepicker

calcom · Sep 1, 2022 · 7b02e99 · 7b02e99
2 parents 2c4b94f + d5b7195
commit 7b02e99
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,26 +408,26 @@ 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>
  <EventTypeDescriptionSafeHTML eventType={eventType} />
  </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
@@ -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
@@ -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" />