From 038e8a4b7d2cfc2c33bbdf37455b28224029bb4a Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Wed, 9 Feb 2022 15:32:31 -0700
Subject: [PATCH] Runs prettier

---
 .eslintignore                                 |  2 +-
 apps/web/components/AddToHomescreen.tsx       |  2 +-
 .../DestinationCalendarSelector.tsx           |  2 +-
 apps/web/components/EmptyScreen.tsx           |  2 +-
 apps/web/components/Shell.tsx                 |  2 +-
 .../web/components/booking/AvailableTimes.tsx |  2 +-
 .../components/booking/BookingListItem.tsx    |  2 +-
 apps/web/components/booking/DatePicker.tsx    |  2 +-
 apps/web/components/booking/TimeOptions.tsx   |  4 +-
 .../booking/pages/AvailabilityPage.tsx        |  4 +-
 .../components/booking/pages/BookingPage.tsx  | 14 ++---
 apps/web/components/form/fields.tsx           |  2 +-
 .../integrations/CalendarListContainer.tsx    |  2 +-
 .../pages/eventtypes/CustomInputTypeForm.tsx  |  8 +--
 .../security/ChangePasswordSection.tsx        |  4 +-
 .../security/EnableTwoFactorModal.tsx         |  2 +-
 .../security/TwoFactorModalHeader.tsx         |  2 +-
 .../components/team/MemberChangeRoleModal.tsx |  2 +-
 .../components/team/MemberInvitationModal.tsx |  8 +--
 apps/web/components/team/TeamListItem.tsx     |  2 +-
 apps/web/components/ui/AuthContainer.tsx      |  2 +-
 apps/web/components/ui/Avatar.tsx             |  2 +-
 apps/web/components/ui/ModalContainer.tsx     |  2 +-
 apps/web/components/ui/Scheduler.tsx          |  2 +-
 .../components/ui/SettingInputContainer.tsx   |  2 +-
 apps/web/components/ui/WeekdaySelect.tsx      |  4 +-
 apps/web/components/ui/form/CheckboxField.tsx |  4 +-
 apps/web/components/ui/form/DatePicker.tsx    |  2 +-
 .../components/ui/form/DateRangePicker.tsx    |  2 +-
 apps/web/components/ui/form/MinutesField.tsx  |  4 +-
 apps/web/components/ui/form/PhoneInput.tsx    |  2 +-
 apps/web/components/ui/form/Select.tsx        |  2 +-
 .../components/ui/form/radio-area/Select.tsx  |  2 +-
 .../web/components/ui/modal/SetTimesModal.tsx |  8 +--
 apps/web/ee/components/LicenseBanner.tsx      |  2 +-
 .../availability/TeamAvailabilityModal.tsx    |  4 +-
 .../availability/TeamAvailabilityScreen.tsx   |  4 +-
 .../availability/TeamAvailabilityTimes.tsx    |  2 +-
 .../components/AddCalDavIntegration.tsx       |  2 +-
 apps/web/package.json                         |  2 +-
 apps/web/pages/404.tsx                        |  4 +-
 apps/web/pages/[user].tsx                     |  4 +-
 apps/web/pages/auth/forgot-password/[id].tsx  |  8 +--
 apps/web/pages/auth/login.tsx                 |  2 +-
 apps/web/pages/auth/signup.tsx                |  2 +-
 apps/web/pages/availability/index.tsx         |  2 +-
 apps/web/pages/availability/troubleshoot.tsx  |  8 +--
 apps/web/pages/call/meeting-ended/[uid].tsx   |  2 +-
 .../pages/call/meeting-not-started/[uid].tsx  |  2 +-
 apps/web/pages/cancel/[uid].tsx               |  2 +-
 apps/web/pages/event-types/[type].tsx         | 58 +++++++++----------
 apps/web/pages/getting-started.tsx            |  2 +-
 apps/web/pages/integrations/index.tsx         |  4 +-
 apps/web/pages/sandbox/index.tsx              |  2 +-
 apps/web/pages/settings/teams/[id].tsx        |  2 +-
 apps/web/pages/success.tsx                    |  2 +-
 apps/web/pages/team/[slug].tsx                |  6 +-
 apps/web/prisma/zod/attendee.ts               |  1 -
 apps/web/prisma/zod/availability.ts           |  1 -
 apps/web/prisma/zod/booking.ts                |  3 +-
 apps/web/prisma/zod/bookingreference.ts       |  1 -
 apps/web/prisma/zod/credential.ts             |  1 -
 apps/web/prisma/zod/dailyeventreference.ts    |  1 -
 apps/web/prisma/zod/destinationcalendar.ts    |  1 -
 apps/web/prisma/zod/eventtype.ts              |  3 +-
 apps/web/prisma/zod/eventtypecustominput.ts   |  3 +-
 apps/web/prisma/zod/membership.ts             |  3 +-
 apps/web/prisma/zod/payment.ts                |  3 +-
 apps/web/prisma/zod/remindermail.ts           |  3 +-
 apps/web/prisma/zod/resetpasswordrequest.ts   |  1 -
 apps/web/prisma/zod/schedule.ts               |  1 -
 apps/web/prisma/zod/selectedcalendar.ts       |  1 -
 apps/web/prisma/zod/team.ts                   |  1 -
 apps/web/prisma/zod/user.ts                   |  3 +-
 apps/web/prisma/zod/verificationrequest.ts    |  1 -
 apps/web/prisma/zod/webhook.ts                |  3 +-
 apps/web/styles/globals.css                   |  6 +-
 package.json                                  |  2 +-
 yarn.lock                                     |  2 +-
 79 files changed, 132 insertions(+), 151 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 7ca119ecc7..44c7b9df2e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,2 @@
 node_modules
