From 47ce2feb3ce92112d47ee8e628efe8adb11794f0 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 18 Mar 2022 18:22:56 +0000
Subject: [PATCH] minor layout improvements (#2209)

---
 apps/web/components/Shell.tsx                   | 6 +++---
 apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx | 2 +-
 apps/web/ee/lib/intercom/IntercomMenuItem.tsx   | 2 +-
 apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx     | 2 +-
 apps/web/pages/availability/index.tsx           | 4 ++--
 apps/web/pages/event-types/index.tsx            | 9 +++++----
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 6feb6a50..130ebbd8 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -375,7 +375,7 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>
-        <div className="group flex w-full cursor-pointer appearance-none items-center">
+        <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
           <span
             className={classNames(
               small ? "h-8 w-8" : "h-10 w-10",
@@ -414,7 +414,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               />
             </span>
           )}
-        </div>
+        </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent portalled={true}>
         <DropdownMenuItem>
@@ -423,7 +423,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               mutation.mutate({ away: !user?.away });
               utils.invalidateQueries("viewer.me");
             }}
-            className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+            className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
             <MoonIcon
               className={classNames(
                 user?.away
diff --git a/apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx b/apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx
index f41c251e..350af9ab 100644
--- a/apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx
+++ b/apps/web/ee/lib/helpscout/HelpscoutMenuItem.tsx
@@ -29,7 +29,7 @@ export default function HelpscoutMenuItem() {
             <ChatAltIcon
               className={classNames(
                 "text-neutral-400 group-hover:text-neutral-500",
-                "h-5 w-5 flex-shrink-0 ltr:mr-2"
+                "h-5 w-5 flex-shrink-0 ltr:mr-3"
               )}
               aria-hidden="true"
             />
diff --git a/apps/web/ee/lib/intercom/IntercomMenuItem.tsx b/apps/web/ee/lib/intercom/IntercomMenuItem.tsx
index 2741b4b7..dc379041 100644
--- a/apps/web/ee/lib/intercom/IntercomMenuItem.tsx
+++ b/apps/web/ee/lib/intercom/IntercomMenuItem.tsx
@@ -22,7 +22,7 @@ export default function IntercomMenuItem() {
           <ChatAltIcon
             className={classNames(
               "text-neutral-400 group-hover:text-neutral-500",
-              "h-5 w-5 flex-shrink-0 ltr:mr-2"
+              "h-5 w-5 flex-shrink-0 ltr:mr-3"
             )}
             aria-hidden="true"
           />
diff --git a/apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx b/apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx
index 5fc66132..706495f4 100644
--- a/apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx
+++ b/apps/web/ee/lib/zendesk/ZendeskMenuItem.tsx
@@ -24,7 +24,7 @@ export default function ZendeskMenuItem() {
             <ChatAltIcon
               className={classNames(
                 "text-neutral-400 group-hover:text-neutral-500",
-                "h-5 w-5 flex-shrink-0 ltr:mr-2"
+                "h-5 w-5 flex-shrink-0 ltr:mr-3"
               )}
               aria-hidden="true"
             />
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index d5b977f5..8d5d2461 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -68,7 +68,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
                     </Link>
                   </div>
                   <Dropdown>
-                    <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200">
+                    <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
                       <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
@@ -80,7 +80,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
                             })
                           }
                           type="button"
-                          color="minimal"
+                          color="warn"
                           className="w-full font-normal"
                           StartIcon={TrashIcon}>
                           {t("delete_schedule")}
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 5787d50b..ba6d2704 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -177,7 +177,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
                     </button>
 
                     <button
-                      className="invisible absolute left-1/2 mt-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
+                      className="invisible absolute left-1/2 mt-8 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
                       onClick={() => moveEventType(index, 1)}>
                       <ArrowDownIcon />
                     </button>
@@ -189,7 +189,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
                     title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
                     <div>
                       <span
-                        className="truncate font-medium text-neutral-900"
+                        className="truncate font-medium text-neutral-900 ltr:mr-1 rtl:ml-1"
                         data-testid={"event-type-title-" + type.id}>
                         {type.title}
                       </span>
@@ -218,6 +218,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
                     {type.users?.length > 1 && (
                       <AvatarGroup
                         border="border-2 border-white"
+                        className="relative top-1 right-3"
                         size={8}
                         truncateAfter={4}
                         items={type.users.map((organizer) => ({
@@ -250,7 +251,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
                     </Tooltip>
                     <Dropdown>
                       <DropdownMenuTrigger
-                        className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900"
+                        className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900"
                         data-testid={"event-type-options-" + type.id}>
                         <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
                       </DropdownMenuTrigger>
@@ -314,7 +315,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
               </div>
               <div className="mr-5 flex flex-shrink-0 sm:hidden">
                 <Dropdown>
-                  <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+                  <DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
                     <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent portalled>