diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6e43fc4..4118291 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import ThemeWrapper from '@/lib/components/ThemeWrapper'; +import './globals.css'; const inter = Inter({ subsets: ['latin'] }); @@ -16,7 +17,7 @@ export default function RootLayout({ }) { return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 34db6e6..8f5dd1c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,12 +1,11 @@ "use client"; -import { Button, Flex, Text } from '@radix-ui/themes'; +import { Heading } from '@radix-ui/themes'; export default function Home() { return ( - - Testicle obliteration dashboard - - + <> + Welcome back. + ); } diff --git a/src/lib/components/ThemeWrapper.tsx b/src/lib/components/ThemeWrapper.tsx index 91a45ac..281089b 100644 --- a/src/lib/components/ThemeWrapper.tsx +++ b/src/lib/components/ThemeWrapper.tsx @@ -9,10 +9,12 @@ export default function ThemeWrapper({ }: { children: React.ReactNode }) { - const [dark, setDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); + const [dark, setDark] = useState(true); // Automatically respond to theme changes useEffect(() => { + setDark(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); + const onThemeChange = (event: MediaQueryListEvent) => { setDark(event.matches); }; @@ -21,11 +23,11 @@ export default function ThemeWrapper({ match.addEventListener('change', onThemeChange); return () => match.removeEventListener('change', onThemeChange); - }); + }, []); return