removed mui and emotion

app/components/layout/DarkModeButton.tsx

@@ -1,6 +1,7 @@
 import { Button, Tooltip } from '@nextui-org/react'
 import { useTheme } from 'next-themes'
 import { MoonIcon, SunIcon } from '~/components/icons'
+import { errorHandler } from '~/utils/notifications'
 
 const DarkMode = () => {
 	const { theme, setTheme } = useTheme()

app/components/layout/LoginButton.client.tsx

@@ -37,7 +37,7 @@ const LoginButton = () => {
 				size="xs"
 				onClose={() => setOpenAuth(false)}
 			>
-				<ModalContent className="bg-primary">
+				<ModalContent className="bg-primary-50">
 					<Auth
 						supabaseClient={supabase}
 						appearance={{

app/root.tsx

@@ -1,6 +1,5 @@
 // this file establishes the root component that renders all subsequent / child routes
 // it also injects top level styling, HTML meta tags, links, and javascript for browser rendering
-import { Snackbar } from '@mui/joy'
 import { NextUIProvider } from '@nextui-org/react'
 import {
 	LinksFunction,
@@ -23,14 +22,14 @@ import { SupabaseClient } from '@supabase/supabase-js'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import posthog from 'posthog-js'
 import { useEffect, useState } from 'react'
+import { Toaster } from 'react-hot-toast'
 import { createHead } from 'remix-island'
 import { setAppState } from '~/api/db/appState'
 import ConfirmModal from '~/components/ConfirmModal'
 import { InitialLoader } from '~/components/Loader'
 import { ErrorBoundary } from '~/errorBoundary'
 import globalStyles from '~/global.css'
 import tailwind from '~/tailwind.css'
-import { Notification } from '~/utils/notifications'
 
 // this is used to inject environment variables into the browser
 export async function loader({ context }: LoaderFunctionArgs) {
@@ -84,7 +83,6 @@ const HtmlDoc = ({ children }: { children: React.ReactNode }) => {
 const ThemeLoader = ({ error }: { error?: string }) => {
 	const data = error ? {} : useLoaderData<typeof loader>()
 	const [loading, setLoading] = useState(true)
-	const [notification, setNotification] = useState<Notification>()
 	const [supabase, setSupabase] = useState<SupabaseClient>()
 
 	useEffect(() => {
@@ -93,15 +91,6 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 			setLoading(false)
 		}, 500)
 
-		// for snackbar notifications
-		const notify = (e: CustomEventInit) =>
-			setNotification({
-				message: e.detail.message,
-				color: e.detail.color || 'danger'
-			})
-
-		window.addEventListener('notify', notify)
-
 		// initalize posthog
 		posthog.init(data.ENV.REACT_APP_PUBLIC_POSTHOG_KEY, {
 			api_host: data.ENV.REACT_APP_PUBLIC_POSTHOG_HOST,
@@ -132,13 +121,11 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 				posthog.capture('user logged out')
 				Sentry.setUser(null)
 				posthog.reset()
-				notify({ detail: { message: 'Logged out', color: 'success' } })
 			}
 		})
 
 		return () => {
 			clearTimeout(timer)
-			window.removeEventListener('notify', notify)
 		}
 	}, [data])
 
@@ -153,16 +140,7 @@ const ThemeLoader = ({ error }: { error?: string }) => {
 						<ConfirmModal />
 					</>
 				)}
-				<Snackbar
-					open={!!notification}
-					autoHideDuration={5000}
-					variant="soft"
-					color={notification?.color}
-					size="md"
-					onClose={() => setNotification(undefined)}
-				>
-					{notification?.message}
-				</Snackbar>
+				<Toaster toastOptions={{ duration: 5000 }} />
 			</NextThemesProvider>
 		</NextUIProvider>
 	)

app/utils/notifications.tsx

@@ -1,21 +1,9 @@
-import { SnackbarProps } from '@mui/joy'
-
-type Notification = {
-	message: string
-	color?: SnackbarProps['color']
-}
+import toast from 'react-hot-toast'
 
 const errorHandler = (error: Error | string) => {
 	const err = typeof error === 'string' ? Error(error) : error
-
 	console.error(err.message)
-
-	window.dispatchEvent(
-		new CustomEvent('notify', {
-			detail: { message: err?.message, color: 'danger' }
-		})
-	)
+	toast.error(err?.message)
 }
 
 export { errorHandler }
-export type { Notification }

package.json

@@ -12,11 +12,7 @@
 		"test": "playwright test"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.11.1",
-		"@emotion/styled": "^11.11.0",
 		"@fontsource/public-sans": "~4.5.11",
-		"@mui/joy": "^5.0.0-beta.15",
-		"@mui/material": "^5.14.18",
 		"@nextui-org/react": "^2.2.9",
 		"@remix-run/cloudflare": "^2.4.0",
 		"@remix-run/cloudflare-pages": "^2.4.0",
@@ -35,6 +31,7 @@
 		"posthog-js": "^1.94.4",
 		"react": "~18",
 		"react-dom": "~18",
+		"react-hot-toast": "^2.4.1",
 		"remix-island": "^0.1.2",
 		"teaful": "~0.11.1",
 		"use-count-up": "^3.0.1",