import React , { useRef } from 'react' ; import { Classes } from '@blueprintjs/core' ; import { ToastProvider , DefaultToast } from 'react-toast-notifications' ; import TopPanel from '../components/TopPanel' ; import { LIGHT_UI_BACKGROUND } from './SettingsProvider' ; import DeskreenStepper from './DeskreenStepper' ; export const CustomToastWithTheme = ( { children , ... props } ) => { return ( < DefaultToast components = { { Toast : CustomToastWithTheme } } { ... props } style = { { color : props . isdarktheme === 'false' ? '#293742' : '#BFCCD6' , backgroundColor : props . isdarktheme === 'false' ? LIGHT_UI_BACKGROUND : '#394B59' , } } > < > { children } < /> < /DefaultToast>); } ; export default function HomePage ( ) { const stepperRef = useRef ( ) ; return ( < ToastProvider placement = "top-center" autoDismissTimeout = { 5000 } components = { { Toast : CustomToastWithTheme } } > < div className = { Classes . TREE } > < TopPanel stepperRef = { stepperRef } /> < DeskreenStepper ref = { stepperRef } / > { } < /div> < /ToastProvider>); }