smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Toasts working

Browse Source
This commit is contained in:
Sean Edmunds
2025-01-24 15:41:21 -06:00
parent 6b162902fe
commit f2073f951d
8 changed files with 96 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/ThemeProvider.tsx
View File

@@ -12,6 +12,56 @@ export function ThemeProvider({
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--toastify-color-light': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
'--toastify-color-dark': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
'--toastify-color-info': '#3498db',
'--toastify-color-success': '#07bc0c',
'--toastify-color-warning': '#f1c40f',
'--toastify-color-error': 'hsl(6, 78%, 57%)',
'--toastify-color-transparent': 'rgba(255, 255, 255, 0.7)',
'--toastify-icon-color-info': 'var(--toastify-color-info)',
'--toastify-icon-color-success': 'var(--toastify-color-success)',
'--toastify-icon-color-warning': 'var(--toastify-color-warning)',
'--toastify-icon-color-error': 'var(--toastify-color-error)',
'--toastify-container-width': 'fit-content',
'--toastify-toast-width': '320px',
'--toastify-toast-offset': '16px',
'--toastify-toast-top':
'max(var(--toastify-toast-offset), env(safe-area-inset-top))',
'--toastify-toast-right':
'max(var(--toastify-toast-offset), env(safe-area-inset-right))',
'--toastify-toast-left':
'max(var(--toastify-toast-offset), env(safe-area-inset-left))',
'--toastify-toast-bottom':
'max(var(--toastify-toast-offset), env(safe-area-inset-bottom))',
'--toastify-toast-background': '#fff',
'--toastify-toast-padding': '14px',
'--toastify-toast-min-height': '64px',
'--toastify-toast-max-height': '800px',
'--toastify-toast-bd-radius': '6px',
'--toastify-toast-shadow': '0px 4px 12px rgba(0, 0, 0, 0.1)',
'--toastify-font-family': 'sans-serif',
'--toastify-z-index': '9999',
'--toastify-text-color-light': theme.primaryColor,
'--toastify-text-color-dark': theme.primaryColor,
/* Used only for colored theme */
'--toastify-text-color-info': '#fff',
'--toastify-text-color-success': '#fff',
'--toastify-text-color-warning': '#fff',
'--toastify-text-color-error': '#fff',
'--toastify-spinner-color': '#616161',
'--toastify-spinner-color-empty-area': '#e0e0e0',
'--toastify-color-progress-light': theme.accentColor,
'--toastify-color-progress-dark': '#bb86fc',
'--toastify-color-progress-info': 'var(--toastify-color-info)',
'--toastify-color-progress-success': 'var(--toastify-color-success)',
'--toastify-color-progress-warning': 'var(--toastify-color-warning)',
'--toastify-color-progress-error': 'var(--toastify-color-error)',
/* used to control the opacity of the progress trail */
'--toastify-color-progress-bgo': 0.2,
}}
>
{children}

16
src/components/ToastError.tsx
View File

@@ -1,16 +0,0 @@
import { Stack, Text } from '@mantine/core';
import { stackClasses } from 'styles';
export function ToastError({ err }: { err: any }) {
const errorResponse = JSON.parse(err.message);
return (
<Stack className={stackClasses.VStack} style={{ alignItems: 'flex-start' }}>
<Text>
Status: {errorResponse.status} {errorResponse.statusText}
</Text>
<Text>Details: {errorResponse.msg}</Text>
{errorResponse.loc && <Text>Location: {errorResponse.loc}</Text>}
{errorResponse.type && <Text>Type: {errorResponse.type}</Text>}
</Stack>
);
}