fix: align tick icon, text, and cross icon inside toaster (calcom#21607)

* Fix: align tick icon, text, and cross icon inside toaster

* fix: align elements in toaster

* fix: toaster icon changes

* test approval recheck

* fix: toast message id fixed

* fix: merge conflict resolved

* fix:test recheck

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>

Author: faizshaikh17

packages/ui/components/toast/showToast.tsx

@@ -13,53 +13,59 @@ type IToast = {
 export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
+      "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-0.5">
-      <Icon name="check" className="h-4 w-4" />
+    <span className="mt-1">
+      <Icon name="check" className="size-4" />
     </span>
-    <p data-testid="toast-success" className="m-0 w-full text-left">
-      {message}
-    </p>
-    <span className="mt-0.5">
-      <Icon name="x" className="h-4 w-4 hover:cursor-pointer" />
+    <div className="flex items-center">
+      <p data-testid="toast-success" className="m-0 w-full text-left">
+        {message}
+      </p>
+    </div>
+    <span className="mt-1">
+      <Icon name="x" className="size-4 hover:cursor-pointer" />
     </span>
   </button>
 );
 
 export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
+      "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-0.5">
-      <Icon name="info" className="text-semantic-error h-4 w-4" />
+    <span className="mt-1">
+      <Icon name="info" className="text-semantic-error  size-4" />
     </span>
-    <p data-testid="toast-error" className="m-0 w-full text-left">
-      {message}
-    </p>
-    <span className="mt-0.5">
-      <Icon name="x" className="text-semantic-error h-4 w-4 hover:cursor-pointer" />
+    <div className="flex items-center">
+      <p data-testid="toast-error" className="m-0 w-full text-left">
+        {message}
+      </p>
+    </div>
+    <span className="mt-1">
+      <Icon name="x" className="text-semantic-error size-4 hover:cursor-pointer" />
     </span>
   </button>
 );
 
 export const WarningToast = ({ message, onClose, toastId }: IToast) => (
   <button
     className={classNames(
-      "animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
+      "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-0.5">
-      <Icon name="info" className="text-semantic-attention h-4 w-4" />
+    <span className="mt-1">
+      <Icon name="info" className="text-semantic-attention size-4" />
     </span>
-    <p data-testid="toast-warning" className="m-0 w-full text-left">
-      {message}
-    </p>
-    <span className="mt-0.5">
-      <Icon name="x" className="text-semantic-attention h-4 w-4 hover:cursor-pointer" />
+    <div className="flex items-center">
+      <p data-testid="toast-warning" className="m-0 w-full text-left">
+        {message}
+      </p>
+    </div>
+    <span className="mt-1">
+      <Icon name="x" className="text-semantic-attention size-4 hover:cursor-pointer" />
     </span>
   </button>
 );
@@ -71,7 +77,6 @@ type ToastVariants = "success" | "warning" | "error";
 export function showToast(
   message: string,
   variant: ToastVariants,
-  // Options or duration (duration for backwards compatibility reasons)
   options: number | ExternalToast = TOAST_VISIBLE_DURATION
 ) {
   const _options: ExternalToast = typeof options === "number" ? { duration: options } : options;