From 6fa4befc9bfe6bff11090aa7d60f6b065b80009a Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Wed, 8 Feb 2023 17:53:00 +0545 Subject: [PATCH] [CAL-488] Timezone selection has a weird double dropdown (#6851) Co-authored-by: gitstart-calcom --- apps/web/components/booking/TimeOptions.tsx | 73 +++++++++++++++---- .../booking/pages/AvailabilityPage.tsx | 41 +++-------- apps/web/playwright/onboarding.e2e.ts | 2 +- .../form/timezone-select/TimezoneSelect.tsx | 6 ++ 4 files changed, 78 insertions(+), 44 deletions(-) diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx index 293276cf2b..eb498dd51a 100644 --- a/apps/web/components/booking/TimeOptions.tsx +++ b/apps/web/components/booking/TimeOptions.tsx @@ -1,8 +1,10 @@ import { FC, useEffect, useState } from "react"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; +import useTheme from "@calcom/lib/hooks/useTheme"; import { ITimezoneOption, TimezoneSelect } from "@calcom/ui"; +import useMeQuery from "@lib/hooks/useMeQuery"; + import { timeZone } from "../../lib/clock"; type Props = { @@ -11,7 +13,8 @@ type Props = { const TimeOptions: FC = ({ onSelectTimeZone }) => { const [selectedTimeZone, setSelectedTimeZone] = useState(""); - const { t } = useLocale(); + const query = useMeQuery(); + const userTheme = useTheme(query?.data?.theme).resolvedTheme; useEffect(() => { setSelectedTimeZone(timeZone()); @@ -23,18 +26,60 @@ const TimeOptions: FC = ({ onSelectTimeZone }) => { } }, [selectedTimeZone, onSelectTimeZone]); - return selectedTimeZone !== "" ? ( -
-
-
{t("time_options")}
-
- setSelectedTimeZone(tz.value)} - className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 text-sm focus:ring-black" - /> -
+ const customStyles = { + option: (_provided: object, state: { isSelected: boolean; isFocused: boolean }) => ({ + padding: "10px 12px !important", + color: state.isSelected || state.isFocused ? "#101010" : "#374151", + backgroundColor: state.isSelected ? "#E5E7EB !important" : "white", + ...(userTheme === "dark" && { + color: state.isSelected || state.isFocused ? "white" : "#80868B", + }), + }), + control: () => ({ + display: "flex", + cursor: "pointer", + backgroundColor: "transparent !important", + minWidth: "5rem", + height: "24px", + minHeight: "24px !important", + boxShadow: "none !important", + }), + singleValue: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({ + ...provided, + color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563", + ...(userTheme === "dark" && { + color: "#a5a5a5 !important", + }), + }), + menu: (provided: object) => ({ + ...provided, + minWidth: "20rem", + margin: "8px 0 0 -20px", + }), + valueContainer: (provided: object) => ({ + ...provided, + padding: "0 0 0 6px", + }), + dropdownIndicator: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({ + ...provided, + transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "", + color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563", + marginLeft: 4, + padding: 0, + ...(userTheme === "dark" && { + color: "#80868B", + }), + }), + }; + + return !!selectedTimeZone ? ( + setSelectedTimeZone(tz.value)} + className="flex h-6 text-sm font-medium" + styles={customStyles} + /> ) : null; }; diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index 08e7922710..69b8c114c2 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -1,6 +1,5 @@ import { useAutoAnimate } from "@formkit/auto-animate/react"; import { EventType } from "@prisma/client"; -import * as Popover from "@radix-ui/react-popover"; import { useRouter } from "next/router"; import { useReducer, useEffect, useMemo, useState } from "react"; import { Toaster } from "react-hot-toast"; @@ -30,7 +29,7 @@ import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc/react"; import { HeadSeo } from "@calcom/ui"; -import { FiChevronDown, FiChevronUp, FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon"; +import { FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon"; import { timeZone as localStorageTimeZone } from "@lib/clock"; import useRouterQuery from "@lib/hooks/useRouterQuery"; @@ -212,41 +211,25 @@ const SlotPicker = ({ function TimezoneDropdown({ onChangeTimeZone, - timeZone, }: { onChangeTimeZone: (newTimeZone: string) => void; timeZone?: string; }) { - const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); - const handleSelectTimeZone = (newTimeZone: string) => { onChangeTimeZone(newTimeZone); localStorageTimeZone(newTimeZone); - setIsTimeOptionsOpen(false); }; return ( - - -

- - {timeZone} - {isTimeOptionsOpen ? ( - - ) : ( - - )} -

- - - - - - - + <> +
+ + +
+ ); } @@ -362,10 +345,10 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => { isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0", - "border-bookinglightest overflow-hidden md:rounded-md md:border", + "border-bookinglightest md:rounded-md md:border", isEmbed && "mx-auto" )}> -
+
{showEventTypeDetails && (
{ await page.locator("input[name=username]").fill("new user onboarding"); await page.locator("input[name=name]").fill("new user 2"); await page.locator("input[role=combobox]").click(); - await page.locator("text=Eastern Time").click(); + await page.locator("text=Europe/London GMT +0:00").click(); await page.locator("button[type=submit]").click(); diff --git a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx index f4e80655d4..38a6ef9d86 100644 --- a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx +++ b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx @@ -21,6 +21,12 @@ export function TimezoneSelect({ className, components, ...props }: SelectProps) "America/Asuncion": "Asuncion", }} {...props} + formatOptionLabel={(option) =>

{(option as ITimezoneOption).value}

} + getOptionLabel={(data) => { + const option = data as ITimezoneOption; + const formatedLabel = option.label.split(")")[0].replace("(", " ").replace("T", "T "); + return `${option.value}${formatedLabel}`; + }} /> ); }