fixed issue with dialog styles

Crossmint · Oct 29, 2024 · 763b7d1 · 763b7d1
1 parent 409e53e
commit 763b7d1
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 32 deletions.
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
@@ -36,17 +36,17 @@ export function AuthForm({ className }: { className?: string }) {
                 </>
             ) : null}
 
-            {loginMethods.includes("web3") ? <Web3AuthFlow /> : null}
             {loginMethods.includes("google") ? <GoogleSignIn /> : null}
             {loginMethods.includes("farcaster") ? (
                 <FarcasterProvider baseUrl={baseUrl}>
                     <FarcasterSignIn />
                 </FarcasterProvider>
             ) : null}
+            {loginMethods.includes("web3") ? <Web3AuthFlow /> : null}
 
             {step === "initial" || step === "otp" ? (
                 <PoweredByCrossmint
-                    className="mt-5 justify-center"
+                    className="mt-4 justify-center"
                     color={appearance?.colors?.textSecondary ?? "#A4AFB2"}
                 />
             ) : null}

diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
@@ -2,12 +2,18 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { AuthForm } from "./AuthForm";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../common/Dialog";
+import { useEffect } from "react";
 
 export default function AuthFormDialog({ open }: { open: boolean }) {
     const { appearance, setDialogOpen } = useAuthForm();
 
+    // todo come up with a better solution for this!
+    useEffect(() => {
+        document.body.style.overflow = open ? "hidden" : "";
+    }, [open]);
+
     return (
-        <Dialog open={open} onOpenChange={setDialogOpen}>
+        <Dialog modal={false} open={open} onOpenChange={setDialogOpen}>
             <DialogContent
                 onInteractOutside={(e) => e.preventDefault()}
                 onOpenAutoFocus={(e) => e.preventDefault()}

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ConnectButton.tsx b/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ConnectButton.tsx
@@ -37,19 +37,14 @@ export function Web3ConnectButton({
 
             <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 bg-cm-muted-primary" : ""
                 )}
                 style={{
                     borderRadius: appearance?.borderRadius,
                     borderColor: appearance?.colors?.border,
-                    backgroundColor: isLoading
-                        ? appearance?.colors?.inputBackground
-                        : 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 : onConnectClick}
             >

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ProviderButton.tsx b/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3ProviderButton.tsx
@@ -15,16 +15,14 @@ export function Web3ProviderButton({
     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
+                "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",
             }}
             {...props}
         >
@@ -34,8 +32,6 @@ export function Web3ProviderButton({
                     {title}
                 </span>
             </>
-
-            {/* For accessibility sake   */}
             <span className="sr-only">Sign in with {title}</span>
         </button>
     );

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3Providers.tsx b/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3Providers.tsx
@@ -24,7 +24,7 @@ export function Web3Providers() {
                             Connect wallet
                         </h3>
                     </div>
-                    <div className="flex flex-col gap-4 w-full">
+                    <div className="flex flex-col gap-[10px] w-full">
                         <Web3ProviderButton
                             title="Metamask"
                             appearance={appearance}
@@ -51,7 +51,6 @@ export function Web3Providers() {
                     iconColor={appearance?.colors?.textPrimary}
                     ringColor={appearance?.colors?.accent}
                 />
-                {/* metamask stuff */}
                 <Web3AuthWrapper providerType="metaMaskSDK" icon={metamaskIcon} />
             </>
         );

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3SignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/web3/Web3SignIn.tsx
@@ -13,16 +13,14 @@ export function Web3SignIn() {
     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
+                "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("web3")}
         >
@@ -31,15 +29,13 @@ export function Web3SignIn() {
                 style={{ color: appearance?.colors?.textPrimary }}
             />
             <span className="font-medium" style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}>
-                Sign in with a wallet
+                Continue with a wallet
             </span>
             <ChevronRightIcon
                 className="h-[21px] w-[21px] absolute right-[20px]"
                 style={{ color: appearance?.colors?.textSecondary }}
             />
-
-            {/* For accessibility sake   */}
-            <span className="sr-only">Sign in with a crypto wallet</span>
+            <span className="sr-only">Continue with a wallet</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
@@ -33,7 +33,8 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
 const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
     ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
         <DialogPortal>
-            <DialogOverlay />
+            {/* Because we're using modal={false}, the regular overlay is not shown. We need to add our own overlay */}
+            <div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm overflow-x-hidden" />
             <DialogPrimitive.Content
                 ref={ref}
                 className={classNames(

diff --git a/packages/client/ui/react-ui/tsup.config.ts b/packages/client/ui/react-ui/tsup.config.ts
@@ -4,7 +4,7 @@ import { treeShakableConfig } from "../../../../tsup.config.base";
 
 const config: Options = {
     ...treeShakableConfig,
-    external: ["react", "react-dom", "@tanstack/react-query"],
+    external: ["react", "react-dom"],
 };
 
 export default config;