fixed event-type buttons on mobile, added more font-cal classes (#764)

components/Modal.tsx

@@ -61,7 +61,7 @@ export default function Modal(props: {
                   )}
                 </div>
                 <div className="mt-3 text-center sm:mt-5">
-                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+                  <Dialog.Title as="h3" className="font-cal text-lg leading-6 font-medium text-gray-900">
                     {props.heading}
                   </Dialog.Title>
                   <div className="mt-2">

components/Shell.tsx

@@ -160,7 +160,7 @@ export default function Shell(props) {
             <div className="py-8">
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
                 <div className="mb-8">
-                  <h1 className="text-xl font-bold text-gray-900">{props.heading}</h1>
+                  <h1 className="font-cal text-xl font-bold text-gray-900">{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>

components/dialog/ConfirmationDialogContent.tsx

@@ -29,7 +29,9 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
           </div>
         )}
         <div>
-          <DialogPrimitive.Title className="text-xl font-bold text-gray-900">{title}</DialogPrimitive.Title>
+          <DialogPrimitive.Title className="font-cal text-xl font-bold text-gray-900">
+            {title}
+          </DialogPrimitive.Title>
           <DialogPrimitive.Description className="text-neutral-500">{children}</DialogPrimitive.Description>
         </div>
       </div>

components/eventtype/EventTypeDescription.tsx

@@ -67,7 +67,9 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             className="flex-none inline mr-1.5 mt-0.5 h-4 w-4 text-neutral-400"
             aria-hidden="true"
           />
-          <span>{eventType.description.substring(0, 100)}</span>
+          <span className="truncate max-w-[200px] sm:max-w-full">
+            {eventType.description.substring(0, 100)}
+          </span>
         </li>
       )}
     </ul>

components/ui/Text/Headline/Headline.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { TextProps } from "../Text";
 
 const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xl font-bold text-gray-900 dark:text-white", props?.className);
+  const classes = classnames("font-cal text-xl font-bold text-gray-900 dark:text-white", props?.className);
 
   return <p className={classes}>{props?.text || props.children}</p>;
 };

pages/event-types/index.tsx

@@ -140,8 +140,12 @@ const EventTypesPage = (props: PageProps) => {
               type.$disabled && "opacity-30 cursor-not-allowed pointer-events-none select-none"
             )}
             data-disabled={type.$disabled ? 1 : 0}>
-            <div className={classNames("hover:bg-neutral-50", type.$disabled && "pointer-events-none")}>
+            <div
-              <div className="flex items-center px-4 py-4 sm:px-6 hover:bg-neutral-50">
+              className={classNames(
+                "hover:bg-neutral-50 flex justify-between items-center ",
+                type.$disabled && "pointer-events-none"
+              )}>
+              <div className="flex items-center w-full justify-between px-4 py-4 sm:px-6 hover:bg-neutral-50">
                 <Link href={"/event-types/" + type.id}>
                   <a className="flex-grow text-sm truncate">
                     <div>
@@ -198,7 +202,7 @@ const EventTypesPage = (props: PageProps) => {
                   </div>
                 </div>
               </div>
-              <div className="flex flex-shrink-0 ml-5 sm:hidden">
+              <div className="flex flex-shrink-0 mr-5 sm:hidden">
                 <Menu as="div" className="inline-block text-left">
                   {({ open }) => (
                     <>

pages/integrations/index.tsx

@@ -144,7 +144,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
       </DialogTrigger>
 
       <DialogContent>
-        <DialogHeader title="Connect a new App" subtitle="Connect a new app to your account." />
+        <DialogHeader title="Connect a new App" subtitle="Integrate your account with other services." />
         <div className="my-4">
           <ul className="divide-y divide-gray-200">
             {integrations
@@ -440,7 +440,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
         </div>
         <div className="bg-white border border-gray-200 rounded-sm mb-8">
           <div className="px-4 py-5 sm:p-6">
-            <h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
+            <h3 className="font-cal text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
             <div className="mt-2 max-w-xl text-sm text-gray-500">
               <p>Select which calendars are checked for availability to prevent double bookings.</p>
             </div>
@@ -449,7 +449,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
         </div>
         <div className="border border-gray-200 rounded-sm">
           <div className="px-4 py-5 sm:p-6">
-            <h3 className="text-lg leading-6 font-medium text-gray-900">Launch your own App</h3>
+            <h3 className="font-cal text-lg leading-6 font-medium text-gray-900">Launch your own App</h3>
             <div className="mt-2 max-w-xl text-sm text-gray-500">
               <p>If you want to add your own App here, get in touch with us.</p>
             </div>