diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 8b43b53287..9f84cd7c9c 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -13,7 +13,7 @@ import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import Button from "@calcom/ui/Button";
import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
import { Icon, StarIconSolid } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Input, Label } from "@calcom/ui/v2";
export enum UsernameChangeStatusEnum {
NORMAL = "NORMAL",
@@ -210,7 +210,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
{process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
@@ -225,13 +225,14 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
autoCorrect="none"
disabled={disabled}
className={classNames(
- "mt-0 rounded-md rounded-l-none border-l-2 focus:!ring-0",
+ "border-l-1 mb-0 mt-0 rounded-md rounded-l-none font-sans text-sm leading-4 focus:!ring-0",
isInputUsernamePremium
- ? "border-2 border-orange-400 focus:border-2 focus:border-orange-400"
- : "border-2 focus:border-2",
+ ? "border-1 focus:border-1 border-orange-400 focus:border-orange-400"
+ : "border-1 focus:border-2",
markAsError
? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none"
- : "border-l-gray-300 "
+ : "border-l-gray-300",
+ disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
)}
value={inputUsernameValue}
onChange={(event) => {
@@ -248,11 +249,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
usernameIsAvailable ? "" : ""
)}>
{isInputUsernamePremium ? : <>>}
- {!isInputUsernamePremium && usernameIsAvailable ? (
-
- ) : (
- <>>
- )}
+ {!isInputUsernamePremium && usernameIsAvailable ? : <>>}
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index b892881a24..c891c05da7 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -10,7 +10,7 @@ import { AppRouter } from "@calcom/trpc/server/routers/_app";
import Button from "@calcom/ui/Button";
import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Input, Label } from "@calcom/ui/v2";
interface ICustomUsernameProps {
currentUsername: string | undefined;
@@ -122,7 +122,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
autoCapitalize="none"
autoCorrect="none"
className={classNames(
- "mt-0 rounded-md rounded-l-none",
+ "mb-0 mt-0 rounded-md rounded-l-none",
markAsError
? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
: ""
@@ -136,7 +136,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
/>
{currentUsername !== inputUsernameValue && (
-
+
{usernameIsAvailable ? : <>>}
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index 04d779cdc7..ced5361218 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -26,7 +26,7 @@ export const Input = forwardRef(function Input(pro
{...props}
ref={ref}
className={classNames(
- "mb-[7px] block h-9 w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+ "mb-2 block h-9 w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
props.className
)}
/>