Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 8 commits into from
Sep 14, 2022
+12 −15
Merged

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
99938a2
Convert username availability premium to v2
alannnc Sep 14, 2022
dbf8312
Update Username Availability to v2 design
alannnc Sep 14, 2022
f559646
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
74f462d
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
7a6d7db
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
ef306c2
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
60b2353
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
0acdba5
Merge branch 'main' into 4382-onboarding-fix-the-disabled-state-of-th…
kodiakhq[bot] Sep 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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://", "")}/
Expand All @@ -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) => {
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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"
: ""
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/v2/core/form/fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
/>
Expand Down