Modal updates (#4289)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/v2/eventtype/EditLocationDialog.tsx

@@ -225,6 +225,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
         )}
         <Form
           form={locationFormMethods}
+          className="space-y-4"
           handleSubmit={async (values) => {
             const { locationType: newLocation, displayLocationPublicly } = values;
 
@@ -284,7 +285,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                           : locationOptions
                       }
                       isSearchable={false}
-                      className="my-4 block w-full min-w-0 flex-1 rounded-md border border-gray-300 text-sm"
                       onChange={(val) => {
                         if (val) {
                           locationFormMethods.setValue("locationType", val.value);

apps/web/components/v2/settings/EnableTwoFactorModal.tsx

@@ -5,7 +5,7 @@ import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import { Form } from "@calcom/ui/v2/core/form/fields";
+import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
@@ -140,21 +140,15 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
         <WithStep step={SetupStep.ConfirmPassword} current={step}>
           <form onSubmit={handleSetup}>
             <div className="mb-4">
-              <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
-                {t("password")}
-              </label>
-              <div className="mt-1">
-                <input
-                  type="password"
-                  name="password"
-                  id="password"
-                  required
-                  value={password}
-                  onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
-                />
-              </div>
-
+              <TextField
+                label={t("password")}
+                type="password"
+                name="password"
+                id="password"
+                required
+                value={password}
+                onInput={(e) => setPassword(e.currentTarget.value)}
+              />
               {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
             </div>
           </form>

packages/app-store/ee/routing_forms/components/FormActions.tsx

@@ -23,6 +23,7 @@ import {
   showToast,
   Switch,
   TextField,
+  TextAreaField,
 } from "@calcom/ui/v2";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -101,16 +102,13 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
           <div className="mt-3 space-y-4">
             <TextField label={t("title")} required placeholder="A Routing Form" {...register("name")} />
             <div className="mb-5">
-              <h3 className="mb-2 text-base font-medium leading-6 text-gray-900">Description</h3>
-              <div className="w-full">
-                <textarea
-                  id="description"
-                  data-testid="description"
-                  className="block w-full rounded-sm border-gray-300 text-sm "
-                  placeholder="Form Description"
-                  {...register("description")}
-                />
-              </div>
+              <TextAreaField
+                id="description"
+                label={t("description")}
+                {...register("description")}
+                data-testid="description"
+                placeholder="Form Description"
+              />
             </div>
           </div>
           <div className="mt-8 flex flex-row-reverse gap-x-2">

packages/ui/v2/core/form/fields.tsx

@@ -34,7 +34,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
 
 export function Label(props: JSX.IntrinsicElements["label"]) {
   return (
-    <label {...props} className={classNames("block pb-2 text-sm font-medium text-gray-700", props.className)}>
+    <label
+      {...props}
+      className={classNames("block pb-2 text-sm font-medium leading-none text-gray-700", props.className)}>
       {props.children}
     </label>
   );