UI updates to event types (#894)
This commit is contained in:
parent
b794469c05
commit
e83980a999
8 changed files with 67 additions and 65 deletions
|
@ -201,8 +201,10 @@ export default function Shell(props: {
|
|||
</nav>
|
||||
<div className="py-8">
|
||||
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
|
||||
<div className="mb-8">
|
||||
<h1 className="font-cal text-xl font-bold text-gray-900">{props.heading}</h1>
|
||||
<div className="mb-8 w-full">
|
||||
<h1 className="font-cal text-xl font-bold text-gray-900 tracking-wide mb-1">
|
||||
{props.heading}
|
||||
</h1>
|
||||
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
|
||||
</div>
|
||||
<div className="mb-4 flex-shrink-0">{props.CTA}</div>
|
||||
|
|
|
@ -32,7 +32,7 @@ export default function Switch(props) {
|
|||
/>
|
||||
</PrimitiveSwitch.Root>
|
||||
{label && (
|
||||
<Label.Root className="text-neutral-700 align-text-top ml-3 font-medium cursor-pointer">
|
||||
<Label.Root className="text-neutral-700 text-sm align-text-top ml-3 font-medium cursor-pointer">
|
||||
{label}
|
||||
</Label.Root>
|
||||
)}
|
||||
|
|
|
@ -8,7 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
|
|||
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
|
||||
return (
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
|
||||
{label}
|
||||
</label>
|
||||
|
|
|
@ -7,13 +7,13 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
|
|||
const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
|
||||
return (
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<label htmlFor={rest.id} className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="relative mt-1 rounded-sm shadow-sm">
|
||||
<div className="relative rounded-sm shadow-sm">
|
||||
<input
|
||||
{...rest}
|
||||
ref={ref}
|
||||
|
|
|
@ -8,7 +8,7 @@ import {
|
|||
ExternalLinkIcon,
|
||||
LinkIcon,
|
||||
LocationMarkerIcon,
|
||||
PencilAltIcon,
|
||||
PencilIcon,
|
||||
PlusIcon,
|
||||
TrashIcon,
|
||||
UserAddIcon,
|
||||
|
@ -324,19 +324,19 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<Shell
|
||||
title={`${eventType.title} | Event Type`}
|
||||
heading={
|
||||
<div className="relative group" onClick={() => setEditIcon(false)}>
|
||||
<div className="relative group md:max-w-5xl mx-auto" onClick={() => setEditIcon(false)}>
|
||||
<input
|
||||
ref={titleRef}
|
||||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
required
|
||||
className="w-full pl-0 text-xl font-bold text-gray-500 bg-transparent border-none cursor-pointer focus:text-black hover:text-gray-700 focus:ring-0 focus:outline-none"
|
||||
className="w-full pl-0 text-xl font-bold text-gray-900 bg-transparent border-none cursor-pointer focus:text-black hover:text-gray-700 focus:ring-0 focus:outline-none"
|
||||
placeholder="Quick Chat"
|
||||
defaultValue={eventType.title}
|
||||
/>
|
||||
{editIcon && (
|
||||
<PencilAltIcon
|
||||
<PencilIcon
|
||||
style={{ top: 14, left: `${eventType.title.length * 10 + 8}` }}
|
||||
className="absolute left-0 inline w-4 h-4 text-gray-500 group-hover:text-gray-700"
|
||||
/>
|
||||
|
@ -344,15 +344,15 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
}
|
||||
subtitle={eventType.description || ""}>
|
||||
<div className="block sm:flex">
|
||||
<div className="w-full mr-2 sm:w-10/12">
|
||||
<div className="block sm:flex md:max-w-5xl mx-auto">
|
||||
<div className="w-full mr-2 sm:w-9/12">
|
||||
<div className="p-4 py-6 -mx-4 bg-white border rounded-sm border-neutral-200 sm:mx-0 sm:px-8">
|
||||
<form onSubmit={updateEventTypeHandler} className="space-y-6">
|
||||
<div className="space-y-3">
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label htmlFor="slug" className="flex mt-0 text-sm font-medium text-neutral-700">
|
||||
<LinkIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
|
||||
<LinkIcon className="w-4 h-4 mr-2 text-neutral-500" />
|
||||
URL
|
||||
</label>
|
||||
</div>
|
||||
|
@ -389,9 +389,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
<hr />
|
||||
<div className="space-y-3">
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="min-w-44 sm:mb-0">
|
||||
<label htmlFor="location" className="flex mt-0 text-sm font-medium text-neutral-700">
|
||||
<div className="block sm:flex">
|
||||
<div className="min-w-48 sm:mb-0">
|
||||
<label htmlFor="location" className="flex mt-2.5 text-sm font-medium text-neutral-700">
|
||||
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
|
||||
Location
|
||||
</label>
|
||||
|
@ -415,7 +415,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
{locations.map((location) => (
|
||||
<li
|
||||
key={location.type}
|
||||
className="p-2 mb-2 border rounded-sm shadow-sm border-neutral-300">
|
||||
className="py-1.5 px-2 mb-2 border rounded-sm shadow-sm border-neutral-300">
|
||||
<div className="flex justify-between">
|
||||
{location.type === LocationType.InPerson && (
|
||||
<div className="flex items-center flex-grow">
|
||||
|
@ -536,11 +536,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => openLocationModal(location.type)}
|
||||
className="mr-2 text-sm text-primary-600">
|
||||
Edit
|
||||
className="mr-1 text-gray-500 hover:text-gray-900 p-1">
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => removeLocation(location)}>
|
||||
<XIcon className="w-6 h-6 pl-1 border-l-2 hover:text-red-500 " />
|
||||
<XIcon className="w-6 h-6 pl-1 border-l-1 text-gray-500 hover:text-gray-900 " />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -550,11 +550,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="flex px-3 py-2 rounded-sm bg-neutral-100"
|
||||
className="flex px-3 py-2 rounded-sm hover:bg-gray-100"
|
||||
onClick={() => setShowLocationModal(true)}>
|
||||
<PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
|
||||
<span className="ml-1 text-sm font-medium text-neutral-700">
|
||||
Add another location
|
||||
Add a location
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
|
@ -566,8 +566,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
<hr className="border-neutral-200" />
|
||||
<div className="space-y-3">
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-48 sm:mb-0 mt-2.5">
|
||||
<label htmlFor="description" className="flex mt-0 text-sm font-medium text-neutral-700">
|
||||
<DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
|
||||
Description
|
||||
|
@ -587,7 +587,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
{team && (
|
||||
<div className="space-y-3">
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label
|
||||
htmlFor="schedulingType"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
|
@ -602,8 +602,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<label htmlFor="users" className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
|
||||
<UserAddIcon className="w-5 h-5 mr-2 text-neutral-500" /> Attendees
|
||||
</label>
|
||||
</div>
|
||||
|
@ -629,12 +629,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
/>
|
||||
<span className="text-sm font-medium text-neutral-700">Show advanced settings</span>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="space-y-4">
|
||||
<Disclosure.Panel className="space-y-6">
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<label
|
||||
htmlFor="eventName"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
|
||||
Event name
|
||||
</label>
|
||||
</div>
|
||||
|
@ -653,10 +651,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="items-center block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label
|
||||
htmlFor="additionalFields"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
className="flexflex mt-2 text-sm font-medium text-neutral-700 text-sm font-medium text-neutral-700">
|
||||
Additional inputs
|
||||
</label>
|
||||
</div>
|
||||
|
@ -734,7 +732,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
defaultChecked={eventType.disableGuests}
|
||||
/>
|
||||
|
||||
<hr className="border-neutral-200" />
|
||||
<hr className="my-2 border-neutral-200" />
|
||||
|
||||
<MinutesField
|
||||
label="Minimum booking notice"
|
||||
|
@ -746,10 +744,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
/>
|
||||
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label
|
||||
htmlFor="inviteesCanSchedule"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
className="flex text-sm font-medium text-neutral-700 mt-2.5">
|
||||
Invitees can schedule
|
||||
</label>
|
||||
</div>
|
||||
|
@ -764,7 +762,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
className={({ checked }) =>
|
||||
classNames(
|
||||
checked ? "border-secondary-200 z-10" : "border-gray-200",
|
||||
"relative min-h-14 flex items-center cursor-pointer focus:outline-none"
|
||||
"relative min-h-12 flex items-center cursor-pointer focus:outline-none"
|
||||
)
|
||||
}>
|
||||
{({ active, checked }) => (
|
||||
|
@ -835,10 +833,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<hr className="border-neutral-200" />
|
||||
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label
|
||||
htmlFor="availability"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
className="flex text-sm font-medium text-neutral-700">
|
||||
Availability
|
||||
</label>
|
||||
</div>
|
||||
|
@ -856,7 +854,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
<>
|
||||
<hr className="border-neutral-200" />
|
||||
<div className="block sm:flex">
|
||||
<div className="mb-4 min-w-44 sm:mb-0">
|
||||
<div className="mb-4 min-w-48 sm:mb-0">
|
||||
<label
|
||||
htmlFor="payment"
|
||||
className="flex mt-2 text-sm font-medium text-neutral-700">
|
||||
|
@ -953,20 +951,22 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full px-4 mt-8 ml-2 sm:w-2/12 sm:mt-0 min-w-32">
|
||||
<div className="space-y-4">
|
||||
<div className="w-full px-2 mt-8 ml-2 sm:w-3/12 sm:mt-0 min-w-32">
|
||||
<div className="px-2">
|
||||
<Switch
|
||||
name="isHidden"
|
||||
defaultChecked={hidden}
|
||||
onCheckedChange={setHidden}
|
||||
label="Hide event type"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 space-y-1.5">
|
||||
<a
|
||||
href={permalink}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex font-medium text-md text-neutral-700">
|
||||
<ExternalLinkIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" aria-hidden="true" />
|
||||
className="flex font-medium text-md text-neutral-700 text-sm items-center hover:text-gray-900 hover:bg-gray-200 px-2 py-1 rounded-sm inline-flex">
|
||||
<ExternalLinkIcon className="w-4 h-4 mr-2 text-neutral-500" aria-hidden="true" />
|
||||
Preview
|
||||
</a>
|
||||
<button
|
||||
|
@ -975,13 +975,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
|||
showToast("Link copied!", "success");
|
||||
}}
|
||||
type="button"
|
||||
className="flex font-medium text-md text-neutral-700">
|
||||
<LinkIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
|
||||
className="flex font-medium text-md text-sm text-gray-700 items-center hover:text-gray-900 hover:bg-gray-200 px-2 py-1 rounded-sm">
|
||||
<LinkIcon className="w-4 h-4 mr-2 text-neutral-500" />
|
||||
Copy link
|
||||
</button>
|
||||
<Dialog>
|
||||
<DialogTrigger className="flex font-medium text-md text-neutral-700">
|
||||
<TrashIcon className="w-4 h-4 mt-1 mr-2 text-neutral-500" />
|
||||
<DialogTrigger className="flex font-medium text-md text-sm text-neutral-700 items-center hover:text-gray-900 hover:bg-gray-200 px-2 py-1 rounded-sm">
|
||||
<TrashIcon className="w-4 h-4 mr-2 text-neutral-500" />
|
||||
Delete
|
||||
</DialogTrigger>
|
||||
<ConfirmationDialogContent
|
||||
|
|
|
@ -165,7 +165,7 @@ const EventTypesPage = (props: PageProps) => {
|
|||
</Link>
|
||||
|
||||
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5">
|
||||
<div className="flex items-center space-x-5 overflow-hidden">
|
||||
<div className="flex items-center space-x-2 overflow-hidden">
|
||||
{type.users?.length > 1 && (
|
||||
<AvatarGroup
|
||||
size={8}
|
||||
|
@ -181,7 +181,7 @@ const EventTypesPage = (props: PageProps) => {
|
|||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="p-2 border border-transparent cursor-pointer group text-neutral-400 hover:border-gray-200">
|
||||
className="btn-icon">
|
||||
<ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
@ -194,7 +194,7 @@ const EventTypesPage = (props: PageProps) => {
|
|||
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
|
||||
);
|
||||
}}
|
||||
className="p-2 border border-transparent group text-neutral-400 hover:border-gray-200">
|
||||
className="btn-icon">
|
||||
<LinkIcon className="w-5 h-5 group-hover:text-black" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
|
|
@ -108,7 +108,7 @@
|
|||
}
|
||||
/* btn icon */
|
||||
.btn-icon {
|
||||
@apply p-2 border border-transparent hover:border-gray-300 rounded-sm text-neutral-500 hover:text-neutral-900;
|
||||
@apply p-2 border border-transparent hover:border-gray-300 cursor-pointer rounded-sm text-neutral-500 hover:text-neutral-900;
|
||||
}
|
||||
/* slider */
|
||||
.slider {
|
||||
|
|
|
@ -23,16 +23,16 @@ module.exports = {
|
|||
900: "#292929",
|
||||
},
|
||||
neutral: {
|
||||
50: "#F7F8F9",
|
||||
100: "#F4F5F6",
|
||||
200: "#EAEEF2",
|
||||
300: "#C6CCD5",
|
||||
400: "#9BA6B6",
|
||||
500: "#708097",
|
||||
600: "#657388",
|
||||
700: "#373F4A",
|
||||
800: "#1F2937",
|
||||
900: "#1A1A1A",
|
||||
50: "#F8F8F8",
|
||||
100: "#F5F5F5",
|
||||
200: "#E1E1E1",
|
||||
300: "#CFCFCF",
|
||||
400: "#ACACAC",
|
||||
500: "#888888",
|
||||
600: "#494949",
|
||||
700: "#3E3E3E",
|
||||
800: "#313131",
|
||||
900: "#292929",
|
||||
},
|
||||
primary: {
|
||||
50: "#F4F4F4",
|
||||
|
|
Loading…
Reference in a new issue