chore: clean up / styling adjustments in new toast components

apps/marginfi-v2-ui/src/components/common/Toast/ErrorToast.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { IconAlertTriangle } from "~/components/ui/icons";
+
+export interface ErrorToastProps {
+  title: string;
+  message: string;
+}
+
+export const ErrorToast: FC<ErrorToastProps> = ({ title, message }) => {
+  return (
+    <div className="w-full h-full bg-black text-white rounded-lg shadow-lg z-50 p-1">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <div className="py-3 text-sm">
+        <div className="flex items-center space-x-2">
+          <p className="text-red-400">{message}</p>
+          <IconAlertTriangle size={18} className="text-red-400" />
+        </div>
+      </div>
+    </div>
+  );
+};

apps/marginfi-v2-ui/src/components/common/Toast/MultiStepToast.tsx

@@ -0,0 +1,45 @@
+import { FC } from "react";
+import { IconLoader, IconCheck, IconAlertTriangle, IconClockHour4 } from "~/components/ui/icons";
+
+export interface MultiStepToastProps {
+  title: string;
+  steps: ToastStepWithStatus[];
+}
+
+export interface ToastStep {
+  label: string;
+}
+
+export type ToastStatus = "todo" | "pending" | "success" | "error" | "canceled";
+
+export interface ToastStepWithStatus extends ToastStep {
+  status: ToastStatus;
+  message?: string;
+}
+
+export const MultiStepToast: FC<MultiStepToastProps> = ({ title, steps }) => {
+  return (
+    <div className="w-full h-full bg-black text-white rounded-lg shadow-lg z-50 p-1">
+      <h2 className="text-lg font-semibold">{title}</h2>
+      <div className="py-3 text-sm space-y-2">
+        {steps.map((step, index) => (
+          <div key={index}>
+            <div className="flex items-center space-x-2">
+              <h3>{step.label}</h3>
+              {step.status === "success" ? (
+                <IconCheck size={18} className="text-green-400" />
+              ) : step.status === "error" ? (
+                <IconAlertTriangle size={18} className="text-red-400" />
+              ) : step.status === "pending" ? (
+                <IconLoader size={18} />
+              ) : (
+                <IconClockHour4 size={18} />
+              )}
+            </div>
+            {step.message && <p className="text-red-400 mt-1">{step.message}</p>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

apps/marginfi-v2-ui/src/components/ui/icons.tsx

@@ -18,6 +18,7 @@ import {
   IconArrowDown,
   IconExternalLink,
   IconUserPlus,
+  IconClockHour4,
 } from "@tabler/icons-react";
 import { cn } from "~/utils/themeUtils";
 
@@ -301,6 +302,7 @@ export {
   IconExternalLink,
   IconUserPlus,
   IconBrandDiscordFilled,
+  IconClockHour4,
 
   // customed icons
   IconBraveWallet,

apps/marginfi-v2-ui/src/utils/toastUtils.tsx

@@ -1,5 +1,5 @@
 import { Id, toast } from "react-toastify";
-import { ToastStep, ToastStepWithStatus, MultiStepToast, ErrorToast } from "~/components/common/toasts";
+import { ToastStep, ToastStepWithStatus, MultiStepToast, ErrorToast } from "~/components/common/Toast";
 
 export class MultiStepToastHandle {
   private _title: string;