chore: WIP

components/auth/AuthButton.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import { Button, CircularProgress } from "@nextui-org/react";
-import React from "react";
-import { useFormStatus } from "react-dom";
-
-export const AuthButton = ({ type }: { type: string }) => {
-  const { pending } = useFormStatus();
-
-  return (
-    <Button color="primary" type="submit" aria-disabled={pending}>
-      {pending ? (
-        <CircularProgress aria-label="Loading..." size="sm" />
-      ) : type === "sign-in" ? (
-        "Log In"
-      ) : (
-        "Sign Up"
-      )}
-    </Button>
-  );
-};

components/auth/auth-form.tsx

@@ -20,8 +20,8 @@ import { authFormSchema } from "@/types";
 
 import { NotificationIcon, ProwlerExtended } from "../icons";
 import { ThemeSwitch } from "../ThemeSwitch";
-import { CustomInput } from "../ui/custom";
-import { AuthButton } from "./AuthButton";
+import { CustomButton, CustomInput } from "../ui/custom";
+// import { AuthButton } from "./AuthButton";
 
 export const AuthForm = ({ type }: { type: string }) => {
   const formSchema = authFormSchema(type);
@@ -39,8 +39,12 @@ export const AuthForm = ({ type }: { type: string }) => {
     },
   });
 
+  const isLoading = form.formState.isSubmitting;
+
   const [state, dispatch] = useFormState(authenticate, undefined);
 
+  console.log(isLoading, state);
+
   useEffect(() => {
     if (state?.message === "Success") {
       router.push("/");
@@ -185,7 +189,26 @@ export const AuthForm = ({ type }: { type: string }) => {
               </div>
             )}
 
-            <AuthButton type={type} />
+            {isLoading && <p>Loading...</p>}
+
+            <CustomButton
+              type="submit"
+              ariaLabel={type === "sign-in" ? "Log In" : "Sign Up"}
+              ariaDisabled={isLoading}
+              className="w-full"
+              variant="solid"
+              color="action"
+              size="md"
+              radius="md"
+              isLoading={isLoading}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <span>Loading</span>
+              ) : (
+                <span>{type === "sign-in" ? "Log In" : "Sign Up"}</span>
+              )}
+            </CustomButton>
           </form>
         </Form>
 

components/auth/index.ts

@@ -1,2 +1 @@
-export * from "./AuthButton";
-export * from "./AuthForm";
+export * from "./auth-form";

components/ui/custom/custom-button.tsx

@@ -8,7 +8,7 @@ export const buttonClasses = {
   base: "px-4 inline-flex items-center justify-center relative z-0 text-center whitespace-nowrap",
   primary: "bg-default-100 hover:bg-default-200 text-default-800",
   secondary: "bg-prowler-grey-light dark:bg-prowler-grey-medium text-white",
-  action: "text-white bg-prowler-blue-smoky dark:bg-prowler-grey-medium",
+  action: "text-white bg-prowler-grey-medium dark:bg-prowler-grey-medium",
   dashed:
     "border border-default border-dashed bg-transparent  justify-center whitespace-nowrap font-medium shadow-sm hover:border-solid hover:bg-default-100 active:bg-default-200 active:border-solid",
   transparent: "border-0 border-transparent bg-transparent",
@@ -19,6 +19,7 @@ export const buttonClasses = {
 interface ButtonProps {
   type?: "button" | "submit" | "reset";
   ariaLabel: string;
+  ariaDisabled?: boolean;
   className?: string;
   variant?:
     | "solid"
@@ -52,6 +53,7 @@ interface ButtonProps {
 export const CustomButton = ({
   type = "button",
   ariaLabel,
+  ariaDisabled,
   className,
   variant = "solid",
   color = "primary",
@@ -69,6 +71,7 @@ export const CustomButton = ({
   <Button
     type={type}
     aria-label={ariaLabel}
+    aria-disabled={ariaDisabled}
     onPress={onPress}
     variant={variant as NextUIVariants}
     color={color as NextUIColors}
@@ -89,7 +92,16 @@ export const CustomButton = ({
     endContent={endContent}
     size={size}
     radius={radius}
-    spinner={<CircularProgress aria-label="Loading..." size="sm" />}
+    spinner={
+      <CircularProgress
+        classNames={{
+          svg: "w-6 h-6 drop-shadow-md",
+          indicator: "stroke-white",
+          track: "stroke-white/10",
+        }}
+        aria-label="Loading..."
+      />
+    }
     isLoading={isLoading}
     isIconOnly={isIconOnly}
     {...props}

tailwind.config.js

@@ -85,6 +85,7 @@ module.exports = {
           },
         },
         danger: "#E11D48",
+        action: "#353a4d",
       },
       fontFamily: {
         sans: ["var(--font-sans)"],