chore: edit and delete provider form have been refactored using custom buttons

components/providers/forms/DeleteForm.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, CircularProgress } from "@nextui-org/react";
 import React, { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { deleteProvider } from "@/actions";
 import { useToast } from "@/components/ui";
+import { CustomButton } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 
 const formSchema = z.object({
@@ -46,6 +46,7 @@ export const DeleteForm = ({
         description: "The provider was removed successfully.",
       });
     }
+    setIsOpen(false); // Close the modal on success
   }
 
   return (
@@ -53,31 +54,28 @@ export const DeleteForm = ({
       <form action={onSubmitClient}>
         <input type="hidden" name="id" value={providerId} />
         <div className="w-full flex justify-center sm:space-x-6">
-          <Button
-            size="lg"
-            variant="bordered"
-            disabled={isLoading}
-            className="w-full hidden sm:block"
+          <CustomButton
             type="button"
-            onPress={() => setIsOpen(false)}
-          >
-            Cancel
-          </Button>
-          <Button
+            className="w-full bg-transparent"
+            variant="faded"
             size="lg"
-            type="submit"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
             disabled={isLoading}
-            className="w-full bg-system-error hover:bg-system-error/90 text-white"
           >
-            {isLoading ? (
-              <>
-                <CircularProgress aria-label="Loading..." size="sm" />
-                Deleting
-              </>
-            ) : (
-              <span>Delete</span>
-            )}
-          </Button>
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            className="w-full"
+            variant="solid"
+            color="danger"
+            size="lg"
+            isLoading={isLoading}
+          >
+            {isLoading ? <>Loading</> : <span>Delete</span>}
+          </CustomButton>
         </div>
       </form>
     </Form>

components/providers/forms/EditForm.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, CircularProgress } from "@nextui-org/react";
 import React, { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { updateProvider } from "@/actions";
 import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
 import { editProviderFormSchema } from "@/types";
 
@@ -32,6 +31,7 @@ export const EditForm = ({
   });
 
   const { toast } = useToast();
+
   const isLoading = form.formState.isSubmitting;
 
   const onSubmitClient = async (values: z.infer<typeof formSchema>) => {
@@ -86,29 +86,28 @@ export const EditForm = ({
         <input type="hidden" name="providerId" value={providerId} />
 
         <div className="w-full flex justify-center sm:space-x-6">
-          <Button
-            size="lg"
-            variant="bordered"
-            disabled={isLoading}
-            className="w-full hidden sm:block"
+          <CustomButton
             type="button"
-            onPress={() => setIsOpen(false)}
-          >
-            Cancel
-          </Button>
-
-          <Button
+            className="w-full bg-transparent"
+            variant="faded"
             size="lg"
-            type="submit"
+            radius="lg"
+            onPress={() => setIsOpen(false)}
             disabled={isLoading}
-            className="w-full"
           >
-            {isLoading ? (
-              <CircularProgress aria-label="Loading..." size="md" />
-            ) : (
-              <span>Save</span>
-            )}
-          </Button>
+            <span>Cancel</span>
+          </CustomButton>
+
+          <CustomButton
+            type="submit"
+            className="w-full"
+            variant="solid"
+            color="action"
+            size="lg"
+            isLoading={isLoading}
+          >
+            {isLoading ? <>Loading</> : <span>Save</span>}
+          </CustomButton>
         </div>
       </form>
     </Form>

components/ui/custom/CustomButton.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@nextui-org/react";
+import { Button, CircularProgress } from "@nextui-org/react";
 import clsx from "clsx";
 
 export const buttonClasses = {
-  base: "w-full md:w-fit px-4 inline-flex items-center justify-center relative z-0 text-center whitespace-nowrap",
+  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",
@@ -14,6 +14,8 @@ export const buttonClasses = {
 };
 
 interface ButtonProps {
+  type: "button" | "submit" | "reset";
+  className?: string;
   variant?:
     | "solid"
     | "faded"
@@ -31,7 +33,7 @@ interface ButtonProps {
     | "warning"
     | "danger"
     | "transparent";
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   children: React.ReactNode;
   startContent?: React.ReactNode;
   endContent?: React.ReactNode;
@@ -44,9 +46,11 @@ interface ButtonProps {
 }
 
 export const CustomButton = ({
+  type = "button",
+  className,
   variant = "solid",
   color = "primary",
-  onClick,
+  onPress,
   children,
   startContent,
   endContent,
@@ -58,23 +62,28 @@ export const CustomButton = ({
   ...props
 }: ButtonProps) => (
   <Button
-    type="button"
-    onClick={onClick}
+    type={type}
+    onPress={onPress}
     variant={variant}
     color={color}
-    className={clsx(buttonClasses.base, {
-      [buttonClasses.primary]: color === "primary",
-      [buttonClasses.secondary]: color === "secondary",
-      [buttonClasses.action]: color === "action",
-      [buttonClasses.dashed]: variant === "dashed",
-      [buttonClasses.transparent]: color === "transparent",
-      [buttonClasses.disabled]: disabled,
-      [buttonClasses.hover]: color !== "transparent" && !disabled,
-    })}
+    className={clsx(
+      buttonClasses.base,
+      {
+        [buttonClasses.primary]: color === "primary",
+        [buttonClasses.secondary]: color === "secondary",
+        [buttonClasses.action]: color === "action",
+        [buttonClasses.dashed]: variant === "dashed",
+        [buttonClasses.transparent]: color === "transparent",
+        [buttonClasses.disabled]: disabled,
+        [buttonClasses.hover]: color !== "transparent" && !disabled,
+      },
+      className,
+    )}
     startContent={startContent}
     endContent={endContent}
     size={size}
     radius={radius}
+    spinner={<CircularProgress aria-label="Loading..." size="sm" />}
     isLoading={isLoading}
     isIconOnly={isIconOnly}
     {...props}

tailwind.config.js

@@ -81,6 +81,7 @@ module.exports = {
             low: "#fcd34d",
           },
         },
+        danger: "#E11D48",
       },
       fontFamily: {
         sans: ["var(--font-sans)"],