Merge branch 'main' of https://github.com/formbricks/formbricks into chore/upgrade-web-tailwind4

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/OnboardingSetupInstructions.tsx

@@ -101,17 +101,17 @@ export const OnboardingSetupInstructions = ({
       <div>
         {activeTab === "npm" ? (
           <div className="prose prose-slate w-full">
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               npm install @formbricks/js
             </CodeBlock>
             <p>{t("common.or")}</p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="sh">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="sh">
               yarn add @formbricks/js
             </CodeBlock>
             <p className="text-sm text-slate-700">
               {t("environments.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
             </p>
-            <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+            <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
             </CodeBlock>
             <Button id="onboarding-inapp-connect-read-npm-docs" className="mt-3" variant="secondary" asChild>
@@ -125,11 +125,11 @@ export const OnboardingSetupInstructions = ({
           </div>
         ) : activeTab === "html" ? (
           <div className="prose prose-slate">
-            <p className="-mb-1 mt-6 text-sm text-slate-700">
+            <p className="mt-6 -mb-1 text-sm text-slate-700">
               {t("environments.connect.insert_this_code_into_the_head_tag_of_your_website")}
             </p>
             <div>
-              <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
+              <CodeBlock customEditorClass="bg-white! border border-slate-200" language="js">
                 {channel === "app" ? htmlSnippetForAppSurveys : htmlSnippetForWebsiteSurveys}
               </CodeBlock>
             </div>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -44,7 +44,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -49,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -80,7 +80,7 @@ export const LandingSidebar = ({
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+            className="w-full rounded-br-xl border-t py-4 pl-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
             <div tabIndex={0} className={cn("flex cursor-pointer flex-row items-center space-x-3")}>
               <ProfileAvatar userId={user.id} imageUrl={user.imageUrl} />
               <>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/channel/page.tsx

@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/mode/page.tsx

@@ -47,7 +47,7 @@ const Page = async (props: ModePageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/components/ProjectSettings.tsx

@@ -218,7 +218,7 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
+      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow-sm">
         {logoUrl && (
           <Image
             src={logoUrl}

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/projects/new/settings/page.tsx

@@ -65,7 +65,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-5 mt-0! text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionClassesTable.tsx

@@ -36,7 +36,7 @@ export const ActionClassesTable = ({
 
   return (
     <>
-      <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
         {TableHeading}
         <div id="actionClassesWrapper" className="flex flex-col">
           {actionClasses.length > 0 ? (

apps/web/app/(app)/environments/[environmentId]/actions/components/ActionRowData.tsx

@@ -14,9 +14,7 @@ export const ActionClassDataRow = ({
     <div className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
       <div className="col-span-4 flex items-center pl-6 text-sm">
         <div className="flex items-center">
-          <div className="h-5 w-5 flex-shrink-0 text-slate-500">
-            {ACTION_TYPE_ICON_LOOKUP[actionClass.type]}
-          </div>
+          <div className="h-5 w-5 shrink-0 text-slate-500">{ACTION_TYPE_ICON_LOOKUP[actionClass.type]}</div>
           <div className="ml-4 text-left">
             <div className="font-medium text-slate-900">{actionClass.name}</div>
             <div className="text-xs text-slate-400">{actionClass.description}</div>

apps/web/app/(app)/environments/[environmentId]/actions/loading.tsx

@@ -10,7 +10,7 @@ const Loading = () => {
     <>
       <PageContentWrapper>
         <PageHeader pageTitle={t("common.actions")} />
-        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
           <div className="grid h-12 grid-cols-6 content-center border-b border-slate-200 text-left text-sm font-semibold text-slate-900">
             <span className="sr-only">{t("common.edit")}</span>
             <div className="col-span-4 pl-6">{t("environments.actions.user_actions")}</div>
@@ -22,7 +22,7 @@ const Loading = () => {
               className="m-2 grid h-16 grid-cols-6 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
               <div className="col-span-4 flex items-center pl-6 text-sm">
                 <div className="flex items-center">
-                  <div className="h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
+                  <div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-slate-200 text-slate-500" />
                   <div className="ml-4 text-left">
                     <div className="font-medium text-slate-900">
                       <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
@@ -33,7 +33,7 @@ const Loading = () => {
                   </div>
                 </div>
               </div>
-              <div className="col-span-2 my-auto flex justify-center whitespace-nowrap text-center text-sm text-slate-500">
+              <div className="col-span-2 my-auto flex justify-center text-center text-sm whitespace-nowrap text-slate-500">
                 <div className="h-4 w-28 animate-pulse rounded-full bg-slate-200"></div>
               </div>
             </div>

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -265,7 +265,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-hidden"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -332,7 +332,7 @@ export const MainNavigation = ({
                 <DropdownMenuTrigger
                   asChild
                   id="userDropdownTrigger"
-                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
                   <div
                     tabIndex={0}
                     className={cn(

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -18,7 +18,7 @@ export const TopControlBar = ({
 }: SideBarProps) => {
   return (
     <div className="fixed inset-0 top-0 z-30 flex h-14 w-full items-center justify-end bg-slate-50 px-6">
-      <div className="shadow-xs z-10">
+      <div className="z-10 shadow-2xs">
         <div className="flex w-fit items-center space-x-2 py-2">
           <TopControlButtons
             environment={environment}

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/EditAlerts.tsx

@@ -56,7 +56,7 @@ export const EditAlerts = ({
                   <TooltipTrigger>
                     <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
                       <span>{t("environments.settings.notifications.every_response")}</span>
-                      <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
+                      <HelpCircleIcon className="h-4 w-4 shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -99,7 +99,7 @@ export const EditAlerts = ({
                 ))}
               </div>
             ) : (
-              <div className="m-2 flex h-16 items-center justify-center rounded bg-slate-50 text-sm text-slate-500">
+              <div className="m-2 flex h-16 items-center justify-center rounded-sm bg-slate-50 text-sm text-slate-500">
                 <p>{t("common.no_surveys_found")}</p>
               </div>
             )}

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/IntegrationsTip.tsx

@@ -11,7 +11,7 @@ export const IntegrationsTip = ({ environmentId }: IntegrationsTipProps) => {
   const { t } = useTranslate();
   return (
     <div>
-      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+      <div className="flex max-w-4xl items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-xs md:space-y-0 md:text-base">
         <SlackIcon className="mr-3 h-4 w-4 text-blue-400" />
         <p className="text-sm">
           {t("environments.settings.notifications.need_slack_or_discord_notifications")}?

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileAvatarForm.tsx

@@ -105,7 +105,7 @@ export const EditProfileAvatarForm = ({ session, environmentId, imageUrl }: Edit
     <div>
       <div className="relative h-10 w-10 overflow-hidden rounded-full">
         {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
             <svg className="h-7 w-7 animate-spin text-slate-200" viewBox="0 0 24 24">
               <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
               <path

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -97,7 +97,7 @@ const Page = async (props) => {
       </PageHeader>
       {isEnterpriseEdition ? (
         <div>
-          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-xs">
             <div className="space-y-4 p-8">
               <div className="flex items-center gap-x-2">
                 <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
@@ -152,7 +152,7 @@ const Page = async (props) => {
               </p>
             </div>
           </div>
-          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-xs">
             <div className="p-8">
               <h2 className="mr-2 inline-flex text-2xl font-bold text-slate-700">
                 {t("environments.settings.enterprise.enterprise_features")}

apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsCard.tsx

@@ -25,7 +25,7 @@ export const SettingsCard = ({
   return (
     <div
       className={cn(
-        "relative my-4 w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-sm",
+        "relative my-4 w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 text-left shadow-xs",
         className
       )}
       id={title}>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableCell.tsx

@@ -36,7 +36,7 @@ export const ResponseTableCell = ({
   // Conditional rendering of maximize icon
   const renderMaximizeIcon = cell.column.id === "createdAt" && (
     <div
-      className="hidden flex-shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300"
+      className="hidden shrink-0 cursor-pointer items-center rounded-md border border-slate-200 bg-white p-2 group-hover:flex hover:border-slate-300"
       onClick={handleCellClick}>
       <Maximize2Icon className="h-4 w-4" />
     </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/AddressSummary.tsx

@@ -20,7 +20,7 @@ interface AddressSummaryProps {
 export const AddressSummary = ({ questionSummary, environmentId, survey, locale }: AddressSummaryProps) => {
   const { t } = useTranslate();
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CTASummary.tsx

@@ -16,7 +16,7 @@ export const CTASummary = ({ questionSummary, survey }: CTASummaryProps) => {
   const { t } = useTranslate();
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         survey={survey}
         questionSummary={questionSummary}
@@ -40,7 +40,7 @@ export const CTASummary = ({ questionSummary, survey }: CTASummaryProps) => {
           </>
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         <div className="text flex justify-between px-2 pb-2">
           <div className="mr-8 flex space-x-1">
             <p className="font-semibold text-slate-700">CTR</p>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary.tsx

@@ -16,9 +16,9 @@ export const CalSummary = ({ questionSummary, survey }: CalSummaryProps) => {
   const { t } = useTranslate();
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         <div>
           <div className="text flex justify-between px-2 pb-2">
             <div className="mr-8 flex space-x-1">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx

@@ -39,9 +39,9 @@ export const ConsentSummary = ({ questionSummary, survey, setFilter }: ConsentSu
     },
   ];
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {summaryItems.map((summaryItem) => {
           return (
             <div

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ContactInfoSummary.tsx

@@ -25,7 +25,7 @@ export const ContactInfoSummary = ({
 }: ContactInfoSummaryProps) => {
   const { t } = useTranslate();
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div>
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx

@@ -46,7 +46,7 @@ export const DateQuestionSummary = ({
   };
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/FileUploadSummary.tsx

@@ -36,7 +36,7 @@ export const FileUploadSummary = ({
   };
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="">
         <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx

@@ -27,7 +27,7 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
     );
   };
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <div className="space-y-2 px-4 pt-6 pb-5 md:px-6">
         <div className={"align-center flex justify-between gap-4"}>
           <h3 className="pb-1 text-lg font-semibold text-slate-900 md:text-xl">{questionSummary.id}</h3>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixQuestionSummary.tsx

@@ -45,14 +45,14 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
     : [];
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="overflow-x-auto p-6">
         {/* Summary Table  */}
         <table className="mx-auto border-collapse cursor-default text-left">
           <thead>
             <tr>
-              <th className="p-4 pb-3 pt-0 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
+              <th className="p-4 pt-0 pb-3 font-medium text-slate-400 dark:border-slate-600 dark:text-slate-200"></th>
               {columns.map((column) => (
                 <th key={column} className="text-center font-medium">
                   <TooltipRenderer tooltipContent={getTooltipContent(column)} shouldRender={true}>
@@ -65,7 +65,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
           <tbody>
             {questionSummary.data.map(({ rowLabel, columnPercentages }, rowIndex) => (
               <tr key={rowLabel}>
-                <td className="max-w-60 overflow-hidden text-ellipsis whitespace-nowrap p-4">
+                <td className="max-w-60 overflow-hidden p-4 text-ellipsis whitespace-nowrap">
                   <TooltipRenderer tooltipContent={getTooltipContent(rowLabel)} shouldRender={true}>
                     <p className="max-w-40 overflow-hidden text-ellipsis whitespace-nowrap">{rowLabel}</p>
                   </TooltipRenderer>
@@ -83,7 +83,7 @@ export const MatrixQuestionSummary = ({ questionSummary, survey, setFilter }: Ma
                       )}>
                       <div
                         style={{ backgroundColor: `rgba(0,196,184,${getOpacityLevel(percentage)})` }}
-                        className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded p-4 text-sm text-slate-950 hover:outline"
+                        className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded-sm p-4 text-sm text-slate-950 hover:outline"
                         onClick={() =>
                           setFilter(
                             questionSummary.question.id,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx

@@ -65,7 +65,7 @@ export const MultipleChoiceSummary = ({
   };
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx

@@ -60,16 +60,16 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
   };
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {["promoters", "passives", "detractors", "dismissed"].map((group) => (
           <div className="cursor-pointer hover:opacity-80" key={group} onClick={() => applyFilter(group)}>
             <div
               className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
               <div className="mr-8 flex space-x-1">
                 <p
-                  className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                  className={`font-semibold text-slate-700 capitalize ${group === "dismissed" ? "" : "text-slate-700"}`}>
                   {group}
                 </p>
                 <div>
@@ -91,7 +91,7 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
         ))}
       </div>
 
-      <div className="flex justify-center pb-4 pt-4">
+      <div className="flex justify-center pt-4 pb-4">
         <HalfCircle value={questionSummary.score} />
       </div>
     </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/OpenTextSummary.tsx

@@ -60,7 +60,7 @@ export const OpenTextSummary = ({
   ];
 
   return (
-    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/PictureChoiceSummary.tsx

@@ -30,7 +30,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
   const results = questionSummary.choices;
   const { t } = useTranslate();
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}
@@ -43,7 +43,7 @@ export const PictureChoiceSummary = ({ questionSummary, survey, setFilter }: Pic
           ) : undefined
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {results.map((result, index) => (
           <div
             className="cursor-pointer hover:opacity-80"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RankingSummary.tsx

@@ -17,16 +17,16 @@ export const RankingSummary = ({ questionSummary, surveyType, survey }: RankingS
   });
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {results.map((result, resultsIdx) => (
           <div key={result.value} className="group cursor-pointer">
             <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
               <div className="mr-8 flex w-full justify-between space-x-1 sm:justify-normal">
                 <div className="flex w-full items-center">
                   <span className="mr-2 text-slate-400">#{resultsIdx + 1}</span>
-                  <div className="rounded bg-slate-100 px-2 py-1">{result.value}</div>
+                  <div className="rounded-sm bg-slate-100 px-2 py-1">{result.value}</div>
                   <span className="ml-auto flex items-center space-x-1">
                     <span className="font-bold text-slate-600">
                       #{convertFloatToNDecimal(result.avgRanking, 2)}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/RatingSummary.tsx

@@ -37,7 +37,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
   }, [questionSummary]);
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <QuestionSummaryHeader
         questionSummary={questionSummary}
         survey={survey}
@@ -50,7 +50,7 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
           </div>
         }
       />
-      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+      <div className="space-y-5 px-4 pt-4 pb-6 text-sm md:px-6 md:text-base">
         {questionSummary.choices.map((result) => (
           <div
             className="cursor-pointer hover:opacity-80"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ScrollToTop.tsx

@@ -43,7 +43,7 @@ const ScrollToTop: React.FC<ScrollToTopProps> = ({ containerId }) => {
   return (
     <button
       onClick={scrollToTop}
-      className={`fixed bottom-4 right-4 z-[1] flex h-10 w-10 justify-center rounded-md bg-slate-500 p-2 text-white transition-opacity ${
+      className={`fixed right-4 bottom-4 z-1 flex h-10 w-10 justify-center rounded-md bg-slate-500 p-2 text-white transition-opacity ${
         showButton ? "opacity-80" : "opacity-0"
       }`}>
       ↑

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs.tsx

@@ -39,7 +39,7 @@ export const SummaryDropOffs = ({ dropOff, survey }: SummaryDropOffsProps) => {
   };
 
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <div className="">
         <div className="grid h-10 grid-cols-6 items-center border-y border-slate-200 bg-slate-100 text-sm font-semibold text-slate-600">
           <div className="col-span-3 pl-4 md:pl-6">{t("common.questions")}</div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata.tsx

@@ -17,7 +17,7 @@ const StatCard = ({ label, percentage, value, tooltipText, isLoading }) => {
     <TooltipProvider delayDuration={50}>
       <Tooltip>
         <TooltipTrigger>
-          <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm">
+          <div className="flex h-full cursor-default flex-col justify-between space-y-2 rounded-xl border border-slate-200 bg-white p-4 text-left shadow-xs">
             <p className="flex items-center gap-1 text-sm text-slate-600">
               {label}
               {typeof percentage === "number" && !isNaN(percentage) && !isLoading && (
@@ -101,7 +101,7 @@ export const SummaryMetadata = ({
             <TooltipTrigger>
               <div
                 onClick={() => setShowDropOffs(!showDropOffs)}
-                className="group flex h-full w-full cursor-pointer flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm">
+                className="group flex h-full w-full cursor-pointer flex-col justify-between space-y-2 rounded-lg border border-slate-200 bg-white p-4 text-left shadow-xs">
                 <span className="text-sm text-slate-600">
                   {t("environments.surveys.summary.drop_offs")}
                   {`${Math.round(dropOffPercentage)}%` !== "NaN%" && !isLoading && (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/EmbedView.tsx

@@ -99,7 +99,7 @@ export const EmbedView = ({
                 className={cn(
                   "rounded-md px-4 py-2",
                   tab.id === activeId
-                    ? "bg-white text-slate-900 shadow-sm"
+                    ? "bg-white text-slate-900 shadow-xs"
                     : "border-transparent text-slate-700 hover:text-slate-900"
                 )}>
                 {tab.label}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx

@@ -389,7 +389,7 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
               onOpenChange={(value) => {
                 value && handleDatePickerClose();
               }}>
-              <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-none">
+              <DropdownMenuTrigger asChild className="focus:bg-muted cursor-pointer outline-hidden">
                 <div className="h-auto min-w-auto rounded-md border border-slate-200 bg-white p-3 hover:border-slate-300 sm:flex sm:px-6 sm:py-3">
                   <div className="hidden w-full items-center justify-between sm:flex">
                     <span className="text-sm text-slate-700">{t("common.download")}</span>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox.tsx

@@ -166,7 +166,7 @@ export const QuestionFilterComboBox = ({
         </div>
         <div className="relative mt-2 h-full">
           {open && (
-            <div className="animate-in bg-popover absolute top-0 z-10 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
+            <div className="animate-in bg-popover absolute top-0 z-10 max-h-52 w-full overflow-auto rounded-md bg-white outline-hidden">
               <CommandList>
                 <div className="p-2">
                   <Input

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox.tsx

@@ -177,7 +177,7 @@ export const QuestionsComboBox = ({ options, selected, onChangeValue }: Question
       </div>
       <div className="relative mt-2 h-full">
         {open && (
-          <div className="animate-in bg-popover absolute top-0 z-50 max-h-52 w-full overflow-auto rounded-md bg-white outline-none">
+          <div className="animate-in bg-popover absolute top-0 z-50 max-h-52 w-full overflow-auto rounded-md bg-white outline-hidden">
             <CommandList>
               <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
               {options?.map((data) => (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter.tsx

@@ -199,7 +199,7 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
 
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange}>
-      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded border border-slate-200 bg-white p-3 text-sm text-slate-600 hover:border-slate-300 sm:min-w-[11rem] sm:px-6 sm:py-3">
+      <PopoverTrigger className="flex min-w-[8rem] items-center justify-between rounded-sm border border-slate-200 bg-white p-3 text-sm text-slate-600 hover:border-slate-300 sm:min-w-[11rem] sm:px-6 sm:py-3">
         <span>
           Filter <b>{filterValue.filter.length > 0 && `(${filterValue.filter.length})`}</b>
         </span>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx

@@ -86,8 +86,8 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
       <DropdownMenu>
         <DropdownMenuTrigger
           asChild
-          className="focus:bg-muted cursor-pointer border border-slate-200 outline-none hover:border-slate-300">
-          <div className="min-w-auto h-auto rounded-md border bg-white p-3 sm:flex sm:min-w-[7rem] sm:px-6 sm:py-3">
+          className="focus:bg-muted cursor-pointer border border-slate-200 outline-hidden hover:border-slate-300">
+          <div className="h-auto min-w-auto rounded-md border bg-white p-3 sm:flex sm:min-w-[7rem] sm:px-6 sm:py-3">
             <div className="hidden w-full items-center justify-between sm:flex">
               <span className="text-sm text-slate-700">
                 {t("environments.surveys.summary.share_results")}

apps/web/app/api/v1/og/route.tsx

@@ -35,7 +35,7 @@ export const GET = async (req: NextRequest) => {
               <div tw="flex rounded-2xl absolute -right-2 mt-2">
                 <a tw={`rounded-xl border border-transparent bg-[${brandColor}] h-18 w-38 opacity-50`}></a>
               </div>
-              <div tw="flex rounded-2xl shadow ">
+              <div tw="flex rounded-2xl shadow-sm ">
                 <a
                   tw={`flex items-center justify-center rounded-xl border border-transparent bg-[${brandColor}] text-2xl text-white h-18 w-38`}>
                   Begin!

apps/web/modules/analysis/components/SingleResponseCard/components/QuestionSkip.tsx

@@ -88,7 +88,7 @@ export const QuestionSkip = ({
           {status === "aborted" && (
             <div className="flex">
               <div
-                className="flex w-0.5 flex-grow items-start justify-center"
+                className="flex w-0.5 grow items-start justify-center"
                 style={{
                   background:
                     "repeating-linear-gradient(to bottom,  rgb(148 163 184),  rgb(148 163 184) 2px, transparent 2px, transparent 10px)", // adjust the 2px to change dot size and 10px to change space between dots

apps/web/modules/analysis/components/SingleResponseCard/components/ResponseNote.tsx

@@ -100,14 +100,14 @@ export const ResponseNotes = ({
   return (
     <div
       className={clsx(
-        "absolute w-1/4 rounded-lg border border-slate-200 shadow-sm transition-all",
+        "absolute w-1/4 rounded-lg border border-slate-200 shadow-xs transition-all",
         !isOpen && unresolvedNotes.length && "group/hint cursor-pointer bg-white hover:-right-3",
         !isOpen && !unresolvedNotes.length && "cursor-pointer bg-slate-50",
         isOpen
           ? "top-0 -right-2 h-5/6 max-h-[600px] w-1/4 bg-white"
           : unresolvedNotes.length
             ? "top-[8.33%] right-0 h-5/6 max-h-[600px] w-1/12"
-            : "top-[8.333%] right-[120px] h-5/6 max-h-[600px] w-1/12 group-hover:right-[0]"
+            : "top-[8.333%] right-[120px] h-5/6 max-h-[600px] w-1/12 group-hover:right-0"
       )}
       onClick={() => {
         if (!isOpen) setIsOpen(true);
@@ -215,7 +215,7 @@ export const ResponseNotes = ({
                   <textarea
                     rows={2}
                     className={cn(
-                      "block w-full resize-none rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:ring-0 sm:text-sm",
+                      "block w-full resize-none rounded-md border border-slate-100 bg-slate-50 p-2 shadow-xs focus:border-slate-500 focus:ring-0 sm:text-sm",
                       !isTextAreaOpen && "scale-y-0 transition-all duration-1000",
                       !isTextAreaOpen && "translate-y-8 transition-all duration-300",
                       isTextAreaOpen && "scale-y-1 transition-all duration-1000",

apps/web/modules/analysis/components/SingleResponseCard/index.tsx

@@ -116,7 +116,7 @@ export const SingleResponseCard = ({
     <div className={clsx("group relative", isOpen && "min-h-[300px]")}>
       <div
         className={clsx(
-          "relative z-20 my-6 rounded-xl border border-slate-200 bg-white shadow-sm transition-all",
+          "relative z-20 my-6 rounded-xl border border-slate-200 bg-white shadow-xs transition-all",
           pageType === "response" &&
             (isOpen
               ? "w-3/4"

apps/web/modules/auth/components/testimonial.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 export const Testimonial = async () => {
   const t = await getTranslate();
   return (
-    <div className="flex flex-col items-center justify-center bg-gradient-to-tr from-slate-100 to-slate-300">
+    <div className="flex flex-col items-center justify-center bg-linear-to-tr from-slate-100 to-slate-300">
       <div className="3xl:w-2/3 mb-10 space-y-8 px-12 xl:px-20">
         <div>
           <h2 className="text-3xl font-bold text-slate-800">{t("auth.testimonial_title")}</h2>
@@ -31,13 +31,13 @@ export const Testimonial = async () => {
           </div>
         </div>
 
-        <div className="rounded-xl border border-slate-200 bg-gradient-to-tr from-slate-100 to-slate-200 p-8">
-          <p className="italic text-slate-700">{t("auth.testimonial_1")}</p>
+        <div className="rounded-xl border border-slate-200 bg-linear-to-tr from-slate-100 to-slate-200 p-8">
+          <p className="text-slate-700 italic">{t("auth.testimonial_1")}</p>
           <div className="mt-4 flex items-center space-x-6">
             <Image
               src={Peer}
               alt="Cal.com Co-Founder Peer Richelsen"
-              className="h-28 w-28 rounded-full border border-slate-200 shadow-sm"
+              className="h-28 w-28 rounded-full border border-slate-200 shadow-xs"
             />
             <div>
               <p className="mb-1.5 text-sm text-slate-500">Peer Richelsen, Co-Founder Cal.com</p>

apps/web/modules/auth/forgot-password/components/forgot-password-form.tsx

@@ -60,7 +60,7 @@ export const ForgotPasswordForm = () => {
                       onChange={(e) => field.onChange(e)}
                       autoComplete="email"
                       required
-                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                     />
                   </FormControl>
                   {error?.message && <FormError className="text-left">{error.message}</FormError>}

apps/web/modules/auth/forgot-password/reset/components/reset-password-form.tsx

@@ -26,7 +26,7 @@ const passwordInputProps = {
   placeholder: "*******",
   required: true,
   className:
-    "focus:border-brand-dark focus:ring-brand-dark mt-2 block w-full rounded-md border-slate-300 shadow-sm sm:text-sm",
+    "focus:border-brand-dark focus:ring-brand-dark mt-2 block w-full rounded-md border-slate-300 shadow-xs sm:text-sm",
 };
 
 export const ResetPasswordForm = () => {

apps/web/modules/auth/login/components/login-form.tsx

@@ -181,7 +181,7 @@ export const LoginForm = ({
                             value={field.value}
                             onChange={(email) => field.onChange(email)}
                             placeholder="work@email.com"
-                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                           />
                           {error?.message && <FormError className="text-left">{error.message}</FormError>}
                         </div>
@@ -204,7 +204,7 @@ export const LoginForm = ({
                             aria-label="password"
                             aria-required="true"
                             required
-                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                             value={field.value}
                             onChange={(password) => field.onChange(password)}
                           />

apps/web/modules/auth/login/page.tsx

@@ -35,7 +35,7 @@ export const LoginPage = async () => {
 
   const samlSsoEnabled = isSamlSsoEnabled && SAML_OAUTH_ENABLED;
   return (
-    <div className="grid min-h-screen w-full bg-gradient-to-tr from-slate-100 to-slate-50 lg:grid-cols-5">
+    <div className="grid min-h-screen w-full bg-linear-to-tr from-slate-100 to-slate-50 lg:grid-cols-5">
       <div className="col-span-2 hidden lg:flex">
         <Testimonial />
       </div>

apps/web/modules/auth/signup/components/signup-form.tsx

@@ -222,7 +222,7 @@ export const SignupForm = ({
                               placeholder="*******"
                               aria-placeholder="password"
                               required
-                              className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md shadow-sm sm:text-sm"
+                              className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md shadow-xs sm:text-sm"
                             />
                             {error?.message && <FormError className="text-left">{error.message}</FormError>}
                           </div>

apps/web/modules/auth/signup/page.tsx

@@ -58,7 +58,7 @@ export const SignupPage = async ({ searchParams: searchParamsProps }) => {
   const emailFromSearchParams = searchParams["email"];
 
   return (
-    <div className="grid min-h-screen w-full bg-gradient-to-tr from-slate-100 to-slate-50 lg:grid-cols-5">
+    <div className="grid min-h-screen w-full bg-linear-to-tr from-slate-100 to-slate-50 lg:grid-cols-5">
       <div className="col-span-2 hidden lg:flex">
         <Testimonial />
       </div>

apps/web/modules/ee/billing/components/pricing-table.tsx

@@ -164,7 +164,7 @@ export const PricingTable = ({
                 <Button
                   size="sm"
                   variant="secondary"
-                  className="justify-center py-2 shadow-sm"
+                  className="justify-center py-2 shadow-xs"
                   onClick={openCustomerPortal}>
                   {t("environments.settings.billing.manage_card_details")}
                 </Button>
@@ -172,7 +172,7 @@ export const PricingTable = ({
             )}
           </div>
 
-          <div className="mt-2 flex flex-col rounded-xl border border-slate-200 bg-white py-4 capitalize shadow-sm dark:bg-slate-800">
+          <div className="mt-2 flex flex-col rounded-xl border border-slate-200 bg-white py-4 capitalize shadow-xs dark:bg-slate-800">
             <div
               className={cn(
                 "relative mx-8 mb-8 flex flex-col gap-4",

apps/web/modules/ee/contacts/components/upload-contacts-button.tsx

@@ -293,7 +293,7 @@ export const UploadContactsCSVButton = ({
         <div className="sticky top-0 flex h-full flex-col rounded-lg">
           <button
             className={cn(
-              "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-none sm:block"
+              "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-hidden sm:block"
             )}
             onClick={() => {
               resetState(true);

apps/web/modules/ee/contacts/segments/components/segment-table-data-row.tsx

@@ -33,7 +33,7 @@ export const SegmentTableDataRow = ({
         onClick={() => setIsEditSegmentModalOpen(true)}>
         <div className="col-span-4 flex items-center pl-6 text-sm">
           <div className="flex items-center gap-4">
-            <div className="ph-no-capture w-8 flex-shrink-0 text-slate-500">
+            <div className="ph-no-capture w-8 shrink-0 text-slate-500">
               <UsersIcon className="h-5 w-5" />
             </div>
             <div className="flex flex-col">
@@ -42,7 +42,7 @@ export const SegmentTableDataRow = ({
             </div>
           </div>
         </div>
-        <div className="col-span-1 my-auto hidden whitespace-nowrap text-center text-sm text-slate-500 sm:block">
+        <div className="col-span-1 my-auto hidden text-center text-sm whitespace-nowrap text-slate-500 sm:block">
           <div className="ph-no-capture text-slate-900">{surveys?.length}</div>
         </div>
         <div className="whitespace-wrap col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
@@ -52,7 +52,7 @@ export const SegmentTableDataRow = ({
             }).replace("about", "")}
           </div>
         </div>
-        <div className="col-span-1 my-auto hidden whitespace-normal text-center text-sm text-slate-500 sm:block">
+        <div className="col-span-1 my-auto hidden text-center text-sm whitespace-normal text-slate-500 sm:block">
           <div className="ph-no-capture text-slate-900">{format(createdAt, "do 'of' MMMM, yyyy")}</div>
         </div>
       </div>

apps/web/modules/ee/contacts/segments/components/segment-table.tsx

@@ -18,7 +18,7 @@ export const SegmentTable = async ({
 }: TSegmentTableProps) => {
   const t = await getTranslate();
   return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+    <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
       <div className="grid h-12 grid-cols-7 content-center border-b text-left text-sm font-semibold text-slate-900">
         <div className="col-span-4 pl-6">{t("common.title")}</div>
         <div className="col-span-1 hidden text-center sm:block">{t("common.surveys")}</div>

apps/web/modules/ee/contacts/segments/loading.tsx

@@ -12,7 +12,7 @@ const Loading = async () => {
         <PageHeader pageTitle="Contacts">
           <ContactsSecondaryNavigation activeId="segments" loading />
         </PageHeader>
-        <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+        <div className="rounded-xl border border-slate-200 bg-white shadow-xs">
           <div className="grid h-12 grid-cols-7 content-center border-b text-left text-sm font-semibold text-slate-900">
             <div className="col-span-4 pl-6">{t("common.title")}</div>
             <div className="col-span-1 hidden text-center sm:block">{t("common.surveys")}</div>
@@ -26,7 +26,7 @@ const Loading = async () => {
                 className="m-2 grid h-16 grid-cols-7 content-center rounded-lg transition-colors ease-in-out hover:bg-slate-100">
                 <div className="col-span-4 flex items-center pl-6 text-sm">
                   <div className="flex items-center gap-4">
-                    <UsersIcon className="h-5 w-5 flex-shrink-0 animate-pulse text-slate-500" />
+                    <UsersIcon className="h-5 w-5 shrink-0 animate-pulse text-slate-500" />
                     <div className="flex flex-col">
                       <div className="font-medium text-slate-900">
                         <div className="mt-0 h-4 w-48 animate-pulse rounded-full bg-slate-200"></div>
@@ -37,13 +37,13 @@ const Loading = async () => {
                     </div>
                   </div>
                 </div>
-                <div className="col-span-1 my-auto whitespace-nowrap text-center text-sm text-slate-500">
+                <div className="col-span-1 my-auto text-center text-sm whitespace-nowrap text-slate-500">
                   <div className="m-4 h-4 animate-pulse rounded-full bg-slate-200"></div>
                 </div>
                 <div className="whitespace-wrap col-span-1 my-auto text-center text-sm text-slate-500">
                   <div className="m-4 h-4 animate-pulse rounded-full bg-slate-200"></div>
                 </div>
-                <div className="col-span-1 my-auto whitespace-normal text-center text-sm text-slate-500">
+                <div className="col-span-1 my-auto text-center text-sm whitespace-normal text-slate-500">
                   <div className="m-4 h-4 animate-pulse rounded-full bg-slate-200"></div>
                 </div>
               </div>

apps/web/modules/ee/multi-language-surveys/components/language-indicator.tsx

@@ -64,7 +64,7 @@ export function LanguageIndicator({
               language.language.code !== languageToBeDisplayed?.language.code &&
               language.enabled && (
                 <button
-                  className="block w-full rounded-sm p-1 text-left hover:bg-slate-700"
+                  className="block w-full rounded-xs p-1 text-left hover:bg-slate-700"
                   key={language.language.id}
                   onClick={() => {
                     changeLanguage(language);

apps/web/modules/ee/teams/project-teams/loading.tsx

@@ -15,17 +15,17 @@ export const TeamsLoading = () => {
       </PageHeader>
       <div className="p-4">
         <div className="mb-4">
-          <div className="h-6 w-1/3 animate-pulse rounded bg-slate-200" />
+          <div className="h-6 w-1/3 animate-pulse rounded-sm bg-slate-200" />
         </div>
         <div className="space-y-4">
           {[...Array(3)].map((_, idx) => (
             <div
               key={idx}
-              className="flex animate-pulse items-center space-x-4 rounded border border-slate-200 p-4">
+              className="flex animate-pulse items-center space-x-4 rounded-sm border border-slate-200 p-4">
               <div className="h-10 w-10 rounded-full bg-slate-300" />
               <div className="flex-1 space-y-2">
-                <div className="h-4 w-3/4 rounded bg-slate-200" />
-                <div className="h-4 w-1/2 rounded bg-slate-200" />
+                <div className="h-4 w-3/4 rounded-sm bg-slate-200" />
+                <div className="h-4 w-1/2 rounded-sm bg-slate-200" />
               </div>
             </div>
           ))}

apps/web/modules/ee/teams/team-list/components/team-settings/team-settings-modal.tsx

@@ -207,7 +207,7 @@ export const TeamSettingsModal = ({
       <div className="sticky top-0 flex h-full flex-col rounded-lg">
         <button
           className={cn(
-            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-none sm:block"
+            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-hidden sm:block"
           )}
           onClick={closeSettingsModal}>
           <XIcon className="h-6 w-6 rounded-md bg-white" />

apps/web/modules/ee/two-factor-auth/components/confirm-password-form.tsx

@@ -86,7 +86,7 @@ export const ConfirmPasswordForm = ({
                       required
                       onChange={(password) => field.onChange(password)}
                       value={field.value}
-                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                      className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                     />
                     {error?.message && <FormError className="text-left">{error.message}</FormError>}
                   </FormItem>

apps/web/modules/ee/two-factor-auth/components/disable-two-factor-modal.tsx

@@ -101,7 +101,7 @@ export const DisableTwoFactorModal = ({ open, setOpen }: DisableTwoFactorModalPr
                           required
                           onChange={(password) => field.onChange(password)}
                           value={field.value}
-                          className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                          className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                         />
                         {error?.message && <FormError className="text-left">{error.message}</FormError>}
                       </FormItem>

apps/web/modules/ee/two-factor-auth/components/two-factor-backup.tsx

@@ -37,7 +37,7 @@ export const TwoFactorBackup = ({ form }: TwoFactorBackupProps) => {
                   id="totpBackup"
                   required
                   placeholder="XXXXX-XXXXX"
-                  className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                  className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-xs sm:text-sm"
                   value={field.value}
                   onChange={(e) => field.onChange(e.target.value)}
                 />

apps/web/modules/organization/settings/api-keys/components/add-api-key-modal.tsx

@@ -247,7 +247,7 @@ export const AddApiKeyModal = ({
                             <DropdownMenuTrigger asChild>
                               <button
                                 type="button"
-                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                 <span className="flex w-4/5 flex-1">
                                   <span className="w-full truncate text-left">{permission.projectName}</span>
                                 </span>
@@ -276,7 +276,7 @@ export const AddApiKeyModal = ({
                             <DropdownMenuTrigger asChild>
                               <button
                                 type="button"
-                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                 <span className="flex w-4/5 flex-1">
                                   <span className="w-full truncate text-left capitalize">
                                     {permission.environmentType}
@@ -307,7 +307,7 @@ export const AddApiKeyModal = ({
                             <DropdownMenuTrigger asChild>
                               <button
                                 type="button"
-                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                 <span className="flex w-4/5 flex-1">
                                   <span className="w-full truncate text-left capitalize">
                                     {permission.permission}

apps/web/modules/organization/settings/api-keys/components/edit-api-keys.tsx

@@ -169,7 +169,7 @@ export const EditAPIKeys = ({ organizationId, apiKeys, locale, isReadOnly, proje
             apiKeysLocal?.map((apiKey) => (
               <div
                 role="button"
-                className="grid h-12 w-full grid-cols-10 content-center items-center rounded-lg px-6 text-left text-sm text-slate-900 hover:bg-slate-50 focus:bg-slate-50 focus:outline-none"
+                className="grid h-12 w-full grid-cols-10 content-center items-center rounded-lg px-6 text-left text-sm text-slate-900 hover:bg-slate-50 focus:bg-slate-50 focus:outline-hidden"
                 onClick={() => {
                   setActiveKey(apiKey);
                   setViewPermissionsOpen(true);

apps/web/modules/organization/settings/api-keys/components/view-permission-modal.tsx

@@ -118,7 +118,7 @@ export const ViewPermissionModal = ({
                               <DropdownMenuTrigger asChild>
                                 <button
                                   type="button"
-                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                   <span className="flex w-4/5 flex-1">
                                     <span className="w-full truncate text-left">
                                       {getProjectName(permission.environmentId)}
@@ -135,7 +135,7 @@ export const ViewPermissionModal = ({
                               <DropdownMenuTrigger asChild>
                                 <button
                                   type="button"
-                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                   <span className="flex w-4/5 flex-1">
                                     <span className="w-full truncate text-left capitalize">
                                       {getEnvironmentName(permission.environmentId)}
@@ -152,7 +152,7 @@ export const ViewPermissionModal = ({
                               <DropdownMenuTrigger asChild>
                                 <button
                                   type="button"
-                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none">
+                                  className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden">
                                   <span className="flex w-4/5 flex-1">
                                     <span className="w-full truncate text-left capitalize">
                                       {permission.permission}

apps/web/modules/organization/settings/api-keys/loading.tsx

@@ -8,9 +8,9 @@ import { useTranslate } from "@tolgee/react";
 const LoadingCard = () => {
   const { t } = useTranslate();
   return (
-    <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 shadow-sm">
+    <div className="w-full max-w-4xl rounded-xl border border-slate-200 bg-white py-4 shadow-xs">
       <div className="grid content-center border-b border-slate-200 px-4 pb-4 text-left text-slate-900">
-        <h3 className="h-6 w-full max-w-56 animate-pulse rounded-lg bg-slate-100 text-lg font-medium leading-6"></h3>
+        <h3 className="h-6 w-full max-w-56 animate-pulse rounded-lg bg-slate-100 text-lg leading-6 font-medium"></h3>
         <p className="mt-3 h-4 w-full max-w-80 animate-pulse rounded-lg bg-slate-100 text-sm text-slate-500"></p>
       </div>
       <div className="w-full">
@@ -45,7 +45,7 @@ const Loading = ({ isFormbricksCloud }: { isFormbricksCloud: boolean }) => {
       <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
         <OrganizationSettingsNavbar isFormbricksCloud={isFormbricksCloud} activeId="api-keys" loading />
       </PageHeader>
-      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
+      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-xs md:space-y-0 md:text-base"></div>
       <LoadingCard />
     </PageContentWrapper>
   );

apps/web/modules/organization/settings/teams/components/invite-member/invite-member-modal.tsx

@@ -71,7 +71,7 @@ export const InviteMemberModal = ({
       <div className="sticky top-0 flex h-full flex-col rounded-lg">
         <button
           className={cn(
-            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-none sm:block"
+            "absolute top-0 right-0 hidden pt-4 pr-4 text-slate-400 hover:text-slate-500 focus:ring-0 focus:outline-hidden sm:block"
           )}
           onClick={() => {
             setOpen(false);

apps/web/modules/projects/components/project-switcher/index.tsx

@@ -124,7 +124,7 @@ export const ProjectSwitcher = ({
         <DropdownMenuTrigger
           asChild
           id="projectDropdownTrigger"
-          className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+          className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-hidden">
           <div
             tabIndex={0}
             className={cn(

apps/web/modules/projects/settings/(setup)/app-connection/loading.tsx

@@ -38,7 +38,7 @@ export const AppConnectionLoading = () => {
       <PageHeader pageTitle={t("common.project_configuration")}>
         <ProjectConfigNavigation activeId="app-connection" loading />
       </PageHeader>
-      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base"></div>
+      <div className="mt-4 flex max-w-4xl animate-pulse items-center space-y-4 rounded-lg border bg-blue-50 p-6 text-sm text-blue-900 shadow-xs md:space-y-0 md:text-base"></div>
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/modules/projects/settings/look/components/edit-placement-form.tsx

@@ -114,12 +114,12 @@ export const EditPlacementForm = ({ project, isReadOnly }: EditPlacementProps) =
             <div
               className={cn(
                 clickOutsideClose ? "" : "cursor-not-allowed",
-                "relative ml-8 h-40 w-full rounded",
+                "relative ml-8 h-40 w-full rounded-sm",
                 overlayStyle
               )}>
               <div
                 className={cn(
-                  "absolute h-16 w-16 cursor-default rounded bg-slate-700",
+                  "absolute h-16 w-16 cursor-default rounded-sm bg-slate-700",
                   getPlacementStyle(currentPlacement)
                 )}></div>
             </div>

apps/web/modules/projects/settings/look/loading.tsx

@@ -145,8 +145,8 @@ export const ProjectLookSettingsLoading = () => {
                 </div>
               ))}
             </RadioGroup>
-            <div className="relative ml-8 h-40 w-full rounded bg-slate-200">
-              <div className={cn("absolute bottom-3 h-16 w-16 rounded bg-slate-700 sm:right-3")}></div>
+            <div className="relative ml-8 h-40 w-full rounded-sm bg-slate-200">
+              <div className={cn("absolute bottom-3 h-16 w-16 rounded-sm bg-slate-700 sm:right-3")}></div>
             </div>
           </div>
           <Button className="pointer-events-none mt-4 animate-pulse cursor-not-allowed bg-slate-200 select-none">

apps/web/modules/survey/components/question-form-input/components/recall-item-select.tsx

@@ -192,7 +192,7 @@ export const RecallItemSelect = ({
                     setShowRecallItemSelect(false);
                   }}
                   autoFocus={false}
-                  className="flex w-full cursor-pointer items-center rounded-md p-2 focus:bg-slate-200 focus:outline-none"
+                  className="flex w-full cursor-pointer items-center rounded-md p-2 focus:bg-slate-200 focus:outline-hidden"
                   onKeyDown={(e) => {
                     if (e.key === "ArrowUp" && index === 0) {
                       document.getElementById("recallItemSearchInput")?.focus();

apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx

@@ -255,7 +255,7 @@ export const RecallWrapper = ({
               <Button
                 variant="ghost"
                 type="button"
-                className="absolute top-full right-2 z-[1] flex h-6 cursor-pointer items-center rounded-t-none rounded-b-lg bg-slate-100 px-2.5 py-0 text-xs hover:bg-slate-200"
+                className="absolute top-full right-2 z-1 flex h-6 cursor-pointer items-center rounded-t-none rounded-b-lg bg-slate-100 px-2.5 py-0 text-xs hover:bg-slate-200"
                 onClick={(e) => {
                   e.preventDefault();
                   setShowFallbackInput(true);

apps/web/modules/survey/components/template-list/components/template-filters.tsx

@@ -41,8 +41,8 @@ export const TemplateFilters = ({
               className={cn(
                 selectedFilter[index] === null
                   ? "bg-slate-800 font-semibold text-white"
-                  : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-none",
-                "rounded border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
+                  : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-hidden",
+                "rounded-sm border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
               )}>
               {index === 0
                 ? t("environments.surveys.templates.all_channels")
@@ -59,8 +59,8 @@ export const TemplateFilters = ({
                 className={cn(
                   selectedFilter[index] === filter.value
                     ? "bg-slate-800 font-semibold text-white"
-                    : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-none",
-                  "rounded border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
+                    : "bg-white text-slate-700 hover:bg-slate-100 focus:scale-105 focus:bg-slate-100 focus:ring-0 focus:outline-hidden",
+                  "rounded-sm border border-slate-800 px-2 py-1 text-xs transition-all duration-150"
                 )}>
                 {t(filter.label)}
               </button>

apps/web/modules/survey/components/template-list/components/template-tags.tsx

@@ -93,17 +93,21 @@ export const TemplateTags = ({ template, selectedFilter }: TemplateTagsProps) =>
 
   return (
     <div className="flex flex-wrap gap-1.5">
-      <div className={cn("rounded border px-1.5 py-0.5 text-xs", roleBasedStyling)}>{t(roleTag ?? "")}</div>
+      <div className={cn("rounded-sm border px-1.5 py-0.5 text-xs", roleBasedStyling)}>
+        {t(roleTag ?? "")}
+      </div>
       {industryTag && (
         <div
-          className={cn("rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500")}>
+          className={cn(
+            "rounded-sm border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500"
+          )}>
           {industryTag}
         </div>
       )}
       {channelTag && (
         <div
           className={cn(
-            "flex-nowrap rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500"
+            "flex-nowrap rounded-sm border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500"
           )}>
           {channelTag}
         </div>
@@ -112,7 +116,7 @@ export const TemplateTags = ({ template, selectedFilter }: TemplateTagsProps) =>
         <TooltipRenderer
           tooltipContent={t("environments.surveys.templates.uses_branching_logic")}
           shouldRender={true}>
-          <SplitIcon className="h-5 w-5 rounded border border-slate-300 bg-slate-50 p-0.5 text-slate-400" />
+          <SplitIcon className="h-5 w-5 rounded-sm border border-slate-300 bg-slate-50 p-0.5 text-slate-400" />
         </TooltipRenderer>
       )}
     </div>

apps/web/modules/survey/components/template-list/components/template.tsx

@@ -46,7 +46,7 @@ export const Template = ({
       key={template.name}
       className={cn(
         activeTemplate?.name === template.name && "ring-2 ring-slate-400",
-        "group relative cursor-pointer rounded-lg bg-white p-6 shadow transition-all duration-120 duration-150 hover:ring-2 hover:ring-slate-300"
+        "group relative cursor-pointer rounded-lg bg-white p-6 shadow-sm transition-all duration-120 duration-150 hover:ring-2 hover:ring-slate-300"
       )}>
       <TemplateTags template={template} selectedFilter={selectedFilter} />
       <h3 className="text-md mt-3 mb-1 text-left font-bold text-slate-700">{template.name}</h3>

apps/web/modules/survey/components/template-list/index.tsx

@@ -105,7 +105,7 @@ export const TemplateList = ({
   };
 
   return (
-    <main className="relative z-0 flex-1 overflow-y-auto px-6 pb-6 pt-2 focus:outline-none">
+    <main className="relative z-0 flex-1 overflow-y-auto px-6 pt-2 pb-6 focus:outline-hidden">
       {showFilters && !templateSearch && (
         <TemplateFilters
           selectedFilter={selectedFilter}

apps/web/modules/survey/editor/components/add-question-button.tsx

@@ -55,7 +55,7 @@ export const AddQuestionButton = ({ addQuestion, project, isCxMode }: AddQuestio
           <button
             type="button"
             key={questionType.id}
-            className="group relative mx-2 inline-flex items-center justify-between rounded p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
+            className="group relative mx-2 inline-flex items-center justify-between rounded-sm p-0.5 px-4 py-2 text-sm font-medium text-slate-700 last:mb-2 hover:bg-slate-100 hover:text-slate-800"
             onClick={() => {
               addQuestion({
                 ...universalQuestionPresets,

apps/web/modules/survey/editor/components/animated-survey-bg.tsx

@@ -88,7 +88,7 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
                 <source src={`${key}`} type="video/mp4" />
               </video>
               <input
-                className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white"
+                className="absolute top-2 right-2 h-4 w-4 rounded-xs bg-white"
                 type="checkbox"
                 checked={animation === value}
                 onChange={() => handleBg(value)}

apps/web/modules/survey/editor/components/placement.tsx

@@ -50,12 +50,12 @@ export const Placement = ({
         <div
           className={cn(
             clickOutsideClose ? "" : "cursor-not-allowed",
-            "relative ml-8 h-40 w-full rounded",
+            "relative ml-8 h-40 w-full rounded-sm",
             overlayStyle
           )}>
           <div
             className={cn(
-              "absolute h-16 w-16 cursor-default rounded bg-slate-700",
+              "absolute h-16 w-16 cursor-default rounded-sm bg-slate-700",
               getPlacementStyle(currentPlacement)
             )}></div>
         </div>

apps/web/modules/survey/editor/components/rating-type-dropdown.tsx

@@ -35,7 +35,7 @@ export const Dropdown = ({ options, defaultValue, onSelect, disabled = false }:
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
-          className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300">
+          className="flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300">
           <span className="flex flex-1">
             {selectedOption.icon && <selectedOption.icon className="mr-3 h-5 w-5" />}
             <span>{selectedOption ? selectedOption.label : "Select an option"}</span>
@@ -53,7 +53,7 @@ export const Dropdown = ({ options, defaultValue, onSelect, disabled = false }:
           {options.map((option) => (
             <DropdownMenu.Item
               key={option.value}
-              className="flex cursor-pointer items-center p-3 hover:bg-slate-100 hover:outline-none data-[disabled]:cursor-default data-[disabled]:opacity-50"
+              className="flex cursor-pointer items-center p-3 hover:bg-slate-100 hover:outline-hidden data-disabled:cursor-default data-disabled:opacity-50"
               disabled={disabled || option.disabled}
               onSelect={() => handleSelect(option)}>
               {option.icon && <option.icon className="mr-3 h-5 w-5" />}

apps/web/modules/survey/editor/components/survey-editor.tsx

@@ -163,7 +163,7 @@ export const SurveyEditor = ({
       />
       <div className="relative z-0 flex flex-1 overflow-hidden">
         <main
-          className="relative z-0 w-1/2 flex-1 overflow-y-auto bg-slate-50 focus:outline-none"
+          className="relative z-0 w-1/2 flex-1 overflow-y-auto bg-slate-50 focus:outline-hidden"
           ref={surveyEditorRef}>
           <SurveyEditorTabs
             activeId={activeView}
@@ -239,7 +239,7 @@ export const SurveyEditor = ({
           )}
         </main>
 
-        <aside className="group hidden flex-1 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-200 bg-slate-100 shadow-inner md:flex md:flex-col">
+        <aside className="group hidden flex-1 shrink-0 items-center justify-center overflow-hidden border-l border-slate-200 bg-slate-100 shadow-inner md:flex md:flex-col">
           <PreviewSurvey
             survey={localSurvey}
             questionId={activeQuestionId}

apps/web/modules/survey/editor/components/survey-menu-bar.tsx

@@ -188,7 +188,7 @@ export const SurveyMenuBar = ({
           toast.error(`${messageSplit} ${invalidLanguageLabels.join(", ")}`);
         } else {
           toast.error(currentError.message, {
-            className: "w-fit !max-w-md",
+            className: "w-fit max-w-md!",
           });
         }
 
@@ -329,7 +329,7 @@ export const SurveyMenuBar = ({
           />
         </div>
         {responseCount > 0 && (
-          <div className="flex items-center rounded-lg border border-amber-200 bg-amber-100 p-1.5 text-amber-800 shadow-sm lg:mx-auto">
+          <div className="flex items-center rounded-lg border border-amber-200 bg-amber-100 p-1.5 text-amber-800 shadow-xs lg:mx-auto">
             <TooltipProvider delayDuration={50}>
               <Tooltip>
                 <TooltipTrigger>

apps/web/modules/survey/editor/components/unsplash-images.tsx

@@ -192,7 +192,7 @@ export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashS
   return (
     <div className="relative mt-2 w-full">
       <div className="relative">
-        <SearchIcon className="absolute left-2 top-1/2 h-6 w-4 -translate-y-1/2 text-slate-500" />
+        <SearchIcon className="absolute top-1/2 left-2 h-6 w-4 -translate-y-1/2 text-slate-500" />
         <Input
           value={query}
           onChange={handleChange}
@@ -215,7 +215,7 @@ export const ImageFromUnsplashSurveyBg = ({ handleBgChange }: ImageFromUnsplashS
                 className="h-full cursor-pointer rounded-lg object-cover"
               />
               {image.authorName && (
-                <span className="absolute bottom-1 right-1 hidden rounded bg-black bg-opacity-75 px-2 py-1 text-xs text-white group-hover:block">
+                <span className="absolute right-1 bottom-1 hidden rounded-sm bg-black/75 px-2 py-1 text-xs text-white group-hover:block">
                   {image.authorName}
                 </span>
               )}

apps/web/modules/survey/follow-ups/components/follow-up-action-multi-email-input.tsx

@@ -73,11 +73,11 @@ const FollowUpActionMultiEmailInput = ({
         {emails.map((email, index) => (
           <div
             key={index}
-            className="group flex items-center gap-1 rounded border border-slate-200 bg-slate-100 px-2 py-1 text-sm">
+            className="group flex items-center gap-1 rounded-sm border border-slate-200 bg-slate-100 px-2 py-1 text-sm">
             <span className="text-slate-900">{email}</span>
             <button
               onClick={() => removeEmail(index)}
-              className="px-1 text-lg font-medium leading-none text-slate-500">
+              className="px-1 text-lg leading-none font-medium text-slate-500">
               ×
             </button>
           </div>

apps/web/modules/survey/link/components/legal-footer.tsx

@@ -20,7 +20,7 @@ export const LegalFooter = ({
   if (!IMPRINT_URL && !PRIVACY_URL && !IS_FORMBRICKS_CLOUD) return null;
 
   return (
-    <div className="absolute bottom-0 z-[1500] h-10 w-full" role="contentinfo">
+    <div className="absolute bottom-0 z-1500 h-10 w-full" role="contentinfo">
       <div className="mx-auto flex h-full max-w-2xl items-center justify-center p-2 text-center text-xs text-slate-500">
         {IMPRINT_URL && (
           <Link href={IMPRINT_URL} target="_blank" className="hover:underline" tabIndex={-1}>

apps/web/modules/survey/link/components/link-survey-wrapper.tsx

@@ -82,7 +82,7 @@ export const LinkSurveyWrapper = ({
             {!styling.isLogoHidden && project.logo?.url && <ClientLogo projectLogo={project.logo} />}
             <div className="h-full w-full max-w-4xl space-y-6 px-1.5">
               {isPreview && (
-                <div className="fixed top-0 left-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-sm">
+                <div className="fixed top-0 left-0 flex w-full items-center justify-between bg-slate-600 p-2 px-4 text-center text-sm text-white shadow-xs">
                   <div />
                   Survey Preview 👀
                   <ResetProgressButton onClick={handleResetSurvey} />

apps/web/modules/survey/link/components/survey-inactive.tsx

@@ -29,7 +29,7 @@ export const SurveyInactive = async ({
   };
 
   return (
-    <div className="flex h-full flex-col items-center justify-between bg-gradient-to-br from-slate-200 to-slate-50 px-4 py-8 text-center">
+    <div className="flex h-full flex-col items-center justify-between bg-linear-to-br from-slate-200 to-slate-50 px-4 py-8 text-center">
       <div></div>
       <div className="flex flex-col items-center space-y-3 text-slate-300">
         {icons[status]}

apps/web/modules/survey/link/components/survey-link-used.tsx

@@ -16,7 +16,7 @@ export const SurveyLinkUsed = ({ singleUseMessage }: SurveyLinkUsedProps) => {
   const defaultHeading = t("s.survey_already_answered_heading");
   const defaultSubheading = t("s.survey_already_answered_subheading");
   return (
-    <div className="flex min-h-screen flex-col items-center justify-between bg-gradient-to-tr from-slate-200 to-slate-50 py-8 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-between bg-linear-to-tr from-slate-200 to-slate-50 py-8 text-center">
       <div></div>
       <div className="flex flex-col items-center space-y-3 text-slate-300">
         <CheckCircle2Icon className="h-20 w-20" />

apps/web/modules/survey/link/components/survey-loading-animation.tsx

@@ -113,7 +113,7 @@ export const SurveyLoadingAnimation = ({
   return (
     <div
       className={cn(
-        "absolute inset-0 z-[5000] flex items-center justify-center transition-colors duration-1000",
+        "absolute inset-0 z-5000 flex items-center justify-center transition-colors duration-1000",
         isReadyToTransition ? "bg-transparent" : "bg-white",
         isHidden && "hidden"
       )}>

apps/web/modules/survey/link/components/verify-email.tsx

@@ -170,7 +170,7 @@ export const VerifyEmail = ({
         {!emailSent && showPreviewQuestions && (
           <div>
             <p className="text-2xl font-bold">{t("s.question_preview")}</p>
-            <div className="bg-opacity-20 mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50 p-8 text-slate-700">
+            <div className="mt-4 flex w-full flex-col justify-center rounded-lg border border-slate-200 bg-slate-50/20 p-8 text-slate-700">
               {localSurvey.questions.map((question, index) => (
                 <p
                   key={index}

apps/web/modules/survey/link/not-found.tsx

@@ -7,7 +7,7 @@ import footerLogo from "./lib/footerlogo.svg";
 
 export const LinkSurveyNotFound = () => {
   return (
-    <div className="flex h-full flex-col items-center justify-between bg-gradient-to-br from-slate-200 to-slate-50 py-8 text-center">
+    <div className="flex h-full flex-col items-center justify-between bg-linear-to-br from-slate-200 to-slate-50 py-8 text-center">
       <div></div>
       <div className="flex flex-col items-center space-y-3 text-slate-300">
         <HelpCircleIcon className="h-20 w-20" />,

apps/web/modules/survey/list/components/survey-card.tsx

@@ -64,7 +64,7 @@ export const SurveyCard = ({
     <>
       <div
         className={cn(
-          "grid w-full grid-cols-8 place-items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 pr-8 shadow-sm transition-colors ease-in-out",
+          "grid w-full grid-cols-8 place-items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 pr-8 shadow-xs transition-colors ease-in-out",
           !isDraftAndReadOnly && "hover:border-slate-400"
         )}>
         <div className="col-span-2 flex max-w-full items-center justify-self-start text-sm font-medium text-slate-900">

apps/web/modules/survey/list/components/survey-filter-dropdown.tsx

@@ -31,7 +31,7 @@ export const SurveyFilterDropdown = ({
   toggleDropdown,
 }: SurveyFilterDropdownProps) => {
   const { t } = useTranslate();
-  const triggerClasses = `surveyFilterDropdown min-w-auto h-8 rounded-md border border-slate-700 sm:px-2 cursor-pointer outline-none 
+  const triggerClasses = `surveyFilterDropdown min-w-auto h-8 rounded-md border border-slate-700 sm:px-2 cursor-pointer outline-hidden 
     ${selectedOptions.length > 0 ? "bg-slate-900 text-white" : "hover:bg-slate-900"}`;
 
   return (

apps/web/modules/survey/list/components/survey-filters.tsx

@@ -177,8 +177,8 @@ export const SurveyFilters = ({
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
-            className="surveyFilterDropdown h-full cursor-pointer border border-slate-700 outline-none hover:bg-slate-900">
-            <div className="min-w-auto h-8 rounded-md border sm:flex sm:px-2">
+            className="surveyFilterDropdown h-full cursor-pointer border border-slate-700 outline-hidden hover:bg-slate-900">
+            <div className="h-8 min-w-auto rounded-md border sm:flex sm:px-2">
               <div className="hidden w-full items-center justify-between hover:text-white sm:flex">
                 <span className="text-sm">
                   {t("common.sort_by")}:{" "}

apps/web/modules/survey/list/components/survey-loading.tsx

@@ -7,7 +7,7 @@ export const SurveyLoading = () => {
         return (
           <div
             key={i}
-            className="relative flex h-16 flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition-all ease-in-out">
+            className="relative flex h-16 flex-col justify-between rounded-xl border border-slate-200 bg-white p-4 shadow-xs transition-all ease-in-out">
             <div className="flex w-full items-center justify-between">
               <div className="h-4 w-32 rounded-xl bg-slate-400"></div>
               <div className="h-4 w-20 rounded-xl bg-slate-200"></div>

apps/web/modules/survey/templates/components/formbricks-ai-card.tsx

@@ -49,7 +49,7 @@ export const FormbricksAICard = ({ environmentId }: FormbricksAICardProps) => {
   };
 
   return (
-    <Card className="mx-auto w-full bg-gradient-to-tr from-slate-100 to-slate-200">
+    <Card className="mx-auto w-full bg-linear-to-tr from-slate-100 to-slate-200">
       <CardHeader>
         <CardTitle className="text-2xl font-bold">Formbricks AI</CardTitle>
         <CardDescription>{t("environments.surveys.edit.formbricks_ai_description")}</CardDescription>
@@ -69,7 +69,7 @@ export const FormbricksAICard = ({ environmentId }: FormbricksAICardProps) => {
       </CardContent>
       <CardFooter>
         <Button
-          className="w-full shadow-sm"
+          className="w-full shadow-xs"
           type="submit"
           onClick={handleSubmit}
           variant="secondary"