From 66d73f907f491d6af16dcf0dd9466e267b0bb7d2 Mon Sep 17 00:00:00 2001
From: emilkowalski <e@emilkowal.ski>
Date: Fri, 3 Mar 2023 11:57:58 +0100
Subject: [PATCH 1/4] Pass props correctly

---
 src/index.tsx | 10 +++++-----
 src/state.ts  |  2 +-
 src/types.ts  |  9 ++++-----
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index a61a8ca..58bca4e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import './styles.css';
 import { getAsset, Loader } from './assets';
-import { HeightT, Position, ToastT, ToastToDismiss } from './types';
+import { HeightT, Position, PromiseData, ToastT, ToastToDismiss } from './types';
 import { ToastState, toast } from './state';
 
 // Visible toasts amount
@@ -204,15 +204,15 @@ const Toast = (props: ToastProps) => {
   const promiseTitle = React.useMemo(() => {
     switch (promiseStatus) {
       case 'loading':
-        return toast.promiseData.loading;
+        return (toast as PromiseData).loading;
       case 'success':
-        return toast.promiseData.success;
+        return (toast as PromiseData).success;
       case 'error':
-        return toast.promiseData.error;
+        return (toast as PromiseData).error;
       default:
         return null;
     }
-  }, [toast.promiseData, promiseStatus]);
+  }, [promiseStatus]);
 
   return (
     <li
diff --git a/src/state.ts b/src/state.ts
index 4c187b0..780f633 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -49,7 +49,7 @@ class Observer {
 
   promise = (promise: PromiseT, data?: PromiseData) => {
     const id = toastsCounter++;
-    this.publish({ promiseData: data, promise, id });
+    this.publish({ ...data, promise, id });
     return id;
   };
 
diff --git a/src/types.ts b/src/types.ts
index e29d80e..635614c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,14 +2,14 @@ import React from 'react';
 
 export type ToastTypes = 'normal' | 'action' | 'success' | 'error' | 'loading';
 
-export type PromiseData = {
-  loading: string;
+export type PromiseT = Promise<any> | (() => Promise<any>);
+
+export type PromiseData = ExternalToast & {
+  loading: string | React.ReactNode;
   success: string | React.ReactNode;
   error: string | React.ReactNode;
 };
 
-export type PromiseT = Promise<any> | (() => Promise<any>);
-
 export interface ToastT {
   id: number;
   title?: string | React.ReactNode;
@@ -30,7 +30,6 @@ export interface ToastT {
     onClick?: () => void;
   };
   promise?: PromiseT;
-  promiseData?: PromiseData;
   style?: React.CSSProperties;
   className?: string;
   descriptionClassName?: string;

From 8f1281ced5d813d7c69e6783a8b7a10deaf15b45 Mon Sep 17 00:00:00 2001
From: emilkowalski <e@emilkowal.ski>
Date: Fri, 3 Mar 2023 11:59:48 +0100
Subject: [PATCH 2/4] Override types

---
 src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 58bca4e..7c39d96 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -204,11 +204,11 @@ const Toast = (props: ToastProps) => {
   const promiseTitle = React.useMemo(() => {
     switch (promiseStatus) {
       case 'loading':
-        return (toast as PromiseData).loading;
+        return (toast as unknown as PromiseData).loading;
       case 'success':
-        return (toast as PromiseData).success;
+        return (toast as unknown as PromiseData).success;
       case 'error':
-        return (toast as PromiseData).error;
+        return (toast as unknown as PromiseData).error;
       default:
         return null;
     }

From 05a9df89f92bf284a7fe8f10d86ff61b90c4a890 Mon Sep 17 00:00:00 2001
From: emilkowalski <e@emilkowal.ski>
Date: Fri, 3 Mar 2023 14:13:43 +0100
Subject: [PATCH 3/4] Better types

---
 src/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 7c39d96..153c203 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -202,13 +202,17 @@ const Toast = (props: ToastProps) => {
   }, [toast.delete]);
 
   const promiseTitle = React.useMemo(() => {
+    const isPromise = (toast: ToastT): toast is PromiseData & { id: number } => Boolean(toast.promise);
+
+    if (!isPromise(toast)) return null;
+
     switch (promiseStatus) {
       case 'loading':
-        return (toast as unknown as PromiseData).loading;
+        return toast.loading;
       case 'success':
-        return (toast as unknown as PromiseData).success;
+        return toast.success;
       case 'error':
-        return (toast as unknown as PromiseData).error;
+        return toast.error;
       default:
         return null;
     }

From 08a78880f46a7b094cb094c054629ca926567fb7 Mon Sep 17 00:00:00 2001
From: emilkowalski <e@emilkowal.ski>
Date: Fri, 3 Mar 2023 14:17:25 +0100
Subject: [PATCH 4/4] Tweaks

---
 website/app/globals.css                         | 2 +-
 website/src/components/Footer/footer.module.css | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/website/app/globals.css b/website/app/globals.css
index 049bc73..8c67725 100644
--- a/website/app/globals.css
+++ b/website/app/globals.css
@@ -131,6 +131,6 @@ code {
 
 @media (max-width: 600px) {
   .buttons {
-    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
+    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
   }
 }
diff --git a/website/src/components/Footer/footer.module.css b/website/src/components/Footer/footer.module.css
index 13e1063..9280d42 100644
--- a/website/src/components/Footer/footer.module.css
+++ b/website/src/components/Footer/footer.module.css
@@ -26,3 +26,10 @@
 .p a:hover {
   text-decoration: underline;
 }
+
+@media (max-width: 600px) {
+  .wrapper {
+    margin-top: 128px;
+    padding: 16px 0;
+  }
+}