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 (
|
||||
<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
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue