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 ( return (
<Dropdown> <Dropdown>
<DropdownMenuTrigger asChild> <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 <span
className={classNames( className={classNames(
small ? "h-8 w-8" : "h-10 w-10", small ? "h-8 w-8" : "h-10 w-10",
@ -414,7 +414,7 @@ function UserDropdown({ small }: { small?: boolean }) {
/> />
</span> </span>
)} )}
</div> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent portalled={true}> <DropdownMenuContent portalled={true}>
<DropdownMenuItem> <DropdownMenuItem>
@ -423,7 +423,7 @@ function UserDropdown({ small }: { small?: boolean }) {
mutation.mutate({ away: !user?.away }); mutation.mutate({ away: !user?.away });
utils.invalidateQueries("viewer.me"); 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 <MoonIcon
className={classNames( className={classNames(
user?.away user?.away

View file

@ -29,7 +29,7 @@ export default function HelpscoutMenuItem() {
<ChatAltIcon <ChatAltIcon
className={classNames( className={classNames(
"text-neutral-400 group-hover:text-neutral-500", "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" aria-hidden="true"
/> />

View file

@ -22,7 +22,7 @@ export default function IntercomMenuItem() {
<ChatAltIcon <ChatAltIcon
className={classNames( className={classNames(
"text-neutral-400 group-hover:text-neutral-500", "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" aria-hidden="true"
/> />

View file

@ -24,7 +24,7 @@ export default function ZendeskMenuItem() {
<ChatAltIcon <ChatAltIcon
className={classNames( className={classNames(
"text-neutral-400 group-hover:text-neutral-500", "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" aria-hidden="true"
/> />

View file

@ -68,7 +68,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
</Link> </Link>
</div> </div>
<Dropdown> <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" /> <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent> <DropdownMenuContent>
@ -80,7 +80,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
}) })
} }
type="button" type="button"
color="minimal" color="warn"
className="w-full font-normal" className="w-full font-normal"
StartIcon={TrashIcon}> StartIcon={TrashIcon}>
{t("delete_schedule")} {t("delete_schedule")}

View file

@ -177,7 +177,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
</button> </button>
<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)}> onClick={() => moveEventType(index, 1)}>
<ArrowDownIcon /> <ArrowDownIcon />
</button> </button>
@ -189,7 +189,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
title={`${type.title} ${type.description ? ` ${type.description}` : ""}`}> title={`${type.title} ${type.description ? ` ${type.description}` : ""}`}>
<div> <div>
<span <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}> data-testid={"event-type-title-" + type.id}>
{type.title} {type.title}
</span> </span>
@ -218,6 +218,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
{type.users?.length > 1 && ( {type.users?.length > 1 && (
<AvatarGroup <AvatarGroup
border="border-2 border-white" border="border-2 border-white"
className="relative top-1 right-3"
size={8} size={8}
truncateAfter={4} truncateAfter={4}
items={type.users.map((organizer) => ({ items={type.users.map((organizer) => ({
@ -250,7 +251,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
</Tooltip> </Tooltip>
<Dropdown> <Dropdown>
<DropdownMenuTrigger <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}> data-testid={"event-type-options-" + type.id}>
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" /> <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -314,7 +315,7 @@ export const EventTypeList = ({ group, readOnly, types }: EventTypeListProps): J
</div> </div>
<div className="mr-5 flex flex-shrink-0 sm:hidden"> <div className="mr-5 flex flex-shrink-0 sm:hidden">
<Dropdown> <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" /> <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent portalled> <DropdownMenuContent portalled>