-prisma/zod
+apps/web/prisma/zod
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index edfeef4175..fa0f8e60ef 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -18,7 +18,7 @@ export default function AddToHomescreen() {
         <div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
           <div className="flex flex-wrap items-center justify-between">
             <div className="flex w-0 flex-1 items-center">
-              <span className="flex rounded-lg bg-brand bg-opacity-30 p-2 text-brandcontrast">
+              <span className="bg-brand text-brandcontrast flex rounded-lg bg-opacity-30 p-2">
                 <svg
                   className="h-7 w-7 fill-current text-indigo-500"
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx
index 93c6321318..e7d020ab45 100644
--- a/apps/web/components/DestinationCalendarSelector.tsx
+++ b/apps/web/components/DestinationCalendarSelector.tsx
@@ -67,7 +67,7 @@ const DestinationCalendarSelector = ({
         placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
         options={options}
         isSearchable={false}
-        className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+        className="focus:border-primary-500 focus:ring-primary-500 mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {
diff --git a/apps/web/components/EmptyScreen.tsx b/apps/web/components/EmptyScreen.tsx
index a1ea0e3eb7..4118800cbe 100644
--- a/apps/web/components/EmptyScreen.tsx
+++ b/apps/web/components/EmptyScreen.tsx
@@ -13,7 +13,7 @@ export default function EmptyScreen({
 }) {
   return (
     <>
-      <div className="my-6 flex min-h-80 flex-col items-center justify-center rounded-sm border border-dashed">
+      <div className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
         <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-white">
           <Icon className="inline-block h-10 w-10 bg-white" />
         </div>
diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index c579f9726d..4b4ea0bf7f 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -302,7 +302,7 @@ export default function Shell(props: {
               <div className="block min-h-[80px] justify-between px-4 sm:flex sm:px-6 md:px-8">
                 {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
                 <div className="mb-8 w-full">
-                  <h1 className="mb-1 font-cal text-xl font-bold tracking-wide text-gray-900">
+                  <h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-gray-900">
                     {props.heading}
                   </h1>
                   <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index 55442924b2..3391f259bd 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -95,7 +95,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 <Link href={bookingUrl}>
                   <a
                     className={classNames(
-                      "mb-2 block rounded-sm border bg-white py-4 font-medium text-primary-500 hover:bg-brand hover:text-white hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-brand dark:hover:text-brandcontrast",
+                      "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-brand dark:hover:text-brandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                     )}
                     data-testid="time">
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index edcf73f779..fc4ce8689f 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -151,7 +151,7 @@ function BookingListItem(booking: BookingItem) {
             )}
           </div>
           {booking.description && (
-            <div className="max-w-52 truncate text-sm text-gray-500 md:max-w-96" title={booking.description}>
+            <div className="max-w-52 md:max-w-96 truncate text-sm text-gray-500" title={booking.description}>
               &quot;{booking.description}&quot;
             </div>
           )}
diff --git a/apps/web/components/booking/DatePicker.tsx b/apps/web/components/booking/DatePicker.tsx
index 884892678d..734afa2668 100644
--- a/apps/web/components/booking/DatePicker.tsx
+++ b/apps/web/components/booking/DatePicker.tsx
@@ -210,7 +210,7 @@ function DatePicker({
                 disabled={day.disabled}
                 className={classNames(
                   "absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
-                  "hover:border hover:border-brand dark:hover:border-white",
+                  "hover:border-brand hover:border dark:hover:border-white",
                   day.disabled ? "cursor-default font-light text-gray-400 hover:border-0" : "font-medium",
                   date && date.isSame(browsingDate.date(day.date), "day")
                     ? "bg-brand text-brandcontrast"
diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 72d7be60b1..ee30239bae 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -35,7 +35,7 @@ const TimeOptions: FC<Props> = (props) => {
   };
 
   return selectedTimeZone !== "" ? (
-    <div className="absolute z-10 w-full max-w-80 rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
+    <div className="max-w-80 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
       <div className="mb-4 flex">
         <div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="w-1/2">
@@ -69,7 +69,7 @@ const TimeOptions: FC<Props> = (props) => {
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
       />
     </div>
   ) : null;
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index de70765e74..0691917d68 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -184,7 +184,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                     truncateAfter={3}
                   />
                   <h2 className="mt-3 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
-                  <h1 className="mb-4 font-cal text-3xl font-semibold text-gray-800 dark:text-white">
+                  <h1 className="font-cal mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
                     {eventType.title}
                   </h1>
                   <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
@@ -250,7 +250,7 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
   function TimezoneDropdown() {
     return (
       <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="mb-1 -ml-2 min-w-32 px-2 py-1 text-left text-gray-500">
+        <Collapsible.Trigger className="min-w-32 mb-1 -ml-2 px-2 py-1 text-left text-gray-500">
           <GlobeIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
           {timeZone()}
           {isTimeOptionsOpen ? (
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 493e073289..041e4c461a 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -308,7 +308,7 @@ const BookingPage = (props: BookingPageProps) => {
                       }))
                   )}
                 />
-                <h2 className="mt-2 font-cal font-medium text-gray-500 dark:text-gray-300">
+                <h2 className="font-cal mt-2 font-medium text-gray-500 dark:text-gray-300">
                   {props.profile.name}
                 </h2>
                 <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
@@ -367,7 +367,7 @@ const BookingPage = (props: BookingPageProps) => {
                         name="name"
                         id="name"
                         required
-                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                        className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                         placeholder="John Doe"
                       />
                     </div>
@@ -382,7 +382,7 @@ const BookingPage = (props: BookingPageProps) => {
                       <EmailInput
                         {...bookingForm.register("email")}
                         required
-                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                        className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                         placeholder="you@example.com"
                       />
                     </div>
@@ -440,7 +440,7 @@ const BookingPage = (props: BookingPageProps) => {
                             })}
                             id={"custom_" + input.id}
                             rows={3}
-                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder={input.placeholder}
                           />
                         )}
@@ -451,7 +451,7 @@ const BookingPage = (props: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder={input.placeholder}
                           />
                         )}
@@ -462,7 +462,7 @@ const BookingPage = (props: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                             placeholder=""
                           />
                         )}
@@ -544,7 +544,7 @@ const BookingPage = (props: BookingPageProps) => {
                       {...bookingForm.register("notes")}
                       id="notes"
                       rows={3}
-                      className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                      className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                       placeholder={t("share_additional_notes")}
                     />
                   </div>
diff --git a/apps/web/components/form/fields.tsx b/apps/web/components/form/fields.tsx
index 1ef7ee4543..2992ba5a33 100644
--- a/apps/web/components/form/fields.tsx
+++ b/apps/web/components/form/fields.tsx
@@ -136,7 +136,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "font-mono block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
+        "block w-full rounded-sm border-gray-300 font-mono shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
         props.className
       )}
     />
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
index 12f45a3610..e880ef7d94 100644
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ b/apps/web/components/integrations/CalendarListContainer.tsx
@@ -217,7 +217,7 @@ export function CalendarListContainer(props: { heading?: false }) {
           }
           subtitle={t("configure_how_your_event_types_interact")}
           actions={
-            <div className="block max-w-full sm:min-w-80">
+            <div className="sm:min-w-80 block max-w-full">
               <DestinationCalendarSelector
                 onChange={mutation.mutate}
                 isLoading={mutation.isLoading}
diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
index a9fe1a0bb5..b366d05477 100644
--- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -55,7 +55,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
               defaultValue={selectedInputOption}
               options={inputOptions}
               isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+              className="focus:border-primary-500 focus:ring-primary-500 mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
               onChange={(option) => option && field.onChange(option.value)}
               value={selectedInputOption}
               onBlur={field.onBlur}
@@ -73,7 +73,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             type="text"
             id="label"
             required
-            className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
             defaultValue={selectedCustomInput?.label}
             {...register("label", { required: true })}
           />
@@ -89,7 +89,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             <input
               type="text"
               id="placeholder"
-              className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+              className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
               defaultValue={selectedCustomInput?.placeholder}
               {...register("placeholder")}
             />
@@ -100,7 +100,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         <input
           id="required"
           type="checkbox"
-          className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 ltr:mr-2 rtl:ml-2"
+          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
           defaultChecked={selectedCustomInput?.required ?? true}
           {...register("required")}
         />
diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index 545ff534a0..9186554955 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -74,7 +74,7 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                  className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
@@ -91,7 +91,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                  className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 635ab38bdd..58ee34cdff 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -152,7 +152,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <div className="flex justify-center">
               <img src={dataUri} />
             </div>
-            <p className="font-mono text-center text-xs">{secret}</p>
+            <p className="text-center font-mono text-xs">{secret}</p>
           </>
         </WithStep>
         <WithStep step={SetupStep.EnterTotpCode} current={step}>
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 6408f204d6..c106f50849 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -4,7 +4,7 @@ import React from "react";
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
-      <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
+      <div className="bg-brand text-brandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
         <ShieldCheckIcon className="h-6 w-6 text-black" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx
index 24e4862e51..3eeb535e55 100644
--- a/apps/web/components/team/MemberChangeRoleModal.tsx
+++ b/apps/web/components/team/MemberChangeRoleModal.tsx
@@ -58,7 +58,7 @@ export default function MemberChangeRoleModal(props: {
               value={role}
               onChange={(e) => setRole(e.target.value as MembershipRole)}
               id="role"
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
+              className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm">
               <option value="MEMBER">{t("member")}</option>
               <option value="ADMIN">{t("admin")}</option>
               {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
diff --git a/apps/web/components/team/MemberInvitationModal.tsx b/apps/web/components/team/MemberInvitationModal.tsx
index c4b78fed09..6006daa785 100644
--- a/apps/web/components/team/MemberInvitationModal.tsx
+++ b/apps/web/components/team/MemberInvitationModal.tsx
@@ -64,8 +64,8 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
 
         <div className="inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
-            <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-brand bg-opacity-5 text-brandcontrast sm:mx-0 sm:h-10 sm:w-10">
-              <UserIcon className="h-6 w-6 text-brandcontrast" />
+            <div className="bg-brand text-brandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
+              <UserIcon className="text-brandcontrast h-6 w-6" />
             </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">
@@ -91,7 +91,7 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
                 </label>
                 <select
                   id="role"
-                  className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm">
+                  className="focus:border-brand mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black sm:text-sm">
                   <option value="MEMBER">{t("member")}</option>
                   <option value="ADMIN">{t("admin")}</option>
                 </select>
@@ -103,7 +103,7 @@ export default function MemberInvitationModal(props: { team: TeamWithMembers | n
                     name="sendInviteEmail"
                     defaultChecked
                     id="sendInviteEmail"
-                    className="rounded-sm border-gray-300 text-black shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                    className="focus:border-brand rounded-sm border-gray-300 text-black shadow-sm focus:ring-black sm:text-sm"
                   />
                 </div>
                 <div className="text-sm ltr:ml-2 rtl:mr-2">
diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx
index 0356a3bb6a..a705abbf37 100644
--- a/apps/web/components/team/TeamListItem.tsx
+++ b/apps/web/components/team/TeamListItem.tsx
@@ -60,7 +60,7 @@ export default function TeamListItem(props: Props) {
         size={9}
         imageSrc={getPlaceholderAvatar(team?.logo, team?.name as string)}
         alt="Team Logo"
-        className="h-9 min-h-9 w-9 min-w-9 rounded-full"
+        className="min-h-9 min-w-9 h-9 w-9 rounded-full"
       />
       <div className="ml-3 inline-block">
         <span className="text-sm font-bold text-neutral-700">{team.name}</span>
diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
index 8f73a14b5f..1958619016 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -21,7 +21,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
           <img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
         )}
         {props.heading && (
-          <h2 className="mt-6 text-center font-cal text-3xl font-bold text-neutral-900">{props.heading}</h2>
+          <h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">{props.heading}</h2>
         )}
       </div>
       {props.loading && (
diff --git a/apps/web/components/ui/Avatar.tsx b/apps/web/components/ui/Avatar.tsx
index ed5b3cad1f..4232d5c807 100644
--- a/apps/web/components/ui/Avatar.tsx
+++ b/apps/web/components/ui/Avatar.tsx
@@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
       <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="rounded-sm bg-brand p-2 text-sm text-brandcontrast shadow-sm">
+      <Tooltip.Content className="bg-brand text-brandcontrast rounded-sm p-2 text-sm shadow-sm">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx
index c7aeb5db5c..86e9277148 100644
--- a/apps/web/components/ui/ModalContainer.tsx
+++ b/apps/web/components/ui/ModalContainer.tsx
@@ -23,7 +23,7 @@ export default function ModalContainer(props: Props) {
         </span>
         <div
           className={classNames(
-            "inline-block min-w-96 transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
+            "min-w-96 inline-block transform rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:p-6 sm:align-middle",
             {
               "sm:w-full sm:max-w-lg ": !props.wide,
               "sm:w-4xl sm:max-w-4xl": props.wide,
diff --git a/apps/web/components/ui/Scheduler.tsx b/apps/web/components/ui/Scheduler.tsx
index 90b20ec74b..66ed11dafc 100644
--- a/apps/web/components/ui/Scheduler.tsx
+++ b/apps/web/components/ui/Scheduler.tsx
@@ -108,7 +108,7 @@ export const Scheduler = ({ availability, setAvailability, timeZone, setTimeZone
                 id="timeZone"
                 value={timeZone}
                 onChange={(tz: ITimezoneOption) => setTimeZone(tz.value)}
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
               />
             </div>
           </div>
diff --git a/apps/web/components/ui/SettingInputContainer.tsx b/apps/web/components/ui/SettingInputContainer.tsx
index 492382d42e..e2fb8df85d 100644
--- a/apps/web/components/ui/SettingInputContainer.tsx
+++ b/apps/web/components/ui/SettingInputContainer.tsx
@@ -12,7 +12,7 @@ export default function SettingInputContainer({
   return (
     <div className="space-y-3">
       <div className="block sm:flex">
-        <div className="mb-4 min-w-48 sm:mb-0">
+        <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor={htmlFor} className="mt-1 flex text-sm font-medium text-neutral-700">
             <Icon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
             {label}
diff --git a/apps/web/components/ui/WeekdaySelect.tsx b/apps/web/components/ui/WeekdaySelect.tsx
index 6f595d38b8..6e351f57d5 100644
--- a/apps/web/components/ui/WeekdaySelect.tsx
+++ b/apps/web/components/ui/WeekdaySelect.tsx
@@ -33,8 +33,8 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
                 toggleDay(idx);
               }}
               className={`
-              h-10 w-10
-                      rounded bg-brand px-3 py-1 text-brandcontrast focus:outline-none 
+              bg-brand text-brandcontrast
+                      h-10 w-10 rounded px-3 py-1 focus:outline-none 
                     ${activeDays[idx + 1] ? "rounded-r-none" : ""} 
                     ${activeDays[idx - 1] ? "rounded-l-none" : ""} 
                     ${idx === 0 ? "rounded-l" : ""} 
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index 16fdc90004..a16799575b 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/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="block items-center sm:flex">
-      <div className="mb-4 min-w-48 sm:mb-0">
+      <div className="min-w-48 mb-4 sm:mb-0">
         <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
           {label}
         </label>
@@ -20,7 +20,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description,
               {...rest}
               ref={ref}
               type="checkbox"
-              className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+              className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
             />
           </div>
           <div className="text-sm ltr:ml-3 rtl:mr-3">
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index d4134a2f9f..1f7e8f761b 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -16,7 +16,7 @@ export const DatePicker = ({ date, onDatesChange, className }: Props) => {
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "rounded-sm border border-gray-300 p-1 pl-2 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
+        "focus:border-primary-500 focus:ring-primary-500 rounded-sm border border-gray-300 p-1 pl-2 shadow-sm sm:text-sm",
         className
       )}
       clearIcon={null}
diff --git a/apps/web/components/ui/form/DateRangePicker.tsx b/apps/web/components/ui/form/DateRangePicker.tsx
index bbcdc942e1..53b5df6045 100644
--- a/apps/web/components/ui/form/DateRangePicker.tsx
+++ b/apps/web/components/ui/form/DateRangePicker.tsx
@@ -14,7 +14,7 @@ type Props = {
 export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
   return (
     <PrimitiveDateRangePicker
-      className="rounded-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+      className="focus:border-primary-500 focus:ring-primary-500 rounded-sm border-gray-300 sm:text-sm"
       clearIcon={null}
       calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
       rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 9ffc1e17c9..5a69121188 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -9,7 +9,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
   return (
     <div className="block sm:flex">
       {!!label && (
-        <div className="mb-4 min-w-48 sm:mb-0">
+        <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor={rest.id} className="flex h-full items-center text-sm font-medium text-neutral-700">
             {label}
           </label>
@@ -22,7 +22,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             ref={ref}
             type="number"
             className={classNames(
-              "block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm",
+              "focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm",
               rest.className
             )}
           />
diff --git a/apps/web/components/ui/form/PhoneInput.tsx b/apps/web/components/ui/form/PhoneInput.tsx
index ae01d5414c..595dbbb906 100644
--- a/apps/web/components/ui/form/PhoneInput.tsx
+++ b/apps/web/components/ui/form/PhoneInput.tsx
@@ -9,7 +9,7 @@ export const PhoneInput = (props: Optional<PhoneInputProps, "onChange">) => (
   <BasePhoneInput
     {...props}
     className={classNames(
-      "border-1 block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:border-brand focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
+      "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px px-3 shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
       props.className
     )}
     onChange={() => {
diff --git a/apps/web/components/ui/form/Select.tsx b/apps/web/components/ui/form/Select.tsx
index c5fa0fa174..1e9907bb80 100644
--- a/apps/web/components/ui/form/Select.tsx
+++ b/apps/web/components/ui/form/Select.tsx
@@ -24,7 +24,7 @@ function Select<
         ...components,
         IndicatorSeparator: () => null,
       }}
-      className={classNames("text-sm shadow-sm focus:border-primary-500", className)}
+      className={classNames("focus:border-primary-500 text-sm shadow-sm", className)}
       {...props}
     />
   );
diff --git a/apps/web/components/ui/form/radio-area/Select.tsx b/apps/web/components/ui/form/radio-area/Select.tsx
index d522281b14..371be2bc71 100644
--- a/apps/web/components/ui/form/radio-area/Select.tsx
+++ b/apps/web/components/ui/form/radio-area/Select.tsx
@@ -34,7 +34,7 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
         type="button"
         disabled={disabled}
         className={classNames(
-          "border-1 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm focus:ring-primary-500 sm:text-sm",
+          "border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left shadow-sm sm:text-sm",
           disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
diff --git a/apps/web/components/ui/modal/SetTimesModal.tsx b/apps/web/components/ui/modal/SetTimesModal.tsx
index 25e202294d..a31559d17f 100644
--- a/apps/web/components/ui/modal/SetTimesModal.tsx
+++ b/apps/web/components/ui/modal/SetTimesModal.tsx
@@ -76,7 +76,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
                 maxLength={2}
                 name="hours"
                 id="startHours"
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                 placeholder="9"
                 defaultValue={startHours}
               />
@@ -95,7 +95,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
                 maxLength={2}
                 name="minutes"
                 id="startMinutes"
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                 placeholder="30"
                 defaultValue={startMinutes}
               />
@@ -115,7 +115,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
                 maxLength={2}
                 name="hours"
                 id="endHours"
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                 placeholder="17"
                 defaultValue={endHours}
               />
@@ -134,7 +134,7 @@ export default function SetTimesModal(props: SetTimesModalProps) {
                 step="15"
                 name="minutes"
                 id="endMinutes"
-                className="block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black sm:text-sm"
+                className="focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
                 placeholder="30"
                 defaultValue={endMinutes}
               />
diff --git a/apps/web/ee/components/LicenseBanner.tsx b/apps/web/ee/components/LicenseBanner.tsx
index dbd3462db9..67648bcfad 100644
--- a/apps/web/ee/components/LicenseBanner.tsx
+++ b/apps/web/ee/components/LicenseBanner.tsx
@@ -83,7 +83,7 @@ export default function LicenseBanner() {
           </span>
           variable to &apos;agreeapos;.
         </Trans>
-        <h2 className="mt-8 mb-2 font-cal text-black">{t("terms_summary")}:</h2>
+        <h2 className="font-cal mt-8 mb-2 text-black">{t("terms_summary")}:</h2>
         <ul className="ml-5 list-disc">
           <li>{t("codebase_has_to_stay_opensource")}</li>
           <li>{t("cannot_repackage_codebase")}</li>
diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
index af17c44d97..206c8fff22 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
@@ -33,7 +33,7 @@ export default function TeamAvailabilityModal(props: Props) {
 
   return (
     <div className="flex max-h-[500px] min-h-[500px] flex-row  space-x-8 rtl:space-x-reverse">
-      <div className="w-64 min-w-64 space-y-5 p-5 pr-0">
+      <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
         <div className="flex">
           <Avatar
             imageSrc={getPlaceholderAvatar(props.member?.avatar, props.member?.name as string)}
@@ -74,7 +74,7 @@ export default function TeamAvailabilityModal(props: Props) {
             ]}
             isSearchable={false}
             classNamePrefix="react-select"
-            className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
index a0966adaee..5dac84e75a 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -47,7 +47,7 @@ export default function TeamAvailabilityScreen(props: Props) {
               <Avatar
                 imageSrc={getPlaceholderAvatar(member?.avatar, member?.name as string)}
                 alt={member?.name || ""}
-                className="mt-1 h-10 min-h-10 w-10 min-w-10 rounded-full"
+                className="min-h-10 min-w-10 mt-1 h-10 w-10 rounded-full"
               />
               <div className="ml-3 inline-block overflow-hidden pt-1">
                 <span className="truncate text-lg font-bold text-neutral-700">{member?.name}</span>
@@ -93,7 +93,7 @@ export default function TeamAvailabilityScreen(props: Props) {
             ]}
             isSearchable={false}
             classNamePrefix="react-select"
-            className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+            className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityTimes.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityTimes.tsx
index 37629769ec..2cab13e332 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityTimes.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityTimes.tsx
@@ -59,7 +59,7 @@ export default function TeamAvailabilityTimes(props: Props) {
       {times.map((time) => (
         <div key={time.format()} className="flex flex-row items-center">
           <a
-            className="mb-2 mr-3 block min-w-48 flex-grow rounded-sm border border-brand bg-white py-2 text-center font-medium text-primary-500 hover:bg-brand hover:text-brandcontrast dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
+            className="min-w-48 border-brand text-primary-500 hover:bg-brand hover:text-brandcontrast mb-2 mr-3 block flex-grow rounded-sm border bg-white py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black dark:hover:bg-black dark:hover:text-white"
             data-testid="time">
             {time.format("HH:mm")}
           </a>
diff --git a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx b/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
index 25805c8520..04618a2272 100644
--- a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
+++ b/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx
@@ -130,7 +130,7 @@ const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, re
             name="url"
             id="url"
             placeholder="https://example.com/calendar"
-            className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-brand focus:ring-black sm:text-sm"
+            className="focus:border-brand block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:ring-black sm:text-sm"
           />
         </div>
       </div>
diff --git a/apps/web/package.json b/apps/web/package.json
index 177cdecb1a..ee3d259696 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -152,7 +152,7 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.4",
-    "prettier": "^2.3.2",
+    "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.6",
     "prisma": "3.0.2",
     "tailwindcss": "^3.0.0",
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 39f06fb3ba..c6e448cc8a 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -53,7 +53,7 @@ export default function Custom404() {
                 <p className="text-sm font-semibold uppercase tracking-wide text-black">
                   {t("missing_license")}
                 </p>
-                <h1 className="mt-2 font-cal text-3xl font-extrabold text-gray-900">
+                <h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
                   {t("signup_requires")}
                 </h1>
                 <p className="mt-4">{t("signup_requires_description")}</p>
@@ -170,7 +170,7 @@ export default function Custom404() {
             <>
               <div className="text-center">
                 <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-                <h1 className="mt-2 font-cal text-4xl font-extrabold text-gray-900 sm:text-5xl">
+                <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
                   {t("page_doesnt_exist")}
                 </h1>
                 {isSubpage ? (
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 2abdbc76ef..81f87aaaaa 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -55,7 +55,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                 className="mx-auto mb-4 h-24 w-24 rounded-full"
                 alt={nameOrUsername}
               />
-              <h1 className="mb-1 font-cal text-3xl font-bold text-neutral-900 dark:text-white">
+              <h1 className="font-cal mb-1 text-3xl font-bold text-neutral-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
                   <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
@@ -69,7 +69,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   <div
                     key={type.id}
                     style={{ display: "flex" }}
-                    className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+                    className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
                     <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                     <Link
                       href={{
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index e9832e7bc8..b7bae37bc5 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -58,7 +58,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
               {t("success")}
             </h2>
           </div>
@@ -80,7 +80,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
+            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
             <h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
           </div>
           <p>{t("request_is_expired_instructions")}</p>
@@ -110,7 +110,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
           {!isRequestExpired && !success && (
             <>
               <div className="space-y-6">
-                <h2 className="mt-6 text-center font-cal text-3xl font-extrabold text-gray-900">
+                <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
                   {t("reset_password")}
                 </h2>
                 <p>{t("enter_new_password")}</p>
@@ -151,7 +151,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                       type="password"
                       autoComplete="password"
                       required
-                      className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-brand focus:outline-none focus:ring-black sm:text-sm"
+                      className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-black sm:text-sm"
                     />
                   </div>
                 </div>
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 213a6a78a8..89284fcf67 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -119,7 +119,7 @@ export default function Login({
             <div className="relative">
               <div className="absolute right-0 -top-[2px]">
                 <Link href="/auth/forgot-password">
-                  <a tabIndex={-1} className="text-sm font-medium text-primary-600">
+                  <a tabIndex={-1} className="text-primary-600 text-sm font-medium">
                     {t("forgot")}
                   </a>
                 </Link>
diff --git a/apps/web/pages/auth/signup.tsx b/apps/web/pages/auth/signup.tsx
index 0307d88cc2..e7f8901444 100644
--- a/apps/web/pages/auth/signup.tsx
+++ b/apps/web/pages/auth/signup.tsx
@@ -70,7 +70,7 @@ export default function Signup({ email }: Props) {
       aria-modal="true">
       <HeadSeo title={t("sign_up")} description={t("sign_up")} />
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="text-center font-cal text-3xl font-extrabold text-gray-900">
+        <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
           {t("create_your_account")}
         </h2>
       </div>
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index db084235a2..ba8bcc12b7 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -107,7 +107,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
           <Button>{t("save")}</Button>
         </div>
       </Form>
-      <div className="col-span-3 min-w-40 ltr:ml-2 rtl:mr-2 lg:col-span-1">
+      <div className="min-w-40 col-span-3 ltr:ml-2 rtl:mr-2 lg:col-span-1">
         <div className="rounded-sm border border-gray-200 px-4 py-5 sm:p-6 ">
           <h3 className="text-base font-medium leading-6 text-gray-900">
             {t("something_doesnt_look_right")}
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index ef071d0407..85c308856b 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -64,8 +64,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
         />
         <small className="block text-neutral-400">{t("hover_over_bold_times_tip")}</small>
         <div className="mt-4 space-y-4">
-          <div className="overflow-hidden rounded-sm bg-brand">
-            <div className="px-4 py-2 text-brandcontrast sm:px-6">
+          <div className="bg-brand overflow-hidden rounded-sm">
+            <div className="text-brandcontrast px-4 py-2 sm:px-6">
               {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
             </div>
           </div>
@@ -94,8 +94,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
             </div>
           )}
 
-          <div className="overflow-hidden rounded-sm bg-brand">
-            <div className="px-4 py-2 text-brandcontrast sm:px-6">
+          <div className="bg-brand overflow-hidden rounded-sm">
+            <div className="text-brandcontrast px-4 py-2 sm:px-6">
               {t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
             </div>
           </div>
diff --git a/apps/web/pages/call/meeting-ended/[uid].tsx b/apps/web/pages/call/meeting-ended/[uid].tsx
index 2bd11bb454..688f2e7d7c 100644
--- a/apps/web/pages/call/meeting-ended/[uid].tsx
+++ b/apps/web/pages/call/meeting-ended/[uid].tsx
@@ -52,7 +52,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                       </h3>
                     </div>
                     <div className="mt-4 border-t border-b py-4">
-                      <h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
+                      <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
diff --git a/apps/web/pages/call/meeting-not-started/[uid].tsx b/apps/web/pages/call/meeting-not-started/[uid].tsx
index 32fcaf1e91..bb81a55da1 100644
--- a/apps/web/pages/call/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/call/meeting-not-started/[uid].tsx
@@ -51,7 +51,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                       </h3>
                     </div>
                     <div className="mt-4 border-t border-b py-4">
-                      <h2 className="mb-2 text-center font-cal text-lg font-medium text-gray-600">
+                      <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx
index 0576cf4db1..41b1d89ff5 100644
--- a/apps/web/pages/cancel/[uid].tsx
+++ b/apps/web/pages/cancel/[uid].tsx
@@ -78,7 +78,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                           </p>
                         </div>
                         <div className="mt-4 border-t border-b py-4">
-                          <h2 className="mb-2 font-cal text-lg font-medium text-gray-600">
+                          <h2 className="font-cal mb-2 text-lg font-medium text-gray-600">
                             {props.booking?.title}
                           </h2>
                           <p className="text-gray-500">
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 9f763014ff..b9e13c0266 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -248,7 +248,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 {...locationFormMethods.register("locationAddress")}
                 id="address"
                 required
-                className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
                 defaultValue={
                   formMethods
                     .getValues("locations")
@@ -378,7 +378,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
               options={locationOptions}
               isSearchable={false}
               classNamePrefix="react-select"
-              className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+              className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
               onChange={(e) => {
                 if (e?.value) {
                   locationFormMethods.setValue("locationType", e.value);
@@ -681,7 +681,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 className="space-y-6">
                 <div className="space-y-3">
                   <div className="block items-center sm:flex">
-                    <div className="mb-4 min-w-48 sm:mb-0">
+                    <div className="min-w-48 mb-4 sm:mb-0">
                       <label htmlFor="slug" className="flex text-sm font-medium text-neutral-700">
                         <LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                         {t("url")}
@@ -696,7 +696,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <input
                           type="text"
                           required
-                          className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                          className="focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
                           defaultValue={eventType.slug}
                           {...formMethods.register("slug")}
                         />
@@ -747,7 +747,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 <hr className="border-neutral-200" />
                 <div className="space-y-3">
                   <div className="block sm:flex">
-                    <div className="mb-4 mt-2.5 min-w-48 sm:mb-0">
+                    <div className="min-w-48 mb-4 mt-2.5 sm:mb-0">
                       <label htmlFor="description" className="mt-0 flex text-sm font-medium text-neutral-700">
                         <DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                         {t("description")}
@@ -756,7 +756,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     <div className="w-full">
                       <textarea
                         id="description"
-                        className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                        className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
                         placeholder={t("quick_video_meeting")}
                         {...formMethods.register("description")}
                         defaultValue={asStringOrUndefined(eventType.description)}></textarea>
@@ -767,7 +767,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 {team && (
                   <div className="space-y-3">
                     <div className="block sm:flex">
-                      <div className="mb-4 min-w-48 sm:mb-0">
+                      <div className="min-w-48 mb-4 sm:mb-0">
                         <label
                           htmlFor="schedulingType"
                           className="mt-2 flex text-sm font-medium text-neutral-700">
@@ -793,7 +793,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     </div>
 
                     <div className="block sm:flex">
-                      <div className="mb-4 min-w-48 sm:mb-0">
+                      <div className="min-w-48 mb-4 sm:mb-0">
                         <label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
                           <UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                           {t("attendees")}
@@ -845,7 +845,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                        */}
                       {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
                         <div className="block items-center sm:flex">
-                          <div className="mb-4 min-w-48 sm:mb-0">
+                          <div className="min-w-48 mb-4 sm:mb-0">
                             <label
                               htmlFor="createEventsOn"
                               className="flex text-sm font-medium text-neutral-700">
@@ -871,7 +871,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         </div>
                       )}
                       <div className="block items-center sm:flex">
-                        <div className="mb-4 min-w-48 sm:mb-0">
+                        <div className="min-w-48 mb-4 sm:mb-0">
                           <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
                             {t("event_name")} <InfoBadge content={t("event_name_tooltip")} />
                           </label>
@@ -880,7 +880,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           <div className="relative mt-1 rounded-sm shadow-sm">
                             <input
                               type="text"
-                              className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                              className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
                               placeholder={t("meeting_with_user")}
                               defaultValue={eventType.eventName || ""}
                               {...formMethods.register("eventName")}
@@ -890,7 +890,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       </div>
                       {eventType.isWeb3Active && (
                         <div className="block items-center sm:flex">
-                          <div className="mb-4 min-w-48 sm:mb-0">
+                          <div className="min-w-48 mb-4 sm:mb-0">
                             <label
                               htmlFor="smartContractAddress"
                               className="flex text-sm font-medium text-neutral-700">
@@ -902,7 +902,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               {
                                 <input
                                   type="text"
-                                  className="block w-full rounded-sm border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                                  className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
                                   placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
                                   defaultValue={(eventType.metadata.smartContractAddress || "") as string}
                                   {...formMethods.register("smartContractAddress")}
@@ -913,7 +913,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         </div>
                       )}
                       <div className="block items-center sm:flex">
-                        <div className="mb-4 min-w-48 sm:mb-0">
+                        <div className="min-w-48 mb-4 sm:mb-0">
                           <label
                             htmlFor="additionalFields"
                             className="flexflex mt-2 text-sm font-medium text-neutral-700">
@@ -923,7 +923,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <div className="w-full">
                           <ul className="mt-1">
                             {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
-                              <li key={idx} className="mb-2 border bg-secondary-50 p-2">
+                              <li key={idx} className="bg-secondary-50 mb-2 border p-2">
                                 <div className="flex justify-between">
                                   <div className="w-0 flex-1">
                                     <div className="truncate">
@@ -1042,7 +1042,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       />
 
                       <div className="block items-center sm:flex">
-                        <div className="mb-4 min-w-48 sm:mb-0">
+                        <div className="min-w-48 mb-4 sm:mb-0">
                           <label htmlFor="eventName" className="flex text-sm font-medium text-neutral-700">
                             {t("slot_interval")}
                           </label>
@@ -1067,7 +1067,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                   <Select
                                     isSearchable={false}
                                     classNamePrefix="react-select"
-                                    className="react-select-container block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                                    className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
                                     onChange={(val) => {
                                       formMethods.setValue(
                                         "slotInterval",
@@ -1089,7 +1089,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       </div>
 
                       <div className="block sm:flex">
-                        <div className="mb-4 min-w-48 sm:mb-0">
+                        <div className="min-w-48 mb-4 sm:mb-0">
                           <label
                             htmlFor="inviteesCanSchedule"
                             className="mt-2.5 flex text-sm font-medium text-neutral-700">
@@ -1120,14 +1120,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                       <div className="inline-flex">
                                         <input
                                           type="number"
-                                          className="block w-12 rounded-sm border-gray-300 shadow-sm [appearance:textfield] focus:border-primary-500 focus:ring-primary-500 ltr:mr-2 rtl:ml-2 sm:text-sm"
+                                          className="focus:border-primary-500 focus:ring-primary-500 block w-12 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
                                           placeholder="30"
                                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                                           defaultValue={eventType.periodDays || 30}
                                         />
                                         <select
                                           id=""
-                                          className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 sm:text-sm"
+                                          className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
                                           {...formMethods.register("periodCountCalendarDays")}
                                           defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                                           <option value="1">{t("calendar_days")}</option>
@@ -1167,7 +1167,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <hr className="border-neutral-200" />
 
                       <div className="block sm:flex">
-                        <div className="mb-4 min-w-48 sm:mb-0">
+                        <div className="min-w-48 mb-4 sm:mb-0">
                           <label htmlFor="availability" className="flex text-sm font-medium text-neutral-700">
                             {t("availability")}
                           </label>
@@ -1204,7 +1204,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <>
                           <hr className="border-neutral-200" />
                           <div className="block sm:flex">
-                            <div className="mb-4 min-w-48 sm:mb-0">
+                            <div className="min-w-48 mb-4 sm:mb-0">
                               <label
                                 htmlFor="payment"
                                 className="mt-2 flex text-sm font-medium text-neutral-700">
@@ -1228,7 +1228,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                           id="requirePayment"
                                           name="requirePayment"
                                           type="checkbox"
-                                          className="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                                          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
                                           defaultChecked={requirePayment}
                                         />
                                       </div>
@@ -1265,7 +1265,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                               min="0.5"
                                               type="number"
                                               required
-                                              className="block w-full rounded-sm border-gray-300 pl-2 pr-12 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                                              className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm"
                                               placeholder="Price"
                                               onChange={(e) => {
                                                 field.onChange(e.target.valueAsNumber * 100);
@@ -1366,8 +1366,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
           <DialogContent asChild>
             <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
               <div className="mb-4 sm:flex sm:items-start">
-                <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                  <LocationMarkerIcon className="h-6 w-6 text-primary-600" />
+                <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+                  <LocationMarkerIcon className="text-primary-600 h-6 w-6" />
                 </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">
@@ -1418,7 +1418,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       options={locationOptions}
                       isSearchable={false}
                       classNamePrefix="react-select"
-                      className="react-select-container my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                      className="react-select-container focus:border-primary-500 focus:ring-primary-500 my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
                       onChange={(val) => {
                         if (val) {
                           locationFormMethods.setValue("locationType", val.value);
@@ -1448,8 +1448,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
               <DialogContent asChild>
                 <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
                   <div className="mb-4 sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-secondary-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <PlusIcon className="h-6 w-6 text-primary-600" />
+                    <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+                      <PlusIcon className="text-primary-600 h-6 w-6" />
                     </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">
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index 4f60c3fe91..6353158822 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -555,7 +555,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
   }
 
   return (
-    <div className="min-h-screen bg-brand" data-testid="onboarding">
+    <div className="bg-brand min-h-screen" data-testid="onboarding">
       <Head>
         <title>Cal.com - {t("getting_started")}</title>
         <link rel="icon" href="/favicon.ico" />
diff --git a/apps/web/pages/integrations/index.tsx b/apps/web/pages/integrations/index.tsx
index 62966163ef..a01e54554f 100644
--- a/apps/web/pages/integrations/index.tsx
+++ b/apps/web/pages/integrations/index.tsx
@@ -390,7 +390,7 @@ function IframeEmbedContainer() {
               <div>
                 <input
                   id="iframe"
-                  className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
+                  className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
                   placeholder={t("loading")}
                   defaultValue={iframeTemplate}
                   readOnly
@@ -415,7 +415,7 @@ function IframeEmbedContainer() {
               <div>
                 <input
                   id="fullscreen"
-                  className="px-2 py-1 text-sm text-gray-500 focus:border-brand focus:ring-black"
+                  className="focus:border-brand px-2 py-1 text-sm text-gray-500 focus:ring-black"
                   placeholder={t("loading")}
                   defaultValue={htmlTemplate}
                   readOnly
diff --git a/apps/web/pages/sandbox/index.tsx b/apps/web/pages/sandbox/index.tsx
index 51b7861c3c..92eb0d704a 100644
--- a/apps/web/pages/sandbox/index.tsx
+++ b/apps/web/pages/sandbox/index.tsx
@@ -37,7 +37,7 @@ const SandboxPage: NextPage<PageProps> = (props) => {
           {props.pages.map((pathname) => (
             <li key={pathname}>
               <Link href={"/sandbox/" + pathname + "#main"}>
-                <a className="font-mono px-4">{pathname}</a>
+                <a className="px-4 font-mono">{pathname}</a>
               </Link>
             </li>
           ))}
diff --git a/apps/web/pages/settings/teams/[id].tsx b/apps/web/pages/settings/teams/[id].tsx
index e831245bf2..d80a59396d 100644
--- a/apps/web/pages/settings/teams/[id].tsx
+++ b/apps/web/pages/settings/teams/[id].tsx
@@ -137,7 +137,7 @@ export function TeamSettingsPage() {
               <MemberList team={team} members={team.members || []} />
               {isAdmin && <SAMLConfiguration teamsView={true} teamId={team.id} />}
             </div>
-            <div className="mt-8 w-full min-w-32 px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 md:w-3/12">
+            <div className="min-w-32 mt-8 w-full px-2 ltr:ml-2 rtl:mr-2 sm:mt-0 md:w-3/12">
               <TeamSettingsRightSidebar role={team.membership.role} team={team} />
             </div>
           </div>
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index a82b179326..863ec00c82 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -270,7 +270,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                           name="email"
                           id="email"
                           defaultValue={router.query.email}
-                          className="block w-full border-gray-300 text-gray-600 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-brand dark:text-brandcontrast sm:text-sm"
+                          className="focus:border-brand dark:bg-brand dark:text-brandcontrast block w-full border-gray-300 text-gray-600 shadow-sm focus:ring-black dark:border-gray-900 sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button type="submit" className="min-w-max" color="primary">
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 3f00d0fe0b..2535d3010b 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -32,7 +32,7 @@ function TeamPage({ team }: TeamPageProps) {
       {team.eventTypes.map((type) => (
         <li
           key={type.id}
-          className="group relative rounded-sm border border-neutral-200 bg-white hover:border-brand hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+          className="group hover:border-brand relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
           <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="flex justify-between px-6 py-4">
@@ -66,7 +66,7 @@ function TeamPage({ team }: TeamPageProps) {
         <Theme />
         <HeadSeo title={teamName} description={teamName} />
         <div className="px-4 pt-24 pb-12">
-          <div className="mx-auto mb-8 max-w-96 text-center">
+          <div className="max-w-96 mx-auto mb-8 text-center">
             <Avatar
               alt={teamName}
               imageSrc={getPlaceholderAvatar(team.logo, team.name)}
@@ -87,7 +87,7 @@ function TeamPage({ team }: TeamPageProps) {
                   <div className="w-full border-t border-gray-200 dark:border-gray-900" />
                 </div>
                 <div className="relative flex justify-center">
-                  <span className="bg-gray-100 px-2 text-sm text-gray-500 dark:bg-brand dark:text-brandcontrast">
+                  <span className="dark:bg-brand dark:text-brandcontrast bg-gray-100 px-2 text-sm text-gray-500">
                     {t("or")}
                   </span>
                 </div>
diff --git a/apps/web/prisma/zod/attendee.ts b/apps/web/prisma/zod/attendee.ts
index e49d49e8dd..29e02f5f7b 100644
--- a/apps/web/prisma/zod/attendee.ts
+++ b/apps/web/prisma/zod/attendee.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteBooking, BookingModel } from "./index";
 
diff --git a/apps/web/prisma/zod/availability.ts b/apps/web/prisma/zod/availability.ts
index 881062a5cd..aadef43e45 100644
--- a/apps/web/prisma/zod/availability.ts
+++ b/apps/web/prisma/zod/availability.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteUser, UserModel, CompleteEventType, EventTypeModel } from "./index";
 
diff --git a/apps/web/prisma/zod/booking.ts b/apps/web/prisma/zod/booking.ts
index 1e61889580..613f8bd6b2 100644
--- a/apps/web/prisma/zod/booking.ts
+++ b/apps/web/prisma/zod/booking.ts
@@ -1,7 +1,6 @@
-import { BookingStatus } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { BookingStatus } from "@prisma/client";
 import {
   CompleteUser,
   UserModel,
diff --git a/apps/web/prisma/zod/bookingreference.ts b/apps/web/prisma/zod/bookingreference.ts
index e27651bc34..d01d013031 100644
--- a/apps/web/prisma/zod/bookingreference.ts
+++ b/apps/web/prisma/zod/bookingreference.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteBooking, BookingModel } from "./index";
 
diff --git a/apps/web/prisma/zod/credential.ts b/apps/web/prisma/zod/credential.ts
index 37aeeb4a67..3c026cf44e 100644
--- a/apps/web/prisma/zod/credential.ts
+++ b/apps/web/prisma/zod/credential.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteUser, UserModel } from "./index";
 
diff --git a/apps/web/prisma/zod/dailyeventreference.ts b/apps/web/prisma/zod/dailyeventreference.ts
index 925b1ac1cb..ac98ed4306 100644
--- a/apps/web/prisma/zod/dailyeventreference.ts
+++ b/apps/web/prisma/zod/dailyeventreference.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteBooking, BookingModel } from "./index";
 
diff --git a/apps/web/prisma/zod/destinationcalendar.ts b/apps/web/prisma/zod/destinationcalendar.ts
index f9538ec85f..c489bd0c59 100644
--- a/apps/web/prisma/zod/destinationcalendar.ts
+++ b/apps/web/prisma/zod/destinationcalendar.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import {
   CompleteUser,
diff --git a/apps/web/prisma/zod/eventtype.ts b/apps/web/prisma/zod/eventtype.ts
index 2df53f39c8..b60dd7b285 100644
--- a/apps/web/prisma/zod/eventtype.ts
+++ b/apps/web/prisma/zod/eventtype.ts
@@ -1,7 +1,6 @@
-import { PeriodType, SchedulingType } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { PeriodType, SchedulingType } from "@prisma/client";
 import {
   CompleteUser,
   UserModel,
diff --git a/apps/web/prisma/zod/eventtypecustominput.ts b/apps/web/prisma/zod/eventtypecustominput.ts
index 78c6b16862..de0d440388 100644
--- a/apps/web/prisma/zod/eventtypecustominput.ts
+++ b/apps/web/prisma/zod/eventtypecustominput.ts
@@ -1,7 +1,6 @@
-import { EventTypeCustomInputType } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { EventTypeCustomInputType } from "@prisma/client";
 import { CompleteEventType, EventTypeModel } from "./index";
 
 export const _EventTypeCustomInputModel = z.object({
diff --git a/apps/web/prisma/zod/membership.ts b/apps/web/prisma/zod/membership.ts
index 55802cb96a..c0051a89d6 100644
--- a/apps/web/prisma/zod/membership.ts
+++ b/apps/web/prisma/zod/membership.ts
@@ -1,7 +1,6 @@
-import { MembershipRole } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { MembershipRole } from "@prisma/client";
 import { CompleteTeam, TeamModel, CompleteUser, UserModel } from "./index";
 
 export const _MembershipModel = z.object({
diff --git a/apps/web/prisma/zod/payment.ts b/apps/web/prisma/zod/payment.ts
index 4e014e99ac..49d2202841 100644
--- a/apps/web/prisma/zod/payment.ts
+++ b/apps/web/prisma/zod/payment.ts
@@ -1,7 +1,6 @@
-import { PaymentType } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { PaymentType } from "@prisma/client";
 import { CompleteBooking, BookingModel } from "./index";
 
 // Helper schema for JSON fields
diff --git a/apps/web/prisma/zod/remindermail.ts b/apps/web/prisma/zod/remindermail.ts
index 1cceafd388..5d7b29a1aa 100644
--- a/apps/web/prisma/zod/remindermail.ts
+++ b/apps/web/prisma/zod/remindermail.ts
@@ -1,7 +1,6 @@
-import { ReminderType } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { ReminderType } from "@prisma/client";
 
 export const _ReminderMailModel = z.object({
   id: z.number().int(),
diff --git a/apps/web/prisma/zod/resetpasswordrequest.ts b/apps/web/prisma/zod/resetpasswordrequest.ts
index 89e481d996..22a89c0b4f 100644
--- a/apps/web/prisma/zod/resetpasswordrequest.ts
+++ b/apps/web/prisma/zod/resetpasswordrequest.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 
 export const _ResetPasswordRequestModel = z.object({
diff --git a/apps/web/prisma/zod/schedule.ts b/apps/web/prisma/zod/schedule.ts
index c822393331..4376673289 100644
--- a/apps/web/prisma/zod/schedule.ts
+++ b/apps/web/prisma/zod/schedule.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteUser, UserModel, CompleteEventType, EventTypeModel } from "./index";
 
diff --git a/apps/web/prisma/zod/selectedcalendar.ts b/apps/web/prisma/zod/selectedcalendar.ts
index 0245a1ed90..22ea978fcd 100644
--- a/apps/web/prisma/zod/selectedcalendar.ts
+++ b/apps/web/prisma/zod/selectedcalendar.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteUser, UserModel } from "./index";
 
diff --git a/apps/web/prisma/zod/team.ts b/apps/web/prisma/zod/team.ts
index 53368aace8..3b455ec25e 100644
--- a/apps/web/prisma/zod/team.ts
+++ b/apps/web/prisma/zod/team.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 import { CompleteMembership, MembershipModel, CompleteEventType, EventTypeModel } from "./index";
 
diff --git a/apps/web/prisma/zod/user.ts b/apps/web/prisma/zod/user.ts
index aefd667151..7a629b08d3 100644
--- a/apps/web/prisma/zod/user.ts
+++ b/apps/web/prisma/zod/user.ts
@@ -1,7 +1,6 @@
-import { IdentityProvider, UserPlan } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { IdentityProvider, UserPlan } from "@prisma/client";
 import {
   CompleteEventType,
   EventTypeModel,
diff --git a/apps/web/prisma/zod/verificationrequest.ts b/apps/web/prisma/zod/verificationrequest.ts
index b5c00b5fd1..ca796179af 100644
--- a/apps/web/prisma/zod/verificationrequest.ts
+++ b/apps/web/prisma/zod/verificationrequest.ts
@@ -1,5 +1,4 @@
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
 
 export const _VerificationRequestModel = z.object({
diff --git a/apps/web/prisma/zod/webhook.ts b/apps/web/prisma/zod/webhook.ts
index 475c8594ae..2bbc80cc2f 100644
--- a/apps/web/prisma/zod/webhook.ts
+++ b/apps/web/prisma/zod/webhook.ts
@@ -1,7 +1,6 @@
-import { WebhookTriggerEvents } from "@prisma/client";
 import * as z from "zod";
-
 import * as imports from "../zod-utils";
+import { WebhookTriggerEvents } from "@prisma/client";
 import { CompleteUser, UserModel } from "./index";
 
 export const _WebhookModel = z.object({
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 342473f619..3adf00d575 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -26,7 +26,7 @@
 
 .react-daterange-picker > .react-daterange-picker__wrapper input {
   /* Makes sure the on-focus behaviour is like Cal.com's */
-  @apply my-0.5 h-auto rounded-sm py-0.5 focus:border-primary-500 focus:ring-primary-500;
+  @apply focus:border-primary-500 focus:ring-primary-500 my-0.5 h-auto rounded-sm py-0.5;
 }
 
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
@@ -175,12 +175,12 @@
 }
 
 .react-multi-email > [type="text"] {
-  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-brand focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
+  @apply focus:border-brand block w-full rounded-md border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
 }
 
 .react-multi-email [data-tag] {
   box-shadow: none !important;
-  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-brand dark:text-white;
+  @apply dark:bg-brand my-1 inline-flex items-center rounded-md border border-transparent bg-neutral-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:text-white;
 }
 
 .react-multi-email > span[data-placeholder] {
diff --git a/package.json b/package.json
index 097bb9e895..99861d88c1 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@trivago/prettier-plugin-sort-imports": "2.0.4",
     "husky": "^7.0.1",
     "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2",
+    "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.6",
     "turbo": "latest"
   },
diff --git a/yarn.lock b/yarn.lock
index fb54e5bcd7..8d10cfa34c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9195,7 +9195,7 @@ prettier-plugin-tailwindcss@^0.1.6:
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.7.tgz#f51de7b7bbabaa0724d3aff7a62957e5aa873482"
   integrity sha512-tmBr45hCLuit2Cz9Pwow0/Jl1bGivYGsfcF29O+3sKcE++ybjz9dfie565S3ZsvAeV8uYer9SRMBWDsHPly2Lg==
 
-prettier@^2.3.2, prettier@^2.5.1:
+prettier@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
   integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==