From ee552d8d64901718840992e5188d927f40505a35 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Fri, 15 Jul 2022 18:39:11 +0200
Subject: [PATCH] purged shadow-sm (#3381)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Omar López <zomars@me.com>
---
 apps/web/components/ImageUploader.tsx         |  2 +-
 apps/web/components/Swatch.tsx                |  2 +-
 .../availability/NewScheduleButton.tsx        |  2 +-
 apps/web/components/booking/TimeOptions.tsx   |  2 +-
 .../booking/pages/AvailabilityPage.tsx        |  4 +-
 .../components/booking/pages/BookingPage.tsx  |  2 +-
 .../components/eventtype/CreateEventType.tsx  |  2 +-
 .../eventtype/RecurringEventController.tsx    |  4 +-
 .../pages/eventtypes/CustomInputTypeForm.tsx  |  4 +-
 .../security/ChangePasswordSection.tsx        |  4 +-
 .../security/DisableTwoFactorModal.tsx        |  2 +-
 .../security/EnableTwoFactorModal.tsx         |  4 +-
 .../components/team/MemberChangeRoleModal.tsx |  2 +-
 .../components/team/MemberInvitationModal.tsx |  4 +-
 apps/web/components/team/TeamCreateModal.tsx  |  2 +-
 apps/web/components/team/TeamSettings.tsx     |  6 +-
 apps/web/components/ui/Avatar.tsx             |  2 +-
 apps/web/components/ui/AvatarSSR.tsx          |  2 +-
 .../UsernameAvailability/PremiumTextfield.tsx |  2 +-
 .../UsernameTextfield.tsx                     |  2 +-
 apps/web/components/ui/colorpicker.tsx        |  2 +-
 apps/web/components/ui/form/DatePicker.tsx    |  2 +-
 apps/web/components/ui/form/MinutesField.tsx  |  2 +-
 apps/web/components/ui/form/PhoneInput.tsx    |  2 +-
 .../web/components/ui/form/TimezoneSelect.tsx |  2 +-
 .../components/ui/form/radio-area/Select.tsx  |  2 +-
 apps/web/ee/components/LicenseBanner.tsx      |  2 +-
 apps/web/ee/components/stripe/Payment.tsx     |  2 +-
 .../ee/components/support/HelpMenuItem.tsx    |  4 +-
 .../availability/TeamAvailabilityModal.tsx    |  2 +-
 .../availability/TeamAvailabilityScreen.tsx   |  2 +-
 .../workflows/NewWorkflowButton.tsx           |  2 +-
 .../workflows/WorkflowStepContainer.tsx       |  8 +-
 apps/web/pages/auth/forgot-password/[id].tsx  |  4 +-
 apps/web/pages/auth/signup.tsx                |  6 +-
 apps/web/pages/availability/[schedule].tsx    |  2 +-
 apps/web/pages/getting-started.tsx            | 10 +-
 apps/web/pages/settings/profile.tsx           | 18 ++--
 apps/web/pages/success.tsx                    |  4 +-
 apps/web/styles/globals.css                   | 92 ++++++++++---------
 40 files changed, 114 insertions(+), 112 deletions(-)

diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index c7ce6b8a37..c8ded6c160 100644
--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -142,7 +142,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
               <input
                 onInput={onInputFile}
                 type="file"
diff --git a/apps/web/components/Swatch.tsx b/apps/web/components/Swatch.tsx
index 6850454603..3cf3970fa5 100644
--- a/apps/web/components/Swatch.tsx
+++ b/apps/web/components/Swatch.tsx
@@ -9,7 +9,7 @@ export type SwatchProps = {
 const Swatch = (props: SwatchProps) => {
   const { size, backgroundColor, onClick } = props;
   return (
-    <div className="border-2 border-gray-200 p-1 shadow-sm">
+    <div className="border-2 border-gray-200 p-1">
       <div
         onClick={onClick}
         style={{ backgroundColor }}
diff --git a/apps/web/components/availability/NewScheduleButton.tsx b/apps/web/components/availability/NewScheduleButton.tsx
index d39ae7294e..1d1fc7ae30 100644
--- a/apps/web/components/availability/NewScheduleButton.tsx
+++ b/apps/web/components/availability/NewScheduleButton.tsx
@@ -65,7 +65,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
                 type="text"
                 id="name"
                 required
-                className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
+                className="block w-full rounded-sm border-gray-300 text-sm"
                 placeholder={t("default_schedule_name")}
                 {...register("name")}
               />
diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index f1c0e39443..1adae453de 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -53,7 +53,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 shadow-sm focus:ring-black sm:text-sm"
+        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 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 1120c4cb5f..d8b39c67ee 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -490,7 +490,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -621,7 +621,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                           type="number"
                           min="1"
                           max={eventType.recurringEvent.count}
-                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
                           defaultValue={eventType.recurringEvent.count}
                           onChange={(event) => {
                             setRecurringEventCount(parseInt(event?.target.value));
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 2aa30a1cec..a8ef006e54 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -437,7 +437,7 @@ const BookingPage = ({
   const disableInput = !!rescheduleUid;
   const disabledExceptForOwner = disableInput && !loggedInIsOwner;
   const inputClassName =
-    "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
+    "focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
 
   let isSmsReminderNumberNeeded = false;
 
diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index 60fe55cbff..10e18bb587 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -257,7 +257,7 @@ export default function CreateEventTypeButton(props: Props) {
                 <RadioArea.Group
                   {...register("schedulingType")}
                   onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
-                  className="relative mt-1 flex space-x-6 rounded-sm shadow-sm rtl:space-x-reverse">
+                  className="relative mt-1 flex space-x-6 rounded-sm rtl:space-x-reverse">
                   <RadioArea.Item
                     value={SchedulingType.COLLECTIVE}
                     defaultChecked={type === SchedulingType.COLLECTIVE}
diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index 35dafd11e7..dae6363d52 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/eventtype/RecurringEventController.tsx
@@ -82,7 +82,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
                     defaultValue={recurringEventState.interval}
                     onChange={(event) => {
                       const newVal = {
@@ -114,7 +114,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
                     defaultValue={recurringEventState.count}
                     onChange={(event) => {
                       const newVal = {
diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
index b0b777e9f7..26917acc6f 100644
--- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
+++ b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
@@ -74,7 +74,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             type="text"
             id="label"
             required
-            className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
+            className="block w-full rounded-sm border-gray-300 text-sm"
             defaultValue={selectedCustomInput?.label}
             {...register("label", { required: true })}
           />
@@ -90,7 +90,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
             <input
               type="text"
               id="placeholder"
-              className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
+              className="block w-full rounded-sm border-gray-300 text-sm"
               defaultValue={selectedCustomInput?.placeholder}
               {...register("placeholder")}
             />
diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index 3b8562cfbf..7d2000982c 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 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 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 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index 12bc6f8374..c50a391fbd 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -70,7 +70,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
                 required
                 value={password}
                 onInput={(e) => setPassword(e.currentTarget.value)}
-                className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                className="block w-full rounded-sm border-gray-300 sm:text-sm"
               />
             </div>
 
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index ffd04c9d40..3805f7a8a9 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -139,7 +139,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   required
                   value={password}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
                 />
               </div>
 
@@ -175,7 +175,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   minLength={6}
                   inputMode="numeric"
                   onInput={(e) => setTotpCode(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
                   autoComplete="one-time-code"
                 />
               </div>
diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx
index 4983bd233e..263cd3d968 100644
--- a/apps/web/components/team/MemberChangeRoleModal.tsx
+++ b/apps/web/components/team/MemberChangeRoleModal.tsx
@@ -91,7 +91,7 @@ export default function MemberChangeRoleModal(props: {
               value={role}
               onChange={(option) => option && setRole(option)}
               id="role"
-              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
             />
           </div>
           {errorMessage && (
diff --git a/apps/web/components/team/MemberInvitationModal.tsx b/apps/web/components/team/MemberInvitationModal.tsx
index e7175c3821..7d7495d398 100644
--- a/apps/web/components/team/MemberInvitationModal.tsx
+++ b/apps/web/components/team/MemberInvitationModal.tsx
@@ -104,7 +104,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
                 id="role"
                 name="role"
-                className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
               />
             </div>
             <div className="relative flex items-start">
@@ -114,7 +114,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                   name="sendInviteEmail"
                   defaultChecked
                   id="sendInviteEmail"
-                  className="rounded-sm border-gray-300 text-black shadow-sm sm:text-sm"
+                  className="rounded-sm border-gray-300 text-black sm:text-sm"
                 />
               </div>
               <div className="text-sm ltr:ml-2 rtl:mr-2">
diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx
index 7afb99114f..b96ae5a804 100644
--- a/apps/web/components/team/TeamCreateModal.tsx
+++ b/apps/web/components/team/TeamCreateModal.tsx
@@ -63,7 +63,7 @@ export default function TeamCreate(props: Props) {
                 id="name"
                 placeholder="Acme Inc."
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
               />
             </div>
             {errorMessage && <Alert severity="error" title={errorMessage} />}
diff --git a/apps/web/components/team/TeamSettings.tsx b/apps/web/components/team/TeamSettings.tsx
index 153f1a9879..16f81c94ee 100644
--- a/apps/web/components/team/TeamSettings.tsx
+++ b/apps/web/components/team/TeamSettings.tsx
@@ -112,7 +112,7 @@ export default function TeamSettings(props: Props) {
                       id="name"
                       placeholder={t("your_team_name")}
                       required
-                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
+                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
                       defaultValue={team?.name as string}
                     />
                   }
@@ -131,7 +131,7 @@ export default function TeamSettings(props: Props) {
                           name="about"
                           rows={3}
                           defaultValue={team?.bio as string}
-                          className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                          className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
                         />
                         <p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
                       </>
@@ -152,7 +152,7 @@ export default function TeamSettings(props: Props) {
                             name="avatar"
                             id="avatar"
                             placeholder="URL"
-                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
+                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
                             defaultValue={team?.logo ?? undefined}
                           />
                           <ImageUploader
diff --git a/apps/web/components/ui/Avatar.tsx b/apps/web/components/ui/Avatar.tsx
index 4d2fef6832..d20056d095 100644
--- a/apps/web/components/ui/Avatar.tsx
+++ b/apps/web/components/ui/Avatar.tsx
@@ -40,7 +40,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-black p-2 text-sm text-white shadow-sm">
+      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/apps/web/components/ui/AvatarSSR.tsx b/apps/web/components/ui/AvatarSSR.tsx
index 12d1e38302..a019d6d764 100644
--- a/apps/web/components/ui/AvatarSSR.tsx
+++ b/apps/web/components/ui/AvatarSSR.tsx
@@ -50,7 +50,7 @@ export function AvatarSSR(props: AvatarProps) {
   return title ? (
     <Tooltip.Tooltip delayDuration={300}>
       <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white shadow-sm">
+      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
         <Tooltip.Arrow />
         {title}
       </Tooltip.Content>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index f46a76f7d9..8f86a9465e 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -183,7 +183,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       <div style={{ display: "flex", justifyItems: "center" }}>
         <Label htmlFor="username">{t("username")}</Label>
       </div>
-      <div className="mt-1 flex rounded-md shadow-sm">
+      <div className="mt-1 flex rounded-md">
         <span
           className={classNames(
             "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 2b6ac2c9f7..ce7c337ba9 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -109,7 +109,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
       <div>
         <Label htmlFor="username">{t("username")}</Label>
       </div>
-      <div className="mt-1 flex rounded-md shadow-sm">
+      <div className="mt-1 flex rounded-md">
         <span
           className={classNames(
             "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
diff --git a/apps/web/components/ui/colorpicker.tsx b/apps/web/components/ui/colorpicker.tsx
index 62e3c3cdb0..6ba71a26d2 100644
--- a/apps/web/components/ui/colorpicker.tsx
+++ b/apps/web/components/ui/colorpicker.tsx
@@ -87,7 +87,7 @@ const ColorPicker = (props: ColorPickerProps) => {
         </div>
       )}
       <HexColorInput
-        className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm sm:text-sm"
+        className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
         color={color}
         onChange={(val) => {
           setColor(val);
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index 6edb71dfb3..e1b74c499a 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -18,7 +18,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 shadow-sm sm:text-sm",
+        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 sm:text-sm",
         className
       )}
       clearIcon={null}
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 7a0387bc0a..cd0cbf3352 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -16,7 +16,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
         </div>
       )}
       <div className="w-full">
-        <div className="relative rounded-sm shadow-sm">
+        <div className="relative rounded-sm">
           <input
             {...rest}
             ref={ref}
diff --git a/apps/web/components/ui/form/PhoneInput.tsx b/apps/web/components/ui/form/PhoneInput.tsx
index b10f57d86b..53440046b5 100644
--- a/apps/web/components/ui/form/PhoneInput.tsx
+++ b/apps/web/components/ui/form/PhoneInput.tsx
@@ -19,7 +19,7 @@ function PhoneInput<FormValues>({ control, name, ...rest }: PhoneInputProps<Form
       control={control}
       countrySelectProps={{ className: "text-black" }}
       numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
-      className="border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500"
     />
   );
 }
diff --git a/apps/web/components/ui/form/TimezoneSelect.tsx b/apps/web/components/ui/form/TimezoneSelect.tsx
index a6c9ac84d4..698bc1b45f 100644
--- a/apps/web/components/ui/form/TimezoneSelect.tsx
+++ b/apps/web/components/ui/form/TimezoneSelect.tsx
@@ -42,7 +42,7 @@ function TimezoneSelect({ className, ...props }: SelectProps) {
         IndicatorSeparator: () => null,
         Input: InputComponent,
       }}
-      className={classNames("text-sm shadow-sm", className)}
+      className={classNames("text-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 371be2bc71..574602c418 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 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",
+          "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 sm:text-sm",
           disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
diff --git a/apps/web/ee/components/LicenseBanner.tsx b/apps/web/ee/components/LicenseBanner.tsx
index 8e547a734b..fb6c05b983 100644
--- a/apps/web/ee/components/LicenseBanner.tsx
+++ b/apps/web/ee/components/LicenseBanner.tsx
@@ -46,7 +46,7 @@ export default function LicenseBanner() {
             <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
               <Dialog>
                 <DialogTrigger asChild>
-                  <button className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 shadow-sm hover:bg-green-50">
+                  <button className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                     {t("accept_license")}
                   </button>
                 </DialogTrigger>
diff --git a/apps/web/ee/components/stripe/Payment.tsx b/apps/web/ee/components/stripe/Payment.tsx
index bde0ede125..d0294f95c4 100644
--- a/apps/web/ee/components/stripe/Payment.tsx
+++ b/apps/web/ee/components/stripe/Payment.tsx
@@ -12,7 +12,7 @@ import { useLocale } from "@lib/hooks/useLocale";
 const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
   iconStyle: "solid" as const,
   classes: {
-    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md shadow-sm dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
+    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
   },
   style: {
     base: {
diff --git a/apps/web/ee/components/support/HelpMenuItem.tsx b/apps/web/ee/components/support/HelpMenuItem.tsx
index aa3b5bef12..757b71db2e 100644
--- a/apps/web/ee/components/support/HelpMenuItem.tsx
+++ b/apps/web/ee/components/support/HelpMenuItem.tsx
@@ -41,7 +41,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
   };
 
   return (
-    <div className="w-full border-gray-300 bg-white shadow-sm">
+    <div className="w-full border-gray-300 bg-white">
       <div className="w-full py-5">
         <p className="mb-1 px-5 text-neutral-500">{t("resources").toUpperCase()}</p>
         <a
@@ -86,7 +86,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           name="comment"
           rows={3}
           onChange={(event) => setComment(event.target.value)}
-          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 shadow-sm sm:text-sm"
+          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 sm:text-sm"
         />
 
         <div className="my-3 flex justify-end">
diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
index 8de7650a5c..35308514a5 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx
@@ -61,7 +61,7 @@ export default function TeamAvailabilityModal(props: Props) {
               value={selectedTimeZone}
               onChange={(timezone) => setSelectedTimeZone(timezone.value)}
               classNamePrefix="react-select"
-              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
             />
           </div>
           <div>
diff --git a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
index 51d5071dc3..55ae53e831 100644
--- a/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
+++ b/apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx
@@ -81,7 +81,7 @@ export default function TeamAvailabilityScreen(props: Props) {
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="react-select-container w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm"
+            className="react-select-container w-full rounded-sm border border-gray-300 sm:text-sm"
           />
         </div>
         <div className="hidden sm:block">
diff --git a/apps/web/ee/components/workflows/NewWorkflowButton.tsx b/apps/web/ee/components/workflows/NewWorkflowButton.tsx
index ee1473cdfa..b62d7355bb 100644
--- a/apps/web/ee/components/workflows/NewWorkflowButton.tsx
+++ b/apps/web/ee/components/workflows/NewWorkflowButton.tsx
@@ -152,7 +152,7 @@ export function NewWorkflowButton() {
                     type="number"
                     min="1"
                     defaultValue={24}
-                    className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 shadow-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
+                    className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
                     {...form.register("time", { valueAsNumber: true })}
                   />
                   <div className="w-28">
diff --git a/apps/web/ee/components/workflows/WorkflowStepContainer.tsx b/apps/web/ee/components/workflows/WorkflowStepContainer.tsx
index c303b7f3b8..23230283bd 100644
--- a/apps/web/ee/components/workflows/WorkflowStepContainer.tsx
+++ b/apps/web/ee/components/workflows/WorkflowStepContainer.tsx
@@ -123,7 +123,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     type="number"
                     min="1"
                     defaultValue={form.getValues("time") || 24}
-                    className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm shadow-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
+                    className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
                     {...form.register("time", { valueAsNumber: true })}
                   />
                   <div className="w-28">
@@ -241,7 +241,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         countrySelectProps={{ className: "text-black" }}
                         numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }}
                         className={classNames(
-                          "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 shadow-sm ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500",
+                          "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500",
                           !editNumberMode ? "text-gray-500 dark:text-gray-500" : ""
                         )}
                       />
@@ -322,7 +322,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         type="text"
                         disabled={!editEmailBodyMode}
                         className={classNames(
-                          "border-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 px-2 font-sans text-sm shadow-sm ring-black 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 px-2 font-sans text-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
                           !editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
                         )}
                         {...form.register(`steps.${step.stepNumber - 1}.emailSubject`)}
@@ -334,7 +334,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </label>
                   <TextArea
                     className={classNames(
-                      "border-1 focus-within:border-brand mb-2 block w-full rounded-sm border border-gray-300 p-2 text-sm shadow-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
+                      "border-1 focus-within:border-brand mb-2 block w-full rounded-sm border border-gray-300 p-2 text-sm ring-black focus-within:ring-1 dark:border-black dark:bg-black dark:text-white",
                       !editEmailBodyMode ? "text-gray-500 dark:text-gray-500" : ""
                     )}
                     rows={5}
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index c5265eefd3..b3bde58ac2 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -152,7 +152,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                       type="password"
                       autoComplete="password"
                       required
-                      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"
+                      className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 focus:outline-none focus:ring-black sm:text-sm"
                     />
                   </div>
                 </div>
@@ -161,7 +161,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                   <button
                     type="submit"
                     disabled={loading}
-                    className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
+                    className={`flex w-full justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 ${
                       loading ? "cursor-not-allowed" : ""
                     }`}>
                     {loading && (
diff --git a/apps/web/pages/auth/signup.tsx b/apps/web/pages/auth/signup.tsx
index 10bffc4868..1ca8103f21 100644
--- a/apps/web/pages/auth/signup.tsx
+++ b/apps/web/pages/auth/signup.tsx
@@ -101,14 +101,14 @@ export default function Signup({ email }: Props) {
                 />
                 <EmailField
                   {...register("email")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   labelProps={{
                     className: "block text-sm font-medium text-gray-700",
                   }}
                   {...register("password")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   label={t("confirm_password")}
@@ -119,7 +119,7 @@ export default function Signup({ email }: Props) {
                     validate: (value) =>
                       value === methods.watch("password") || (t("error_password_mismatch") as string),
                   })}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                 />
               </div>
               <div className="flex space-x-2 rtl:space-x-reverse">
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 5da94055d1..224798a858 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -99,7 +99,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
               render={({ field: { onChange, value } }) => (
                 <TimezoneSelect
                   value={value}
-                  className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+                  className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
                   onChange={(timezone) => onChange(timezone.value)}
                 />
               )}
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index 63c364dd97..e8a9682347 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/apps/web/pages/getting-started.tsx
@@ -318,7 +318,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="token"
                   placeholder={t("access_token")}
                   required
-                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 />
                 <Button type="submit" className="mt-1 ml-4 h-10">
                   {t("import")}
@@ -349,7 +349,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   placeholder={t("your_name")}
                   defaultValue={props.user.name ?? enteredName}
                   required
-                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 />
               </fieldset>
 
@@ -367,7 +367,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="timeZone"
                   value={selectedTimeZone}
                   onChange={({ value }) => setSelectedTimeZone(value)}
-                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                 />
               </fieldset>
             </section>
@@ -473,7 +473,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 placeholder={t("your_name")}
                 defaultValue={props.user.name || enteredName}
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
               />
             </fieldset>
             <fieldset>
@@ -486,7 +486,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 name="bio"
                 id="bio"
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
                 defaultValue={props.user.bio || undefined}
               />
               <p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">
diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx
index 4cfedd8814..d20b2ad56f 100644
--- a/apps/web/pages/settings/profile.tsx
+++ b/apps/web/pages/settings/profile.tsx
@@ -237,7 +237,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     autoComplete="given-name"
                     placeholder={t("your_name")}
                     required
-                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                     defaultValue={user.name || undefined}
                   />
                 </div>
@@ -253,7 +253,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     name="email"
                     id="email"
                     placeholder={t("your_email")}
-                    className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                     defaultValue={user.email}
                   />
                   <p className="mt-2 text-sm text-gray-500" id="email-description">
@@ -274,7 +274,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     placeholder={t("little_something_about")}
                     rows={3}
                     defaultValue={user.bio || undefined}
-                    className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
                   />
                 </div>
               </div>
@@ -292,7 +292,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     name="avatar"
                     id="avatar"
                     placeholder="URL"
-                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
                     defaultValue={imageSrc}
                   />
                   <div className="flex items-center px-5">
@@ -327,7 +327,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="languageSelect"
                     value={selectedLanguage || props.localeProp}
                     onChange={(v) => v && setSelectedLanguage(v)}
-                    className="mt-1 block w-full rounded-sm capitalize shadow-sm  sm:text-sm"
+                    className="mt-1 block w-full rounded-sm capitalize  sm:text-sm"
                     options={localeOptions}
                   />
                 </div>
@@ -341,7 +341,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="timeZone"
                     value={selectedTimeZone}
                     onChange={(v) => v && setSelectedTimeZone(v)}
-                    className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
+                    className="mt-1 block w-full rounded-sm sm:text-sm"
                   />
                 </div>
               </div>
@@ -354,7 +354,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="timeFormatSelect"
                     value={selectedTimeFormat || user.timeFormat}
                     onChange={(v) => v && setSelectedTimeFormat(v)}
-                    className="mt-1 block w-full rounded-sm  capitalize shadow-sm  sm:text-sm"
+                    className="mt-1 block w-full rounded-sm  capitalize  sm:text-sm"
                     options={timeFormatOptions}
                   />
                 </div>
@@ -368,7 +368,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="weekStart"
                     value={selectedWeekStartDay}
                     onChange={(v) => v && setSelectedWeekStartDay(v)}
-                    className="mt-1 block w-full rounded-sm capitalize shadow-sm sm:text-sm"
+                    className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
                     options={[
                       { value: "Sunday", label: nameOfDay(props.localeProp, 0) },
                       { value: "Monday", label: nameOfDay(props.localeProp, 1) },
@@ -411,7 +411,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     defaultValue={selectedTheme || themeOptions[0]}
                     value={selectedTheme || themeOptions[0]}
                     onChange={(v) => v && setSelectedTheme(v)}
-                    className="mt-1 block w-full rounded-sm shadow-sm sm:text-sm"
+                    className="mt-1 block w-full rounded-sm sm:text-sm"
                     options={themeOptions}
                   />
                 </div>
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 23c5882010..79a9196968 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -113,7 +113,7 @@ function RedirectionToast({ url }: { url: string }) {
                   onClick={() => {
                     redirectToExternalUrl(urlWithSuccessParams);
                   }}
-                  className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 shadow-sm hover:bg-green-50">
+                  className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                   {t("continue")}
                 </button>
               </div>
@@ -563,7 +563,7 @@ export default function Success(props: SuccessProps) {
                           name="email"
                           id="email"
                           defaultValue={router.query.email}
-                          className="focus:border-brand border-bookinglightest mt-0 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"
+                          className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button size="lg" type="submit" className="min-w-max" color="primary">
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index b1a1e251d0..48344ee00c 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -22,8 +22,8 @@
     }
 
     .no-scrollbar {
-      -ms-overflow-style: none;  /* IE and Edge */
-      scrollbar-width: none;  /* Firefox */
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none; /* Firefox */
     }
   }
 }
@@ -76,27 +76,27 @@ button[role="switch"][data-state="checked"] span {
 @layer components {
   /* Primary buttons */
   .btn-xs.btn-primary {
-    @apply inline-flex items-center rounded border border-transparent bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded border border-transparent bg-neutral-900 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-sm.btn-primary {
-    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-3 py-2 text-sm font-medium leading-4 text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn.btn-primary {
-    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-lg.btn-primary {
-    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-base font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-xl.btn-primary {
-    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-transparent bg-neutral-900 px-6 py-3 text-base font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-wide.btn-primary {
-    @apply w-full rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-center text-sm font-medium text-white shadow-sm hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply w-full rounded-sm border border-transparent bg-neutral-900 px-4 py-2 text-center text-sm font-medium text-white hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   /* Secondary buttons */
@@ -126,27 +126,27 @@ button[role="switch"][data-state="checked"] span {
 
   /* White buttons */
   .btn-xs.btn-white {
-    @apply inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-sm.btn-white {
-    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn.btn-white {
-    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-lg.btn-white {
-    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-xl.btn-white {
-    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply inline-flex items-center rounded-sm border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
 
   .btn-wide.btn-white {
-    @apply w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
+    @apply w-full rounded-sm border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2;
   }
   /* btn icon */
   .btn-icon {
@@ -166,7 +166,7 @@ button[role="switch"][data-state="checked"] span {
   }
 
   .slider .slider-thumb {
-    @apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 shadow-sm transition-all;
+    @apply block h-3 w-3 cursor-pointer rounded-full bg-neutral-700 transition-all;
   }
 
   .slider .slider-thumb:hover {
@@ -225,7 +225,7 @@ button[role="switch"][data-state="checked"] span {
 }
 
 .react-multi-email > [type="text"] {
-  @apply focus:border-brand block w-full rounded-[2px] border-gray-300 shadow-sm 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-[2px] border-gray-300 focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:text-sm;
 }
 
 .react-multi-email [data-tag] {
@@ -258,7 +258,7 @@ button[role="switch"][data-state="checked"] span {
 }
 
 .react-multi-email [data-tag] {
-  @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 shadow-sm 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-neutral-900 dark:text-white dark:hover:bg-neutral-700;
+  @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-neutral-900 dark:text-white dark:hover:bg-neutral-700;
 }
 
 .react-multi-email [data-tag] [data-tag-item] {
@@ -403,50 +403,52 @@ hr {
 }
 
 /* animations */
-.slideInBottom { 
-  animation-duration: .3s;
+.slideInBottom {
+  animation-duration: 0.3s;
   animation-fill-mode: both;
-  animation-name: slideInBottom 
+  animation-name: slideInBottom;
 }
 
 @keyframes slideInBottom {
-    from {
-        opacity: 0;
-        transform: translateY(30%);
-    }
-    to { opacity: 1 }
+  from {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* animations */
-.slideInTop { 
-  animation-duration: .3s;
+.slideInTop {
+  animation-duration: 0.3s;
   animation-fill-mode: both;
-  animation-name: slideInTop 
+  animation-name: slideInTop;
 }
 
 @keyframes slideInTop {
-    from {
-        opacity: 0;
-      transform: translateY(-20%);
-
-    }
-    to { 
-      opacity: 1;
-      transform: translateY(0%);
-
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-20%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
 }
 
-.fadeIn { 
-  animation-duration: .3s;
+.fadeIn {
+  animation-duration: 0.3s;
   animation-fill-mode: both;
   animation-name: fadeIn;
   animation-timing-function: ease-in-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to { opacity: 1 }
-}
\ No newline at end of file
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}