From bb1da8150f19aaac3cf7c9017ee6a25153d38a09 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 24 Sep 2021 12:28:57 +0100
Subject: [PATCH] fixed event-type buttons on mobile, added more font-cal
 classes (#764)

---
 components/Modal.tsx                            |  2 +-
 components/Shell.tsx                            |  2 +-
 components/dialog/ConfirmationDialogContent.tsx |  4 +++-
 components/eventtype/EventTypeDescription.tsx   |  4 +++-
 components/ui/Text/Headline/Headline.tsx        |  2 +-
 pages/event-types/index.tsx                     | 10 +++++++---
 pages/integrations/index.tsx                    |  6 +++---
 7 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index 305f45183f..a04a2c3ee6 100644
--- a/components/Modal.tsx
+++ b/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">
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 4ebc08d7d4..1d44e38eb3 100644
--- a/components/Shell.tsx
+++ b/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>
diff --git a/components/dialog/ConfirmationDialogContent.tsx b/components/dialog/ConfirmationDialogContent.tsx
index 531cad608c..f3a3ef2321 100644
--- a/components/dialog/ConfirmationDialogContent.tsx
+++ b/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>
diff --git a/components/eventtype/EventTypeDescription.tsx b/components/eventtype/EventTypeDescription.tsx
index ec4e7887ef..bf31fcd31d 100644
--- a/components/eventtype/EventTypeDescription.tsx
+++ b/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>
diff --git a/components/ui/Text/Headline/Headline.tsx b/components/ui/Text/Headline/Headline.tsx
index 8ddbe2f0e2..87b7aca7c5 100644
--- a/components/ui/Text/Headline/Headline.tsx
+++ b/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>;
 };
diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index 6802304e50..b6d0b2148c 100644
--- a/pages/event-types/index.tsx
+++ b/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 className="flex items-center px-4 py-4 sm:px-6 hover:bg-neutral-50">
+            <div
+              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 }) => (
                     <>
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 654c75a705..d147ad3c24 100644
--- a/pages/integrations/index.tsx
+++ b/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>