commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 2.3k Packages Projects Releases Wiki Activity

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

Browse Source 
* Convert username availability premium to v2

* Update Username Availability to v2 design

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
alannncandkodiakhq[bot] authored and GitHub committed 2022-09-14 15:57:20 +00:00
1 parent 3f29df16ad
commit f1c15f4e8a
3 files changed
+12 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+8 -11
View File
@@ -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>
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+3 -3
View File
@@ -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>
packages/ui/v2/core/form/fields.tsx
+1 -1
View File
@@ -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
)}
/>