fixed styles and added stytch token call

Crossmint · Oct 15, 2024 · 17566f5 · 17566f5
1 parent 884ec93
commit 17566f5
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 49 deletions.
diff --git a/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx b/apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx
@@ -19,7 +19,7 @@ export function Providers({ children }: { children: ReactNode }) {
                     }}
                     appearance={{
                         spacingUnit: "8px",
-                        borderRadius: "12px",
+                        borderRadius: "16px",
                         colors: {
                             inputBackground: "#fffdf9",
                             buttonBackground: "#fffaf2",

diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
@@ -15,17 +15,17 @@ export function AuthForm({ loginMethods }: { loginMethods: LoginMethod[] }) {
     const { step, appearance, baseUrl } = useAuthForm();
 
     return (
-        <div className="flex flex-col gap-4 max-w-[396px]">
+        <div className="flex flex-col gap-4 max-w-[448px]">
             {step === "initial" ? (
                 <div>
                     <h1
-                        className="text-2xl font-semibold text-custom-text-primary"
+                        className="text-2xl font-semibold text-cm-text-primary"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Sign In
                     </h1>
                     <p
-                        className="text-base font-normal mb-5 text-[#67797F]"
+                        className="text-base font-normal mb-5 text-cm-text-secondary"
                         style={{ color: appearance?.colors?.textSecondary }}
                     >
                         Sign in using one of the options below
@@ -59,14 +59,19 @@ export function AuthForm({ loginMethods }: { loginMethods: LoginMethod[] }) {
 export const AuthFormBackButton = ({
     className,
     iconColor,
+    ringColor,
     ...props
-}: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string }) => {
+}: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string; ringColor?: string }) => {
     return (
         <button
             className={classNames(
-                "relative rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "relative 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",
                 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
@@ -12,10 +12,12 @@ export default function AuthFormDialog({ open, loginMethods }: { open: boolean;
             <DialogContent
                 onInteractOutside={(e) => e.preventDefault()}
                 onOpenAutoFocus={(e) => e.preventDefault()}
-                className="py-12 px-10 rounded-t-lg"
+                closeButtonColor={appearance?.colors?.textPrimary}
+                closeButtonRingColor={appearance?.colors?.accent}
                 style={{
                     borderTopLeftRadius: appearance?.borderRadius,
                     borderTopRightRadius: appearance?.borderRadius,
+                    backgroundColor: appearance?.colors?.background,
                 }}
             >
                 <VisuallyHidden asChild>

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/discord/DiscordSignIn.tsx
@@ -20,7 +20,7 @@ export function DiscordSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonEleme
     return (
         <button
             className={classNames(
-                "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                "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" : ""
@@ -38,7 +38,12 @@ export function DiscordSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonEleme
             <>
                 <DiscordIcon className="h-[25px] w-[25px] absolute left-[18px]" />
                 {isLoading ? (
-                    <Spinner />
+                    <Spinner
+                        style={{
+                            color: appearance?.colors?.textSecondary,
+                            fill: appearance?.colors?.textPrimary,
+                        }}
+                    />
                 ) : (
                     <span
                         className="font-medium"

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
@@ -41,12 +41,13 @@ export function EmailOTPInput() {
 
     return (
         <div>
-            <AuthFormBackButton onClick={handleOnBack} iconColor={appearance?.colors?.textPrimary} />
+            <AuthFormBackButton
+                onClick={handleOnBack}
+                iconColor={appearance?.colors?.textPrimary}
+                ringColor={appearance?.colors?.accent}
+            />
 
-            <div
-                className="flex flex-col items-center justify-start w-full bg-console-bg-default"
-                style={{ backgroundColor: appearance?.colors?.background }}
-            >
+            <div className="flex flex-col items-center justify-start w-full">
                 <div className="relative left-3">
                     <EmailOtpIcon
                         customAccentColor={appearance?.colors?.accent}

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
@@ -48,7 +48,7 @@ export function EmailSignIn() {
             <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-[#20343E] pb-2"
+                        className="text-sm font-inter font-medium text-cm-text-primary pb-2"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Email
@@ -64,7 +64,7 @@ export function EmailSignIn() {
                         </label>
                         <input
                             className={classNames(
-                                "flex-grow text-left pl-[16px] pr-[80px] h-[56px] w-full border rounded-xl bg-console-bg-default placeholder:text-sm placeholder:text-opacity-60",
+                                "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
                                 emailError ? "border-red-500" : ""
@@ -92,8 +92,10 @@ export function EmailSignIn() {
                             {emailError && <AlertIcon customColor={appearance?.colors?.danger} />}
                             {isLoading && (
                                 <Spinner
-                                // customPrimaryColor={uiConfig?.colors?.textPrimary}
-                                // customSecondaryColor={uiConfig?.colors?.border}
+                                    style={{
+                                        color: appearance?.colors?.textSecondary,
+                                        fill: appearance?.colors?.textPrimary,
+                                    }}
                                 />
                             )}
                             {!emailError && !isLoading && (

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
@@ -37,7 +37,7 @@ export function FarcasterSignIn() {
             <div>
                 <button
                     className={classNames(
-                        "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                        "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
                     )}
@@ -77,18 +77,19 @@ export function FarcasterSignIn() {
                         setStep("initial");
                     }}
                     iconColor={appearance?.colors?.textPrimary}
+                    ringColor={appearance?.colors?.accent}
                 />
 
                 <div className="flex flex-col items-center gap-4 mt-6">
                     <div className="text-center">
                         <h3
-                            className="text-lg font-semibold text-custom-text-primary"
+                            className="text-lg font-semibold text-cm-text-primary"
                             style={{ color: appearance?.colors?.textPrimary }}
                         >
                             Sign in with Farcaster
                         </h3>
                         <p
-                            className="text-base font-normal text-[#67797F]"
+                            className="text-base font-normal text-cm-text-secondary"
                             style={{ color: appearance?.colors?.textSecondary }}
                         >
                             Scan with your phone's camera to continue.
@@ -105,14 +106,19 @@ export function FarcasterSignIn() {
                             <QRCode uri={qrCodeUrl} size={280} />
                         ) : (
                             <div className="min-h-[246px] flex items-center justify-center">
-                                <Spinner />
+                                <Spinner
+                                    style={{
+                                        color: appearance?.colors?.textSecondary,
+                                        fill: appearance?.colors?.textPrimary,
+                                    }}
+                                />
                             </div>
                         )}
                     </div>
                     {qrCodeUrl ? (
                         <>
                             <p
-                                className="text-base text-center font-normal text-[#67797F]"
+                                className="text-base text-center font-normal text-cm-text-secondary"
                                 style={{ color: appearance?.colors?.textSecondary }}
                             >
                                 Alternatively, click on this link to open Warpcast.
@@ -121,7 +127,7 @@ export function FarcasterSignIn() {
                                 href={qrCodeUrl}
                                 rel="noopener noreferrer"
                                 target="_blank"
-                                className="text-base font-normal text-[#67797F]"
+                                className="text-base font-normal text-cm-ring"
                                 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
@@ -20,7 +20,7 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
     return (
         <button
             className={classNames(
-                "relative flex text-base p-4 bg-[#F0F2F4] text-[#00150D] border items-center w-full rounded-xl justify-center",
+                "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" : ""
@@ -38,7 +38,12 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
             <>
                 <GoogleIcon className="h-[25px] w-[25px] absolute left-[18px]" />
                 {isLoading ? (
-                    <Spinner />
+                    <Spinner
+                        style={{
+                            color: appearance?.colors?.textSecondary,
+                            fill: appearance?.colors?.textPrimary,
+                        }}
+                    />
                 ) : (
                     <span
                         className="font-medium"

diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
@@ -26,22 +26,24 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     showCloseButton?: boolean;
+    closeButtonColor?: string;
+    closeButtonRingColor?: string;
 }
 
 const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-    ({ className, children, showCloseButton = true, ...props }, ref) => (
+    ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
         <DialogPortal>
             <DialogOverlay />
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(
-                    "fixed z-50 bg-background p-6 shadow-lg transition ease-in-out",
+                    "fixed z-50 p-6 pb-2 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-lg",
+                    "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-[396px] xs:rounded-lg",
+                    "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",
                     // Duration for animations
@@ -52,7 +54,14 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
             >
                 {children}
                 {showCloseButton && (
-                    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-muted-foreground">
+                    <DialogPrimitive.Close
+                        className="absolute right-4 top-4 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"
+                        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",
+                        }}
+                    >
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="24"

diff --git a/packages/client/ui/react-ui/src/components/common/Divider.tsx b/packages/client/ui/react-ui/src/components/common/Divider.tsx
@@ -10,13 +10,16 @@ export function Divider({ appearance, text }: { appearance?: UIConfig; text?: st
 
     return (
         <div className="flex items-center justify-center w-full pt-1 pb-2">
-            <span className="w-full h-[1px] bg-[#E7E9ED]" style={{ backgroundColor: appearance?.colors?.border }} />
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
             {text != null ? (
-                <p className="flex-none px-2 text-sm text-[#00150D]" style={{ color: appearance?.colors?.textPrimary }}>
+                <p
+                    className="flex-none px-2 text-sm text-cm-text-primary"
+                    style={{ color: appearance?.colors?.textSecondary }}
+                >
                     {text}
                 </p>
             ) : null}
-            <span className="w-full h-[1px] bg-[#E7E9ED]" style={{ backgroundColor: appearance?.colors?.border }} />
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
         </div>
     );
 }
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-custom-text-primary",
+                "relative flex h-14 w-12 items-center justify-center 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/Spinner.tsx b/packages/client/ui/react-ui/src/components/common/Spinner.tsx
@@ -1,10 +1,10 @@
 import type React from "react";
 import { classNames } from "@/utils/classNames";
 
-export const Spinner = ({ className, style }: { className?: string, style?: React.CSSProperties }) => (
+export const Spinner = ({ className, style }: { className?: string; style?: React.CSSProperties }) => (
     <svg
         aria-hidden="true"
-        className={classNames("w-6 h-6 fill-secondary-foreground animate-spin text-primary-foreground", className)}
+        className={classNames("w-6 h-6 fill-cm-text-primary text-cm-text-secondary animate-spin", className)}
         style={style}
         viewBox="0 0 100 101"
         fill="none"

diff --git a/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts b/packages/client/ui/react-ui/src/hooks/useOAuthWindowListener.ts
@@ -45,7 +45,7 @@ export const useOAuthWindowListener = (
             popupWindowWidth = 600;
         }
 
-        const popup = await PopupWindow.init(generateOAuthUrl(provider, options.apiKey, options.baseUrl), {
+        const popup = await PopupWindow.init(await generateOAuthUrl(provider, options.apiKey, options.baseUrl), {
             awaitToLoad: false,
             crossOrigin: true,
             width: popupWindowWidth,

diff --git a/packages/client/ui/react-ui/src/twind.config.ts b/packages/client/ui/react-ui/src/twind.config.ts
@@ -8,6 +8,15 @@ export default defineConfig({
             xs: "480px",
         },
         extend: {
+            colors: {
+                // Crossmint colors (cm- prefix)
+                "cm-text-primary": "#00150D",
+                "cm-text-secondary": "#67797F",
+                "cm-background-primary": "#FFFFFF",
+                "cm-muted-primary": "#F0F2F4",
+                "cm-border": "#D9D9D9",
+                "cm-ring": "#1A73E8",
+            },
             keyframes: {
                 "caret-blink": {
                     "0%,70%,100%": { opacity: "1" },