UI UPDATE & FIX : update the toast styling & fix the global input com…

…ponoents

src/components/formComponents/RadioGroupInput.jsx

@@ -20,7 +20,7 @@ const RadioGroupInput = ({ name, register, errors, valueArray = [] }) => {
  </div>
  <div
  className={`mt-2 collapse ${
- errors.username ? "collapse-open" : "collapse-close"
+ errors[name]?.message ? "collapse-open" : "collapse-close"
  }`}
  >
  <p className="text-red-300 collapse-content p-0 pl-3 pb-2">

src/components/formComponents/TextInput.jsx

@@ -2,6 +2,7 @@ const TextInput = ({
  name,
  label,
  placeholder,
+ defaultValue = undefined,
  register,
  errors,
  style = "",
@@ -25,6 +26,7 @@ const TextInput = ({
  type="text"
  className={`grow` + style}
  placeholder={placeholder}
+ defaultValue={defaultValue}
  {...register(name)}
  />
  </label>

src/components/global/Toast.jsx

@@ -3,6 +3,15 @@ import { Slide, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 export default function Toast() {
+ const contextClass = {
+ success: "bg-green-600",
+ error: "bg-red-600",
+ info: "bg-gray-600",
+ warning: "bg-orange-400",
+ default: "bg-green-600",
+ dark: "bg-white-600 font-gray-300",
+ };
+
  return (
  <ToastContainer
  position="top-center"
@@ -17,7 +26,9 @@ export default function Toast() {
  theme="colored"
  transition={Slide}
  toastClassName={(context) => {
- return `relative bg-red-600 bg-opacity-50 flex p-1 min-h-10 w-full rounded-md justify-between backdrop-blur-lg overflow-hidden cursor-pointer`;
+ return `${
+ contextClass[context?.type || "default"]
+ } relative bg-opacity-50 flex p-1 w-full rounded-md justify-between backdrop-blur-lg overflow-hidden cursor-pointer`;
  }}
  />
  );