From e83980a999ea6976e9b31af39042e63c6ce400eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Hanrahan?= <justciaranhanrahan@gmail.com>
Date: Sun, 10 Oct 2021 10:46:20 +0100
Subject: [PATCH] UI updates to event types (#894)

---
 components/Shell.tsx                 |  6 +-
 components/ui/Switch.tsx             |  2 +-
 components/ui/form/CheckboxField.tsx |  2 +-
 components/ui/form/MinutesField.tsx  |  6 +-
 pages/event-types/[type].tsx         | 88 ++++++++++++++--------------
 pages/event-types/index.tsx          |  6 +-
 styles/globals.css                   |  2 +-
 tailwind.config.js                   | 20 +++----
 8 files changed, 67 insertions(+), 65 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index 4438688a42..34c49c69de 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -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>
diff --git a/components/ui/Switch.tsx b/components/ui/Switch.tsx
index 4b7bc97d16..360f5d93f7 100644
--- a/components/ui/Switch.tsx
+++ b/components/ui/Switch.tsx
@@ -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>
       )}
diff --git a/components/ui/form/CheckboxField.tsx b/components/ui/form/CheckboxField.tsx
index f3bc4ac363..1e687c68f0 100644
--- a/components/ui/form/CheckboxField.tsx
+++ b/components/ui/form/CheckboxField.tsx
@@ -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>
diff --git a/components/ui/form/MinutesField.tsx b/components/ui/form/MinutesField.tsx
index 146d7df481..50cd3caf91 100644
--- a/components/ui/form/MinutesField.tsx
+++ b/components/ui/form/MinutesField.tsx
@@ -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}
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 0e34363215..5f2aac4ee7 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -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
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index fd31b75a24..da497fc896 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -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>
diff --git a/styles/globals.css b/styles/globals.css
index 03468b5a44..da8713bc64 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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 {
diff --git a/tailwind.config.js b/tailwind.config.js
index 13e7780472..20449bc7e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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",