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>
<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>

2
components/ui/Switch.tsx
View file

@ -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>
)}

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) => {
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>

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

@ -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}

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

@ -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

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

@ -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>

2
styles/globals.css
View file

@ -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 {

20
tailwind.config.js
View file

@ -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",