Zomars/calendars UI fixes (#1288)

* Updates yarn.lock

* Primary calendar selector UI fixes

* Update translation string

* Mobile fixes

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"}

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