fix: ux audit changes (calcom#26875)

* fix: ux audit changes

* fix: remove locale-insensitive toLowerCase() on translation

Remove .toLowerCase() call on t('minutes') translation as it is
locale-insensitive and can corrupt translations (e.g., Turkish
dotted/dotless 'i'). The translation itself should provide the
desired casing.

Addresses Cubic AI review feedback with confidence 9/10.

Co-Authored-By: unknown <>

* fix: redirect url tool tip not working

* fix: type check

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: Amit91848

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx

@@ -159,16 +159,16 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
         subtitle={t("routing_forms_description")}>
         <UpgradeTip
           plan="team"
-          title={t("teams_plan_required")}
-          description={t("routing_forms_are_a_great_way")}
+          title={t("routing_that_grows_with_you")}
+          description={t("routing_forms_upgrade_description")}
           features={features}
           background="/tips/routing-forms"
           isParentLoading={<SkeletonLoaderTeamList />}
           buttons={
             <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
-                  {t("upgrade")}
+                  {t("get_started")}
                 </Button>
                 <Button color="minimal" href="https://cal.com/routing" target="_blank">
                   {t("learn_more")}

apps/web/components/apps/CalendarListContainer.tsx

@@ -169,8 +169,8 @@ export function CalendarListContainer({
         })}
         description={t(`no_category_apps_description_calendar`)}
         buttonRaw={
-          <Button color="secondary" data-testid="connect-calendar-apps" href="/apps/categories/calendar">
-            {t(`connect_calendar_apps`)}
+          <Button EndIcon="external-link" color="secondary" data-testid="connect-calendar-apps" href="/apps/categories/calendar">
+            {t("connect_your_first_calendar")}
           </Button>
         }
       />

apps/web/components/apps/routing-forms/FormActions.tsx

@@ -173,10 +173,7 @@ export const FormActionsDropdown = ({
             type="button"
             variant="icon"
             color="secondary"
-            className={classNames(
-              disabled && "opacity-30",
-              "ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
-            )}
+            className={classNames(disabled && "opacity-30")}
             StartIcon="ellipsis"
           />
         </DropdownMenuTrigger>

apps/web/modules/data-table/components/DataTable.tsx

@@ -173,7 +173,8 @@ export function DataTable<TData>({
                         width: `var(--header-${kebabCase(header?.id)}-size)`,
                       }}
                       className={classNames(
-                        "relative flex shrink-0 items-center",
+                        "relative flex items-center",
+                        column.columnDef.meta?.autoWidth ? "grow" : "shrink-0",
                         "bg-cal-muted",
                         column.getIsPinned() && "top-0 z-20 sm:sticky"
                       )}>

apps/web/modules/ee/workflows/components/AddActionDialog.tsx

@@ -143,7 +143,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent type="creation" title={t("add_action")}>
-        <div className="-mt-3 space-x-3">
+        <div className="space-x-3">
           <Form
             form={form}
             handleSubmit={(values) => {

apps/web/modules/ee/workflows/components/WorkflowCreationDialog.tsx

@@ -168,7 +168,7 @@ export function WorkflowCreationDialog({
             type="button"
             onClick={handleContinue}
             loading={createMutation.isPending || isLoading}>
-            {t("continue")}
+            {t("create")}
           </Button>
         </DialogFooter>
       </DialogContent>

apps/web/modules/event-types/components/EventTypeLayout.tsx

@@ -135,7 +135,7 @@ function EventTypeSingleLayout({
                     formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
                   }
                   side="bottom">
-                  <div className="self-center rounded-md p-2">
+                  <div className="self-center rounded-md">
                     <Switch
                       id="hiddenSwitch"
                       disabled={eventTypesLockedByOrg}

apps/web/modules/event-types/components/locations/CalVideoSettings.tsx

@@ -15,6 +15,7 @@ import { Tooltip } from "@calcom/ui/components/tooltip";
 import { UpgradeTeamsBadgeWebWrapper as UpgradeTeamsBadge } from "@calcom/web/modules/billing/components/UpgradeTeamsBadgeWebWrapper";
 import { useHasTeamPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
 import LocationSettingsContainer from "@calcom/web/modules/event-types/components/locations/LocationSettingsContainer";
+import { InfoBadge } from "@calcom/ui/components/badge";
 
 const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSettingsType }) => {
   const { t } = useLocale();
@@ -30,7 +31,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
           aria-expanded={isExpanded}
           onClick={() => setIsExpanded(!isExpanded)}
           className={classNames(
-            "todesktop:py-[7px] text-default group flex w-full items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
+            "cursor-pointer todesktop:py-[7px] text-default group flex w-full items-center rounded-md px-2 pt-1.5 text-sm font-medium transition",
             "[&[aria-current='page']]:!bg-transparent",
             "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm"
           )}>
@@ -169,7 +170,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
             />
 
             <TextField
-              label={t("enter_redirect_url_on_exit_description")}
+              label={<div className="flex gap-1 items-center">{t("redirect_url")}<InfoBadge content={t("enter_redirect_url_on_exit_description")} /></div>}
               defaultValue={calVideoSettings?.redirectUrlOnExit || ""}
               data-testid="calVideoSettings.redirectUrlOnExit"
               containerClassName="mt-4"

apps/web/modules/settings/my-account/general-view.tsx

@@ -24,6 +24,7 @@ import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTravelSchedules } from "@calcom/web/app/cache/travelSchedule";
 
 import TravelScheduleModal from "@components/settings/TravelScheduleModal";
+import { Icon } from "@calcom/ui/components/icon";
 
 export type FormValues = {
   locale: {
@@ -317,6 +318,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
               )}
             />
             <div className="text-gray text-subtle mt-2 flex items-center text-xs">
+              <Icon name="info" className="mr-2" />
               {t("timeformat_profile_hint")}
             </div>
             <Controller

apps/web/modules/signup-view.tsx

@@ -400,7 +400,7 @@ export default function Signup({
                 </p>
               )}
               {IS_CALCOM && (
-                <div className="mt-4">
+                <div className="mt-12">
                   <SelectField
                     label={t("data_region")}
                     value={{
@@ -453,7 +453,7 @@ export default function Signup({
 
             {/* Form Container */}
             {displayEmailForm && (
-              <div className="mt-12">
+              <div className="mt-6">
                 <Form
                   className="flex flex-col gap-4"
                   form={formMethods}
@@ -614,10 +614,10 @@ export default function Signup({
               </div>
             )}
             {!displayEmailForm && (
-              <div className="mt-12">
+              <div className="mt-8 flex flex-col gap-6">
                 {/* Upper Row */}
-                <div className="mt-6 flex flex-col gap-2 md:flex-row">
-                  {isGoogleLoginEnabled ? (
+                {isGoogleLoginEnabled && (
+                  <div className="flex flex-col gap-2 md:flex-row">
                     <Button
                       color="primary"
                       loading={isGoogleLoading}
@@ -664,11 +664,11 @@ export default function Signup({
                       }}>
                       {t("continue_with_google")}
                     </Button>
-                  ) : null}
-                </div>
+                  </div>
+                )}
 
                 {isGoogleLoginEnabled && (
-                  <div className="mt-6">
+                  <div>
                     <div className="relative flex items-center">
                       <div className="border-subtle grow border-t" />
                       <span className="text-subtle mx-2 shrink text-sm font-normal leading-none">
@@ -680,7 +680,7 @@ export default function Signup({
                 )}
 
                 {/* Lower Row */}
-                <div className="mt-6 flex flex-col gap-2">
+                <div className="flex flex-col gap-2">
                   <Button
                     color="secondary"
                     disabled={isGoogleLoading}