Skip to content

Commit eda52dc

Browse files
jmderbyjmderby
authored
Auth: UI style fixes + demo width fix (#841)
* Auth: UI style fixes * added changeset * fixed demo width * removed preflight styles, updated powered by
1 parent ea8ce4d commit eda52dc

File tree

16 files changed

+216
-159
lines changed

16 files changed

+216
-159
lines changed

‎.changeset/thirty-onions-develop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@crossmint/client-sdk-react-ui": patch
3+
---
4+
5+
Fixed styles

‎packages/client/ui/react-ui/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"@twind/preset-tailwind": "1.1.4",
4242
"bs58": "5.0.0",
4343
"clsx": "2.1.1",
44+
"color": "4.2.3",
4445
"input-otp": "1.2.4",
4546
"lodash.isequal": "4.5.0",
4647
"react-jss": "10.10.0",
@@ -50,6 +51,7 @@
5051
"zod": "3.22.4"
5152
},
5253
"devDependencies": {
54+
"@types/color": "4.2.0",
5355
"@types/lodash.isequal": "4.5.6",
5456
"@types/react": "^18.3.0",
5557
"@types/react-dom": "^18.3.0",

‎packages/client/ui/react-ui/src/components/auth/AuthForm.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ import { classNames } from "@/utils/classNames";
1010
export function AuthForm({ className }: { className?: string }) {
1111
const { step, appearance, baseUrl, loginMethods } = useAuthForm();
1212
return (
13-
<div className={classNames("flex flex-col gap-4", className)}>
13+
<div className={classNames("flex flex-col gap-[10px] antialiased animate-none", className)}>
1414
{step === "initial" ? (
1515
<div>
1616
<h1
17-
className="text-2xl font-semibold text-cm-text-primary"
17+
className="text-2xl font-bold text-cm-text-primary"
1818
style={{ color: appearance?.colors?.textPrimary }}
1919
>
2020
Sign In
2121
</h1>
2222
<p
23-
className="text-base font-normal mb-5 text-cm-text-secondary"
23+
className="text-base font-normal mb-3 text-cm-text-secondary"
2424
style={{ color: appearance?.colors?.textSecondary }}
2525
>
2626
Sign in using one of the options below
@@ -43,7 +43,10 @@ export function AuthForm({ className }: { className?: string }) {
4343
) : null}
4444

4545
{step === "initial" || step === "otp" ? (
46-
<PoweredByCrossmint className="justify-center" color={appearance?.colors?.textSecondary ?? "#A4AFB2"} />
46+
<PoweredByCrossmint
47+
className="mt-5 justify-center"
48+
color={appearance?.colors?.textSecondary ?? "#A4AFB2"}
49+
/>
4750
) : null}
4851
</div>
4952
);

‎packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,9 @@ export const AuthFormBackButton = ({
1111
return (
1212
<button
1313
className={classNames(
14-
"absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none",
14+
"absolute rounded-full opacity-70 ring-offset-background text-cm-text-primary transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none",
1515
className
1616
)}
17-
style={{
18-
// @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
19-
"--tw-ring-color": ringColor ?? "#1A73E8",
20-
}}
2117
{...props}
2218
>
2319
<LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />

‎packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function AuthFormDialog({ open }: { open: boolean }) {
1313
onOpenAutoFocus={(e) => e.preventDefault()}
1414
closeButtonColor={appearance?.colors?.textPrimary}
1515
closeButtonRingColor={appearance?.colors?.accent}
16-
className="responsive-border-radius-auth-dialog"
16+
className="cm-responsive-border-radius-auth-dialog"
1717
style={{
1818
borderRadius: appearance?.borderRadius,
1919
backgroundColor: appearance?.colors?.background,

‎packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,15 @@ export function EmailOTPInput({
6565
/>
6666
</div>
6767
<p
68-
className="text-base font-normal mt-4 mb-1 text-center text-[#67797F]"
68+
className="text-base font-normal mt-4 mb-1 text-center text-cm-text-primary"
6969
style={{ color: appearance?.colors?.textPrimary }}
7070
>
7171
{"Check your email"}
7272
</p>
73-
<p className="text-center px-4" style={{ color: appearance?.colors?.textSecondary }}>
73+
<p
74+
className="text-center text-cm-text-secondary px-4"
75+
style={{ color: appearance?.colors?.textSecondary }}
76+
>
7477
{"A temporary login code has been sent to your email"}
7578
</p>
7679
<div className="py-8">
@@ -104,13 +107,13 @@ export function EmailOTPInput({
104107
</InputOTP>
105108
</div>
106109

107-
<p className="text-sm leading-tight text-center">
110+
<p className="text-sm leading-tight text-cm-text-secondary text-center">
108111
<span style={{ color: appearance?.colors?.textSecondary }}>
109112
Can't find the email? Check spam folder or contact
110113
</span>{" "}
111114
<a
112115
key="resend-email-link"
113-
className="transition-opacity duration-150 text-link hover:opacity-70"
116+
className="transition-opacity duration-150 text-cm-link hover:opacity-70"
114117
style={{ color: appearance?.colors?.textLink }}
115118
href="mailto:[email protected]"
116119
>

‎packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { type FormEvent, useState } from "react";
2+
import Color from "color";
23

34
import { Spinner } from "@/components/common/Spinner";
45
import { classNames } from "@/utils/classNames";
@@ -42,12 +43,6 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
4243
<>
4344
<div className="flex flex-col items-start justify-start w-full rounded-lg">
4445
<div className="w-full">
45-
<p
46-
className="text-sm font-inter font-medium text-cm-text-primary pb-2"
47-
style={{ color: appearance?.colors?.textPrimary }}
48-
>
49-
Email
50-
</p>
5146
<form
5247
role="form"
5348
className="relative"
@@ -59,28 +54,29 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
5954
</label>
6055
<input
6156
className={classNames(
62-
"flex-grow text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
63-
"transition-all duration-200 ease-in-out", // Add smooth transition
64-
"focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
57+
"flex-grow text-cm-text-secondary text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
58+
"transition-none duration-200 ease-in-out",
59+
"focus:outline-none focus-ring-custom", // Add focus ring
6560
emailError ? "border-red-500" : ""
6661
)}
6762
style={{
6863
color: appearance?.colors?.textPrimary,
6964
borderRadius: appearance?.borderRadius,
7065
borderColor: emailError ? appearance?.colors?.danger : appearance?.colors?.border,
7166
backgroundColor: appearance?.colors?.inputBackground,
72-
// @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
73-
"--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
67+
// @ts-expect-error Add custom ring color to tailwind
68+
"--focus-ring-color": new Color(appearance?.colors?.accent ?? "#04AA6D")
69+
.alpha(0.18)
70+
.toString(),
7471
}}
7572
type="email"
76-
placeholder={"Enter email"}
73+
placeholder="Enter email"
7774
value={emailInput}
7875
onChange={(e) => {
7976
setEmailInput(e.target.value);
8077
setEmailError("");
8178
}}
8279
readOnly={isLoading}
83-
// aria-invalid={emailError != null}
8480
aria-describedby="emailError"
8581
/>
8682
<div className="absolute inset-y-0 right-0 flex items-center pr-4">
@@ -96,8 +92,8 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
9692
{!emailError && !isLoading && (
9793
<button
9894
type="submit"
99-
className={classNames("cursor-pointer text-nowrap")}
100-
style={{ color: appearance?.colors?.accent ?? "#1A73E8" }}
95+
className={classNames("cursor-pointer font-medium text-cm-accent text-nowrap")}
96+
style={{ color: appearance?.colors?.accent }}
10197
disabled={!emailInput}
10298
>
10399
Sign in

‎packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,13 @@ export function FarcasterSignIn() {
1515
<div>
1616
<button
1717
className={classNames(
18-
"relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
19-
"transition-all duration-200 ease-in-out",
20-
"focus:outline-none focus:ring-1 focus:ring-opacity-50"
18+
"relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
19+
"transition-colors duration-200 ease-in-out",
20+
"hover:bg-cm-hover focus:bg-cm-hover outline-none"
2121
)}
2222
style={{
2323
borderRadius: appearance?.borderRadius,
24-
borderColor: appearance?.colors?.border,
2524
backgroundColor: appearance?.colors?.buttonBackground,
26-
// @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
27-
"--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
2825
}}
2926
onClick={() => {
3027
setStep("qrCode");
@@ -35,7 +32,7 @@ export function FarcasterSignIn() {
3532
className="font-medium"
3633
style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
3734
>
38-
Farcaster
35+
Sign in with Farcaster
3936
</span>
4037
<span className="sr-only">Sign in with Farcaster</span>
4138
</button>
@@ -157,7 +154,7 @@ function FarcasterQRCode() {
157154
href={qrCodeUrl}
158155
rel="noopener noreferrer"
159156
target="_blank"
160-
className="text-base font-normal text-cm-ring"
157+
className="text-base font-normal text-cm-link"
161158
style={{ color: appearance?.colors?.textLink }}
162159
>
163160
Open Warpcast

‎packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,14 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
2121
return (
2222
<button
2323
className={classNames(
24-
"relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
25-
"transition-all duration-200 ease-in-out", // Add smooth transition
26-
"focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
27-
isLoading ? "cursor-not-allowed" : ""
24+
"relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
25+
"transition-colors duration-200 ease-in-out",
26+
"hover:bg-cm-hover focus:bg-cm-hover outline-none",
27+
isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
2828
)}
2929
style={{
3030
borderRadius: appearance?.borderRadius,
31-
borderColor: appearance?.colors?.border,
3231
backgroundColor: appearance?.colors?.buttonBackground,
33-
// @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
34-
"--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
3532
}}
3633
onClick={isLoading ? undefined : createPopupAndSetupListeners}
3734
{...props}
@@ -50,12 +47,10 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
5047
className="font-medium"
5148
style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
5249
>
53-
Google
50+
Sign in with Google
5451
</span>
5552
)}
5653
</>
57-
58-
{/* For accessibility sake */}
5954
<span className="sr-only">Sign in with Google</span>
6055
</button>
6156
);

‎packages/client/ui/react-ui/src/components/common/Dialog.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
3737
<DialogPrimitive.Content
3838
ref={ref}
3939
className={classNames(
40-
"fixed z-50 p-6 pb-2 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
40+
"fixed z-50 p-6 pb-4 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
4141
// Small viewport styles (bottom sheet)
4242
"inset-x-0 bottom-0 w-full border-t rounded-t-xl",
4343
"data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
4444
// Regular viewport styles (centered modal)
45-
"xs:inset-auto !xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
46-
"xs:max-w-[448px] xs:rounded-xl",
47-
"xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
48-
"xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
45+
"min-[480px]:inset-auto !min-[480px]:p-10 !min-[480px]:pb-8 min-[480px]:left-[50%] min-[480px]:top-[50%] min-[480px]:translate-x-[-50%] min-[480px]:translate-y-[-52%]",
46+
"min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
47+
"min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
48+
"min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
4949
// Duration for animations
5050
"data-[state=closed]:duration-300 data-[state=open]:duration-500",
5151
className
@@ -57,14 +57,10 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
5757
<DialogPrimitive.Close
5858
className={classNames(
5959
"absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100",
60-
"focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
61-
"right-4 top-4 !xs:right-6 !xs:top-6"
60+
"focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
61+
"right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
6262
)}
63-
style={{
64-
color: closeButtonColor,
65-
// @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
66-
"--tw-ring-color": closeButtonRingColor ?? "#1A73E8",
67-
}}
63+
style={{ color: closeButtonColor ?? "#00150D" }}
6864
>
6965
<svg
7066
xmlns="http://www.w3.org/2000/svg"

0 commit comments

Comments
 (0)