fix: update exit intent popup title and dismiss text for clarity; adjust layout styles

Author: teetow

src/assets/data/promotions.ts

@@ -328,12 +328,12 @@ const promoData: Record<string, PromoData> = {
       link: "https://audio.com/",
     },
     popupOptions: {
-      title: "Keep your audio safe in the cloud",
+      title: "Leave before setting up cloud storage?",
       routeAllowlist: ["/download", "/post-download", "/cloud-saving"],
       displayMode: "modal",
       promoImageSrc: AUDIO_COM_EXIT_POPUP_IMAGE_SRC,
       promoImageAlt: "Audio.com promotion",
-      dismissText: "Not now",
+      dismissText: "Leave site",
       policy: {
         minDwellMs: 3000,
       },

src/components/banner/ExitIntentPopup.tsx

@@ -396,23 +396,28 @@ const ExitIntentPopup: React.FC<ExitIntentPopupProps> = ({ requestPath }) => {
   const body = popupBody ?? selectedPromo.message;
   const promoImageClassName =
     displayMode === "toast"
-      ? "mb-3 h-[5rem] w-full rounded-md object-cover object-center"
-      : "mb-3 h-auto w-full rounded-md";
+      ? "h-[5rem] w-full rounded-md object-cover object-center"
+      : "h-auto w-full rounded-md";
 
   const content = (
-    <div className="w-[calc(100%-2rem)] max-w-md rounded-lg border border-gray-300 bg-white p-4 shadow-lg">
+    <div className="flex w-[calc(100%-2rem)] max-w-[30rem] flex-col gap-4 rounded-lg border border-gray-300 bg-white px-8 py-9 shadow-lg">
       {promoImageSrc && (
         <img
           src={promoImageSrc}
           alt={promoImageAlt ?? ""}
           className={promoImageClassName}
         />
       )}
-      <p id="exit-intent-title" className="text-lg font-semibold text-gray-900">
-        {title}
-      </p>
-      <p className="mt-2 text-gray-700">{body}</p>
-      <div className="mt-4 flex gap-2 justify-end">
+      <div className="flex flex-col gap-2">
+        <p
+          id="exit-intent-title"
+          className="text-lg font-semibold text-gray-900"
+        >
+          {title}
+        </p>
+        <p className="text-gray-700">{body}</p>
+      </div>
+      <div className="mt-5 flex justify-end gap-2">
         <button
           type="button"
           onClick={() => handleDismiss("button")}