merged "AuthSubmitButton" with the "SubmitButton" + updated the other pages that needed this change

components/SubmitButton.tsx

@@ -2,11 +2,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type Props = {
-  onClick: Function;
+  onClick?: Function;
   icon?: IconProp;
   label: string;
   loading: boolean;
   className?: string;
+  type?: "button" | "submit" | "reset" | undefined;
 };
 
 export default function SubmitButton({
@@ -15,20 +16,22 @@ export default function SubmitButton({
   label,
   loading,
   className,
+  type,
 }: Props) {
   return (
-    <div
+    <button
+      type={type ? type : undefined}
       className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
         loading
           ? "bg-sky-600 cursor-auto"
           : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
       } ${className}`}
       onClick={() => {
-        if (!loading) onClick();
+        if (!loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5 select-none" />}
-      <p className="text-center w-full select-none">{label}</p>
-    </div>
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="text-center w-full">{label}</p>
+    </button>
   );
 }