added toasts popups + improved login/signup page + many more changes and improvements

components/SubmitButton.tsx

@@ -1,11 +1,11 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import { MouseEventHandler } from "react";
 
 type Props = {
   onClick: Function;
-  icon: IconDefinition;
+  icon?: IconDefinition;
   label: string;
+  loading: boolean;
   className?: string;
 };
 
@@ -13,15 +13,22 @@ export default function SubmitButton({
   onClick,
   icon,
   label,
+  loading,
   className,
 }: Props) {
   return (
     <div
-      className={`bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold cursor-pointer duration-100 hover:bg-sky-400 w-fit ${className}`}
-      onClick={onClick as MouseEventHandler<HTMLDivElement>}
+      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-400 cursor-auto"
+          : "bg-sky-500 hover:bg-sky-400 cursor-pointer"
+      } ${className}`}
+      onClick={() => {
+        if (!loading) onClick();
+      }}
     >
-      <FontAwesomeIcon icon={icon} className="h-5" />
-      {label}
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="text-center w-full">{label}</p>
     </div>
   );
 }