added Cal Sans (#709)

* added Cal Sans

* Delete EmptyScreen.tsx

components/Dialog.tsx

@@ -32,7 +32,7 @@ type DialogHeaderProps = {
 export function DialogHeader({ title, subtitle }: DialogHeaderProps) {
   return (
     <div className="mb-8">
-      <h3 className="text-gray-900 text-lg font-bold leading-6" id="modal-title">
+      <h3 className="font-cal text-gray-900 text-lg font-bold leading-6" id="modal-title">
         {title}
       </h3>
       <div>

components/ImageUploader.tsx

@@ -142,7 +142,7 @@ export default function ImageUploader({ target, id, buttonMsg, handleAvatarChang
             <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
               <div className="sm:flex sm:items-start mb-4">
                 <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                  <h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
+                  <h3 className="font-cal text-lg leading-6 font-bold text-gray-900" id="modal-title">
                     Upload {target}
                   </h3>
                 </div>

components/booking/pages/AvailabilityPage.tsx

@@ -166,7 +166,9 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
                     size={10}
                     truncateAfter={3}
                   />
-                  <h2 className="font-medium text-gray-500 dark:text-gray-300 mt-3">{profile.name}</h2>
+                  <h2 className="font-cal font-medium text-gray-500 dark:text-gray-300 mt-3">
+                    {profile.name}
+                  </h2>
                   <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
                     {eventType.title}
                   </h1>

components/booking/pages/BookingPage.tsx

@@ -200,7 +200,9 @@ const BookingPage = (props: BookingPageProps) => {
                       }))
                   )}
                 />
-                <h2 className="font-medium dark:text-gray-300 text-gray-500">{props.profile.name}</h2>
+                <h2 className="font-cal font-medium dark:text-gray-300 text-gray-500">
+                  {props.profile.name}
+                </h2>
                 <h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
                   {props.eventType.title}
                 </h1>

components/security/ChangePasswordSection.tsx

@@ -60,7 +60,7 @@ const ChangePasswordSection = () => {
   return (
     <>
       <div className="mt-6">
-        <h2 className="text-lg leading-6 font-medium text-gray-900">Change Password</h2>
+        <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Change Password</h2>
       </div>
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-8">

components/security/TwoFactorAuthSection.tsx

@@ -14,7 +14,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
   return (
     <>
       <div className="flex flex-row items-center">
-        <h2 className="text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
+        <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
         <Badge className="text-xs ml-2" variant={enabled ? "success" : "gray"}>
           {enabled ? "Enabled" : "Disabled"}
         </Badge>

components/security/TwoFactorModalHeader.tsx

@@ -8,7 +8,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
         <ShieldCheckIcon className="w-6 h-6 text-black" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-        <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+        <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
           {title}
         </h3>
         <p className="text-sm text-gray-400">{description}</p>

components/team/EditTeam.tsx

@@ -144,7 +144,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
           </div>
         </div>
         <hr className="mt-2" />
-        <h3 className="font-bold leading-6 text-gray-900 mt-7 text-md">Profile</h3>
+        <h3 className="font-cal font-bold leading-6 text-gray-900 mt-7 text-md">Profile</h3>
         <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateTeamHandler}>
           {hasErrors && <ErrorAlert message={errorMessage} />}
           <div className="py-6 lg:pb-8">
@@ -214,7 +214,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
                   <hr className="mt-6" />
                 </div>
                 <div className="flex justify-between mt-7">
-                  <h3 className="font-bold leading-6 text-gray-900 text-md">Members</h3>
+                  <h3 className="font-cal font-bold leading-6 text-gray-900 text-md">Members</h3>
                   <div className="relative flex items-center">
                     <Button
                       type="button"

pages/404.tsx

@@ -47,7 +47,7 @@ export default function Custom404() {
         <main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
           <div className="text-center">
             <p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
-            <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+            <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
               This page does not exist.
             </h1>
             {isEventType404 ? (

pages/[user].tsx

@@ -54,7 +54,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
             {props.eventTypes.length == 0 && (
               <div className="shadow overflow-hidden rounded-sm">
                 <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
+                  <h2 className="font-cal font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
                   <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
                 </div>
               </div>

pages/auth/forgot-password/[id].tsx

@@ -77,7 +77,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
           </div>
           <p>Your password has been reset. You can now login with your newly created password.</p>
           <Link href="/auth/login">
@@ -97,7 +97,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
             <h2 className="text-center text-3xl font-extrabold text-gray-900">That Request is Expired.</h2>
           </div>
           <p>
@@ -130,7 +130,9 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           {!isRequestExpired && !success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Reset Password</h2>
+                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+                  Reset Password
+                </h2>
                 <p>Enter the new password you&apos;d like for your account.</p>
                 {error && <p className="text-red-600">{error.message}</p>}
               </div>

pages/auth/forgot-password/index.tsx

@@ -81,7 +81,9 @@ export default function ForgotPassword({ csrfToken }) {
           {!success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Forgot Password</h2>
+                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+                  Forgot Password
+                </h2>
                 <p>
                   Enter the email address associated with your account and we will send you a link to reset
                   your password.

pages/auth/login.tsx

@@ -72,7 +72,9 @@ export default function Login({ csrfToken }) {
       <HeadSeo title="Login" description="Login" />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
-        <h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
+        <h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">
+          Sign in to your account
+        </h2>
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

pages/auth/signup.tsx

@@ -58,7 +58,7 @@ export default function Signup(props) {
       aria-modal="true">
       <HeadSeo title="Sign up" description="Sign up" />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
+        <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
       </div>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div className="bg-white py-8 px-4 shadow mx-2 sm:rounded-lg sm:px-10">

pages/cancel/[uid].tsx

@@ -99,7 +99,9 @@ export default function Type(props) {
                           <p className="text-sm text-gray-500">Instead, you could also reschedule it.</p>
                         </div>
                         <div className="mt-4 border-t border-b py-4">
-                          <h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
+                          <h2 className="font-cal text-lg font-medium text-gray-600 mb-2">
+                            {props.booking.title}
+                          </h2>
                           <p className="text-gray-500">
                             <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                             {dayjs(props.booking.startTime).format(

pages/integrations/index.tsx

@@ -156,7 +156,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
                       <img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
                     </div>
                     <div className="w-10/12">
-                      <h2 className="text-gray-800 font-medium">{integration.title}</h2>
+                      <h2 className="font-cal text-gray-800 font-medium">{integration.title}</h2>
                       <p className="text-gray-400 text-sm">{integration.description}</p>
                     </div>
                     <div className="w-2/12 text-right pt-2">

pages/settings/embed.tsx

@@ -20,7 +20,7 @@ export default function Embed(props) {
       <SettingsShell>
         <div className="py-6 lg:pb-8 lg:col-span-9">
           <div className="mb-6">
-            <h2 className="text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
+            <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
             <p className="mt-1 text-sm text-gray-500">The easiest way to embed Cal.com on your website.</p>
           </div>
           <div className="grid grid-cols-2 space-x-4">
@@ -66,7 +66,7 @@ export default function Embed(props) {
             </div>
           </div>
           <div className="my-6">
-            <h2 className="text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
+            <h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
             <p className="mt-1 text-sm text-gray-500">
               Leverage our API for full control and customizability.
             </p>

pages/settings/teams.tsx

@@ -115,7 +115,7 @@ export default function Teams() {
 
                 {!!invites.length && (
                   <div>
-                    <h2 className="text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
+                    <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
                     <ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
                       {invites.map((team: Team) => (
                         <TeamListItem

pages/team/[slug].tsx

@@ -30,7 +30,7 @@ function TeamPage({ team }: InferGetServerSidePropsType<typeof getServerSideProp
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="px-6 py-4 flex justify-between">
               <div className="flex-shrink">
-                <h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
+                <h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
               <div className="mt-1">

styles/globals.css

@@ -13,6 +13,12 @@
   @apply text-black;
 }
 
+/* Cal Sans */
+@font-face {
+  font-family: "Cal Sans";
+  src: url("https://cal.com/cal.ttf");
+}
+
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
 @layer components {
   /* Primary buttons */
@@ -91,7 +97,7 @@
   }
   /* slider */
   .slider {
-      @apply relative flex items-center w-40 h-4 select-none
+    @apply relative flex items-center w-40 h-4 select-none;
   }
 
   .slider > .slider-track {
@@ -99,7 +105,7 @@
   }
 
   .slider .slider-range {
-      @apply absolute h-full bg-neutral-700 rounded-full
+    @apply absolute h-full bg-neutral-700 rounded-full;
   }
 
   .slider .slider-thumb {
@@ -111,7 +117,7 @@
   }
 
   .slider .slider-thumb:focus {
-      box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -135,7 +141,7 @@
 
 /* hide intercom chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-    .intercom-launcher-frame{
+  .intercom-launcher-frame {
     display: none !important;
   }
 }
@@ -149,13 +155,12 @@
 
 /* hide intercom chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-    .intercom-launcher-frame{
+  .intercom-launcher-frame {
     display: none !important;
   }
 }
 
-
+.react-multi-email > [type="text"] {
-.react-multi-email > [type='text'] {
   @apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md;
 }
 
@@ -164,78 +169,78 @@
   @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
 }
 
-  .react-multi-email > span[data-placeholder] {
+.react-multi-email > span[data-placeholder] {
   display: none;
   position: absolute;
   left: 0.8rem;
   top: 0.75rem;
   line-height: 1.25rem;
   font-size: 0.875rem;
-  }
+}
 
-  .react-multi-email.empty > span[data-placeholder] {
+.react-multi-email.empty > span[data-placeholder] {
   display: inline;
   color: #646b7a;
-  }
+}
 
-  .react-multi-email.focused > span[data-placeholder] {
+.react-multi-email.focused > span[data-placeholder] {
   display: none;
-  }
+}
 
-  .react-multi-email > input {
+.react-multi-email > input {
   width: 100% !important;
   display: inline-block !important;
   @apply mt-1;
-  }
+}
 
-  .react-multi-email [data-tag] {
+.react-multi-email [data-tag] {
   @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
-  }
+}
 
-  .react-multi-email [data-tag] [data-tag-item] {
+.react-multi-email [data-tag] [data-tag-item] {
   max-width: 100%;
   overflow: hidden;
-  }
+}
 
-  .react-multi-email [data-tag] [data-tag-handle] {
+.react-multi-email [data-tag] [data-tag-handle] {
   margin-left: 0.833em;
   cursor: pointer;
-  }
+}
 
 /* !important to override react-select */
-.react-select__value-container{
+.react-select__value-container {
   border: 0 !important;
 }
 
 .react-select__input input {
-    border: 0 !important; box-shadow: none !important;
+  border: 0 !important;
+  box-shadow: none !important;
 }
 
-.react-select__option--is-focused{
+.react-select__option--is-focused {
   background: #000 !important;
-    color: #fff !important
+  color: #fff !important;
 }
 
-.react-select__control{
+.react-select__control {
   border: 2px solid transparent !important;
   box-shadow: none !important;
 }
 
-.react-select__control.react-select__control--is-focused{
+.react-select__control.react-select__control--is-focused {
   border: 2px solid #000 !important;
   border-color: #000 !important;
   box-shadow: none !important;
   margin: -1px;
   padding: 1px;
-
 }
 
 /* !important to override react-dates */
-.DateRangePickerInput__withBorder{
+.DateRangePickerInput__withBorder {
-    border: 0 !important
+  border: 0 !important;
 }
-.DateInput_input{
+.DateInput_input {
-  border: 1px solid #D1D5DB !important;
+  border: 1px solid #d1d5db !important;
   border-radius: 2px !important;
   font-size: inherit !important;
   font-weight: inherit !important;
@@ -244,14 +249,14 @@
   line-height: 16px !important;
 }
 
-.DateInput_input__focused{
+.DateInput_input__focused {
   border: 2px solid #000 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
   padding: 10px ​10px 9px !important;
 }
 
-.DateRangePickerInput_arrow{
+.DateRangePickerInput_arrow {
   padding: 0px 10px;
 }
 
@@ -333,12 +338,10 @@ nav#nav--settings > a.active svg {
   @apply text-neutral-500;
 }
 
-
 table tbody tr:nth-child(odd) {
   @apply bg-gray-50;
 }
 
-
 body {
   background-color: #f3f4f6;
 }

tailwind.config.js

@@ -93,7 +93,7 @@ module.exports = {
       },
       fontFamily: {
         inter: ["Inter", "sans-serif"],
-        kollektif: ["Kollektif", "sans-serif"],
+        cal: ["Cal Sans", "sans-serif"],
       },
       maxHeight: (theme) => ({
         0: "0",