minor layout improvements (#2209)

This commit is contained in:
Peer Richelsen 2022-03-18 18:22:56 +00:00 committed by GitHub
parent ae27601405
commit 47ce2feb3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 12 deletions

View file

@ -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

View file

@ -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"
/>

View file

@ -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"
/>

View file

@ -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"
/>

View file

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

View file

@ -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>