[CAL-488] Timezone selection has a weird double dropdown (#6851)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

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<Props> = ({ 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<Props> = ({ onSelectTimeZone }) => {
     }
   }, [selectedTimeZone, onSelectTimeZone]);
 
-  return selectedTimeZone !== "" ? (
-    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
-      <div className="mb-4 flex">
-        <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-      </div>
-      <TimezoneSelect
-        id="timeZone"
-        value={selectedTimeZone}
-        onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 text-sm focus:ring-black"
-      />
-    </div>
+  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 ? (
+    <TimezoneSelect
+      id="timeZone"
+      value={selectedTimeZone}
+      onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
+      className="flex h-6 text-sm font-medium"
+      styles={customStyles}
+    />
   ) : null;
 };
 

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 (
-    <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
-        <p className="flex items-center text-sm font-medium">
-          <FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
-          {timeZone}
-          {isTimeOptionsOpen ? (
-            <FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
-          ) : (
-            <FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
-          )}
-        </p>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          hideWhenDetached
-          align="start"
-          className="animate-fade-in-up absolute left-0 top-2 w-80 max-w-[calc(100vw_-_1.5rem)]">
-          <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+    <>
+      <div
+        className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 flex w-fit
+        items-center
+       rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
+        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-500" />
+        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
+      </div>
+    </>
   );
 }
 
@@ -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"
               )}>
-              <div className="overflow-hidden md:flex">
+              <div className="md:flex">
                 {showEventTypeDetails && (
                   <div
                     className={classNames(

apps/web/playwright/onboarding.e2e.ts

@@ -24,7 +24,7 @@ test.describe("Onboarding", () => {
         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();
 

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) => <p className="truncate">{(option as ITimezoneOption).value}</p>}
+      getOptionLabel={(data) => {
+        const option = data as ITimezoneOption;
+        const formatedLabel = option.label.split(")")[0].replace("(", " ").replace("T", "T ");
+        return `${option.value}${formatedLabel}`;
+      }}
     />
   );
 }