From 5902f78fb235b9ce21a33ce2db02ef8cb7a5ff23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Thu, 9 Dec 2021 12:37:29 -0700
Subject: [PATCH] Zomars/calendars UI fixes (#1288)

* Updates yarn.lock

* Primary calendar selector UI fixes

* Update translation string

* Mobile fixes
---
 components/Shell.tsx                          | 10 ++--
 .../integrations/CalendarListContainer.tsx    | 60 +++++++++++--------
 next-env.d.ts                                 |  1 -
 public/static/locales/en/common.json          |  4 +-
 yarn.lock                                     | 50 +++++++++++++++-
 5 files changed, 91 insertions(+), 34 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 1cf3868848..13461bc217 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -106,7 +106,7 @@ export function ShellSubHeading(props: {
         </h2>
         {props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>}
       </div>
-      {props.actions && <div className="flex-shrink-0 mb-4">{props.actions}</div>}
+      {props.actions && <div className="flex-shrink-0">{props.actions}</div>}
     </div>
   );
 }
@@ -199,7 +199,7 @@ export default function Shell(props: {
         <div className="hidden md:flex lg:flex-shrink-0">
           <div className="flex flex-col w-14 lg:w-56">
             <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
-              <div className="flex flex-col flex-1 pt-3 lg:pt-5 pb-4 overflow-y-auto">
+              <div className="flex flex-col flex-1 pt-3 pb-4 overflow-y-auto lg:pt-5">
                 <Link href="/event-types">
                   <a className="px-4 md:hidden lg:inline">
                     <Logo small />
@@ -211,7 +211,7 @@ export default function Shell(props: {
                     <Logo small icon />
                   </a>
                 </Link>
-                <nav className="flex-1 px-2 mt-2 lg:mt-5 space-y-1 bg-white">
+                <nav className="flex-1 px-2 mt-2 space-y-1 bg-white lg:mt-5">
                   {navigation.map((item) => (
                     <Link key={item.name} href={item.href}>
                       <a
@@ -328,13 +328,13 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>
-        <div className="flex items-center space-x-2 cursor-pointer group w-full">
+        <div className="flex items-center w-full space-x-2 cursor-pointer group">
           <span
             className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}>
             <Avatar imageSrc={user?.avatar || ""} alt={user?.username || "Nameless User"} />
           </span>
           {!small && (
-            <span className="flex flex-grow items-center truncate">
+            <span className="flex items-center flex-grow truncate">
               <span className="flex-grow text-sm truncate">
                 <span className="block font-medium text-gray-900 truncate">
                   {user?.username || "Nameless User"}
diff --git a/components/integrations/CalendarListContainer.tsx b/components/integrations/CalendarListContainer.tsx
index f07b769e09..0dbc480282 100644
--- a/components/integrations/CalendarListContainer.tsx
+++ b/components/integrations/CalendarListContainer.tsx
@@ -162,6 +162,7 @@ function ConnectedCalendarsList(props: Props) {
 }
 
 function PrimaryCalendarSelector() {
+  const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"], {
     suspense: true,
   });
@@ -196,28 +197,37 @@ function PrimaryCalendarSelector() {
       })),
     })) ?? [];
   return (
-    <Select
-      name={"primarySelectedCalendar"}
-      options={options}
-      isSearchable={false}
-      className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
-      onChange={(option) => {
-        setSelectedOption(option);
-        if (!option) {
-          return;
-        }
+    <div className="relative">
+      {/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
+      <div className="absolute z-10 pointer-events-none">
+        <Button size="sm" color="secondary" className="border-transparent m-[1px] rounded-sm">
+          {t("select_destination_calendar")}: {selectedOption?.label || ""}
+        </Button>
+      </div>
+      <Select
+        name={"primarySelectedCalendar"}
+        placeholder={`${t("select_destination_calendar")}:`}
+        options={options}
+        isSearchable={false}
+        className="flex-1 block w-full min-w-0 mt-1 mb-2 border-gray-300 rounded-none focus:ring-primary-500 focus:border-primary-500 rounded-r-md sm:text-sm"
+        onChange={(option) => {
+          setSelectedOption(option);
+          if (!option) {
+            return;
+          }
 
-        /* Split only the first `:`, since Apple uses the full URL as externalId */
-        const [integration, externalId] = option.value.split(/:(.+)/);
+          /* Split only the first `:`, since Apple uses the full URL as externalId */
+          const [integration, externalId] = option.value.split(/:(.+)/);
 
-        mutation.mutate({
-          integration,
-          externalId,
-        });
-      }}
-      isLoading={mutation.isLoading}
-      value={selectedOption}
-    />
+          mutation.mutate({
+            integration,
+            externalId,
+          });
+        }}
+        isLoading={mutation.isLoading}
+        value={selectedOption}
+      />
+    </div>
   );
 }
 
@@ -266,7 +276,7 @@ export function CalendarListContainer(props: { heading?: false }) {
     <>
       {heading && (
         <ShellSubHeading
-          className="mt-10"
+          className="mt-10 mb-0"
           title={
             <SubHeadingTitleWithConnections
               title="Calendars"
@@ -274,11 +284,13 @@ export function CalendarListContainer(props: { heading?: false }) {
             />
           }
           subtitle={t("configure_how_your_event_types_interact")}
-          actions={<div className="block"></div>}
+          actions={
+            <div className="block max-w-full sm:min-w-80">
+              <PrimaryCalendarSelector />
+            </div>
+          }
         />
       )}
-      <p className="mr-4 text-sm text-neutral-500">{t("select_destination_calendar")}</p>
-      <PrimaryCalendarSelector />
       <ConnectedCalendarsList onChanged={onChanged} />
       {!!query.data?.connectedCalendars.length && (
         <ShellSubHeading
diff --git a/next-env.d.ts b/next-env.d.ts
index 9bc3dd46b9..4f11a03dc6 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
diff --git a/public/static/locales/en/common.json b/public/static/locales/en/common.json
index 4af8c46c77..5f3c3936bb 100644
--- a/public/static/locales/en/common.json
+++ b/public/static/locales/en/common.json
@@ -545,11 +545,11 @@
   "connect_your_favourite_apps": "Connect your favourite apps.",
   "automation": "Automation",
   "configure_how_your_event_types_interact": "Configure how your event types should interact with your calendars.",
-  "select_destination_calendar": "Select a destination calendar for your bookings.",
+  "select_destination_calendar": "Create events on",
   "connect_an_additional_calendar": "Connect an additional calendar",
   "conferencing": "Conferencing",
   "calendar": "Calendar",
   "not_installed": "Not installed",
   "error_password_mismatch": "Passwords don't match.",
   "error_required_field": "This field is required."
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index b5fcce5f7d..2c2e2f905e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -847,6 +847,17 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.4.2":
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.4.2.tgz#96536ebd34da6392c2b7c7737d693885b5dd44a5"
+  integrity sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@jimp/bmp@^0.16.1":
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.16.1.tgz#6e2da655b2ba22e721df0795423f34e92ef13768"
@@ -2426,6 +2437,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 any-base@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
@@ -3764,6 +3780,11 @@ diff-sequences@^26.6.2:
   resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
   integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
+diff-sequences@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
+  integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -5809,7 +5830,7 @@ jest-config@^26.6.3:
     micromatch "^4.0.2"
     pretty-format "^26.6.2"
 
-jest-diff@^26.0.0, jest-diff@^26.6.2:
+jest-diff@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
   integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
@@ -5819,6 +5840,16 @@ jest-diff@^26.0.0, jest-diff@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-diff@^27.0.0:
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.4.2.tgz#786b2a5211d854f848e2dcc1e324448e9481f36f"
+  integrity sha512-ujc9ToyUZDh9KcqvQDkk/gkbf6zSaeEg9AiBxtttXW59H/AcqEYp1ciXAtJp+jXWva5nAf/ePtSsgWwE5mqp4Q==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.4.0"
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.2"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -5867,6 +5898,11 @@ jest-get-type@^26.3.0:
   resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
   integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
+jest-get-type@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
+  integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -8049,7 +8085,7 @@ prettier@^2.3.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
-pretty-format@^26.0.0, pretty-format@^26.6.2:
+pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
   integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
@@ -8059,6 +8095,16 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.0.0, pretty-format@^27.4.2:
+  version "27.4.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.2.tgz#e4ce92ad66c3888423d332b40477c87d1dac1fb8"
+  integrity sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==
+  dependencies:
+    "@jest/types" "^27.4.2"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"