Update toast style

src/pages/download/_downloadPythonPackage.js

@@ -60,17 +60,6 @@ function handlePartialSuccess(failedImages) {
   });
 }
 
-function handleNoGeneratedMockup() {
-  const description = `
-    <div>Try a different image/device. <br> If the issue persists, please report it on <a href='https://github.com/oursky/mockuphone.com/issues'>Github</a></div>
-  `;
-  showToast({
-    title: "No generated mockup",
-    description: description,
-    avatar: "/images/upload-error.svg",
-  });
-}
-
 function downloadGeneratedMockup(deviceId, images) {
   var zip = new JSZip();
   var count = 0;
@@ -112,8 +101,4 @@ export async function generateZIP(deviceId) {
   if (failedImages.length > 0 && images.size > 0) {
     handlePartialSuccess(failedImages);
   }
-
-  if (images.size === 0) {
-    handleNoGeneratedMockup();
-  }
 }

src/pages/model/_upload.js

@@ -3,6 +3,7 @@ import localforage from "localforage";
 import { ImageUpload, ImageUploadState } from "./models/_image-upload";
 import { isSameAspectRatio } from "./utils/_images";
 import { scrollToElementTop } from "./utils/_scroll";
+import { showToast } from "../../scripts/utils/toast/toast";
 
 let dragZoneCounter = 0; // https://stackoverflow.com/a/21002544/19287186
 const MAX_FILE_SIZE_BYTE = 104857600;
@@ -719,14 +720,33 @@ function main() {
     e.target.value = "";
   };
 
+  function handleNoGeneratedMockup() {
+    const description = `
+      <div>Try a different image/device. <br> If the issue persists, please report it on <a href='https://github.com/oursky/mockuphone.com/issues'>Github</a></div>
+    `;
+    showToast({
+      title: "No generated mockup",
+      description: description,
+      avatar: "/images/upload-error.svg",
+    });
+  }
+
   const navigateToDownloadPage = () => {
     window.location.href = "/download/?deviceId=" + window.workerDeviceId;
   };
 
   const onAllMockupGenerated = async (allGeneratedMockups) => {
-    localforage.setItem("generatedMockups", allGeneratedMockups).then(() => {
-      navigateToDownloadPage();
+    const haveGeneratedMockup = allGeneratedMockups.some((mockup) => {
+      return mockup.status === "success";
     });
+    if (haveGeneratedMockup) {
+      localforage.setItem("generatedMockups", allGeneratedMockups).then(() => {
+        navigateToDownloadPage();
+      });
+    } else {
+      window.viewModel.cancelMockup();
+      handleNoGeneratedMockup();
+    }
   };
 
   // observe fileListViewModel: isProcessing

src/scripts/utils/toast/toast.css

@@ -1,14 +1,33 @@
 @import url("toastify-js/src/toastify.css");
 
 .toast-close {
-  color: black !important;
+  opacity: 1;
+  padding: 0;
+  margin-left: 20px;
 }
 
 .toast-header {
   display: flex;
-  gap: 12px;
-  margin-bottom: 8px;
+  gap: 10px;
+  margin-bottom: 16px;
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 700;
   color: black;
+  align-items: center;
+}
+
+.toast-content {
+  font-size: 12px;
+  font-weight: 400;
+
+  ul {
+    margin-bottom: 16px;
+  }
+
+  a:hover,
+  a:link,
+  a:visited {
+    color: black;
+    text-decoration: underline;
+  }
 }

src/scripts/utils/toast/toast.ts

@@ -7,6 +7,13 @@ interface ToastOptions extends StartToastifyInstance.Options {
   title?: string;
 }
 
+function updateCloseButton() {
+  const closeButtonNode = document.querySelector(".toast-close");
+  if (closeButtonNode) {
+    closeButtonNode.innerHTML = "<img src='/images/close.svg' >";
+  }
+}
+
 export function showToast(options: ToastOptions) {
   const { description, avatar, title } = options;
   const toastNode = document.createElement("div");
@@ -18,6 +25,7 @@ export function showToast(options: ToastOptions) {
     title ?? ""
   }</span>`;
 
+  toastMessage.classList.add("toast-content");
   toastMessage.innerHTML = description;
   toastNode.appendChild(toastHeader);
   toastNode.appendChild(toastMessage);
@@ -30,6 +38,9 @@ export function showToast(options: ToastOptions) {
       color: "black",
       alignItems: "start",
       justifyContent: "start",
+      boxShadow: "0px 4px 20px 0px rgba(0, 0, 0, 0.3)",
+      borderRadius: "10px",
+      padding: "20px",
     },
     onClick: function () {},
     duration: 3000,
@@ -39,4 +50,6 @@ export function showToast(options: ToastOptions) {
     stopOnFocus: true,
     ...options,
   }).showToast();
+
+  updateCloseButton();
 }