fix: booker phone input style (#8165)

* fix: text area styles

* fix: phone input styles

* fix: use the text area component

* fix: remove focus style

apps/web/styles/globals.css

@@ -229,10 +229,7 @@ select:focus {
   --tw-ring-color: var(--brand-color);
   border-color: var(--brand-color);
 }
-/*  https://stackoverflow.com/a/69308190 */
-input[type="text"]:focus {
-  box-shadow: none;
-}
+
 
 @layer components {
   .scroll-bar {

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx

@@ -7,7 +7,7 @@ import type {
   ProviderProps,
 } from "react-awesome-query-builder";
 
-import { Button as CalButton, SelectWithValidation as Select, TextField } from "@calcom/ui";
+import { Button as CalButton, SelectWithValidation as Select, TextField, TextArea } from "@calcom/ui";
 import { FiTrash, FiPlus } from "@calcom/ui/components/icon";
 
 export type CommonProps<
@@ -79,13 +79,12 @@ const TextAreaWidget = (props: TextLikeComponentPropsRAQB) => {
 
   const textValue = value || "";
   return (
-    <textarea
+    <TextArea
       value={textValue}
       placeholder={placeholder}
       disabled={readOnly}
       onChange={onChange}
       maxLength={maxLength}
-      className=" border-default bg-default dark:bg-muted text-default disabled:bg-emphasis disabled:dark:text-subtle placeholder:text-subtle block w-full rounded-md text-sm focus:ring-black disabled:hover:cursor-not-allowed "
       {...customProps}
       {...remainingProps}
     />
@@ -112,7 +111,6 @@ const TextWidget = (props: TextLikeComponentPropsRAQB) => {
     <TextField
       containerClassName="w-full"
       type={type}
-      className="focus:border-brand-default bg-default dark:bg-muted  border-default disabled:bg-emphasis focus:ring-brand block w-full rounded-md text-sm disabled:hover:cursor-not-allowed"
       value={textValue}
       labelSrOnly={noLabel}
       placeholder={placeholder}

packages/ui/components/form/inputs/Input.tsx

@@ -276,7 +276,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "hover:border-emphasis border-default text-default focus:border-emphasis placeholder:text-subtle focus:ring-emphasis bg-default block w-full rounded-md border py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-1",
+        "hover:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default mb-2 block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 disabled:cursor-not-allowed",
         props.className
       )}
     />

packages/ui/form/PhoneInput.tsx

@@ -4,6 +4,7 @@ import BasePhoneInput from "react-phone-number-input";
 import type { Props, Country } from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 
+import { classNames } from "@calcom/lib";
 import { trpc } from "@calcom/trpc/react";
 
 export type PhoneInputProps = Props<{
@@ -27,9 +28,12 @@ function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps
       onChange={onChange}
       countrySelectProps={{ className: "text-emphasis" }}
       numberInputProps={{
-        className: "border-0 text-sm focus:ring-0 dark:bg-muted text-default",
+        className: "border-0 text-sm focus:ring-0 bg-default text-default",
       }}
-      className={`${className} focus-within:border-brand-default border-default disabled:text-subtle disabled:dark:text-subtle  ring-emphasis block w-full rounded-md rounded-sm border border py-px pl-3 focus-within:ring-1 disabled:opacity-50 `}
+      className={classNames(
+        "hover:border-emphasis border-default bg-default rounded-md border py-px pl-3 focus-within:border-neutral-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-neutral-800 focus-within:ring-offset-1 disabled:cursor-not-allowed",
+        className
+      )}
     />
   );
 }