mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

UI updates to event types (#894)

Browse source
This commit is contained in:
Ciarán Hanrahan 2021-10-10 10:46:20 +01:00 committed by GitHub
parent b794469c05
commit e83980a999
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 67 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/Shell.tsx
View file

@ -201,8 +201,10 @@ export default function Shell(props: {
</nav> </nav>
<div className="py-8"> <div className="py-8">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]"> <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
<div className="mb-8"> <div className="mb-8 w-full">
<h1 className="font-cal text-xl font-bold text-gray-900">{props.heading}</h1> <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> <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
</div> </div>
<div className="mb-4 flex-shrink-0">{props.CTA}</div> <div className="mb-4 flex-shrink-0">{props.CTA}</div>

2
components/ui/Switch.tsx
View file

@ -32,7 +32,7 @@ export default function Switch(props) {
/> />
</PrimitiveSwitch.Root> </PrimitiveSwitch.Root>
{label && ( {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}
</Label.Root> </Label.Root>
)} )}

2
components/ui/form/CheckboxField.tsx
View file

@ -8,7 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => { const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
return ( return (
<div className="items-center block sm:flex"> <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 htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label} {label}
</label> </label>

6
components/ui/form/MinutesField.tsx
View file

@ -7,13 +7,13 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => { const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
return ( return (
<div className="block sm:flex"> <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={rest.id} className="flex mt-2 text-sm font-medium text-neutral-700"> <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label} {label}
</label> </label>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="relative mt-1 rounded-sm shadow-sm"> <div className="relative rounded-sm shadow-sm">
<input <input
{...rest} {...rest}
ref={ref} ref={ref}

88
pages/event-types/[type].tsx
View file

@ -8,7 +8,7 @@ import {
ExternalLinkIcon, ExternalLinkIcon,
LinkIcon, LinkIcon,
LocationMarkerIcon, LocationMarkerIcon,
PencilAltIcon, PencilIcon,
PlusIcon, PlusIcon,
TrashIcon, TrashIcon,
UserAddIcon, UserAddIcon,
@ -324,19 +324,19 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Shell <Shell
title={`${eventType.title} | Event Type`} title={`${eventType.title} | Event Type`}
heading={ heading={
<div className="relative group" onClick={() => setEditIcon(false)}> <div className="relative group md:max-w-5xl mx-auto" onClick={() => setEditIcon(false)}>
<input <input
ref={titleRef} ref={titleRef}
type="text" type="text"
name="title" name="title"
id="title" id="title"
required 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" placeholder="Quick Chat"
defaultValue={eventType.title} defaultValue={eventType.title}
/> />
{editIcon && ( {editIcon && (
<PencilAltIcon <PencilIcon
style={{ top: 14, left: `${eventType.title.length * 10 + 8}` }} 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" 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> </div>
} }
subtitle={eventType.description || ""}> subtitle={eventType.description || ""}>
<div className="block sm:flex"> <div className="block sm:flex md:max-w-5xl mx-auto">
<div className="w-full mr-2 sm:w-10/12"> <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"> <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"> <form onSubmit={updateEventTypeHandler} className="space-y-6">
<div className="space-y-3"> <div className="space-y-3">
<div className="items-center block sm:flex"> <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"> <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 URL
</label> </label>
</div> </div>
@ -389,9 +389,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div> </div>
<hr /> <hr />
<div className="space-y-3"> <div className="space-y-3">
<div className="items-center block sm:flex"> <div className="block sm:flex">
<div className="min-w-44 sm:mb-0"> <div className="min-w-48 sm:mb-0">
<label htmlFor="location" className="flex mt-0 text-sm font-medium text-neutral-700"> <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" /> <LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Location Location
</label> </label>
@ -415,7 +415,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{locations.map((location) => ( {locations.map((location) => (
<li <li
key={location.type} 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"> <div className="flex justify-between">
{location.type === LocationType.InPerson && ( {location.type === LocationType.InPerson && (
<div className="flex items-center flex-grow"> <div className="flex items-center flex-grow">
@ -536,11 +536,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<button <button
type="button" type="button"
onClick={() => openLocationModal(location.type)} onClick={() => openLocationModal(location.type)}
className="mr-2 text-sm text-primary-600"> className="mr-1 text-gray-500 hover:text-gray-900 p-1">
Edit <PencilIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => removeLocation(location)}> <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> </button>
</div> </div>
</div> </div>
@ -550,11 +550,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<li> <li>
<button <button
type="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)}> onClick={() => setShowLocationModal(true)}>
<PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" /> <PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
<span className="ml-1 text-sm font-medium text-neutral-700"> <span className="ml-1 text-sm font-medium text-neutral-700">
Add another location Add a location
</span> </span>
</button> </button>
</li> </li>
@ -566,8 +566,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div> </div>
<hr className="border-neutral-200" /> <hr className="border-neutral-200" />
<div className="space-y-3"> <div className="space-y-3">
<div className="items-center block sm:flex"> <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 mt-2.5">
<label htmlFor="description" className="flex mt-0 text-sm font-medium text-neutral-700"> <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" /> <DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Description Description
@ -587,7 +587,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
{team && ( {team && (
<div className="space-y-3"> <div className="space-y-3">
<div className="block sm:flex"> <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 <label
htmlFor="schedulingType" htmlFor="schedulingType"
className="flex mt-2 text-sm font-medium text-neutral-700"> className="flex mt-2 text-sm font-medium text-neutral-700">
@ -602,8 +602,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div> </div>
<div className="block sm:flex"> <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="users" className="flex mt-2 text-sm font-medium text-neutral-700"> <label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
<UserAddIcon className="w-5 h-5 mr-2 text-neutral-500" /> Attendees <UserAddIcon className="w-5 h-5 mr-2 text-neutral-500" /> Attendees
</label> </label>
</div> </div>
@ -629,12 +629,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/> />
<span className="text-sm font-medium text-neutral-700">Show advanced settings</span> <span className="text-sm font-medium text-neutral-700">Show advanced settings</span>
</Disclosure.Button> </Disclosure.Button>
<Disclosure.Panel className="space-y-4"> <Disclosure.Panel className="space-y-6">
<div className="items-center block sm:flex"> <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 <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
htmlFor="eventName"
className="flex mt-2 text-sm font-medium text-neutral-700">
Event name Event name
</label> </label>
</div> </div>
@ -653,10 +651,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
</div> </div>
</div> </div>
<div className="items-center block sm:flex"> <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 <label
htmlFor="additionalFields" 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 Additional inputs
</label> </label>
</div> </div>
@ -734,7 +732,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
defaultChecked={eventType.disableGuests} defaultChecked={eventType.disableGuests}
/> />
<hr className="border-neutral-200" /> <hr className="my-2 border-neutral-200" />
<MinutesField <MinutesField
label="Minimum booking notice" label="Minimum booking notice"
@ -746,10 +744,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/> />
<div className="block sm:flex"> <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 <label
htmlFor="inviteesCanSchedule" 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 Invitees can schedule
</label> </label>
</div> </div>
@ -764,7 +762,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
className={({ checked }) => className={({ checked }) =>
classNames( classNames(
checked ? "border-secondary-200 z-10" : "border-gray-200", 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 }) => ( {({ active, checked }) => (
@ -835,10 +833,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<hr className="border-neutral-200" /> <hr className="border-neutral-200" />
<div className="block sm:flex"> <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 <label
htmlFor="availability" htmlFor="availability"
className="flex mt-2 text-sm font-medium text-neutral-700"> className="flex text-sm font-medium text-neutral-700">
Availability Availability
</label> </label>
</div> </div>
@ -856,7 +854,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<> <>
<hr className="border-neutral-200" /> <hr className="border-neutral-200" />
<div className="block sm:flex"> <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 <label
htmlFor="payment" htmlFor="payment"
className="flex mt-2 text-sm font-medium text-neutral-700"> className="flex mt-2 text-sm font-medium text-neutral-700">
@ -953,20 +951,22 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
/> />
</div> </div>
</div> </div>
<div className="w-full px-4 mt-8 ml-2 sm:w-2/12 sm:mt-0 min-w-32"> <div className="w-full px-2 mt-8 ml-2 sm:w-3/12 sm:mt-0 min-w-32">
<div className="space-y-4"> <div className="px-2">
<Switch <Switch
name="isHidden" name="isHidden"
defaultChecked={hidden} defaultChecked={hidden}
onCheckedChange={setHidden} onCheckedChange={setHidden}
label="Hide event type" label="Hide event type"
/> />
</div>
<div className="mt-4 space-y-1.5">
<a <a
href={permalink} href={permalink}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex font-medium text-md text-neutral-700"> 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 mt-1 mr-2 text-neutral-500" aria-hidden="true" /> <ExternalLinkIcon className="w-4 h-4 mr-2 text-neutral-500" aria-hidden="true" />
Preview Preview
</a> </a>
<button <button
@ -975,13 +975,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
showToast("Link copied!", "success"); showToast("Link copied!", "success");
}} }}
type="button" type="button"
className="flex font-medium text-md text-neutral-700"> 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 mt-1 mr-2 text-neutral-500" /> <LinkIcon className="w-4 h-4 mr-2 text-neutral-500" />
Copy link Copy link
</button> </button>
<Dialog> <Dialog>
<DialogTrigger className="flex font-medium text-md text-neutral-700"> <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 mt-1 mr-2 text-neutral-500" /> <TrashIcon className="w-4 h-4 mr-2 text-neutral-500" />
Delete Delete
</DialogTrigger> </DialogTrigger>
<ConfirmationDialogContent <ConfirmationDialogContent

6
pages/event-types/index.tsx
View file

@ -165,7 +165,7 @@ const EventTypesPage = (props: PageProps) => {
</Link> </Link>
<div className="flex-shrink-0 hidden mt-4 sm:flex sm:mt-0 sm:ml-5"> <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 && ( {type.users?.length > 1 && (
<AvatarGroup <AvatarGroup
size={8} size={8}
@ -181,7 +181,7 @@ const EventTypesPage = (props: PageProps) => {
href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`} href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
target="_blank" target="_blank"
rel="noreferrer" 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" /> <ExternalLinkIcon className="w-5 h-5 group-hover:text-black" />
</a> </a>
</Tooltip> </Tooltip>
@ -194,7 +194,7 @@ const EventTypesPage = (props: PageProps) => {
`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}` `${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" /> <LinkIcon className="w-5 h-5 group-hover:text-black" />
</button> </button>
</Tooltip> </Tooltip>

2
styles/globals.css
View file

@ -108,7 +108,7 @@
} }
/* btn icon */ /* btn icon */
.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 */
.slider { .slider {

20
tailwind.config.js
View file

@ -23,16 +23,16 @@ module.exports = {
900: "#292929", 900: "#292929",
}, },
neutral: { neutral: {
50: "#F7F8F9", 50: "#F8F8F8",
100: "#F4F5F6", 100: "#F5F5F5",
200: "#EAEEF2", 200: "#E1E1E1",
300: "#C6CCD5", 300: "#CFCFCF",
400: "#9BA6B6", 400: "#ACACAC",
500: "#708097", 500: "#888888",
600: "#657388", 600: "#494949",
700: "#373F4A", 700: "#3E3E3E",
800: "#1F2937", 800: "#313131",
900: "#1A1A1A", 900: "#292929",
}, },
primary: { primary: {
50: "#F4F4F4", 50: "#F4F4F4",