login: add cancel button during verify email step

TreasureProject · Apr 24, 2024 · 84e4660 · 84e4660
1 parent 829a072
commit 84e4660
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/apps/login/app/routes/($slug)._index.tsx b/apps/login/app/routes/($slug)._index.tsx
@@ -93,6 +93,7 @@ const InnerLoginPage = () => {
     finishEmailLogin,
     logInWithSSO,
     logInWithCustomAuth,
+    reset,
   } = useLogin({
     project: project.slug,
     chainId,
@@ -174,20 +175,32 @@ const InnerLoginPage = () => {
                       />
                     )}
                   </ClientOnly>
-                  <Button
-                    className="w-full"
-                    onClick={() => finishEmailLogin(verificationInput)}
-                    disabled={isLoading}
-                  >
-                    {isLoading ? "Verifying..." : "Verify"}
-                  </Button>
+                  <div>
+                    <Button
+                      className="w-full"
+                      size="lg"
+                      onClick={() => finishEmailLogin(verificationInput)}
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "Verifying..." : "Verify"}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      className="w-full"
+                      onClick={() => reset()}
+                      disabled={isLoading}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
                 </div>
               ) : (
                 <>
                   {!project.customAuth ? (
                     <>
                       <div className="mt-4">
                         <Button
+                          type="button"
                           variant="secondary"
                           className="border-night-200 bg-honey-50 flex w-full items-center justify-center border"
                           onClick={() => logInWithSSO("google")}
@@ -244,6 +257,7 @@ const InnerLoginPage = () => {
                     <Button
                       type="submit"
                       className="w-full"
+                      size="lg"
                       disabled={isLoading}
                     >
                       Connect

diff --git a/packages/react/src/components/ui/Button.tsx b/packages/react/src/components/ui/Button.tsx
@@ -3,7 +3,7 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
 import { cn } from "../../utils/classnames";
 
 type BaseProps = {
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "ghost";
   size?: "md" | "lg";
 };
 
@@ -21,11 +21,14 @@ type Props = AsButtonProps | AsLinkProps;
 
 export const Button = (props: Props) => {
   const className = cn(
-    "focus:tdk-outline-none focus:tdk-ring-2 focus:tdk-ring-offset-2 disabled:tdk-cursor-not-allowed disabled:tdk-opacity-50 tdk-cursor-pointer tdk-rounded-lg tdk-px-4 tdk-py-2 tdk-font-medium tdk-shadow-sm tdk-transition-colors tdk-text-sm",
+    "focus:tdk-outline-none focus:tdk-ring-2 focus:tdk-ring-offset-2 disabled:tdk-cursor-not-allowed disabled:tdk-opacity-50 tdk-cursor-pointer tdk-rounded-lg tdk-px-4 tdk-py-2 tdk-font-medium tdk-transition-colors tdk-text-sm",
     (!props.variant || props.variant === "primary") &&
       "focus:tdk-ring-ruby-500 tdk-bg-ruby-1000 hover:tdk-bg-ruby-900 tdk-text-white hover:tdk-text-white",
     props.variant === "secondary" &&
       "tdk-text-night-200 tdk-border tdk-border-night-700 hover:tdk-border-night-600 hover:tdk-text-night-100",
+    props.variant === "ghost"
+      ? "tdk-text-ruby-900 hover:tdk-text-ruby-1000"
+      : "tdk-shadow-sm",
     props.size === "lg" && "tdk-px-5 tdk-py-2.5 tdk-text-base",
     props.className,
   );