Auth: UI style fixes + demo width fix (#841)

* Auth: UI style fixes * added changeset * fixed demo width * removed preflight styles, updated powered by
Crossmint · Oct 29, 2024 · eda52dc · eda52dc
1 parent ea8ce4d
commit eda52dc
Show file tree

Hide file tree

Showing 16 changed files with 216 additions and 159 deletions.
diff --git a/.changeset/thirty-onions-develop.md b/.changeset/thirty-onions-develop.md
@@ -0,0 +1,5 @@
+---
+"@crossmint/client-sdk-react-ui": patch
+---
+
+Fixed styles
diff --git a/packages/client/ui/react-ui/package.json b/packages/client/ui/react-ui/package.json
@@ -41,6 +41,7 @@
         "@twind/preset-tailwind": "1.1.4",
         "bs58": "5.0.0",
         "clsx": "2.1.1",
+        "color": "4.2.3",
         "input-otp": "1.2.4",
         "lodash.isequal": "4.5.0",
         "react-jss": "10.10.0",
@@ -50,6 +51,7 @@
         "zod": "3.22.4"
     },
     "devDependencies": {
+        "@types/color": "4.2.0",
         "@types/lodash.isequal": "4.5.6",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",

diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
@@ -10,17 +10,17 @@ import { classNames } from "@/utils/classNames";
 export function AuthForm({ className }: { className?: string }) {
     const { step, appearance, baseUrl, loginMethods } = useAuthForm();
     return (
-        <div className={classNames("flex flex-col gap-4", className)}>
+        <div className={classNames("flex flex-col gap-[10px] antialiased animate-none", className)}>
             {step === "initial" ? (
                 <div>
                     <h1
-                        className="text-2xl font-semibold text-cm-text-primary"
+                        className="text-2xl font-bold text-cm-text-primary"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Sign In
                     </h1>
                     <p
-                        className="text-base font-normal mb-5 text-cm-text-secondary"
+                        className="text-base font-normal mb-3 text-cm-text-secondary"
                         style={{ color: appearance?.colors?.textSecondary }}
                     >
                         Sign in using one of the options below
@@ -43,7 +43,10 @@ export function AuthForm({ className }: { className?: string }) {
             ) : null}
 
             {step === "initial" || step === "otp" ? (
-                <PoweredByCrossmint className="justify-center" color={appearance?.colors?.textSecondary ?? "#A4AFB2"} />
+                <PoweredByCrossmint
+                    className="mt-5 justify-center"
+                    color={appearance?.colors?.textSecondary ?? "#A4AFB2"}
+                />
             ) : null}
         </div>
     );

diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx
@@ -11,13 +11,9 @@ export const AuthFormBackButton = ({
     return (
         <button
             className={classNames(
-                "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",
+                "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",
                 className
             )}
-            style={{
-                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                "--tw-ring-color": ringColor ?? "#1A73E8",
-            }}
             {...props}
         >
             <LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />

diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
@@ -13,7 +13,7 @@ export default function AuthFormDialog({ open }: { open: boolean }) {
                 onOpenAutoFocus={(e) => e.preventDefault()}
                 closeButtonColor={appearance?.colors?.textPrimary}
                 closeButtonRingColor={appearance?.colors?.accent}
-                className="responsive-border-radius-auth-dialog"
+                className="cm-responsive-border-radius-auth-dialog"
                 style={{
                     borderRadius: appearance?.borderRadius,
                     backgroundColor: appearance?.colors?.background,

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailOTPInput.tsx
@@ -65,12 +65,15 @@ export function EmailOTPInput({
                     />
                 </div>
                 <p
-                    className="text-base font-normal mt-4 mb-1 text-center text-[#67797F]"
+                    className="text-base font-normal mt-4 mb-1 text-center text-cm-text-primary"
                     style={{ color: appearance?.colors?.textPrimary }}
                 >
                     {"Check your email"}
                 </p>
-                <p className="text-center px-4" style={{ color: appearance?.colors?.textSecondary }}>
+                <p
+                    className="text-center text-cm-text-secondary px-4"
+                    style={{ color: appearance?.colors?.textSecondary }}
+                >
                     {"A temporary login code has been sent to your email"}
                 </p>
                 <div className="py-8">
@@ -104,13 +107,13 @@ export function EmailOTPInput({
                     </InputOTP>
                 </div>
 
-                <p className="text-sm leading-tight text-center">
+                <p className="text-sm leading-tight text-cm-text-secondary text-center">
                     <span style={{ color: appearance?.colors?.textSecondary }}>
                         Can't find the email? Check spam folder or contact
                     </span>{" "}
                     <a
                         key="resend-email-link"
-                        className="transition-opacity duration-150 text-link hover:opacity-70"
+                        className="transition-opacity duration-150 text-cm-link hover:opacity-70"
                         style={{ color: appearance?.colors?.textLink }}
                         href="mailto:[email protected]"
                     >

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx
@@ -1,4 +1,5 @@
 import { type FormEvent, useState } from "react";
+import Color from "color";
 
 import { Spinner } from "@/components/common/Spinner";
 import { classNames } from "@/utils/classNames";
@@ -42,12 +43,6 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
         <>
             <div className="flex flex-col items-start justify-start w-full rounded-lg">
                 <div className="w-full">
-                    <p
-                        className="text-sm font-inter font-medium text-cm-text-primary pb-2"
-                        style={{ color: appearance?.colors?.textPrimary }}
-                    >
-                        Email
-                    </p>
                     <form
                         role="form"
                         className="relative"
@@ -59,28 +54,29 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                         </label>
                         <input
                             className={classNames(
-                                "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",
-                                "transition-all duration-200 ease-in-out", // Add smooth transition
-                                "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
+                                "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",
+                                "transition-none duration-200 ease-in-out",
+                                "focus:outline-none focus-ring-custom", // Add focus ring
                                 emailError ? "border-red-500" : ""
                             )}
                             style={{
                                 color: appearance?.colors?.textPrimary,
                                 borderRadius: appearance?.borderRadius,
                                 borderColor: emailError ? appearance?.colors?.danger : appearance?.colors?.border,
                                 backgroundColor: appearance?.colors?.inputBackground,
-                                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                                "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
+                                // @ts-expect-error Add custom ring color to tailwind
+                                "--focus-ring-color": new Color(appearance?.colors?.accent ?? "#04AA6D")
+                                    .alpha(0.18)
+                                    .toString(),
                             }}
                             type="email"
-                            placeholder={"Enter email"}
+                            placeholder="Enter email"
                             value={emailInput}
                             onChange={(e) => {
                                 setEmailInput(e.target.value);
                                 setEmailError("");
                             }}
                             readOnly={isLoading}
-                            // aria-invalid={emailError != null}
                             aria-describedby="emailError"
                         />
                         <div className="absolute inset-y-0 right-0 flex items-center pr-4">
@@ -96,8 +92,8 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                             {!emailError && !isLoading && (
                                 <button
                                     type="submit"
-                                    className={classNames("cursor-pointer text-nowrap")}
-                                    style={{ color: appearance?.colors?.accent ?? "#1A73E8" }}
+                                    className={classNames("cursor-pointer font-medium text-cm-accent text-nowrap")}
+                                    style={{ color: appearance?.colors?.accent }}
                                     disabled={!emailInput}
                                 >
                                     Sign in

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx
@@ -15,16 +15,13 @@ export function FarcasterSignIn() {
             <div>
                 <button
                     className={classNames(
-                        "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",
-                        "transition-all duration-200 ease-in-out",
-                        "focus:outline-none focus:ring-1 focus:ring-opacity-50"
+                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                        "transition-colors duration-200 ease-in-out",
+                        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
                     )}
                     style={{
                         borderRadius: appearance?.borderRadius,
-                        borderColor: appearance?.colors?.border,
                         backgroundColor: appearance?.colors?.buttonBackground,
-                        // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                        "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
                     }}
                     onClick={() => {
                         setStep("qrCode");
@@ -35,7 +32,7 @@ export function FarcasterSignIn() {
                         className="font-medium"
                         style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
                     >
-                        Farcaster
+                        Sign in with Farcaster
                     </span>
                     <span className="sr-only">Sign in with Farcaster</span>
                 </button>
@@ -157,7 +154,7 @@ function FarcasterQRCode() {
                             href={qrCodeUrl}
                             rel="noopener noreferrer"
                             target="_blank"
-                            className="text-base font-normal text-cm-ring"
+                            className="text-base font-normal text-cm-link"
                             style={{ color: appearance?.colors?.textLink }}
                         >
                             Open Warpcast

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx
@@ -21,17 +21,14 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
     return (
         <button
             className={classNames(
-                "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",
-                "transition-all duration-200 ease-in-out", // Add smooth transition
-                "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
-                isLoading ? "cursor-not-allowed" : ""
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                "transition-colors duration-200 ease-in-out",
+                "hover:bg-cm-hover focus:bg-cm-hover outline-none",
+                isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
             )}
             style={{
                 borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
                 backgroundColor: appearance?.colors?.buttonBackground,
-                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
             }}
             onClick={isLoading ? undefined : createPopupAndSetupListeners}
             {...props}
@@ -50,12 +47,10 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
                         className="font-medium"
                         style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
                     >
-                        Google
+                        Sign in with Google
                     </span>
                 )}
             </>
-
-            {/* For accessibility sake   */}
             <span className="sr-only">Sign in with Google</span>
         </button>
     );

diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
@@ -37,15 +37,15 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(
-                    "fixed z-50 p-6 pb-2 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
+                    "fixed z-50 p-6 pb-4 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
                     // Small viewport styles (bottom sheet)
                     "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
                     "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
                     // Regular viewport styles (centered modal)
-                    "xs:inset-auto !xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
-                    "xs:max-w-[448px] xs:rounded-xl",
-                    "xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
-                    "xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
+                    "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%]",
+                    "min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
+                    "min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
+                    "min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
                     // Duration for animations
                     "data-[state=closed]:duration-300 data-[state=open]:duration-500",
                     className
@@ -57,14 +57,10 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                     <DialogPrimitive.Close
                         className={classNames(
                             "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 data-[state=open]:bg-text-primary",
-                            "right-4 top-4 !xs:right-6 !xs:top-6"
+                            "focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
+                            "right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
                         )}
-                        style={{
-                            color: closeButtonColor,
-                            // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                            "--tw-ring-color": closeButtonRingColor ?? "#1A73E8",
-                        }}
+                        style={{ color: closeButtonColor ?? "#00150D" }}
                     >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/client/ui/react-ui/src/components/common/Divider.tsx b/packages/client/ui/react-ui/src/components/common/Divider.tsx
@@ -9,7 +9,7 @@ export function Divider({ appearance, text }: { appearance?: UIConfig; text?: st
     }
 
     return (
-        <div className="flex items-center justify-center w-full pt-1 pb-2">
+        <div className="flex items-center justify-center w-full pt-2 pb-3">
             <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
             {text != null ? (
                 <p

diff --git a/packages/client/ui/react-ui/src/components/common/InputOTP.tsx b/packages/client/ui/react-ui/src/components/common/InputOTP.tsx
@@ -57,7 +57,7 @@ const InputOTPSlot = React.forwardRef<
         <div
             ref={ref}
             className={classNames(
-                "relative flex h-14 w-12 items-center justify-center border text-lg transition-all rounded-md text-cm-text-primary",
+                "relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary",
                 isActive && `z-10 ring-2 ring-offset-background`,
                 className
             )}

diff --git a/packages/client/ui/react-ui/src/components/common/PoweredByCrossmint.tsx b/packages/client/ui/react-ui/src/components/common/PoweredByCrossmint.tsx
@@ -1,17 +1,10 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
 import { classNames } from "@/utils/classNames";
 
-export function PoweredByCrossmint({ color, className }: { color?: string; className?: string }) {
+export function PoweredByCrossmint({ color = "#A4AFB2", className }: { color?: string; className?: string }) {
     return (
-        <p
-            className={classNames("flex text-xs font-normal tracking-tight p-2 items-center", className)}
-            style={{ color: color || "#67797F" }}
-        >
-            Powered by
-            <span className="flex self-center pl-1 gap-1 items-center font-semibold">
-                <PoweredByLeaf color={color ?? "#67797F"} size={"12"} />
-                <span>crossmint</span>
-            </span>
+        <p className={classNames("flex", className)}>
+            <PoweredByLeaf color={color} />
         </p>
     );
 }