minor layout improvements (#2209)
This commit is contained in:
parent
ae27601405
commit
47ce2feb3c
6 changed files with 13 additions and 12 deletions
|
@ -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
|
||||||
|
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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")}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue