From 0235f37faaad0aa649a2bf4348ed3e4ff9dcf950 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Fri, 27 Sep 2024 10:04:41 +0200
Subject: [PATCH] chore: tweak styles for button with icons

---
 components/icons/Icons.tsx                | 25 ++++++++++++++++++++++-
 components/providers/forms/DeleteForm.tsx |  2 ++
 components/providers/forms/EditForm.tsx   |  4 +++-
 components/ui/custom/CustomButton.tsx     |  4 ++--
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/icons/Icons.tsx b/components/icons/Icons.tsx
index b590eb4661..7d11f620aa 100644
--- a/components/icons/Icons.tsx
+++ b/components/icons/Icons.tsx
@@ -718,7 +718,6 @@ export const CustomFilterIcon: React.FC<IconSvgProps> = ({
       height={size || height || 15}
       viewBox="0 0 15 15"
       width={size || width || 15}
-      className="mr-2 size-3.5 shrink-0"
       aria-hidden="true"
       {...props}
     >
@@ -731,3 +730,27 @@ export const CustomFilterIcon: React.FC<IconSvgProps> = ({
     </svg>
   );
 };
+
+export const SaveIcon: React.FC<IconSvgProps> = ({
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      height={size || height || 48}
+      viewBox="0 0 24 24"
+      width={size || width || 48}
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="m20.71 9.29l-6-6a1 1 0 0 0-.32-.21A1.1 1.1 0 0 0 14 3H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-8a1 1 0 0 0-.29-.71M9 5h4v2H9Zm6 14H9v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1Zm4-1a1 1 0 0 1-1 1h-1v-3a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v3H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6.41l4 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/providers/forms/DeleteForm.tsx b/components/providers/forms/DeleteForm.tsx
index 639bee8c93..ec478fe690 100644
--- a/components/providers/forms/DeleteForm.tsx
+++ b/components/providers/forms/DeleteForm.tsx
@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { deleteProvider } from "@/actions";
+import { DeleteIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
@@ -73,6 +74,7 @@ export const DeleteForm = ({
             color="danger"
             size="lg"
             isLoading={isLoading}
+            startContent={!isLoading && <DeleteIcon size={24} />}
           >
             {isLoading ? <>Loading</> : <span>Delete</span>}
           </CustomButton>
diff --git a/components/providers/forms/EditForm.tsx b/components/providers/forms/EditForm.tsx
index f61ef8d7c1..c8581caccc 100644
--- a/components/providers/forms/EditForm.tsx
+++ b/components/providers/forms/EditForm.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { updateProvider } from "@/actions";
+import { SaveIcon } from "@/components/icons";
 import { useToast } from "@/components/ui";
 import { CustomButton, CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
@@ -105,6 +106,7 @@ export const EditForm = ({
             color="action"
             size="lg"
             isLoading={isLoading}
+            startContent={!isLoading && <SaveIcon size={24} />}
           >
             {isLoading ? <>Loading</> : <span>Save</span>}
           </CustomButton>
diff --git a/components/ui/custom/CustomButton.tsx b/components/ui/custom/CustomButton.tsx
index c361561846..4b1ce2b2a5 100644
--- a/components/ui/custom/CustomButton.tsx
+++ b/components/ui/custom/CustomButton.tsx
@@ -2,7 +2,7 @@ import { Button, CircularProgress } from "@nextui-org/react";
 import clsx from "clsx";
 
 export const buttonClasses = {
-  base: "px-4 inline-flex items-center justify-center relative z-0 text-center whitespace-nowrap",
+  base: "px-2 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,7 +14,7 @@ export const buttonClasses = {
 };
 
 interface ButtonProps {
-  type: "button" | "submit" | "reset";
+  type?: "button" | "submit" | "reset";
   className?: string;
   variant?:
     | "solid"