From dbaa0727ae88329fe462009227c30053702eab70 Mon Sep 17 00:00:00 2001
From: Kartik <103111467+kartik-212004@users.noreply.github.com>
Date: Tue, 22 Jul 2025 19:37:05 +0530
Subject: [PATCH] fix: align toast icons with message text vertically (#22614)

* fix: align toast icons with message text vertically

* fix: align toast icons with message text vertically

* fix: align toast icons with message text vertically
---
 packages/ui/components/toast/showToast.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 062888525e..5dc6e3394b 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -16,7 +16,7 @@ export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
       "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
-    <span className="mt-1">
+    <span>
       <Icon name="check" className="size-4" />
     </span>
     <div className="flex items-center">
@@ -24,7 +24,7 @@ export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
         {message}
       </p>
     </div>
-    <span className="mt-1">
+    <span>
       <Icon name="x" className="size-4 hover:cursor-pointer" />
     </span>
   </button>
@@ -36,7 +36,7 @@ export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
       "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
-    <span className="mt-1">
+    <span>
       <Icon name="info" className="text-semantic-error  size-4" />
     </span>
     <div className="flex items-center">
@@ -44,7 +44,7 @@ export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
         {message}
       </p>
     </div>
-    <span className="mt-1">
+    <span>
       <Icon name="x" className="text-semantic-error size-4 hover:cursor-pointer" />
     </span>
   </button>
@@ -56,7 +56,7 @@ export const WarningToast = ({ message, onClose, toastId }: IToast) => (
       "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
     )}
     onClick={() => onClose(toastId)}>
-    <span className="mt-1">
+    <span>
       <Icon name="info" className="text-semantic-attention size-4" />
     </span>
     <div className="flex items-center">
@@ -64,7 +64,7 @@ export const WarningToast = ({ message, onClose, toastId }: IToast) => (
         {message}
       </p>
     </div>
-    <span className="mt-1">
+    <span>
       <Icon name="x" className="text-semantic-attention size-4 hover:cursor-pointer" />
     </span>
   </button>