chore: implement suggestions

components/Input/index.tsx

@@ -34,7 +34,7 @@ export function InputBase({
       </label>
       <div
         className={`text-iregular mt-2 flex items-center  ${
-          enabled == false ? "text-gray-500" : textColor 
+          enabled == false ? "text-gray-500" : textColor
         } ${backColor} appearance-none rounded-full border border-gray-300 px-3 py-2 pl-6 placeholder-gray-400 shadow-sm sm:text-sm`}
       >
         {children}

components/Notification/Notification.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+
+interface INotificationProps {
+  title: string;
+}
+
+export default function Notification({ title }: INotificationProps) {
+  console.log("Notification");
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className="fixed right-4 top-0 z-50 h-16 w-72">
+      <div className="pointer-events-auto min-w-full overflow-hidden rounded-lg bg-quinary shadow-lg ring-1 ring-black ring-opacity-5 ">
+        <div className="min-w-full p-4 ">
+          <div className="flex items-start">
+            <div className="flex-shrink-0"></div>
+            <div className="ml-3 w-0 flex-1 pt-0.5">
+              <p className="text-md font-medium text-white">{title}</p>
+            </div>
+            <div className="ml-4 flex flex-shrink-0">
+              <button
+                onClick={() => setVisible(false)}
+                className="inline-flex rounded-md bg-quinary text-white hover:text-primary focus:outline-none"
+              >
+                <span className="sr-only">Close</span>
+                <span className="h-5 w-5">X</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/Notification/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Notification";

components/ResetPassword/index.tsx

@@ -1,34 +1,40 @@
+import { useState, useEffect } from "react";
 import { resetPassword } from "@lib/api";
-import Swal from "sweetalert2";
+import Notification from "@components/Notification";
 
-const onResetPassword = (user: any) => {
-  resetPassword(user.email)
-    .then((_) =>
-      Swal.fire({
-        icon: "success",
-        title: "Password Reset",
-        text: "An email has been sent to your account for you to recover your password!",
+export default function ResetPassword(user: any) {
+  const [showNotification, setShowNotification] = useState(false);
+
+  const onResetPassword = (user: any) => {
+    resetPassword(user.email)
+      .then((_) => {
+        setShowNotification(true);
       })
-    )
-    .catch((_) => {
-      Swal.fire({
-        icon: "error",
-        title: "Oops...",
-        text: "Something went wrong!",
+      .catch((_) => {
+        setShowNotification(false);
       });
-    });
-};
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowNotification(false);
+    }, 2500);
+
+    return () => clearTimeout(timer);
+  });
 
-export default function ResetPassword(user) {
   return (
-    <button
-      className="inline-block h-auto pl-6 pb-5 text-quinary underline"
-      onClick={(e) => {
-        e.preventDefault();
-        onResetPassword(user);
-      }}
-    >
-      Reset Password
-    </button>
+    <>
+      <button
+        className="inline-block h-auto pl-6 pb-5 text-quinary underline"
+        onClick={(e) => {
+          e.preventDefault();
+          onResetPassword(user);
+        }}
+      >
+        Reset Password
+      </button>
+      {showNotification && <Notification title="Password reset email sent" />}
+    </>
   );
 }

components/Select/index.tsx

@@ -50,7 +50,9 @@ export default function Select({
           {...rest}
         >
           {options.map((option) => (
-            <option key={option.key} value={option.key}>{option.name}</option>
+            <option key={option.key} value={option.key}>
+              {option.name}
+            </option>
           ))}
         </select>
         <ChevronDownIcon