4382 onboarding fix the disabled state of the username in step 1 (#4451)

* Convert username availability premium to v2 * Update Username Availability to v2 design Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
calcom · Sep 14, 2022 · f1c15f4 · f1c15f4
1 parent 3f29df1
commit f1c15f4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git 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) => {
       <div className="mt-2 flex rounded-md">
         <span
           className={classNames(
-            isInputUsernamePremium ? "border-2 border-orange-400 " : "",
+            isInputUsernamePremium ? "border-1 border-orange-400 " : "",
             "hidden items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
           )}>
           {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 ? <StarIconSolid className="mt-[4px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? (
-                <Icon.FiCheck className="mt-[7px] w-6" />
-              ) : (
-                <></>
-              )}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
             </span>
           </div>
         </div>

diff --git 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 && (
             <div className="absolute right-[2px] top-0 flex flex-row">
-              <span className={classNames("mx-2 py-1")}>
+              <span className={classNames("mx-2 py-2")}>
                 {usernameIsAvailable ? <Icon.FiCheck className="mt-[4px] w-6" /> : <></>}
               </span>
             </div>

diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
@@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(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
       )}
     />