feat: multi step toast notification enhancements

mrgnlabs · Nov 19, 2023 · dc11f5f · dc11f5f
1 parent d72bf58
commit dc11f5f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Toast/MultiStepToast.tsx b/apps/marginfi-v2-ui/src/components/common/Toast/MultiStepToast.tsx
@@ -20,25 +20,26 @@ export interface ToastStepWithStatus extends ToastStep {
 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} />
+      <h2 className="text-xl font-medium">{title}</h2>
+      <div className="pb-3 pt-6 space-y-2">
+        {steps.map((step, index) => {
+          if (step.status === "todo" || step.status === "canceled") return null;
+          return (
+            <div key={index}>
+              <div className="flex items-center space-x-2">
+                <h3 className="text-gray-400">
+                  {steps.length > 0 && <>{index + 1}</>}. {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} />}
+              </div>
+              {step.message && (
+                <p className="bg-destructive py-3 px-4 rounded-xl mt-2.5 text-destructive-foreground">{step.message}</p>
               )}
             </div>
-            {step.message && <p className="text-red-400 mt-1">{step.message}</p>}
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

diff --git a/apps/marginfi-v2-ui/src/styles/globals.css b/apps/marginfi-v2-ui/src/styles/globals.css
@@ -31,8 +31,8 @@
     --accent-highlight: 240 4% 21%;
     --accent-foreground: 0 0% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
+    --destructive: #e06d6f1a;
+    --destructive-foreground: 359 65% 65%;
 
     --border: 203 15% 11%;
     --input: 213 5% 32%;

diff --git a/apps/marginfi-v2-ui/tailwind.config.js b/apps/marginfi-v2-ui/tailwind.config.js
@@ -55,7 +55,7 @@ module.exports = {
           foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
+          DEFAULT: "var(--destructive)",
           foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {