diff --git a/src/state.ts b/src/state.ts index 89e8df1..03f7915 100644 --- a/src/state.ts +++ b/src/state.ts @@ -116,6 +116,7 @@ class Observer { promise, type: 'loading', message: data.loading, + description: typeof data.description !== 'function' ? data.description : undefined, }); } @@ -131,18 +132,25 @@ class Observer { const message = // @ts-expect-error typeof data.error === 'function' ? data.error(`HTTP error! status: ${response.status}`) : data.error; - this.create({ id, type: 'error', message }); + const description = + typeof data.description === 'function' + ? // @ts-expect-error + data.description(`HTTP error! status: ${response.status}`) + : data.description; + this.create({ id, type: 'error', message, description }); } else if (data.success !== undefined) { shouldDismiss = false; const message = typeof data.success === 'function' ? data.success(response) : data.success; - this.create({ id, type: 'success', message }); + const description = typeof data.description === 'function' ? data.description(response) : data.description; + this.create({ id, type: 'success', message, description }); } }) .catch((error) => { if (data.error !== undefined) { shouldDismiss = false; const message = typeof data.error === 'function' ? data.error(error) : data.error; - this.create({ id, type: 'error', message }); + const description = typeof data.description === 'function' ? data.description(error) : data.description; + this.create({ id, type: 'error', message, description }); } }) .finally(() => { diff --git a/src/types.ts b/src/types.ts index 7a2bc6c..eab1a96 100644 --- a/src/types.ts +++ b/src/types.ts @@ -4,10 +4,13 @@ export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | export type PromiseT = Promise | (() => Promise); -export type PromiseData = ExternalToast & { +export type PromiseExternalToast = Omit; + +export type PromiseData = PromiseExternalToast & { loading?: string | React.ReactNode; success?: string | React.ReactNode | ((data: ToastData) => React.ReactNode | string); error?: string | React.ReactNode | ((error: any) => React.ReactNode | string); + description?: string | React.ReactNode | ((data: any) => React.ReactNode | string); finally?: () => void | Promise; }; diff --git a/website/src/components/Installation/installation.module.css b/website/src/components/Installation/installation.module.css index 7a63324..e371265 100644 --- a/website/src/components/Installation/installation.module.css +++ b/website/src/components/Installation/installation.module.css @@ -10,6 +10,7 @@ border: 1px solid var(--gray3); display: flex; align-items: center; + color: var(--gray12); } .copy { diff --git a/website/src/globals.css b/website/src/globals.css index 7f88be4..9fee8f5 100644 --- a/website/src/globals.css +++ b/website/src/globals.css @@ -1,4 +1,5 @@ -:root { +:root, +.light { --gray0: #fff; --gray1: hsl(0, 0%, 99%); --gray2: hsl(0, 0%, 97.3%); @@ -48,6 +49,7 @@ .wrapper { --side-padding: 16px; + background: var(--gray0); margin: 0; padding: 0; padding-top: 100px; @@ -175,7 +177,6 @@ m .wrapper h2 { } .wrapper a { - color: inherit; text-decoration-color: var(--gray10); text-underline-position: from-font; } diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 6052d6a..bbe9ec3 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -18,7 +18,7 @@ export default function Home() { const [closeButton, setCloseButton] = React.useState(false); return ( -
+